Glassmorphism login page design using html and css
Learn How to make a Glassmorphism login page Using html and CSS . Glassmorphism login page design with HTML and CSS. Web site Design Tutorial
Video Tutorial
font awesome icons link Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!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>Login Page</title>
<link rel="stylesheet" href="style.css" />
<script src="https://use.fontawesome.com/1688e58a77.js"></script>
<title>Login Page</title>
</head>
<body>
<div class="cointainer">
<div class="left">
<div class="image-box">
<img src="./svg.png" alt="" srcset="" />
</div>
</div>
<div class="right">
<div class="login">
<h4>Member Login</h4>
<form action="">
<div class="text-box">
<i class="fa fa-envelope"></i>
<input type="text" placeholder="Email" autocomplete="none" />
</div>
<div class="text-box">
<i class="fa fa-lock"></i>
<input
type="password"
placeholder="Password"
autocomplete="none"
/>
</div>
<button class="btn">Login</button>
</form>
<span class="forget">Forgot <a href="#">Username / Password</a></span
><br /><br /><br /><br />
<span
><a href="#"
>Create your account <i class="fa fa-arrow-right"></i></a
></span>
</div>
</div>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
font-family: 'Poppins', sans-serif;
background: #20bf55;
background-image: linear-gradient(315deg, #20bf55 0%, #01baef 74%);
display: flex;
align-items: center;
justify-content: center;
}
.cointainer{
width: 800px;
height: 500px;
background: rgba(255, 255, 255, 0.21);
border-radius: 25px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.7px);
border: 1px solid rgba(255, 255, 255, 0.22);
display: flex;
justify-content: space-between;
position: relative;
}
.left{
height: 500px;
width: 350px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image-box::before{
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.609);
z-index: -1;
top: 150px;
left: 75px;
}
.image-box img{
width: 150px;
}
.right{
width: 450px;
}
.login h4{
text-align: center;
margin-top: 55px;
font-size: 2rem;
margin-bottom: 30px;
color: #fff;
}
.text-box{
position: relative;
}
.text-box input{
border: none;
width: 90%;
margin-right: 5em;
height: 35px;
border-radius: 50px;
padding-left: 50px;
padding-top: 20px;
padding-bottom: 20px;
background: #fff;
margin-bottom: 35px;
color: rgb(102, 94, 94);
padding-right: 10px;
outline: none;
}
.fa-envelope{
font-size: 15px;
}
.text-box .fa{
position: absolute;
font-size: 20px;
top: 10px;
left: 12px;
margin-right: 10px;
color: rgb(102, 94, 94);
}
.btn{
width: 90%;
padding-top: 10px;
padding-bottom: 10px;
border: none;
border-radius: 50px;
background: #20b607;
margin-bottom: 35px;
margin-right: 5em;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.login{
text-align: center;
}
.login span a{
text-decoration: none;
color: #20b607;
}
Posts
No comments: