<html>
<head>
<title>Educational Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
<div class="main">
</div>
</body>
</html>
*{
margin-left:auto;
margin-right:auto;
}
body{ font-family:Arial, Helvetica, sans-serif; background:#FFF; margin:0px;}
.m30_auto{ margin:30px auto;}
.main{ width:1024px;}
.clearfix{ clear:both;}
<div class="header">
<div class="header-left">
<a href="http://www.freetimelearning.com" target="_blank">
<img src="imges/logo.png" width="231" height="61" />
</a>
</div>
<div class="header-right">
<ul>
<li><a href="#!">Home</a></li>
<li><a href="#!">About Us</a></li>
<li><a href="#!">Cources</a></li>
<li><a href="#!">Exams</a></li>
<li><a href="#!">Notifications</a></li>
<li><a href="#!">Gallery</a></li>
<li><a href="#!">Contact Us</a></li>
</ul>
</div>
</div>
.header{width:1024px; float:left; border-top:7px solid #0066dd; background:#F2F2F2;}
.header-left{ width:250px; float:left;}
.header-right{ width:774px; float:left;}
.header-right ul{list-style:none;}
.header-right ul li{
list-style:none; font-family:arial; font-size:14px; padding:5px 0px 15px 0px;
margin:5px 0px 12px; float:left; font-weight:bold;
}
.header-right ul li a{ padding:5px 20px 10px; margin:2px 0px 5px; text-decoration:none; color:#000;}
.header-right ul li a:hover{ color:#0099dd;}
<div class="banner">
<div class="banner-links">
<a href="#!">TOP COURCES</a> <a href="#!">ADMISSIONS</a>
</div>
</div>
.banner{ width:1024px; background:url(../imges/slider-bg.jpg); height:293px; float:left; }
.banner-links{ font-family:Arial, Helvetica, sans-serif; padding:145px 20px 50px;}
.banner-links a{font-size:26px; padding:0px 20px; text-decoration:none; color:#FFF; font-weight:600;}
.banner-links a:hover{ color:#000;}
<div class="content">
<div class="content-header">Welcome To (<a href="#!">College or School Name</a>)</div>
<div class="content-left">
<div class="clearfix"></div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s.<br /><br />when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</div>
<div class="content-right"><img src="imges/img.jpg" width="437" height="232" /></div>
<div class="clearfix m30_auto"></div>
<div class="content-bottom-boxes">
<img src="imges/img-2.jpg" width="300" height="200" />
<div class="content-bottom-bg">
<div class="content-bottom-bg-header">Lorem Ipsum</div>
<div class="content-bottom-bg-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard.
</div>
</div>
</div>
<div class="content-bottom-boxes">
<img src="imges/img-3.jpg" width="300" height="200" />
<div class="content-bottom-bg">
<div class="content-bottom-bg-header">Lorem Ipsum</div>
<div class="content-bottom-bg-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard.
</div>
</div>
</div>
<div class="content-bottom-boxes">
<img src="imges/img-4.jpg" width="300" height="200" />
<div class="content-bottom-bg">
<div class="content-bottom-bg-header">Lorem Ipsum</div>
<div class="content-bottom-bg-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard.
</div>
</div>
</div>
</div>
.content{ width:1022px; height:auto; border:1px solid #CCC; float:left; padding-bottom:20px;}
.content-left{ width:458px; height:auto; float:left; text-align:justify; padding:0px 20px; line-height:24px;}
.content-right{ width:440px; height:auto; float:left; padding:0px 20px 0px 60px;}
.content-header{color:#000; font-size:26px; text-align:center; padding:25px 10px 15px;}
.content-header a{ color:#0099dd; text-decoration:none;}
.content-header a:hover{ color:#069;}
.content-bottom-boxes{ width:300px; float:left; padding:0px 20px; color:#000;}
.content-bottom-bg{ background:#ebebeb; float:left; padding:20px 15px;}
.content-bottom-bg-header{ font-size:18px; padding-bottom:15px;}
.content-bottom-bg-p{ line-height:24px;}
<div class="testimonials">
<div class="testimonials-h4">
“ when an unknown printer took a galley of type and scrambled it to make a type specimen ”<br /><br />
<a href="#!">Free Time Learn</a>
</div>
</div>
.testimonials{ width:1024px; background:url(../imges/testimonials-bg.jpg); height:309px; float:left; }
.testimonials-h4{ font-size:26px; line-height:46px; padding:80px 100px; color:#FFF; text-align:center;}
.testimonials a{ color:#CCC; font-size:18px; padding:20px 0px; text-align:center; text-decoration:none;}
.testimonials a:hover{ color:#FFF;}
<div id="footer">
<div class="footer-parts">
<div class="footer-parts-h4">Get In Touch</div>
<ul>
<li><a href="#"><i class="fa fa-phone"></i> +91-9963XXXX68</a></li>
<li><a href="mailto:info@freetimelearning.com"><i class="fa fa-envelope"></i> info@freetimelearning.com</a></li>
</ul>
</div>
<div class="footer-parts">
<div class="footer-parts-h4">Extra Links</div>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-parts">
<div class="footer-parts-h4">Social Links</div><br />
<div style="padding-left:20px; font-size:26px;">
<a href="https://www.facebook.com/freetimelearn/" target="_blank"><i class="fa fa-facebook-square"></i></a>
<a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin-square"></i></a>
<a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter-square"></i></a>
<a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus-square"></i></a>
</div>
</div>
<div class="clearfix"></div>
<div class="copyrights">
<div class="copyrights-left">
© 2018. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank">Free Time Learn</a>.
</div>
<div class="copyrights-right">
Designed by <a href="http://www.freetimelearning.com" target="_blank">F T L</a>
</div>
</div>
</div>
#footer{ width:1024px; float:left; background:#CCC;}
.footer-parts{ width:300px; float:left; padding:0px 20px;}
.footer-parts-h4{ font-size:18px; padding:15px 10px 0px;}
.footer-parts ul{list-style:none; padding:0px;}
.footer-parts ul li{list-style:none; font-size:12px; padding:5px; margin:5px 0px; font-weight:bold;}
.footer-parts ul li a{padding:8px 10px; margin:2px 0px; text-decoration:none; color:#000;}
.footer-parts ul li a:hover{color:#FFF;}
.copyrights{ width:964px; font-size:12px; background:#0099dd; float:left; padding:15px 30px 15px 30px; color:#FFF; }
.copyrights-left{ width:664px; float:left;}
.copyrights-left a{ color:#FFF; text-decoration:none;}
.copyrights-left a:hover{color:#CCC;}
.copyrights-right{ width:300px; float:left; text-align:right;}
.copyrights-right a{ color:#FFF; text-decoration:none;}
.copyrights-right a:hover{color:#CCC;}