Coding BD given here Glassmorphism Login Form using Html & CSS | 2021. We create glassmorphism login form step by step. It is the most important part Of latest glass effect. We created a login form. We have given more importance to CSS Glassmorphism. We have used css background animation because they need high effects. Thank you so much.
Create a Payoneer Account & Earn 25$:→ https://www.payoneer.com/raf/?rid=75EACA0E-2937-4D6B-A225-4255EB9B758A
Create a Fiverr Account & Earn 100$:→ http://www.fiverr.com/s2/83f49a18f7
?? If You like this video Please like, share and subscribe This video.??
?? Check Others Programming Video?
➡️How To Create Login Form In HTML and CSS: https://www.youtube.com/watch?v=51t-kR8MUvY
➡️ contact page design with map using html css: https://www.youtube.com/watch?v=RC2-bq4fBYI
➡️ Pure sliding tabs using html and css: https://www.youtube.com/watch?v=QonCizKyHrs
➡️ Animated Background Image Loop Animation: https://www.youtube.com/watch?v=7HyTFr5kNSU&t=284s
➡️ water wave background animation effects: https://www.youtube.com/watch?v=dnCfBet94r8&t=49s
➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s
➡️ Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s
➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s
➡️ Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0
➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s
➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s
➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ&t=0s
➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6HpxMmfX4&t=0s
➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s
➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s
Source code here: ( Glassmorphism Login Form using Html & CSS | 2021 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login Form using Html & CSS | 2021</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main_content">
<div class="box">
<div class="img_box">
<img src="./coffee_1.gif" alt="Coffee Cup">
</div>
<form action="">
<div class="form-group">
<label for="example">Name</label>
<input type="text" id="example" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="example">Email</label>
<input type="text" id="example" placeholder="Enter E-mail Address" required>
</div>
<div class="form-group">
<label for="example">Password</label>
<input type="text" id="example" placeholder="Enter your Password" required>
</div>
<div class="form-group">
<label for="example">C-Password</label>
<input type="text" id="example" placeholder="Enter your C-password" required>
</div>
<div class="form-group">
<input type="checkbox" id="example" required>
<label for="example">I agree to Terms</label>
</div>
<button type="submit">Login</button>
</form>
</div>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(#2c47b53d, #2c47b5c7), url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29mZmVlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
position: relative;
}
.main_content {
width: 500px;
height: 510px;
position: absolute;
padding: 35px 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
backdrop-filter: blur(15px);
box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.box .img_box {
display: flex;
justify-content: space-between;
position: absolute;
top: -12%;
left: 36%;
width: 150px;
height: 150px;
}
.box .img_box img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
form{
width: 100%;
height: 100%;
margin-top: 50px;
}
.form-group{
padding: 5px 0;
}
input[type="text"],
input[type="email"],
input[type="password"]{
width: 100%;
height: 42px;
border: none;
outline: none;
padding: 5px 10px;
background: #ddd;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
label{
font-size: 14px;
color: rgb(168, 145, 145);
}
button{
width: 100%;
height: 100%;
background: #F0EADA;
font-size: 16px;
color: #000;
letter-spacing: 2px;
font-weight: 700;
transition: .5s;
cursor: pointer;
padding: 13px 30px;
border: none;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
}
button:hover{
background: #BD9785;
}Don’t Forget to Follow me on all Social Network,
Facebook Page: https://www.facebook.com/codingbd816
LinkedIn: https://www.linkedin.com/in/sajjat8383/
Instagram: https://www.instagram.com/codingbd/
GitHub: https://github.com/cgsaleh8383
You can see How to create a light to dark mode for HTML CSS & Vanilla Javascript