Flat Login Form

Developer
Andy Tran
Size
8,293 Kb
Views
145,728
  1. Flat Login Form Previews
  2. Flat Login Form HTML Codes
  3. Flat Login Form CSS Codes
  4. Flat Login Form JS Codes

How do I make an flat login form?

What is a flat login form? How do you make a flat login form? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Flat Login Form Previews
IQ Test

Flat Login Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Login Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900|Material+Icons'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Pen Title-->
<div class="pen-title"> <h1> <span>(Tutorial)</span>Flat Login Form</h1><span>Pen <i class='fa fa-paint-brush'></i> + <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a></span>
</div>
<!-- Portfolio--><a id="portfolio" href="http://andytran.me/" title="View my portfolio!"><i class="fa fa-link"></i></a>
<!-- CodePen--><a id="codepen" href="http://codepen.io/andytran/" title="Follow me!"><i class="fa fa-codepen"></i></a>
<!-- Container-->
<div class="container"> <!-- Column--> <div class="col"> <!-- Form Container--> <div class="form-container"> <style type="text/css"> .style-1 .header h1 { color: #33b5e5; } .style-1 .form-group input:valid, .style-1 .form-group input:focus { color: #33b5e5; } .style-1 .form-group input:valid ~ .line, .style-1 .form-group input:focus ~ .line { background: #33b5e5; } .style-1 .button { background: #33b5e5; } </style> <div class="form style-#{style}" style="width: #{width}"> <header class="header"> <h1 class="active">Sign In</h1> <h1>Sign Up</h1> </header> <form class="active"> <div class="form-group"> <input type="text" id="username" placeholder="Username" required="required"/> <label for="username">Username</label> <div class="line"></div> </div> <div class="form-group"> <input type="password" id="password" placeholder="Password" required="required"/> <label for="password">Password</label> <div class="line"></div> </div> <button class="button">Login</button> </form> <form> <div class="form-group"> <input type="text" id="username" placeholder="Username" required="required"/> <label for="username">Username</label> <div class="line"></div> </div> <div class="form-group"> <input type="email" id="email" placeholder="Email Address" required="required"/> <label for="email">Email Address</label> <div class="line"></div> </div> <div class="form-group"> <input type="password" id="password" placeholder="Password" required="required"/> <label for="password">Password</label> <div class="line"></div> </div> <button class="button">Login</button> </form> <footer class="footer"><a href="#">Forgot your password?</a></footer> </div> <p>Not registered? <a class="toggle" href="#">Sign up</a></p> </div> </div> <!-- Colum--> <div class="col"> <!-- Form Container--> <div class="form-container"> <style type="text/css"> .style-2 .header { background: #2c3e50; } .style-2 .form-group input:valid, .style-2 .form-group input:focus { color: #2c3e50; } .style-2 .form-group input:valid ~ .line, .style-2 .form-group input:focus ~ .line { background: #2c3e50; } .style-2 .button { background: #2c3e50; } </style> <div class="form style-#{style}" style="width: #{width}"> <header class="header"> <h1 class="active">Sign In</h1> <h1>Sign Up</h1> </header> <form class="active"> <div class="form-group"> <input type="text" id="username" placeholder="Username" required="required"/> <label for="username">Username</label> <div class="line"></div> </div> <div class="form-group"> <input type="password" id="password" placeholder="Password" required="required"/> <label for="password">Password</label> <div class="line"></div> </div> <button class="button">Login</button> </form> <form> <div class="form-group"> <input type="text" id="username" placeholder="Username" required="required"/> <label for="username">Username</label> <div class="line"></div> </div> <div class="form-group"> <input type="email" id="email" placeholder="Email Address" required="required"/> <label for="email">Email Address</label> <div class="line"></div> </div> <div class="form-group"> <input type="password" id="password" placeholder="Password" required="required"/> <label for="password">Password</label> <div class="line"></div> </div> <button class="button">Login</button> </form> <footer class="footer"><a href="#">Forgot your password?</a></footer> </div> <p>Not registered? <a class="toggle" href="#">Sign up</a></p> </div> </div>
</div>
<!-- Tip-->
<div id="tip"> <h1>How to create a form?</h1> <p>It's really simple... If you have basic knowledge of Jade. Simple fill out the paramaters in the mixin below, drop it below this box, and watch as magic happens!</p><code> <h1>Jade</h1> <p> Please note that these are case sensitive. <br> /* Mixin Guide<br> * Form Container Mixin<br> * +form-container<br> *<br> * Form Mixin<br> * +form('name', 'width', 'color', 'style')<br> *<br> * Input Mixin<br> * +input('type', 'name', 'placeholder', 'label')<br> *<br> * Button Mixin<br> * +button('label')<br> */<br><br> </p> <p><span>+form-container</span></p> <p><span>+form</span><span>.active</span>(<span>'name'</span>, <span>'width'</span>, <span>'color'</span>, <span>'style'</span>)</p> <p><span>+input</span>(<span>'type'</span>, <span>'name'</span>, <span>'placeholder'</span>, <span>'label'</span>)</p> <p><span>+input</span>(<span>'type'</span>, <span>'name'</span>, <span>'placeholder'</span>, <span>'label'</span>)</p> <p><span>+button</span>(<span>'label'</span>)</p> <p><span>+form</span>(<span>'name'</span>, <span>'width'</span>, <span>'color'</span>, <span>'style'</span>)</p> <p><span>+input</span>(<span>'type'</span>, <span>'name'</span>, <span>'placeholder'</span>, <span>'label'</span>)</p> <p><span>+input</span>(<span>'type'</span>, <span>'name'</span>, <span>'placeholder'</span>, <span>'label'</span>)</p> <p><span>+button</span>(<span>'label'</span>)</p> <P><span>p</span> Not registered? </P> <P><span>a</span><span>.toggle</span>(<span>href</span>='#') Sign up</P></code> <h1>Browser Support?</h1> <p>Tested on the latest versions of <b>Chrome</b>, <b>Firefox</b>, <b>Safari</b>, <b>Internet Explorer</b>, &amp; <b>Opera</b>.</p> <p>Best viewed in Chrome because... I said so.</p>
</div>
<!-- Portfolio--><a id="portfolio" href="http://andytran.me/" title="View my portfolio!"><i class="fa fa-link"></i></a>
<!-- CodePen--><a id="codepen" href="http://codepen.io/andytran/" title="Follow me!"><i class="fa fa-codepen"></i></a>
<!-- Scroll To Bottom--><a id="scrollToBottom" href="#tip" title="Check out the tutorial!"><i class="material-icons">&#xE313;</i></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Login Form - Script Codes CSS Codes

body { background: #e9e9e9; color: #666666; font-family: 'RobotoDraft', 'Roboto', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Pen Title */
.pen-title { padding: 50px 0; text-align: center; letter-spacing: 2px;
}
.pen-title h1 { margin: 0 0 20px; font-size: 48px; font-weight: 300;
}
.pen-title h1 span { display: block; margin: 0 0 10px; color: #33b5e5; font-size: 18px; font-weight: 600; text-transform: uppercase;
}
.pen-title span { font-size: 12px;
}
.pen-title span .fa { color: #33b5e5;
}
.pen-title span a { color: #33b5e5; font-weight: 600; text-decoration: none;
}
/* Rerun */
.rerun { margin: 0 0 30px; text-align: center;
}
.rerun a { cursor: pointer; display: inline-block; background: #33b5e5; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); padding: 10px 20px; color: #ffffff; text-decoration: none; -webkit-transition: .3s ease; transition: .3s ease;
}
.rerun a:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Scroll To Bottom */
#codepen, #portfolio { position: fixed; bottom: 30px; right: 30px; background: #2c3e50; width: 56px; height: 56px; border-radius: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-transition: .3s ease; transition: .3s ease; color: #ffffff; text-align: center;
}
#codepen i, #portfolio i { line-height: 56px;
}
#codepen:hover, #portfolio:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
/* CodePen */
#portfolio { bottom: 96px; right: 36px; background: #33b5e5; width: 44px; height: 44px; -webkit-animation: buttonFadeInUp 1s ease; animation: buttonFadeInUp 1s ease;
}
#portfolio i { line-height: 44px;
}
/* Container */
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1140px; margin: 0 auto 100px; text-align: center;
}
/* Column */
.col { display: block; width: 50%; float: left;
}
/* Form Container */
.form-container { display: inline-block; text-align: center;
}
.form-container p { padding: 24px 0; color: #666666; font-size: 12px;
}
.form-container p a { color: #333333; font-weight: 700; text-decoration: none;
}
/* Form */
.form { display: block; background: #ffffff; margin: 0 auto; padding: 24px 48px 48px; box-sizing: border-box; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.form .header { padding: 24px 0; text-align: center;
}
.form .header h1 { display: none; color: #33b5e5; font-size: 24px;
}
.form .header h1.active { display: block;
}
.form .footer { text-align: center;
}
.form .footer a { color: #666666; font-size: 12px; text-decoration: none;
}
.form form { display: none;
}
.form form.active { display: block;
}
.form .form-group { position: relative; margin: 0 0 24px;
}
.form .form-group:last-of-type { margin: 0 0 36px;
}
.form .form-group label { display: none;
}
.form .form-group input { outline: 0; background: transparent; width: 100%; border: 0; border-bottom: 1px solid #999999; padding: 12px; font-size: 14px; box-sizing: border-box;
}
.form .form-group input:valid, .form .form-group input:focus { color: #33b5e5;
}
.form .form-group input:valid ~ .line, .form .form-group input:focus ~ .line { background: #33b5e5; width: 100%;
}
.form .form-group .line { position: absolute; bottom: 0; left: 0; background: transparent; width: 0%; height: 2px; -webkit-transition: .6s ease; transition: .6s ease;
}
.form .button { cursor: pointer; position: relative; outline: none; background: #33b5e5; width: 100%; margin: 0 0 24px; padding: 12px 24px; border: 0; border-radius: 100px; color: #ffffff; font-family: 'RobotoDraft', 'Roboto', sans-serif; font-size: 14px; font-weight: 600; text-align: center; text-transform: uppercase; overflow: hidden;
}
.form .button:hover:before { left: -10%;
}
.form .button:before { content: ''; position: absolute; top: 0; left: -100%; background: rgba(255, 255, 255, 0.3); width: 60%; height: 100%; -webkit-transform: skew(-45deg); transform: skew(-45deg); -webkit-transition: .3s ease; transition: .3s ease;
}
.style-2 .header { background: #33b5e5; margin: -24px -48px 24px; padding: 48px 24px;
}
.style-2 .header h1 { color: #ffffff;
}
.style-2 .form-group label { position: absolute; top: 12px; left: 12px; display: block; font-size: 14px; -webkit-transition: .2s ease; transition: .2s ease;
}
.style-2 .form-group input:focus ~ label, .style-2 .form-group input:valid ~ label { font-size: 12px; text-transform: uppercase; -webkit-transform: translate(-8px, -18px) scale(0.75); transform: translate(-8px, -18px) scale(0.75);
}
.style-2 .form-group input::-webkit-input-placeholder { color: transparent;
}
.style-2 .button { border-radius: 0;
}
/* Tip */
#tip { max-width: 600px; border-radius: 3px; margin: 0 auto 100px; line-height: 1.7em; text-align: center;
}
#tip h1 { margin: 0 0 10px; color: #333333; font-size: 24px; font-weight: 300;
}
#tip p { margin: 0 0 10px; color: #666666;
}
#tip p b { font-weight: 600;
}
#tip code { display: block; background: #232e34; margin: 0 0 100px; padding: 10px 20px; color: #CDD3DE; letter-spacing: 2px; text-align: left;
}
#tip code h1 { dsplay: block; background: #263238; margin: -10px -20px 20px; padding: 10px 20px; color: #CDD3DE; font-size: 18px;
}
#tip code h1:before { content: '\f121'; display: inline-block; margin: 0 10px 0 0; color: #546E7A; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
#tip code p { margin: 0; color: inherit;
}
#tip code p:nth-child(2) { color: #C3E88D;
}
#tip code p:nth-child(4), #tip code p:nth-child(8), #tip code p:nth-child(12) { margin: 0 0 0 12px;
}
#tip code p:nth-child(5), #tip code p:nth-child(6), #tip code p:nth-child(7), #tip code p:nth-child(9), #tip code p:nth-child(10), #tip code p:nth-child(11), #tip code p:nth-child(13) { margin: 0 0 0 24px;
}
#tip code p span { color: #C38FE5;
}
#tip code p span:nth-child(2), #tip code p span:nth-child(3), #tip code p span:nth-child(4), #tip code p span:nth-child(5), #tip code p span:nth-child(6) { color: #FF5370;
}
@media (max-width: 768px) { .col { width: 100%; }
}

Flat Login Form - Script Codes JS Codes

// Toggle Function
$('.toggle').click(function(){ $('form').animate({ height: 'toggle', opacity: "toggle" }, "slow");
});
Flat Login Form - Script Codes
Flat Login Form - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 8,293 Kb
Views 145,728
Do you need developer help for Flat Login Form?

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!

Andy Tran (andytran) Script Codes
Name
Simple Card Carousel
Macbook Pro Demo
Article News Card
Sparked Dashboard
Flat To-Do-List
Flat Login Form
Flat Payment Modal
Interactive Location Modal
Material Playing Cards
Pure CSS - Menu App
Create amazing blog posts 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!