Responsive Login Page
How do I make an responsive login page?
What is a responsive login page? How do you make a responsive login page? This script and codes were developed by Angelina on 24 November 2022, Thursday.
Responsive Login Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Login Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Soccer App</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
</head>
<body>
<div class="welcome">Welcome to ratefoo.com </div>
<div class="menu">
<ul class="menuLoginPage">
<li> Player Ratings</li>
<li> Finished Matches</li>
</ul>
</div> <div class="loginModule"> <div class="extraBorder"> <form class="loginForm"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="59px" height="60px" viewBox="0 0 115 116" enable-background="new 0 0 115 116" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M22.223,93.725 c3.912-6.874,10.731-10.506,16.999-13.707c11.34-5.793,11.451-5.633,4.826-16.137c-4.443-7.045-6.15-14.655-4.942-22.9 c1.414-9.65,9.015-15.924,19.291-15.945c9.805-0.021,17.447,6.324,18.883,15.786c1.307,8.612-0.521,16.532-5.526,23.688 c-0.572,0.818-1.208,1.592-1.77,2.418c-4.153,6.113-3.276,8.987,3.39,11.904c4.41,1.931,8.918,3.762,13.03,6.225 c9.038,5.412,10.143,6.941,1.695,13.224C68.069,113.176,39.837,112.452,22.223,93.725z"/> <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="57.404" cy="56.792" r="52"/>
</svg> <input type="text" name="fname" value="Username" class="user" onfocus="if (this.value=='Username') this.value='';"><br> <input type="text" name="lname" value="Password" class="pwd" onfocus="if (this.value=='Password') this.value='';"><br> <input type="submit" value="Sign In"> <div class="regAcc"> <a href="#"> Register</a> </div> </form> </div> </div>
</body>
</html>
</body>
</html>
Responsive Login Page - Script Codes CSS Codes
*{ /* better to do spacing in griid with padding but not with margin*/ margin:0; box-sizing:border-box; /* expand out of words */
}
body{
margin:0px;
font-family: 'Roboto', sans-serif;
font-style: 'Roboto';
background-image: url(https://static.pexels.com/photos/104675/pexels-photo-104675.jpeg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
color: white;
}
.welcome{ letter-spacing: 2px; text-transform: uppercase; font-size: 10px; margin-top:15px; margin-left:15px; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.menu{ margin-top:10px; width: 100%; margin-bottom: 5%; letter-spacing: 2px; align-content: center; text-align: center;
}
.menuLoginPage{ list-style: none; padding-left: 0;
}
.menuLoginPage li{ padding:10px; display: inline-block; text-decoration: underline; transition: 0.5s; -webkit-transition:0.5s; background-color: rgba(0,171,93,0);
}
.menuLoginPage li:hover{ background-color: rgba(27,126,238,1);
}
.loginModule{ display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
.extraBorder{ background-color: rgba(0,0,0,0.4); padding:10px; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
form{ color: white; position: relative; background-color: rgba(0,0,0,0.5); padding: 5%; width:290px; height: 390px; align-content: center; justify-content: center; } input:focus{ outline: none; }
input{ color: white; letter-spacing: 2px; padding-bottom: 10px; font-family: 'Roboto', sans-serif; width: 170px; margin: 15% 0% 0% 18%; font-size: 14px; border:none; background-color: rgba(0,0,0,0); border-bottom: solid white 1px; text-align: center;
}
svg{ margin-left: 37%;
}
input[type="submit"]{ margin: 25% 0% 0% 18%; width: 170px; background-color: #00ab5d; border: none; padding-top: 10px; padding-bottom: 10px; font-size: 16px; transition: 0.5s; -webkit-transition:0.5s;
}
input[type="submit"]:hover { background-color:#007b43; }
.regAcc a{ color:white; margin-top:5%; text-decoration: underline; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px){ body { height: 700px; width: 100%; }
}
Developer | Angelina |
Username | Angelina_Lapteva |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 3,109 Kb |
Views | 12,144 |
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!
Name | Size |
Instructions page | 2,260 Kb |
Beautiful PersonaL Page | 3,500 Kb |
Piechart | 2,108 Kb |
A Pen by Angelina | 2,262 Kb |
Wireframing | 2,708 Kb |
SVG Animation diagramm | 2,317 Kb |
Progress bar multiple | 2,179 Kb |
3d looking button | 1,551 Kb |
Icons and Grid | 2,097 Kb |
Smooth scroll | 3,246 Kb |
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!
Name | Username | Size |
Board Site | IndianaLuft | 10,542 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Price | Catcode | 2,623 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
404 Error Page | WebSonick | 3,203 Kb |
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!