<!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>fws</title>
<style>
header{
width: 100%;
height: 100vh;
background-image: linear-gradient(white, rgb(0, 0, 0));
}
.navsection{
width: 100%; height: 20vh;
display: flex; justify-content: space-around;
align-items: center;
background-image: linear-gradient( white,black (80%,20%,0%));
}
.logo{
width: 40%;
color: #fff;
background-image: linear-gradient(#8d98e3 40px, #854fee 60px);
padding-left: 15%;
box-sizing: border-box;
}
.logo h1{
text-transform: uppercase;
color: black;
font size: 1.6rem;
animation: kuchbhi 2s linear infinite;
animation-direction: alternate;
}
@keyframes kuchbhi{
from{ padding-left: 40%; }
to { padding-right: 40%; }
}
nav{
width: 60%;
display: flex;
justify-content: space-around;
}
nav a{
text-decoration: none;
text-transform: uppercase;
color: #000;
font-weight: 900;
font-size: 17px;
position: relative;
}
nav a:first-child{
color: #854fee;
}
nav a:before{
content: "";
position: absolute;
top: 110%;
left:0%;
width: 0%;
height: 2px;
border-bottom: 3px solid black;
transition: all 0.4s linear;
}
nav a:hover:befor{
width: 100%;
}
main{
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
.leftside{
color: #000;
text-transform: uppercase;
}
.leftside h3{
font-size: 40%;
margin-bottom: 20%;
position: relative;
}
leftside h3:after{
content: "";
width: 450px;
height: 3px;
position: absolute;
top: 43%;
left: 15%;
background: #000;
}
.leftside h1{
margin-top: 20px;
font-size: 70px;
margin-bottom: 25px;
}
.leftside h2{
margin-bottom: 35px;
font-weight: 500px;
word-spacing: 4px;
}
.btn1{
font-size: 15x;
color: black;;
border-radius: 8px;
background-color: gray;
padding: 5px;
margin: 7px;
border: 2px solid black;
box-shadow: none;
background-image: none;
}
.btn2{
font-size: 15x;
margin: 7px;
color: black;;
border-radius: 8px;
background-color:gray;
padding: 5px;
border: 2px solid black;
box-shadow: none;
background-image: none;
}
</style>
</head>
<body>
<header>
<section class="navsection">
<div class="logo">
<h1>Web Family</h1>
</div>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">about</a>
<a href="#">contact us</a>
</nav>
</section>
<main>
<div class="leftside">
<h2>HELLO WF</h2>
<h1> I AM WEBER</h1>
<h2>Web Developer and Youtube</h2>
<button class="btn1">hire me</button>
<button class="btn2">contact me</button>
</div>
</main>
</header>
</body>
</html>