HTML CODE
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css" integrity="sha512-8Vtie9oRR62i7vkmVUISvuwOeipGv8Jd+Sur/ORKDD5JiLgTGeBSkI3ISOhc730VGvA5VVQPwKIKlmi+zMZ71w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="a.css">
</head>
<body>
<header>
<div class="navigation-container">
<nav>
<ul class="ul-1 ">
<img src="logo-dark.png" alt="logo" id="i-1">
<input type="text" placeholder=" Search" id="s1">
<li class="nn-1"><a href="#">Home</a></li>
<li class="nn-1"><a href="#">New</a></li>
<li class="nn-1"><a href="#">About</a></li>
<li class="nn-1"><a href="#">Contect</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="ma-s">
<img src="a.gif" alt="managing" class="Bg-img">
<div class="ashir">
<div class="Linput">
<h1 id="heading">Login</h1>
<label for="Username" id="U-1"><h2>Username</h2></label>
<input type="emial" id="U-2" placeholder=" Username">
<br>
<label for="Password" id="P-1"><h2>Password</h2></label>
<br>
<input type="password" id="P-2" placeholder=" Password">
<button class="bt-login">Login</button>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" id="pp-1">
<path fill="#2EE59D" fill-opacity="1" d="M0,96L120,128C240,160,480,224,720,229.3C960,235,1200,181,1320,154.7L1440,128L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
</svg>
</main>
<footer>
<div id="ff-f">
<div class="Social" >
<ul class="UL-1">
<li class="L-1" id="a1"><a href="#"><img src="facebook.png" alt="facebook" width="50px"></a></li>
<li class="L-1" id="a2"><a href="#"><img src="instagram.png" alt="instagram" width="50px"></a></li>
<li class="L-1" id="a3"><a href="#"><img src="whatsapp.png" alt="whatsapp" width="50px"></a></li>
<li class="L-1" id="a4"><a href="#"><img src="twitter.png" alt="twitter" width="50px"></a></li>
</ul>
</div>
<div class="List1">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore consequatur tempore molestias nisi, eveniet quos ullam rem quidem blanditiis placeat est officiis alias voluptas recusandae magni nam? Dolorum dignissimos possimus rerum. Deleniti ea tempora, incidunt autem vitae, iusto suscipit amet obcaecati voluptatibus repellat quos voluptatum perspiciatis placeat assumenda in unde hic accusantium sit soluta dolore iure eveniet, eligendi vel exercitationem! Quaerat, totam rerum ex perferendis magni ratione! Eligendi tempora ut aliquid dolorum error iusto accusamus officiis nam nostrum aspernatur numquam officia accusantium, dolore dolores perferendis. Praesentium ut dolorum, earum numquam a ullam aperiam similique nobis ducimus ab aliquid alias laborum debitis reprehenderit qui. Obcaecati aliquam consequatur, fugiat ipsa sit repellat iure dolorum nulla inventore dolor voluptates debitis iste est quaerat!</p>
</div>
<div class="copy">
<h1>Copyright by Ashir</h1>
</div>
</div>
</footer>
</body>
</html>
CSS CODE
@import
url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600,700,900);
*{
padding:0px;
margin: 0px;
}
body{
background-color: rgb(231, 231, 231);
}
/* Navigation starting div */
/* this is navigation code */
.navigation-container{
background-color: rgb(255, 254, 254);
border-color: rgba(0, 0, 0, 0.15);
box-shadow: 12px 12px 40px rgba(9, 214, 152, 0.466);
color: rgba(0, 0, 0, 0.65);
padding: 0.5em;
position:static;
top: 12rem;
}
/* this is logo code */
#i-1{
width: 8em;
}
/* orderd list code */
.nn-1{
color:white;
display: inline;
padding: 4em;
position: relative;
top: 0.5em;
border: none;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/* this is hover effect code of navigation */
.nn-1:hover{
background-color: #2EE59D;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
padding-top: 29px;
padding-bottom: 22px;
}
/* navigation link desgin */
a{
text-decoration: none;
color:#696161
}
/* this is Search bar code */
#s1{
width: 80px;
height: 40px;
position: abolute;
border-radius: 50%;
z-index: 4;
position: absolute;
right: 200px;
margin: auto;
outline: none;
border: 2px solid rgba(255, 255, 255, 0.698);
background-color: rgb(248, 244, 244);
box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.794);
color: #00f0a0;
text-shadow: 0 0 10px #2EE59D;
padding: 0 80px 0 20px;
border-radius: 30px;
/* this is creating up and down shadow */
transition: all 1s;
font-weight: bolder;
letter-spacing: 0.1em;
}
/* search bar hover effect */
#s1:hover{
cursor: pointer;
}
/* search bar focus means that it can create like a drawer effect */
#s1:focus{
width: 300px;
opacity: 1;
cursor: text ;
}
#s1::placeholder {
color: #2EE59D;
opacity: 0.5;
font-weight: bolder;
}
/* Navigation endding div */
/* main div */
.ma-s img{
width: 450px;
height: 400px;
position: relative;
top: 30px;
image-rendering: optimizeQuality;
image-resolution: 12px;
}
/* login block */
.ashir{
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.876);
box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.794);
backdrop-filter: blur( 14.5px );
-webkit-backdrop-filter: blur( 14.5px );
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.698);
margin-left: 800px;
margin-top: -20px;
border-radius: 20px;
position: relative;
bottom: 350px;
}
.Linput{
padding: 35px;
}
#heading{
position: relative;
left: 110px;
bottom:30px;
font-size: 40px;
color:#2EE59D;
text-shadow: #2EE59D 3px 5px 14px;
}
#U-1{
position: relative;
margin: auto;
bottom: 20px;
font-size: bolder;
color:#2EE59D;
text-shadow: #2EE59D 3px 5px 14px;
}
#U-2::placeholder{
color: #2EE59D;
opacity: 0.5;
font-weight: bolder;
}
#U-2{
width: 320px;
height: 36px;
font-weight: bolder;
border-radius: 144px;
border: none;
padding-left: 12px;
outline: #02da92;
color: #02da92;
background: #9b9898;
box-shadow: inset 23px 23px 46px #f3f2f2,
inset -23px -23px 46px #ffffff;
}
#P-1{
position: relative;
margin: auto;
top: 10px;
font-size: 20px;
color:#2EE59D;
text-shadow: #2EE59D 3px 5px 14px;
}
#P-2{
width: 320px;
padding-left: 12px;
height: 36px;
font-weight: bolder;
border-radius: 144px;
border: none;
outline: #02da92;
color: #02da92;
background: #9b9898;
position: relative;
top:20px;
box-shadow: inset 23px 23px 46px #f3f2f2,
inset -23px -23px 46px #ffffff;
}
#P-2::placeholder{
color: #2EE59D;
opacity: 0.5;
font-weight: bolder;
}
/* From cssbuttons.io */
.bt-login {
padding: 1.3em 3em;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #000;
background-color: #fff;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
position: relative;
left: 85px;
top: 40px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
}
.bt-login:hover {
background-color: #2EE59D;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
color: #fff;
transform: translateY(-7px);
}
.bt-login:active {
transform: translateY(-1px);
}
/* wave code */
#pp-1{
position: relative;
bottom: 400px;
}
/* this si footer */
.List1{
width: 860px;
word-spacing: 10px;
padding-right: 12px ;
margin-left: 24px;
}
/* social code */
.copy{
position: absolute;
bottom: 100px;
left: 970px;
text-shadow: 2px 2px 2px 2px #696161;
}
#ff-f{
background-color: #f3efef;
height: 300px;
position: relative;
bottom: 25.8em;
/* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
border-radius: 2px;
}
.L-1{
display: inline;
float: right;
position: relative;
top: 1em;
margin: 12px;
padding: 5px;
}
#a1:hover{
border-radius: 50px;
background: #001675d0;
box-shadow: 3px 3px 6px #02da92,
-3px -3px 6px #02da92;
}
#a2:hover{
border-radius: 50px;
background: #6d1313d0;
box-shadow: 3px 3px 6px #02da92,
-3px -3px 6px #02da92;
}
#a3:hover{
border-radius: 50px;
background: #15b800d0;
box-shadow: 3px 3px 6px #02da92,
-3px -3px 6px #02da92;
}
#a4:hover{
border-radius: 50px;
background: #0080f8;
box-shadow: 3px 3px 6px #02da92,
-3px -3px 6px #02da92;
}
/* ending of social account */
