Responsive UI Design Login Form Using Only HTML & CSS. You will use this Responsive UI Design Login Form on your website freely. If you learn How to Create this Responsive UI Design Login Form so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorials so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7
.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Login Form - Pure Coding</title>
</head>
<body>
<div class="container">
<p class="login-text">Login with social media</p>
<div class="login-social">
<a href="#" class="facebook"><i class="fa fa-facebook"></i> Facebook</a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i> Twitter</a>
<a href="#" class="google-plus"><i class="fa fa-google-plus"></i> Google
Plus</a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>
<form class="login-email">
<p class="login-text">Login with email</p>
<div class="input-group">
<input type="email" placeholder="Email" required>
</div>
<div class="input-group">
<input type="password" placeholder="Password" required>
</div>
<div class="input-group">
<button class="btn">Login</button>
</div>
</form>
</div>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(bg.jpg);
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 400px;
min-height: 400px;
background: #FFF;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
padding: 40px 30px;
}
.container .login-text {
color: #111;
font-weight: 500;
font-size: 1.1rem;
text-align: center;
margin-bottom: 20px;
display: block;
text-transform: capitalize;
}
.container .login-social {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
margin-bottom: 25px;
}
.container .login-social a {
padding: 12px;
margin: 10px;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
text-decoration: none;
font-size: 1rem;
text-align: center;
color: #FFF;
transition: .3s;
}
.container .login-social a i {
margin-right: 5px;
}
.container .login-social a.facebook {
background: #4267B2;
}
.container .login-social a.twitter {
background: #1DA1F2;
}
.container .login-social a.google-plus {
background: #db4a39;
}
.container .login-social a.linkedin {
background: #0e76a8;
}
.container .login-social a.facebook:hover {
background: #3d5fa3;
}
.container .login-social a.twitter:hover {
background: #1991db;
}
.container .login-social a.google-plus:hover {
background: #ca4334;
}
.container .login-social a.linkedin:hover {
background: #0b5c81;
}
.container .login-email .input-group {
width: 100%;
height: 50px;
margin-bottom: 25px;
}
.container .login-email .input-group input {
width: 100%;
height: 100%;
border: 2px solid #e7e7e7;
padding: 15px 20px;
font-size: 1rem;
border-radius: 30px;
background: transparent;
outline: none;
transition: .3s;
}
.container .login-email .input-group input:focus,
.container .login-email .input-group input:valid {
border-color: #a29bfe;
}
.container .login-email .input-group .btn {
display: block;
width: 100%;
padding: 15px 20px;
text-align: center;
border: none;
background: #a29bfe;
outline: none;
border-radius: 30px;
font-size: 1.2rem;
color: #FFF;
cursor: pointer;
transition: .3s;
}
.container .login-email .input-group .btn:hover {
transform: translateY(-5px);
background: #6c5ce7;
}
@media (max-width: 430px) {
.container {
width: 300px;
}
.container .login-social {
display: block;
}
.container .login-social a {
display: block;
}
}
Nice works. It helped me a lot as a beginner. Thank you.
ReplyDeletePost a Comment