Reference Websites
Entertainment Website
  Start Coding
 Basic Structure
  HTML Code
<html>
<head>
<title>ENTERTAINMENT 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
body{ font-family:Arial, Helvetica, sans-serif; background:url(../images/bg.jpg); background-size:cover; 
background-attachment:fixed; background-position:center center; margin:0px auto !important;}
.main{ 
	width:1024px; margin:0px auto 20px;
	-webkit-box-shadow: 0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(255, 255, 255, 0.14), 0 1px 18px 0 rgba(255, 255, 255, 0.12), 0 3px 5px -1px rgba(255, 255, 255, 0.3) !important;
}
.p10_0{ padding:10px 0px;} .p20_0{ padding:20px 0px;}.p30_0{ padding:30px 0px;} 
.p40_0{ padding:40px 0px;} .p50_0{ padding:50px 0px;}
.clearfix{ clear:both;}
 Step 1 : Header & Menubar
Reference Image
  HTML Code
<div class="header">
	<div class="header-left"><a href="index.html"><img src="images/logo.png" width="350" height="80"></a></div>
    <div class="header-center">
    	
    </div>
    <div class="header-right" align="right">
    	<div class="header-right-top" align="right">
        	<div class="social-lins">
            	<ul>
                	<li><a href="#!"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#!"><i class="fa fa-linkedin"></i></a></li>
                    <li><a href="#!"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#!"><i class="fa fa-google-plus"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="header-right-bottom">
        	<ul>
                <li><a href="#!">Home</a></li>
                <li><a href="#!">About</a></li>
                <li><a href="#!">News</a></li>
                <li><a href="#!">Gallery</a></li>
                <li><a href="#!">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
  CSS Code
.header{ width:1000px; float:left; padding:10px 12px;}
.header-left{ width:400px; float:left; padding:0px;}
.header-right{ width:600px; float:left;}

.header-right-top{ width:600px; float:left; height:40px;}
.social-lins{ list-style:none;}
.social-lins ul{ list-style:none; padding-left:390px;}
.social-lins ul li{ padding:0px 0px; float:left;}
.social-lins ul li a{ font-size:20px; color:#FFF; padding:0px 10px;}
.social-lins ul li a:hover{ color:#CCC;}
.white{ color:#FFF; text-decoration:none;}
.white a{ color:#FFF; text-decoration:none;}
.white a:hover{ color:#CCC;}


.header-right-bottom{ width:600px; float:left;}
.header-right-bottom ul{ list-style:none; float:left; padding:0px;}
.header-right-bottom ul li{ text-transform:uppercase; text-align:center; float:left; padding:0px 30px;}
.header-right-bottom ul li a{ text-decoration:none; font-size:14px; color:#FFF;}
.header-right-bottom ul li a:hover{color:#CCC;}
 Step 2 : Slider
Reference Image
  HTML Code
<div class="slider">
	<div class="slider-form" align="center">
		<div class="glass">
        <form action="" method="post">
        	<input type="text" class="form" placeholder="Search Movie" /><button type="submit" class="search">SEARCH</button>
        </form>
        </div>
    </div>
</div>
  CSS Code
.slider{ width:1024px; background:url(../images/slider.jpg); height:270px; float:left; }
.slider-form{ padding:100px 0px 10px;}
.glass {width:800px; margin:0px 112px; background-color: rgba(255,255,255,.8); padding: 0;}
.form{ width:655px; padding:25px 30px 27px; height:20px; font-size:20px; border:1px solid #F30; background:none; color:#000; font-weight:bold;}
.search{ background:#F60; padding:16px 35px 15px; color:#FFF; font-size:17px; font-weight:bold; 
border:1px solid #F30; cursor:pointer;}
.search:hover{ background:#F30;}
 Step 3 : Content
Reference Image
  HTML Code
<div class="content">
	<div class="content-parts">
    	<img src="images/varma.png" width="220" height="215">
        <div class="content-parts-h4"><a href="#!" class="white"> R G V </a></div>
    </div>
    <div class="content-parts">
    	<img src="images/amir.png" width="220" height="215">
         <div class="content-parts-h4"><a href="#!" class="white"> Amir Khan </a></div>
    </div>
    <div class="content-parts">
    	<img src="images/aish.png" width="220" height="215">
         <div class="content-parts-h4"><a href="#!" class="white"> Aishwarya Rai </a></div>
    </div>
    <div class="content-parts">
    	<img src="images/madhavan.png" width="220" height="215">
         <div class="content-parts-h4"><a href="#!" class="white">Madhavan</a></div>
    </div>
</div>
  CSS Code
.content{ width:1024px; float:left;}
.content-parts{ width:220px; float:left; padding:50px 15px;}
.content-parts-h4{font-size:20px; padding:10px 0px; text-align:center;}
 Step 4 : Content Center
Reference Image
  HTML Code
<div class="content-center">
	<div class="content-center-h3">Lorem Ipsum is simply dummy text.</div>
    <div class="content-center-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.
    </div>
</div>
  CSS Code
.content-center{ width:1024px; float:left; background:url(../images/sarkar.jpg) no-repeat; padding:0px;
background-attachment:fixed; background-position:center center; background-size:cover;}
.content-center-h3{ font-size:36px; color:#FFF; padding:100px 100px 20px;}
.content-center-p{ color:#FFF; padding:10px 100px 100px; line-height:26px; font-size:15px; text-align:justify;}
 Step 5 : Content Bottom
Reference Image
  HTML Code
<div class="content-bottom">

<h1 class="white" align="center">LATEST MOVIES</h1>

<div class="content-bottom-parts">
	<div align="center"><img src="images/1.png" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">14-Apr-2018</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Book Now</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/2.png" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">12-May-2017</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Booking Close</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/3.png" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">12-Apr-2017</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Booking Close</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/4.jpg" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">25-Dec-2020</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Book Now</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/5.jpg" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">27-Apr-2018</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Book Now</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/6.jpg" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">25-Jan-2018</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Book Now</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/7.jpg" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">30-Mar-2018</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Book Now</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/8.jpg" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">28-Apr-2017</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Booking Close</a>
    </div>
</div>
<div class="content-bottom-parts">
	<div align="center"><img src="images/9.jpg" width="300" height="200"></div>
    <div class="content-bottom-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="content-bottom-date">Relese Date : <span class="content-bottom-date-inner">18-Oct-2017</span></div>
    <div class="content-bot-buttons">
    	<a href="#!" class="content-bottom-btns">Details</a>
    </div>
    <div class="content-bot-buttons" align="right">
    	<a href="#!" class="content-bottom-btns">Booking Close</a>
    </div>
</div>

</div>
  CSS Code
.content-bottom{ width:1000px; float:left; padding:30px 12px;}
.content-bottom-parts{ width:302px; float:left; margin:14px; border:1px solid #999; padding-bottom:10px;}
.content-bottom-date{color:#F30; font-style:italic; font-size:14px; font-weight:600; padding:0px 5px 10px;}
.content-bottom-date-inner{color:#F60; font-style:italic; font-size:13px; font-weight:600; padding:0px 5px 20px;}
.content-bottom-p{ color:#FFF; padding:10px 5px; float:left; line-height:26px;}
.content-bot-buttons{ width:150px; float:left; padding-top:10px;}
.content-bottom-btns{ background:#FFF; color:#0099da; border-radius:2px; padding:4px 10px; 
text-decoration:none; margin:0px 5px;}
.content-bottom-btns:hover{ background:#CCC; color:#000;}
 Step 6 : Footer
Reference Image
  HTML Code
<div class="footer">
	<div class="footer-parts">
    	<div class="footer-parts-h4">Lorem Ipsum</div>
        <div class="footer-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 printer took a galley of type and scrambled it to make a type specimen book.</div>
        <div class="footer-social-links">
            <ul>
                <li><a href="#!"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#!"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="#!"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#!"><i class="fa fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="footer-parts">
    	<div class="footer-parts-h4">Lorem Ipsum</div>
        <div class="footer_center_links">
        	<ul>
            	<li><a href="#!">Latest Movies</a></li>
            	<li><a href="#!">2017 National Award Movies</a></li>
                <li><a href="#!">2017 Nandi Award Movies</a></li>
                <li><a href="#!">Services</a></li>
                <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>
    <div class="footer-parts">
    	<div class="footer-parts-h4">Feedback</div>
    	<div class="footer-right">
    	<form action="" method="post">
        	<input type="text" class="footer-form" placeholder="Name" />
            <input type="text" class="footer-form" placeholder="Email Id" />
            <textarea cols="" rows="3" class="footer-form" placeholder="Message"></textarea>
            <input type="submit" value="SUBMIT" name="" class="footer_btn"/>
        </form>
        </div>
    </div>
</div>

<div class="footer-bottom">
	<div class="white">&copy; <script language="javascript" type="text/javascript">document.write(new Date().getFullYear());</script>. All rights reserved by <a href="http://www.freetimelearning.com/" target="_blank">Free Time Learn</a>.</div>
</div>
  CSS Code
.footer{ width:1024px; float:left; padding:30px 0px 20px; border-top:1px solid #333; background-color: rgba(0,0,0,.3);}
.footer-parts{ width:300px; float:left; padding:0px 15px 0px 25px;}
.footer-parts-h4{ font-size:18px; color:#FFF; float:left; padding:10px 0px 5px;}
.footer-parts-p{ color:#FFF; padding:15px 0px; float:left; line-height:26px; text-align:justify;}
.footer-social-links{ list-style:none;}
.footer-social-links ul{ list-style:none; padding:0px;}
.footer-social-links ul li{ padding:0px 0px; float:left;}
.footer-social-links ul li a{ font-size:20px; color:#FFF; padding:0px 10px 0px 0px;}
.footer-social-links ul li a:hover{ color:#CCC;}

.footer_center_links{ width:315px; list-style:none; float:left;}
.footer_center_links ul{ list-style:none; padding:0px;}
.footer_center_links ul li{ padding:5px 0px; font-size:14px;}
.footer_center_links ul li a{ color:#FFF; text-decoration:none; padding:5px 0px;}
.footer_center_links ul li a:hover{ color:#CCC;}

.footer-right{ width:315px; float:left; margin-top:10px;}
.footer-form{ width:300px; padding:10px; border-radius:2px; color:#FFF; background:none; border:1px solid #FFF; margin:5px 0px 10px;}
.footer_btn{ width:300px; background:#FFF; color:#000; padding:7px 30px; cursor:pointer; font-size:16px; 
margin:5px 0px; border:none; border-radius:2px;}
.footer_btn:hover{ background:#CCC;}

.footer-bottom{ width:1024px; float:left; padding:15px 0px; text-align:center; background-color: rgba(0,0,0,.6);}