it's important to design your login form for your clients. First, it will give to your website a unique appearance and second, it will make your website looks different than others.
in this project, I will show you how to design a login form for a music event or for a music website.
I hope that you will like this design. now let's start coding
before I give you the code I will give you the images that I used in this project.
for those who ask where I found free images that I use for my web project, I recommend to you to visit UnSplash. I wrote an article about free images resources and I really advise you to visit it and read it.
link: How to find good and free images for your website
now let's start coding
HTML Code
<!DOCTYPE HTML>
<html>
<head>
<title>Login form</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="filter">
</div>
<div class="Login">
<div class="info-box">
<div class="black"></div>
<h1>Join the Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas metus fringilla tincidunt dictum. Donec mattis nunc at odio mollis vulputate nec eu orci. Cras in dolor vel tortor dapibus dictum et et nisl. Aenean venenatis diam a nulla scelerisque porttitor. Donec sem orci</p>
</div>
<div class="form">
<h1>Login</h1>
<form>
<input type="text" placeholder="User name"><br>
<input type="password" placeholder="Password"><br>
<a href="#">Forget Password?</a>
<button class="log">Login</button>
<p class="or">OR</p>
<button id="fb">Login with Facebook</button><br>
<button id="gm">Login with gmail</button>
</form>
</div>
</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
height: 100vh;
background-image: url(vishnu-r-nair-639172-unsplash.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
h1{
font-family: 'Roboto',sans-serif;
}
p{
font-family: 'Open Sans',sans-serif;
}
.filter{
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgb(95,251,241);
background: -moz-linear-gradient(30deg, rgba(95,251,241,1) 0%, rgba(209,107,165,1) 100%);
background: -webkit-linear-gradient(30deg, rgba(95,251,241,1) 0%, rgba(209,107,165,1) 100%);
background: linear-gradient(30deg, rgba(95,251,241,1) 0%, rgba(209,107,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5ffbf1",endColorstr="#d16ba5",GradientType=1);
opacity: .3;
}
.Login{
position: absolute;
z-index: 1;
width: 50%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: row;
background-color: #fff;
border-radius: 8px;
}
.Login h1{
text-align: center;
margin-bottom: 15px;
}
.info-box{
position: relative;
width: 50%;
background-image: url(fidel-fernando-537760-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fff;
border-radius: 8px 0 0 8px;
padding: 15px;
}
.black{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 0;
opacity: .7;
border-radius: 8px 0 0 8px;
}
.info-box h1,p{
position: relative;
z-index: 2;
}
.info-box p{
font-size: 1.1rem;
line-height: 2rem;
}
.form{
position: relative;
width: 50%;
padding: 15px 0;
}
.form form{
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.form input{
width: 100%;
margin-bottom: 15px;
padding: 8px 5px;
border-radius: 4px;
border: 1px solid #d2d2d2 ;
}
.form a{
color: #fd71bd;
}
.form p{
text-align: center;
margin: 15px 0;
font-weight: 800;
}
.log{
margin-top: 15px;
background-color: #fd71bd;
}
.or::before{
content: "";
display: block;
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background-color: #222;
opacity: .5;
}
.or::after{
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
width: 45%;
height: 1px;
background-color: #222;
opacity: .5;
}
.form button{
width: 100%;
margin-bottom: 15px;
padding: 8px 0;
border-radius: 4px;
border: none;
color: #fff;
font-family: 'Open Sans',sans-serif;
text-transform: uppercase;
}
#fb{
background-color: #3c5a99;
}
#gm{
background-color: #dd4b39;
}
thank you for your attention i hope that you liked this project if it's the case tell us in comment, and if you have some project in mind that you want us to create tell us and we will make as soon as possible.
cool login form using HTML and CSS
Reviewed by Medics
on
May 29, 2019
Rating:
Reviewed by Medics
on
May 29, 2019
Rating:
No comments: