cssfile.css

*{
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

.first{
   width : 100%;
   height: 100vh;
   background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(image.jpg);
   background-size: cover;
   background-position: center;
}

.navbar {
   width: 85%;
   margin:auto;
   padding: 35px 0;
   display: flex;
   align-items:centre;
   justify-content:space-between;

}

.logo {
   transform: translateY(-30%);
   width:120px;
   cursor : pointer;
}

.navbar ul li {
   text-decoration: none;
   display:inline-block;
   margin:0 20px;
   position: relative;

}

.navbar ul li a{
   text-decoration: none;
   color:ghostwhite;
   text-transform: uppercase;
}

.navbar ul li::after {

  content: '';
  height: 3px;
  width: 0;
  background:gray;
  position: absolute;
  left:0;
  bottom:-10px;
  transition:0.5s;
}

.navbar ul li:hover::after{
   width: 100%;
}

.mainn {
   width: 100%;
   position:absolute;
   top:30%;
   transform: translateY(-50%);
   transform: translateX(7.5%);
   text-align:centre;
   color: ghostwhite;
}

.mainn h1{
   font-size: 80px;
   margin-top:80px;
}

.mainn p{
   margin:20px auto;
   font-size: 20px;
   font-weight: 100;
   
   line-height: 25px;

}

button{
   width: 200px;
   padding: 15px 0;
   text-align : centre;
   font-size:15px ;
   margin: 15px 5px;
   border-radius: 20px;
   font-weight:bold;
   border: 2px solid white;
   background:transparent;
   color:white;
   cursor:pointer;
   position: relative;
   overflow:hidden;
}

span {
background: grey;
height:100%;
width:0;
border-radius:20px;
position: absolute;
left:0;
bottom:0;
z-index: -1;
transition: 0.5s;


}

button:hover span{
   width: 100%;

}

button:hover {
   border:none;
}