Download Complete Modern Website 2020 Source Code
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Modern web</title>
<link rel="stylesheet" type="text/css" href="mweb.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">TECHGURU</div>
<nav class="navbar">
<ul>
<li><a href="#" id="active">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">INFO</a></li>
</ul>
</nav>
</div>
<div class="txtimg">
<div class="text">
<h1>I AM NILESH DADHEECH</h1>
<p>WEB DESIGNER and DEVELOPER</p>
</div>
<div class="img">
<img src="images/a1.png">
</div>
</div>
</header>
</body>
</html>
CSS CODE:
*{
padding: 0; margin:0;
box-sizing: border-box;
font-family: sans-serif;
}
header{
background:linear-gradient(to left, white 80%, #6c63ff 20%);
height: 100vh;
width: 100%;
}
.container{
width: 100%;
height: 15vh;
display: flex;
background:linear-gradient(to top, white 90%, #6c63ff 10%);
justify-content: space-around;
align-items: center;
}
.logo{
width: 30%;
color: #6c63ff;
font-size: 30px;
font-weight: bold;
letter-spacing: 2px;
padding-left: 100px;
}
.logo:hover{
color: black;
transition: 0.4s;
}
.navbar{
width: 70%;
}
.navbar ul{
display: flex;
justify-content: space-around;
}
.navbar ul li{
list-style:none;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-weight: bold;
display: block;
padding:10px;
position: relative;
}
#active{
color:#6c63ff;
}
.navbar ul li a:before{
content: "";
position: absolute;
bottom:0;
left: 0;
width: 0%;
border-bottom:3px solid #6c63ff;
transition: 0.4s linear;
}
.navbar ul li a:hover:before{
width: 100%;
}
.navbar ul li a:after{
content: "";
position: absolute;
top:0;
left: 0;
width: 0%;
border-top:3px solid #6c63ff;
transition: 0.4s linear;
}
.navbar ul li a:hover:after{
width: 100%;
}
.txtimg{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
height: 85vh;
font-size: 25px;
}
.text{
width: 60%;
padding-left: 100px;
}
.img{
width: 40%;
}
.img img{
width:100%;
}
.text p{
font-weight: bold;
margin-top: 20px;
background-color: #6c63ff;
color: white;
display: inline-block;
padding: 10px 30px;
transition: 0.4s linear;
}
.text p:hover{
padding-left: 150px;
cursor: pointer;
}
0 Comments