#DailyUI - Login Screen, Animation 3d
How do I make an #dailyui - login screen, animation 3d?
HTML Preprocessor: Haml CSS Preprocessor: Sass JS Library: jQuery. What is a #dailyui - login screen, animation 3d? How do you make a #dailyui - login screen, animation 3d? This script and codes were developed by Joanez Andrades on 25 January 2023, Wednesday.
#DailyUI - Login Screen, Animation 3d Previews
#DailyUI - Login Screen, Animation 3d - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#DailyUI - Login Screen, Animation 3d</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html></html>
<h1 class='title-app'>Login Screen - Animation 3d</h1>
<a class='author' href='https://dribbble.com/shots/3143866-Sign-Up-Screen-Animation' target='_blank'>Inspired by</a>
<div class='perspective'> <div class='bg'></div> <div class='welcome'> <div class='container'> <h2 class='title'>Howdy, space cowboy!</h2> <p class='text'>He's bad! He's mean! He's the Space Cowboy in the spacey jeans. He's bad, he's number one He's the Space Cowboy with the laser gun!</p> <span class='btn' id='signup'>Sign Up</span> <span class='help'>Already user?</span> <span class='btn-login'>Log in</span> </div> </div> <div class='signup'> <form action='' class='form-signup'> <h2 class='title'>Sign Up</h2> <label for='name'>Name</label> <input placeholder="What's your name?" type='text'> <label for='email'>We need your email</label> <input placeholder='your best email' type='email'> <label for='password'>Password</label> <input placeholder='password' type='password'> <span class='btn' id='done'>Done</span> <span class='help'>Questions</span> <span class='btn-login'>Log in</span> </form> </div> <div class='login'> <form action='' class='form-login'> <h2 class='title'>Login</h2> <label for='login-name'></label> <input placeholder='email@domínio.com' type='text'> <label for='login-pass'></label> <input placeholder='password' type='password'> <span class='btn' id='signin'>Login</span> <span class='btn-signup'>Sign Up</span> </form> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>#DailyUI - Login Screen, Animation 3d - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Dosis:300,700");
html { background: #D9C23D; font-size: 62.5%; font-family: "Dosis", sans-serif; overflow: hidden;
}
.title-app { font-size: 3.5em; color: #ffffff; text-align: center;
}
.author { font-size: 1.5em; font-weight: 700; text-align: center; text-decoration: none; color: #e74c3c; display: block;
}
.perspective { background: url("https://goo.gl/zEqaiE") no-repeat fixed; width: 360px; height: 520px; margin: 20px auto; box-shadow: 0px 5px 10px #212C3C; perspective: 500px; position: relative;
}
.perspective .bg { background: rgba(0, 0, 0, 0.5); top: 0; right: 0; bottom: 0; left: 0; position: absolute;
}
.perspective .welcome { width: 100%; height: 100%; margin: 20px auto; border-radius: 5px; position: absolute; text-align: center; transform-style: preserve-3d; backface-visibility: hidden; transition: 0.5s ease-in-out;
}
.perspective .welcome .container { width: 90%; margin: 0px auto; padding: 90px 0;
}
.perspective .welcome .container .title { font-size: 2.8em; color: #ffffff; text-align: center; display: block;
}
.perspective .welcome .container .text { font-size: 1.6em; color: #ffffff; line-height: 1.8;
}
.perspective .welcome .container .btn { background: #e74c3c; width: 290px; height: 50px; font-size: 1.8em; color: #ffffff; line-height: 2.8; text-transform: uppercase; margin: 10px auto; display: block; cursor: pointer;
}
.perspective .welcome .container .help { color: #ffffff; font-size: 1.4em; font-weight: 300;
}
.perspective .welcome .container .btn-login { width: 150px; color: #ffffff; font-size: 1.6em; font-weight: 700; padding: 10px 5px; margin: 10px auto; border: 1px solid #ffffff; cursor: pointer; transition: 0.4s ease-in-out; display: block;
}
.perspective .welcome .container .btn-login:hover { background: #ffffff; color: #212C3C; border: 1px solid #ffffff; box-shadow: 5px 5px 0px #212C3C;
}
.perspective .signup,
.perspective .login { width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; backface-visibility: hidden; transform: rotateX(-180deg); transition: 0.5s ease-in-out; position: absolute;
}
.perspective .signup .form-signup,
.perspective .signup .form-login,
.perspective .login .form-signup,
.perspective .login .form-login { width: 90%; height: auto; padding: 50px 0 0 0; margin: 0 auto;
}
.perspective .signup .form-signup .title,
.perspective .signup .form-login .title,
.perspective .login .form-signup .title,
.perspective .login .form-login .title { font-size: 2.8em; color: #e74c3c;
}
.perspective .signup .form-signup label,
.perspective .signup .form-login label,
.perspective .login .form-signup label,
.perspective .login .form-login label { font-size: 1.5em; font-weight: 700; color: #B1BDC3; margin: 20px auto 10px auto; display: block;
}
.perspective .signup .form-signup input,
.perspective .signup .form-login input,
.perspective .login .form-signup input,
.perspective .login .form-login input { background: none; width: 100%; height: 30px; font-family: "Dosis", sans-serif; font-size: 1.6em; color: #ffffff; text-align: center; border: none; border-bottom: 1px solid #B1BDC3;
}
.perspective .signup .form-signup input:focus,
.perspective .signup .form-login input:focus,
.perspective .login .form-signup input:focus,
.perspective .login .form-login input:focus { outline: none;
}
.perspective .signup .form-signup .btn,
.perspective .signup .form-login .btn,
.perspective .login .form-signup .btn,
.perspective .login .form-login .btn { background: #e74c3c; width: 290px; height: 50px; font-size: 1.8em; color: #ffffff; line-height: 2.8; text-transform: uppercase; margin: 10px auto; display: block; cursor: pointer;
}
.perspective .signup .form-signup .btn-signup,
.perspective .signup .form-signup .btn-login,
.perspective .signup .form-login .btn-signup,
.perspective .signup .form-login .btn-login,
.perspective .login .form-signup .btn-signup,
.perspective .login .form-signup .btn-login,
.perspective .login .form-login .btn-signup,
.perspective .login .form-login .btn-login { width: 150px; color: #ffffff; font-size: 1.6em; font-weight: 700; padding: 10px 5px; margin: 10px auto; border: 1px solid #ffffff; cursor: pointer; transition: 0.4s ease-in-out; display: block;
}
.perspective .signup .form-signup .btn-signup:hover,
.perspective .signup .form-signup .btn-login:hover,
.perspective .signup .form-login .btn-signup:hover,
.perspective .signup .form-login .btn-login:hover,
.perspective .login .form-signup .btn-signup:hover,
.perspective .login .form-signup .btn-login:hover,
.perspective .login .form-login .btn-signup:hover,
.perspective .login .form-login .btn-login:hover { background: #ffffff; color: #212C3C; border: 1px solid #ffffff; box-shadow: 5px 5px 0px #212C3C;
}
.perspective .signup .form-signup .help,
.perspective .signup .form-login .help,
.perspective .login .form-signup .help,
.perspective .login .form-login .help { color: #ffffff; font-size: 1.3em; left: 10px; bottom: 10px; position: absolute;
}
.perspective .signup .form-signup a,
.perspective .signup .form-login a,
.perspective .login .form-signup a,
.perspective .login .form-login a { color: #e74c3c; font-size: 1.3em; text-decoration: none; right: 10px; bottom: 10px; position: absolute;
}
#DailyUI - Login Screen, Animation 3d - Script Codes JS Codes
$('#signup').click(function(){ $('.signup').css({ 'transform' : 'rotateX(0deg)' }); $('.welcome').css({ 'transform' : 'rotateX(-180deg)' })
})
$('#done, #signin').click(function() { $('.signup, .login').css({ 'transform' : 'rotateX(180deg)' }); $('.welcome').css({ 'transform' : 'rotateX(0deg)' })
})
$('.btn-login').click(function() { $('.login').css({ 'transform' : 'rotateX(0deg)' }) $('.welcome, .signup').css({ 'transform' : 'rotateX(-180deg)' })
})
$('.btn-signup').click(function(){ $('.signup').css({ 'transform' : 'rotateX(0deg)' }); $('.login').css({ 'transform' : 'rotateX(-180deg)' })
})
| Developer | Joanez Andrades |
| Username | JoanezAndrades |
| Uploaded | January 25, 2023 |
| Rating | 4 |
| Size | 5,077 Kb |
| Views | 4,048 |
Do you need developer help for #DailyUI - Login Screen, Animation 3d?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Joanez Andrades (JoanezAndrades) Script Codes
| Name | Size |
| Redesign concept IMDB series page | 11,144 Kb |
| UIKit - Navs | 1,762 Kb |
| Contact Form validation with Angularjs | 4,336 Kb |
| Cover Page | 1,919 Kb |
| Social buttons | 4,881 Kb |
| A Pen by Joanez Andrades | 2,596 Kb |
| Slider Animation css3 | 2,527 Kb |
| Notes with angular-js | 3,697 Kb |
| Contact form | 3,090 Kb |
| Slide page simple with jquery | 4,103 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Elephants Full screen site | Orrinward | 3,981 Kb |
| Adding Items | Valhead | 4,008 Kb |
| Em Test | Rodesco | 1,784 Kb |
| Simple DevTools | Deegill | 2,511 Kb |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| Blog demo to use given styling | Andygirl | 2,412 Kb |
| Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
| Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
| Two Element Typeface | Chrisota | 4,942 Kb |
| Slider css only | Armandobau | 2,161 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!