HTML
<!doctype html>
<html lang="en">
<head>
<title>Day 26 Practices By Emon Khan</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<!-- MY STYLE -->
<link rel="stylesheet" href="day-26.css">
</head>
<body>
<!-- header part -->
<div id="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="#header"><img src="https://www.seekpng.com/png/full/7-71715_google-logo-white2-microsoft-white-logo-transparent-background.png" alt="Logo"></a>
</div>
<div class="col-md-8 text-right">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Services</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- hero part -->
<div class="banner">
<div class="container text-center ">
<h1 class="">Learn Freelancing With Fun</h1>
<button role="button" class="btn btn-warning mt-3">Learn More</button>
</div>
</div>
<!-- About part -->
<div id="about" class="py-4">
<div class="container text-center">
<h2>About</h2>
<p class="lead w-50 m-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae doloribus dolorum qui animi assumenda ea quibusdam dicta ullam maxime consequatur?</p>
</div>
</div>
<!-- Services part -->
<div id="services">
<div class="container py-4 ">
<div class="row">
<div class="col-md-4 text-center">
<div class="card p-3">
<i class="fas fa-toolbox icon"></i>
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum.</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card p-3">
<i class="fas fa-toolbox icon"></i>
<h2>Graphics Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum.</p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="card p-3">
<i class="fas fa-toolbox icon"></i>
<h2>Web Development</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolorum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Blog part -->
<div id="blog">
<div class="container py-4">
<div class="row">
<div class="col-md-8">
<div class="row py-4">
<div class="col-md-4">
<img src="https://i.picsum.photos/id/653/200/300.jpg" alt="">
</div>
<div class="col-md-8">
<h2 class="text-danger">This is title of post</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus corporis voluptate repellendus? Earum molestias excepturi quos quod cupiditate, nulla nostrum.</p>
</div>
</div>
<div class="row py-4">
<div class="col-md-4">
<img src="https://i.picsum.photos/id/653/200/300.jpg" alt="">
</div>
<div class="col-md-8">
<h2 class="text-danger">This is title of post</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus corporis voluptate repellendus? Earum molestias excepturi quos quod cupiditate, nulla nostrum.</p>
</div>
</div>
<div class="row py-4">
<div class="col-md-4">
<img src="https://i.picsum.photos/id/653/200/300.jpg" alt="">
</div>
<div class="col-md-8">
<h2 class="text-danger">This is title of post</h2>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus corporis voluptate repellendus? Earum molestias excepturi quos quod cupiditate, nulla nostrum.</p>
</div>
</div>
</div>
<div class="col-md-4">
<h2>Notice Board</h2>
<ul>
<li>This is notice item</li>
<li>This is notice item</li>
<li>This is notice item</li>
<li>This is notice item</li>
<li>This is notice item</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Contact part -->
<div id="contact">
<div class="container py-4">
<div class="row">
<div class="col-md-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d233876.22078995142!2d89.10266825735839!3d23.664656621994506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39feee0215af89b1%3A0xc4a83acc0a1a3a37!2z4Ka24KeI4Kay4KaV4KeB4Kaq4Ka-IOCmieCmquCmnOCnh-CmsuCmvg!5e0!3m2!1sbn!2sbd!4v1591237309264!5m2!1sbn!2sbd" width="100%" height="450" frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div class="col-md-8">
<h2 class="text-center">Contact Us</h2>
<form action="#">
<input type="text" name="" id="" class="form-control my-2" placeholder="Your Name">
<input type="emial" name="" id="" class="form-control my-2" placeholder="Your Email">
<input type="text" name="" id="" class="form-control my-2" placeholder="Subject">
<textarea name="" id="" cols="30" rows="8" class="form-control">Your Message</textarea>
<input type="submit" value="Send Message" class="btn btn-warning my-2">
</form>
</div>
</div>
</div>
</div>
<!-- Footer part -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>© All Right Reserved By <a href="https://facebook.com/emonkhan2020">EmoN KhaN</a></p>
</div>
<div class="col-md-8 text-right">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Services</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
/* font-family: 'Lobster', cursive; */
html{
scroll-behavior: smooth;
}
img{
width: 100%;
}
/* header part */
#header{
background-color: #f39c12;
}
#header a img{
width: 90px;
padding-top: 7px;
}
#header ul, #footer ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#header ul li, #footer ul li{
display: inline-block;
}
#header ul li a, #footer ul li a{
color: #fff;
text-decoration: none;
display: block;
font-size: 18px;
padding: 0 10px;
line-height: 40px;
}
#header ul li a:hover, #footer ul li a:hover{
color: rgba(255, 255, 255, 0.685);
}
/* Hero Part */
.banner{
background-image:url(https://www.shobhituniversity.ac.in/images/slider-inner-banner/15-img.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 200px 0;
}
.banner h1{
font-family: 'Lobster', cursive;
color: #fff;
font-size: 45px;
}
/* services part */
#services{
background-color: #ddd;
}
#services h2{
border-bottom: 2px solid #ddd;
padding-bottom: 5px;
}
.icon{
width: 60px;
height: 60px;
margin: auto;
font-size: 40px;
background-color: #E0A800;
line-height: 60px;
border-radius: 0 25% 0 25%;
}
/* Blog part */
#blog{
}
#blog img{
width: 150px;
height: 150px;
border: 4px solid #ddd;
border-radius: 5px;
}
#blog ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#blog ul li{
border-bottom: 1px solid #ddd;
padding: 5px;
}
#blog ul li:first-child{
border-top: 1px solid #fff;
}
/* Contact part */
#contact{
background-color: #ddd;
}
#contact iframe{
border: 5px solid #fff;
border-radius: 5px;
}
/* Footer Part */
#footer{
background-color: #213042;
color: #fff;
margin: 0;
padding: 0;
}
#footer p{
font-size: 18px;
line-height: 40px;
margin: 0;
padding: 0;
#footer a{
color: blueviolet;
text-decoration: none;
}
