Modern Template for free

You can use this code in your projects also

Here we provide the source code of  Modern Template for free so please follow my blog and also subscribe my Youtube channel for this type of awesome template for free.

Modern Template For Free:

Modern Template Details:

Modern template used HTML and CSS. it also used some features of HTML5 and CSS3. It contain header, nav, and section tags in HTML and we style it using CSS.

Modern Template HTML Code:




<!DOCTYPE html>
<html>
<head>
<title>Modern Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"
</head>
<body>
<header class="site-header">
<nav>
<div class="logo">
<h1>Modern Website</h1>
</div>
<div class="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<section>
<div class="leftside">
<img src="bg5.jpg">
</div>
<div class="rightside">
<h1>Our Creation's</h1>
<p>This is our modern website</p>
<button>Welcome</button>
</div>
</section>
</header>

</body>
</html>


Modern Template CSS Code:


*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
.site-header{
width: 100%;
height: 100vh;
background:linear-gradient(57deg, #606c88, #3f4c6b);
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}

nav{
width: 100%;
height: 100px;
display: flex;
color: white;
}
.logo{
width: 50%;
height: 100px;
}
.logo h1{
line-height: 100px;
padding-left: 50px;
}
.menu{
width: 50%;
height: 50px;
}
.menu ul{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.menu ul li{
list-style: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.menu ul li a{
color: white;
text-decoration: none;
font-size: 12px;
}
.menu ul li a:hover{
background-color: gray;
}
section{
display: flex;
}
.leftside{
width: 45%;
height: auto;
overflow: hidden;
margin-top: 20px;
}
.leftside img{
width: 500px;
height: 400px;
}
.rightside{
width: 55%;
height: 300px;
color: white;
text-align: center;
margin-top: 80px;
padding: 40px;
}
.rightside h1{
font-size: 50px;
font-weight: 900;
text-transform: uppercase;
}
.rightside p{
font-size: 1.1rem;
padding: 30px 0px;
}
.rightside button{
font-size: 17px;
font-weight: bold;
color: white;
text-transform: uppercase;
background:linear-gradient(57deg, #606c88, #3f4c6b);
border-radius: 4px;
padding: 20px 35px;
}
.rightside button:hover{
background:linear-gradient(57deg, #3f4c6b, #606c88);
}
.active{
background-color: gray;
}