STYLISH LOGIN PAGE RESPONSIVE
STYLISH LOGIN PAGE RESPONSIVE
Follow the steps to create a responsive Login form using CSS.
Step 1 : Adding HTML
Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input.
Step 2 : Adding CSS
Add the required CSS to design the login page try to keep the design as simple as possible.
Program: This code will guide you through comments that how to design design and which property is used for which design to create.
index.html
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title> CSS Stylish Login Page Example</title> | |
| <meta name="author" content="Codeconvey" /> | |
| <!-- Font Awesome --> | |
| <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | |
| <!-- Stylish Login Page CSS --> | |
| <link rel="stylesheet" href="css/login-page.css"> | |
| <!--Only for demo purpose - no need to add.--> | |
| <link rel="stylesheet" href="css/demo.css" /> | |
| </head> | |
| <body> | |
| <div class="ScriptTop"> | |
| <div class="rt-container"> | |
| <div class="col-rt-4" id="float-right"> | |
| <!-- Ad Here --> | |
| </div> | |
| <div class="col-rt-2"> | |
| </div> | |
| </div> | |
| </div> | |
| <header class="ScriptHeader"> | |
| <div class="rt-container"> | |
| <div class="col-rt-12"> | |
| <div class="rt-heading"> | |
| <h1>CSS Stylish Login Page</h1> | |
| <p>Ajith creation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <section> | |
| <div class="rt-container"> | |
| <div class="col-rt-12"> | |
| <div class="Scriptcontent"> | |
| <!-- Stylish Login Page Start --> | |
| <form class="codehim-form"> | |
| <div class="form-title"> | |
| <div class="user-icon gr-bg"> | |
| <i class="fa fa-user"></i> | |
| </div> | |
| <h2> CSS Login Form</h2> | |
| </div> | |
| <label for="email"><i class="fa fa-envelope"></i> Email:</label> | |
| <input type="email" id="email" class="cm-input" placeholder="Enter your email adress"> | |
| <label for="pass"><i class="fa fa-lock"></i> Password:</label> | |
| <input id="pass" type="password" class="cm-input" placeholder="Enter your password"> | |
| <button type="submit" class="btn-login gr-bg">Login</button> | |
| </form> | |
| <!-- Stylish Login Page End --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Analytics --> | |
| </body> | |
| </html> |
demo.css
| @import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900'); | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| article, header, section, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { | |
| display: block; | |
| } | |
| body { | |
| color: #222; | |
| font-size: 100%; | |
| line-height: 24px; | |
| margin: 0; | |
| padding:0; | |
| font-family: "Raleway",sans-serif; | |
| } | |
| a{ | |
| font-family: "Raleway",sans-serif; | |
| text-decoration: none; | |
| outline: none; | |
| } | |
| a:hover, a:focus { | |
| color: #373e18; | |
| } | |
| section { | |
| float: left; | |
| width: 100%; | |
| padding-bottom:3em; | |
| } | |
| h2 { | |
| color: #212121; | |
| font-size: 26px; | |
| font-weight: 700; | |
| margin: 0; | |
| line-height: normal; | |
| text-transform:uppercase; | |
| } | |
| h2 span { | |
| display: block; | |
| padding: 0; | |
| font-size: 18px; | |
| opacity: 0.7; | |
| margin-top: 5px; | |
| text-transform:uppercase; | |
| } | |
| #float-right{ | |
| float:right; | |
| } | |
| /* ****************************************************** | |
| Script Top | |
| *********************************************************/ | |
| .ScriptTop { | |
| background: #fff none repeat scroll 0 0; | |
| float: left; | |
| font-size: 0.69em; | |
| font-weight: 600; | |
| line-height: 2.2; | |
| padding: 12px 0; | |
| text-transform: uppercase; | |
| width: 100%; | |
| } | |
| /* To Navigation Style 1*/ | |
| .ScriptTop ul { | |
| margin: 24px 0; | |
| padding: 0; | |
| text-align: left; | |
| } | |
| .ScriptTop li{ | |
| list-style:none; | |
| display:inline-block; | |
| } | |
| .ScriptTop li a { | |
| background: #6a4aed none repeat scroll 0 0; | |
| color: #fff; | |
| display: inline-block; | |
| font-size: 14px; | |
| font-weight: 600; | |
| padding: 5px 18px; | |
| text-decoration: none; | |
| text-transform: capitalize; | |
| } | |
| .ScriptTop li a:hover{ | |
| background:#000; | |
| color:#fff; | |
| } | |
| /* ****************************************************** | |
| Script Header | |
| *********************************************************/ | |
| .ScriptHeader { | |
| float: left; | |
| width: 100%; | |
| padding: 2em 0; | |
| } | |
| .rt-heading { | |
| margin: 0 auto; | |
| text-align:center; | |
| } | |
| .Scriptcontent{ | |
| line-height:28px; | |
| } | |
| .ScriptHeader h1{ | |
| font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| color: #212121; | |
| font-size: 26px; | |
| font-weight: 700; | |
| margin: 0; | |
| line-height: normal; | |
| } | |
| .ScriptHeader h2 { | |
| color: #312c8f; | |
| font-size: 20px; | |
| font-weight: 400; | |
| margin: 5px 0 0; | |
| line-height: normal; | |
| } | |
| .ScriptHeader h1 span { | |
| display: block; | |
| padding: 0; | |
| font-size: 22px; | |
| opacity: 0.7; | |
| margin-top: 5px; | |
| } | |
| .ScriptHeader span { | |
| display: block; | |
| padding: 0; | |
| font-size: 22px; | |
| opacity: 0.7; | |
| margin-top: 5px; | |
| } | |
| /* ****************************************************** | |
| Live Demo | |
| *********************************************************/ | |
| /* ****************************************************** | |
| Responsive Grids | |
| *********************************************************/ | |
| .rt-container { | |
| margin: 0 auto; | |
| padding-left:12px; | |
| padding-right:12px; | |
| } | |
| .rt-row:before, .rt-row:after { | |
| display: table; | |
| line-height: 0; | |
| content: ""; | |
| } | |
| .rt-row:after { | |
| clear: both; | |
| } | |
| [class^="col-rt-"] { | |
| box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -o-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| padding: 0 15px; | |
| min-height: 1px; | |
| position: relative; | |
| } | |
| @media (min-width: 768px) { | |
| .rt-container { | |
| width: 750px; | |
| } | |
| [class^="col-rt-"] { | |
| float: left; | |
| width: 49.9999999999%; | |
| } | |
| .col-rt-6, .col-rt-12 { | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| .rt-container { | |
| width: 1170px; | |
| } | |
| .col-rt-1 { | |
| width:16.6%; | |
| } | |
| .col-rt-2 { | |
| width:30.33%; | |
| } | |
| .col-rt-3 { | |
| width:50%; | |
| } | |
| .col-rt-4 { | |
| width: 67.664%; | |
| } | |
| .col-rt-5 { | |
| width: 83.33%; | |
| } | |
| } | |
| @media only screen and (min-width:240px) and (max-width: 768px){ | |
| .ScriptTop h1, .ScriptTop ul { | |
| text-align: center; | |
| } | |
| .ScriptTop h1{ | |
| margin-top:0; | |
| margin-bottom:15px; | |
| } | |
| .ScriptTop ul{ | |
| margin-top:12px; | |
| } | |
| .ScriptHeader h1, | |
| .ScriptHeader h2, | |
| .scriptnav ul{ | |
| text-align:center; | |
| } | |
| .scriptnav ul{ | |
| margin-top:12px; | |
| } | |
| #float-right{ | |
| float:none; | |
| } | |
| } | |
STYLISH LOGIN PAGE RESPONSIVE
AJI CREATIONS
January 07, 2022
AJI CREATIONS
January 07, 2022
0 comments:
Post a Comment