<html>
<head>
<title>Hospital 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;}
.main{
width:1300px;
-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
margin-bottom:20px;
}
.clearfix{ clear:both;}
<div class="header">
<div class="header-left">
<a href="http://www.freetimelearning.com" target="_blank">
<img src="images/logo.png" width="231" height="75" />
</a>
</div>
<div class="header-right">
<div class="header-right-top">
<ul>
<li><a href=""><i class="fa fa-facebook"></i> </a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
<li><a href=""><i class="fa fa-google"></i></a></li>
</ul>
<a href="#"><input type="text" class="form" placeholder="Search"><img src="images/search.png" /></a>
</div>
<div class="header-right-bottom">
<ul>
<li><a href="#!">Home</a></li>
<li><a href="#!">About Us</a></li>
<li><a href="#!">Consultants</a></li>
<li><a href="#!">Doctors</a></li>
<li><a href="#!">Services</a></li>
<li><a href="#!">Schedule</a></li>
<li><a href="#!">Gallery</a></li>
<li><a href="#!">Contact Us</a></li>
</ul>
</div>
</div>
</div>.header{
width:1300px; height:100px; float:left; border-top:2px solid #0099da;
border-bottom:2px solid #0099da; background:#FFF;
}
.header-left{ width:250px; float:left; padding-top:15px;}
.header-right{ width:1050px; float:left; padding-top:10px;}
.header-right-top{ width:550px; height:35px; float:left; padding-left:500px; margin:0;}
.header-right-top ul{ list-style:none; float:left; margin:5px 20px;}
.header-right-top ul li{ float:left; padding:0px 10px;}
.header-right-top ul li a{ font-size:12px; text-decoration:none; background:#0099da; color:#FFF;
padding:8px 10px; border-radius:100px; text-align:center;}
.header-right-top ul li a:hover{ background:#069; color:#FFF;}
.form{ height:30px; padding:0px 10px; float:left; border:1px solid #0099da; border-radius:2px;}
.header-right-bottom{ width:1050px; height:40px; float:left;}
.header-right-bottom ul{list-style:none; margin:0px; padding-left:100px}
.header-right-bottom ul li{
list-style:none; font-family:arial; font-size:14px; padding:10px 0px 5px;
margin:5px 0px; float:left; font-weight:bold;
}
.header-right-bottom ul li a{ padding:5px 28px 10px; margin:2px 0px 5px; text-decoration:none; color:#000;}
.header-right-bottom ul li a:hover{ color:#0099dd;}
<div class="slider">
<div class="slider-h3">
Lorem Ipsum is simply dummy text of the <br />printing and typesetting industry.
<div style="padding-top:30px;"><a href="#" class="btn">Click Here!</a></div>
</div>
</div>.slider{ width:1300px; background:url(../images/slider-bg.jpg); height:300px; float:left; }
.slider-h3{ font-size:30px; padding:100px 0px 0px 100px; color:#000; text-shadow:1px 0.5px #CCC;}
.btn{ background:#0099da; color:#FFF; padding:9px 20px; font-size:16px;
text-decoration:none; border-radius:3px; text-shadow:none;}
.btn:hover{ background:#0080C0;}
<div class="slider-bottom">
<div class="slider-bottom-parts">
<div align="center"><img src="images/icon-1.png" width="70" height="60" /></div>
<div class="slider-bottom-parts-h3">Lorem Ipsum is simply dummy text</div>
<div class="slider-bottom-parts-p">
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. When an unknown...
</div>
</div>
<div class="slider-bottom-parts">
<div align="center"><img src="images/icon-2.png" width="70" height="60" /></div>
<div class="slider-bottom-parts-h3">Lorem Ipsum is simply dummy text</div>
<div class="slider-bottom-parts-p">
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. When an unknown...
</div>
</div>
<div class="slider-bottom-parts" style="border-right:none;">
<div align="center"><img src="images/icon-3.png" width="70" height="60" /></div>
<div class="slider-bottom-parts-h3">Lorem Ipsum is simply dummy text</div>
<div class="slider-bottom-parts-p">
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. When an unknown...
</div>
</div>
</div>.slider-bottom{ width:1300px; float:left;}
.slider-bottom-parts{ width:350px; float:left; padding:20px 41px; background:#0099da; border-right:2px #FFF solid;}
.slider-bottom-parts-h3{ color:#FFF; padding:20px 0px 10px; text-align:center; font-size:20px;}
.slider-bottom-parts-p{ color:#FFF; line-height:26px; font-size:14px; text-align:center;}
<div class="content">
<div class="content-left">
<div class="content-left-top">
<div class="content-left-top-left">
<div class="content-header-h3">Lorem Ipsum is simply</div>
<img src="images/content-left.png" width="430" height="250" />
</div>
<div class="content-left-top-right">
<div class="content-left-top-right-p">
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.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.<br /><br>
<a href="#!" class="btn">Read More</a>
</div>
</div>
</div>
<div class="content-left-bottom">
<div class="content-left-bottom-parts">
<div class="content-header-h3">Lorem Ipsum is simply</div>
<p style="margin-top:-10px;"><strong>Lorem Ipsum is simply dummy</strong></p>
<p>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... <a href="#">More</a></p>
</div>
<div class="content-left-bottom-parts">
<p style="padding-top:35px;"><strong>Lorem Ipsum is simply dummy</strong></p>
<p>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... <a href="#">More</a></p>
</div>
<div class="content-left-bottom-parts">
<div class="content-header-h3">Videos</div>
<iframe width="280" height="130" src="https://www.youtube.com/embed/2KpLHdAURGo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="content-right">
<div class="content-header-h3">News & Events</div>
<div class="content-right-top">
<div class="content-right-top-left"><img src="images/news.png" width="100" /></div>
<div class="content-right-top-right">
<div class="content-date">20-02-2018</div>
<div class="content-right-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ...
</div>
</div>
<div class="content-right-top-left"><img src="images/news-2.png" width="100" /></div>
<div class="content-right-top-right">
<div class="content-date">24-02-2018</div>
<div class="content-right-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ...
</div>
</div>
<div class="content-right-top-left"><img src="images/news.png" width="100" /></div>
<div class="content-right-top-right">
<div class="content-date">05-03-2018</div>
<div class="content-right-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ...
</div>
</div>
</div>
<div class="content-right-bottom">
<div class="content-header-h3">Contact Now</div>
<input type="text" class="my_form" placeholder="Name">
<input type="text" class="my_form" placeholder="Email">
<textarea rows="3" class="form-textarea"></textarea><br /><br>
<a href="#!" class="btn">Submit</a>
</div>
</div>
</div>.content{ width:1300px; float:left; padding-bottom:20px;}
.content-left{width:950px; height:auto; float:left;}
.content-left-top{width:950px; float:left;}
.content-left-top-left{width:430px; float:left; padding:20px 10px;}
.content-header-h3{ font-size:28px; padding:15px 0px; color:#0099da;}
.content-left-top-right{width:500px; float:left; padding-top:60px;}
.content-left-top-right-p{ font-size:14px; float:left; padding:15px 0px 0px 20px;
text-align:justify; color:#000; line-height:26px;}
.content-left-bottom{width:950px; float:left;}
.content-left-bottom-parts{ width:280px; float:left; padding:0px 20px 0px 15px;}
.content-left-bottom-parts p{ line-height:26px; font-size:14px; text-align:justify;}
.content-right{ width:330px; height:auto; float:left; padding:20px 0px 0px 20px;}
.content-right-top{ width:330px; float:left;}
.content-right-top-left{ width:100px; float:left; padding:0px 0px 10px;}
.content-right-top-right{ width:210px; float:left;}
.content-date{ color:#0099da; font-style:italic; font-size:13px; padding:0px 10px 10px;}
.content-right-p{padding:0px 10px 10px; font-size:12px; text-align:justify;}
.content-right-bottom{width:330px; float:left;}
.my_form{border-radius:2px; border:1px solid #0099da; margin:5px auto; height:30px; width:280px; padding:0px 10px;}
.form-textarea{ border-radius:2px; border:1px solid #0099da; margin:5px auto; width:280px; padding:0px 10px;}
.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="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>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="footer-parts">
<div class="footer-parts-h4">Extra Links</div>
<ul>
<li><a href="#">Appointments</a></li>
<li><a href="#">Find a Doctor</a></li>
<li><a href="#">Insurance</a></li>
</ul>
</div>
<div class="footer-parts">
<div class="footer-parts-h4">Social Links</div><br />
<div style="padding-left:20px; font-size:22px;">
<a href="https://www.facebook.com/freetimelearn/" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="https://plus.google.com/101612697119159092378" target="_blank"><i class="fa fa-google-plus"></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:1300px; float:left; background:#333;}
.footer-parts{ width:300px; float:left; padding:0px 10px;}
.footer-parts-h4{ font-size:18px; padding:15px 10px 0px; color:#FFF;}
.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:#CCC;}
.footer-parts ul li a:hover{color:#FFF;}
.copyrights{ width:1240px; font-size:12px; background:#000; float:left; padding:15px 30px 15px 30px; color:#FFF; }
.copyrights-left{ width:940px; 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;}
.fa{ color:#FFF;}