Reference Websites
Hospital Website
  Start Coding
 Basic Structure
  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">


</div>

</body>
</html>
  CSS Code
*{
	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;}
 Step 1 : Header and Menu
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 2 : Slider (or) Banner
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 3 : Slider Bottom
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 4 : Content
Reference Image
  HTML Code
<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>
  CSS Code
.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;}
 Step 5 : Footer Part
Reference Image
  HTML Code
<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>
  CSS Code
.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;}