<html>
<head>
<title>How To Create A Static Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="main">
<!-- Start Header Top -->
<div class="header-top" align="right">
<button type="button" class="header-top-btn" name="">Sign In</button>
<button type="button"class="header-top-btn" name="">Sign Up</button>
</div>
<!-- End Header Top -->
<!-- Start Header Bottom -->
<div class="header-bottom">
<div class="header-bottom-left"><img src="images/Logo.png" width="160" height="108" /></div>
<div class="header-bottom-center">
<div class="search">
<input type="text" class="search_form" placeholder="Search" name="search" />
<span><a href="#"><img src="images/Search.jpg" width="35" height="34" /></a></span>
</div>
</div>
<div class="header-bottom-right">
<div class="social-links">
<ul>
<li><a href="https://www.facebook.com/" target="_blank"><img src="images/fb.png" width="35" height="33" /></a></li>
<li><a href="https://twitter.com/" target="_blank"><img src="images/tw.png" width="35" height="33" /></a></li>
<li><a href="https://www.linkedin.com/m/login/" target="_blank"><img src="images/in.png" width="35" height="33" /></a></li>
</ul>
</div>
</div>
</div>
<!-- End Header Bottom -->
<!-- Start Navbar -->
<div class="nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Servises</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- End Navbar -->
<!------ Start Slider(or) Banner ---------->
<div class="banner">
<img src="images/banner.jpg" alt="Banner Image" />
</div>
<!------ End Slider(or) Banner ---------->
<!------ Start Content ---------->
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="content-part" align="center">
<div><i><img src="images/icons/1.png" width="60" height="57" /></i></div>
<div class="font-17">Lorem Ipsum</div>
<div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
<div class="p15_0">
<a href="#!" class="header-top-btn">Read More</a>
</div>
</div>
<div class="content-part" align="center">
<div><i><img src="images/icons/2.png" width="60" height="57" /></i></div>
<div class="font-17">Lorem Ipsum</div>
<div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
<div class="p15_0">
<a href="#!" class="header-top-btn">Read More</a>
</div>
</div>
<div class="content-part" align="center">
<div><i><img src="images/icons/3.png" width="60" height="57" /></i></div>
<div class="font-17">Lorem Ipsum</div>
<div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
<div class="p15_0">
<a href="#!" class="header-top-btn">Read More</a>
</div>
</div>
<div class="content-part" align="center">
<div><i><img src="images/icons/4.png" width="60" height="57" /></i></div>
<div class="font-17">Lorem Ipsum</div>
<div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
<div class="p15_0">
<a href="#!" class="header-top-btn">Read More</a>
</div>
</div>
<!------ End Content ---------->
<!------- Start Testimonials ------->
<div class="testimonials">
<div class="header-font">Testimonials</div>
<div class="header-font-border"></div>
<div class="testimonials-parts">
<div class="testimonials-parts-left" align="center">
<img src="images/user.png" width="144" height="139" />
</div>
<div class="testimonials-parts-right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
</div>
</div>
<div class="testimonials-parts">
<div class="testimonials-parts-left" align="center">
<img src="images/user.png" width="144" height="139" />
</div>
<div class="testimonials-parts-right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
</div>
</div>
</div>
<!------- End Testimonials ------->
<!------- Start Our Clients ------->
<div class="our-clients">
<div class="header-font">Our Clients</div>
<div class="header-font-border"></div>
<div class="clearfix"></div>
<div class="our-clients-list">
<ul>
<li><a href="https://www.microsoft.com/en-in" target="_blank">
<img src="images/clients/client-1.png" width="160" height="70" />
</a></li>
<li><a href="https://www.google.co.in" target="_blank">
<img src="images/clients/client-2.png" width="160" height="70" />
</a></li>
<li><a href="https://www.amazon.in/" target="_blank">
<img src="images/clients/client-3.png" width="160" height="70" />
</a></li>
<li><a href="https://www.facebook.com/" target="_blank">
<img src="images/clients/client-4.png" width="160" height="70" />
</a></li>
<li><a href="https://www.oracle.com/in/index.html" target="_blank">
<img src="images/clients/client-5.png" width="160" height="70" />
</a></li>
</ul>
</div>
</div>
<!------- End Our Clients ------->
<!------- Start Footer ------->
<div class="footer">
<div class="footer-left">
<div class="footer-heading">About Company</div>
<p align="justify" style="line-height:24px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text..Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="footer-right">
<div class="footer-heading">Company Links</div>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-right">
<div style="padding-left:30px;">
<div class="footer-heading">Social Links</div>
<a href=""><img src="images/fb.png" width="35" height="33" /></a>
<a href=""><img src="images/tw.png" width="35" height="33" /></a>
<a href=""><img src="images/in.png" width="35" height="33" /></a>
</div>
</div>
<div class="clearfix"></div>
<div class="footer-bottom">
<div class="footer-bottom-left">
© Copy 2018. All rights reserved by Free Time Learning (<a href="http://www.freetimelearning.com" class="footer-link" target="_blank">www.freetimelearning.com</a>)
</div>
<div class="footer-bottom-right">
Designed By - <a href="http://www.freetimelearning.com" class="footer-link" target="_blank">F T L</a>
</div>
</div>
</div>
<!------- End Footer ------->
</div>
</body>
</html>@charset "utf-8";
/********************** Developed by www.freetimelearning.com ********************/
*{margin:0px auto;}
body{font-family:Arial, Helvetica, sans-serif; margin:0px; background:#FFF;}
.main{width:1024px;margin:0px auto;}
.clearfix{ clear:both;}
.p5_0{ padding:5px 0px;} .p10_0{ padding:10px 0px;} .p15_0{ padding:15px 0px;} .p20_0{ padding:20px 0px;}
.m5_auto{ margin:5px auto;} .m10_auto{ margin:10px auto;} .m15_auto{ margin:15px auto;} .m20_auto{ margin:20px auto;}
/****** Start Header-Top ******/
.header-top{ width:980px; padding:5px 22px; background:#d85600; }
.header-top-btn{
background:#993d00; color:#FFF; padding:5px 15px; border-radius:2px; font-size:13px;
cursor:pointer; border:1px solid #993d00; text-decoration:none;
}
.header-top-btn:hover{background: #6B2727;color:#FFF;}
/****** End Header-Top ******/
/****** Start Header-Bottom ******/
.header-bottom{width:980px; padding:10px 22px; background:#fff0e5; float:left;}
.header-bottom-left{width:280px; padding-left:10px; float:left;}
.header-bottom-center{width:400px; padding-left:10px; float:left;}
.header-bottom-center .search{width:400px; float:left; padding:40px 0px 0px;}
.search_form{
border:1px solid #CCC; height:27px; float:left; width:300px;
padding:2px 20px; font-size:16px; margin-top:1px; color:#000;
}
.header-bottom-right{width:270px;padding-left:10px;float:left;}
.social-links{float:left; padding-top:40px; padding-left:20px;}
.social-links ul{ list-style:none;}
.social-links ul li{ float:left; padding:0px 15px;}
/****** End Header-Bottom ******/
/****** Start Navbar ******/
.nav{ width:1024px; float:left; background:#CCC; }
.nav ul{ list-style:none; }
.nav ul li{list-style:none; font-size:14px; text-transform:uppercase; padding:15px 0px 15px 0px;
margin:0px auto; float:left;font-weight:bold; }
.nav ul li a{ padding:15px 45px 15px 50px; margin:0px; text-decoration:none; color:#000;}
.nav ul li a:hover{ color:#FFF; background:#d85600; }
.active a{ background:#d85600; color:#FFF !important;}
/****** End Navbar ******/
/****** Start Slider(or) Banner ******/
.banner{
width:1024px;
height:auto;
}
/****** End Slider(or) Banner ******/
/****** Start Content ******/
.header-font{ font-size:24px; color:#000; text-align:center; padding:40px 0px 5px; font-weight:600;}
.header-font-border{ border-bottom:2px solid #333; text-align:center; width:100px; margin-bottom:20px;}
.content-part{ width:250px; float:left; padding:25px 3px;}
.content-part .font-17{ font-size:17px; font-weight:600; color:#000; padding:10px 0px;}
.margin-text{ width:90%; margin:10x auto !important; font-size:11pt; color:#666; line-height:24px;}
/****** End Content ******/
/****** Start Testimonials ******/
.testimonials{ width:1024px; background:#eeeeee; padding:0px 0px 40px; float:left; margin-bottom:10px;}
.testimonials-parts{width:460px; margin:15px 20px 5px; float:left; padding:15px 6px; background:#fff0e5; color:#000;}
.testimonials-parts-left{ width:160px; float:left;}
.testimonials-parts-right{ width:280px; float:left; color:#000; text-align:justify; font-size:14px; line-height:24px; padding: 20px 20px 0px 0px;}
/****** End Testimonials ******/
/****** Start Our Clients ******/
.our-clients{ width:1024px; padding:0px 0px 5px; float:left; margin-bottom:10px;}
.our-clients-list{ list-style:none; float:left;}
.our-clients-list ul{ list-style:none;}
.our-clients-list ul li{ float:left; padding:0px 16px;}
/****** End Our Clients ******/
/****** Start Footer ******/
.footer{ width:1024px; color:#FFF; float:left; background:#d85600; padding:20px 0px 10px; margin-top:20px;}
.footer-heading{ font-size:16px; font-weight:600; padding:5px 0px 15px;}
.footer-left{ width:414px; float:left; padding:10px 30px;}
.footer-right{ width:221px; float:left; padding:10px 2px;}
.footer-right ul{ list-style:none; padding:0px;}
.footer-right ul li{ font-size:14px; padding:5px 0px;}
.footer-right ul li a{ text-decoration:none; color:#FFF;}
.footer-right ul li a:hover{ color:#999;}
.footer-bottom{ width:974px; color:#FFF; font-size:12px; padding:8px 25px 2px;}
.footer-bottom-left{ width:774px; float:left;}
.footer-bottom-right{ width:200px; float:left; text-align:right;}
.footer-link{ color:#FFF; text-decoration:none;}
/****** End Footer ******/