Reference Websites
Hospital Website
  Source Code
  HTML Code
<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">

<!----- Start Header (or) Menu ------>
<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>&nbsp;</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>
<!----- End Header (or) Menu ------>


<!----- Start Slider (or) Banner ------>
<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>
<!----- End Slider (or) Banner ------>


<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>

<!----- Start Content ------>
<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 &amp; 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>
<!------ End Content ------->

<!------ Start Footer ------->
<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>&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>
            <li><a href="#">Terms &amp; 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> &nbsp; &nbsp;
            <a href="https://www.linkedin.com/in/free-time-learn-07598b143/" target="_blank"><i class="fa fa-linkedin"></i></a> &nbsp; &nbsp;
            <a href="https://twitter.com/freetimelearn" target="_blank"><i class="fa fa-twitter"></i></a> &nbsp; &nbsp;
            <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">
        &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>
<!------ End Footer ------->
<div class="clearfix"></div> 

</div>

</body>
</html>
  CSS Code ( style.css )
@charset "utf-8"; /****   Developed by http://www.freetimelearning.com/    *****/
*{
	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;}

/*********** Start Header (or) Menu **********/
.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;}
/*********** End Header (or) Menu **********/
	
/************* Start Slider (or) Banner *************/
.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;}
/************** End Slider (or) Banner *************/

/*************** Start Banner Bottom *****************/	
.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;}
/*************** End Banner Bottom *****************/	

/*************** Start Content *****************/	
.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;}
/************ End Content **************/

/************ Start Footer *****************/
.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;}
/*************** End Footer ***********/