A simple log in form made with css
How do I make an a simple log in form made with css?
Log in form with pure CSS. . What is a a simple log in form made with css? How do you make a a simple log in form made with css? This script and codes were developed by Mayur Elbhar on 31 October 2022, Monday.
A simple log in form made with css - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A simple log in form made with css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="header"><h2>FLAT UI LOG IN FORM MADE WITH PURE CSS</h2><p>Version 1.0</p></div>
<form> <h1> Log In </h1> <input class="name" type="email" placeholder="[email protected]"/> <input class="name" type="Password" placeholder="Password"/> <input class="sub" type="submit" value="Log in"/> <li><a href="#"><p>Need help with password?</p></a></li> <li><a href="#"><p>Sign Up</p></a></li>
</form> <div id="footer">
<div id="credit"><p>Designed by → <a href="https://www.twitter.com/MayurElbhar">Mayur Elbhar (ME)</a> </div>
</body>
</html>
A simple log in form made with css - Script Codes CSS Codes
/*-------BODY------------*/
body { background-color: #dedede;*/
}
#header h2 { font-family: Segoe UI; font-size: 35px; color: #242525; margin: 15px 10px 5px 50px; text-align: center;
}
#header h2:hover { text-shadow: 1px 1px 5px #000; color: #fff;
}
#header p { text-align: center; font-family: Segoe UI; font-size: 18px; color: #61ca7a; text-shadow: none; font-weight: bold;
}
#header { margin-bottom: 50px;
}
/*-----------*/
form { width: 350px; height: 450px; margin: auto; text-align: center; list-style: none; padding: 10px 20px 10px 10px; background:#ffffff; border: 2px solid #61ca7a; border-radius: 15px; box-shadow: 0rem 0.3rem 1rem 0.1rem #aeaeae;
}
h1 { font: 50px Segoe UI; font-weight: bold; margin-bottom: 3px; color:#61ca7a; text-shadow: 2px 2px 0px #bcbcbc;
}
input { background: #f6f6f6; disply: block; width: 300px; padding: 20px; margin: 10px; font-family: Segoe UI; font-size: 15px; border: 2px solid #61ca7a; border-radius: 5px;
}
input:hover { background: #eeeeef;
}
.sub { background: #fff; width: 200px; padding: 12px; font-family: Segoe UI; font-weight: bold; color: #61ca7a; font-size: 18px; border-radius: 5px;
}
.sub:hover { background-color: #61ca7a; color: #fff;
}
.sub:active { border: 2px solid #fff;
}
form p { font-family: Segoe UI; font-size: 15px; color: #61ca7a;
}
form a { text-decoration: none;
}
#footer { text-align: center; margin-top: 50px; font-family: Segoe UI;
}
#footer a { text-decoration: none; font-family: Mistral; font-size: 18px; color: #105cb1;
}
Developer | Mayur Elbhar |
Username | mayurelbhar |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 2,160 Kb |
Views | 16,192 |
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 |
FLAT UI ELEMENTS | 2,263 Kb |
Text-Shadow | 2,067 Kb |
Contact US Form | 2,662 Kb |
Website Layout | 3,818 Kb |
SAMSUNG PHONE MOCKUP | 2,666 Kb |
Hamburger menu prototypes | 4,243 Kb |
Buttons with Google material design icons. | 1,945 Kb |
A simple log in form made with css | 2,160 Kb |
Social Media Icons | 3,382 Kb |
A Pen by Mayur Elbhar | 1,767 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 |
FCC_Twitch.tv | MitchES | 3,466 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Transition | Shayhowe | 1,632 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Button fills | Zubfatal | 5,205 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 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!