Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.
Input:- Click Here For Download Source Code
Html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<img src="./rocket.png" alt="rocket" class="rocket">
<div class="text">
<h1>LOGIN</h1>
<p>LANDING PAGE</p>
</div>
<form class="form">
<div class="animated-input">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
</div>
<div class="check">
<div>
<input type="checkbox" id="check">
<label for="check" class="disc"></label>
<label for="check" class="remember">Remember</label>
</div>
<p class="forget"><a href="#">Forget Password ?</a></p>
</div>
</form>
<button class="btn" type="submit">LOGIN</button>
<p class="account"><a href="#">Create Account ?</a></p>
</div>
<div class="footer"><p class="footer-text">Created By <a href="" class="footer-link">Priyanshu Sharma</a><link rel="stylesheet" type="text/css" href="style.css">
</body>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding-top: 200px;
background-image: url("./bg1.svg");
background-size: cover;
background-repeat: no-repeat;
font-family: 'Montserrat',sans-serif;
}
.container {
position: relative;
width: 400px;
padding: 30px 50px;
background: #FFF;
text-align: center;
border-radius: 100% 0% 0% 0% / 55% 0% 0% 0%;
}
.container::after {
content: '';
position: absolute;
top: -200px;
left: 0;
right: 0;
width: 100%;
height: 420px;
background-image: url('./bg2.png');
background-position: top;
background-size: cover;
z-index: -11;
}
.container .rocket {
width: 300px;
position: absolute;
top: -120px;
right: -9%;
animation: animate 1s ease infinite alternate;
transition: all 0.3s ease;
}
.container .text {
margin: 30px 0 5px 0;
}
.container .text h1 {
color: #9900FF;
font-size: 2.5rem;
}
.container .text p {
font-size: 1.5rem;
color: #ff14b1;
}
.container .form .animated-input {
display: flex;
flex-direction: column;
}
.container .form .animated-input input[type='text'] ,
.container .form .animated-input input[type='password'] {
font-size: 1.3rem;
padding: 20px 10px 2px 10px;
outline: none;
border: none;
border-bottom: solid 1px #616161;
background: none;
transition: all 0.3s ease;
}
.container .form .animated-input input[type='text']:focus ,
.container .form .animated-input input[type='password']:focus {
padding: 20px 10px;
border-color: #ff14b1;
}
.container .form .animated-input input[type='password'] {
margin-top: 10px;
}
.container .form .check {
display: flex;
justify-content: space-between;
margin: 10px 0;
user-select: none;
}
.container .form .check input {
display: none;
}
.container .form .check .disc {
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
display: inline-block;
cursor: pointer;
box-shadow: 0 0 3px #000;
transition: 0.2s ease;
}
.container .form .check input:checked ~ .disc {
background: #9900FF;
}
.container .form .check .remember {
color: #9900FF;
font-weight: bold;
}
.container .form .check .forget a {
text-decoration: none;
color: #616161;
}
.container .form .check .forget a:hover {
color: #9900FF;
}
.container .btn {
border: none;
outline: none;
width: 200px;
padding: 15px;
margin: 10px auto;
font-size: 1.5rem;
color: #fff;
background: #ff14b1;
border-radius: 20px;
cursor: pointer;
box-shadow: 1px 1px 6px #616161;
transition: ALL 0.3s ease;
}
.container .btn:hover {
background: #ff3BD5;
}
.container .account a {
text-decoration: none;
color: #616161;
}
.container .account a:hover {
color: #9900FF;
}
@keyframes animate {
0% {top: -120px;}
100% {top: -130px;}
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
margin: 10px 0 10px 0;
font-size: 20px;
text-align:center;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
background: #24cfaa;
border: 1px solid #24cfaa;
}
.footer:hover{
background-color: #fa6060;
}
.footer-text{
margin: 10.1px 0;
font-family: sans-serif;
}
.footer-link{
color: #ffffff;
text-decoration: none;
margin-right:5px;
}
.footer-link:hover{
color:#24cfaa;
}
</style>
</html>
If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email it to us.
Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.
Image That's Use In Project:-
Published By:-
Priyanshu Sharma
0 Comments