Download Modern Website 2020 with Source Code
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>landing page 2</title>
<link rel="stylesheet" type="text/css" href="landingpage2.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<header>
<nav>
<div class="logo"> TECH<span id="slogo"> NILESH</span></div>
<div class="menu">
<ul>
<li><a href="#" id="first">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</nav>
<div class="text">
<h3>DESIGN . DEVELOPMENT . SOFTWARE</h3>
<h1>DADHEECH CREATIONS</h1>
<h4>We Create Better World</h4>
<button id="bt1">LIKE</button>
<button id="bt2">SHARE & SUBSCRIBE</button>
<p id="icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-envelope" aria-hidden="true"></i>
</p>
</div>
</header>
</body>
</html>
CSS CODE:
*{
padding:0;
margin: 0;
}
header{
background-image: url('images/a (5).jpg');
width: 100%;
background-size: cover;
height: 100vh;
}
nav{
height: 30px;
padding-top: 20px;
}
.logo{
width: 20%;
line-height: 30px;
color: white;
float: left;
font-weight: bold;
font-size: 30px;
padding-left: 100px;
}
#slogo{
color: skyblue;
}
.menu{
width: 70%;
line-height: 30px;
float: right;
}
.menu ul{
list-style-type: none;
margin-left: 350px;
}
.menu ul li{
width: 100px;
line-height: 35px;
text-align: center;
display: inline-block;
}
.menu ul li a{
text-decoration: none;
color:black;
display: block;
font-weight: bold;
}
.menu ul li a:hover{
background-color: pink;
color: white;
transition: 0.6s;
}
#first{
background-color: pink;
color: white;
}
.text{
color: white;
text-align: center;
margin-top: 150px;
padding:10px;
}
h3{
padding: 10px;
font-size: 25px;
}
h4{
padding: 10px;
font-size: 25px;
}
h1{
color: black;
font-size: 50px;
text-shadow: 2px 3px white;
}
#bt1{
background: none;
border:1px solid white;
width: 80px;
padding:10px;
font-weight: bold;
margin-right: 5px;
margin-top: 10px;
outline: 2px solid black;
background-color: #7bd3f7;
}
#bt2{
background: none;
background-color: pink;
border:1px solid white;
width: 180px;
padding:10px;
font-weight: bold;
outline: 2px solid black;
}
#bt1:hover{
color:black;
background-color:transparent;
transition: 0.6s;
}
#bt2:hover{
background-color:transparent;
color:black;
transition: 0.6s;
padding: 10px;
}
#icons{
text-align: center;
margin-top: 10px;
font-size: 30px;
letter-spacing: 5px;
}
0 Comments