Reference Websites
Educational Website
  Start Coding
 Basic Structure
  HTML Code
<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>
  CSS Code
*{
	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;}
 Step 1 : Header (or) Menu
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 2 : Slider (or) Banner
Reference Image
  HTML Code
<div class="banner">
   <div class="banner-links">
   		<a href="#!">TOP COURCES</a> &nbsp; &nbsp; <a href="#!">ADMISSIONS</a>
   </div>
</div>
  CSS Code
.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;}
 Step 3 : Content Part
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 4 : Testimonials
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 5 : Footer Part
Reference Image
  HTML Code
<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>&nbsp; +91-9963XXXX68</a></li>
            <li><a href="mailto:info@freetimelearning.com"><i class="fa fa-envelope"></i>&nbsp; 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> &nbsp; &nbsp;
            <a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin-square"></i></a> &nbsp; &nbsp;
            <a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter-square"></i></a> &nbsp; &nbsp;
            <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">
        &copy; 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>
  CSS Code
#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;}