Responsive Website Design: Responsive Template Gallery Website

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>responsive design</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="mainwrapper">
  <div class="menu">
    <div class="display">
      <div class="logo">
        <p>Ranker</p>
      </div>
      
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Tools</a></li>
      </ul>
    </div>
     
  </div>
  
  <div class="container-right">
    <h3>Featured Website</h3>
    
    
    
    <div class="featured">
      <div class="featured-icon"> <img src="http://curdweb.com/navin/click.com/images/slider/slider4.png"> </div>
      
      <div class="featured-article"> Responsive Website Designe using Html5,Css3,Jquery and others <a href="#">Read More</a> </div>
       
    </div>
     
    
    
    
    <div class="featured">
      <div class="featured-icon"> <img src="http://curdweb.com/navin/click.com/images/slider/slider4.png"> </div>
      
      <div class="featured-article"> Responsive Website Designe using Html5,Css3,Jquery and others <a href="#">Read More</a> </div>
       
      
    </div>
     
    
    
    
    <div class="featured">
      <div class="featured-icon"> <img src="http://curdweb.com/navin/click.com/images/slider/slider4.png"> </div>
      
      <div class="featured-article"> Responsive Website Designe using Html5,Css3,Jquery and others <a href="#">Read More</a> </div>
       
    </div>
    
    
    <h3>Recent Works</h3>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Web Application</a></li>
      <li><a href="#">Logo Design</a></li>
      <li><a href="#">Content Writing</a></li>
    </ul>
  </div>
  
  <div class="header">
    <p>Website Gallery</p>
  </div>
  
  
  <div class="container-block"> 
    
    <div class="block-me"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://curdweb.com/navin/click.com/images/slider/slider4.png">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://curdweb.com/navin/click.com/images/slider/slider5.png">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://curdweb.com/navin/click.com/images/slider/slider4.png">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://curdweb.com/navin/click.com/images/slider/slider3.png">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
    
    <div class="block-me"> <img src="http://curdweb.com/navin/click.com/images/slider/slider2.jpg">
      <div class="readmore">
        <p>Responsive Website Designe using Html5,Css3,Jquery and others</p>
        <a href="#">Read More</a> </div>
    </div>
     
    
  </div>
   
  
</div>

<div class="footer">
  <h3>Browse Template Gallery</h3>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery1.png"></a> </div>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery2.png"></a> </div>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery3.png"></a> </div>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery4.png"></a> </div>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery5.png"></a> </div>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery6.png"></a> </div>
  <div class="footer-block"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/gallery7.png"></a> </div>
</div>

</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#333333;
}
.mainwrapper {
 padding:10px;
 margin:auto;
 background:#ddd;
 overflow: auto;
}
.menu {
 padding:20px;
 margin:auto;
 background:#2A3744;
 overflow: auto;
}
.menu ul {
 padding:0px;
 margin: 15px;
 float: left;
}
.menu ul li {
 list-style-type:none;
 display:inline;
 padding: 10px;
}
.menu ul li a {
 text-decoration:none;
 color:#CCCCCC;
}
.menu ul li a:hover {
 text-decoration:none;
 color:#FFFFFF;
}
.header {
 background:#FAFAFA;
 padding:20px;
 /*margin:auto;*/
  width: 70%;
}
.header p {
 margin:0px;
 padding:0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#2A3744;
}
.container-block {
 float:left;
 padding:20px;
 background:#FFFFFF;
 width: 70%;
}
.block-me {
 float:left;
 height:250px;
 width:194px;
 background:#333;
 margin: 10px;
}
.block-me img {
 margin:auto;
 width:100%;/*height:250px;*/
 }
.container-right {
 background:#EDF0F0;
 padding:10px;
 float:right;
 padding: 10px;
 width: 25%;
}
.container-right ul {
 margin: 9px;
 padding: 7px;
}
.container-right ul li {
 list-style-type:square;
 color:#2A3744;
}
.container-right ul li a {
 text-decoration:none;
 color:#333333;
 line-height: 22px;
}
.container-right ul li a:hover {
 text-decoration:none;
 color:#0099FF;
}
.display {
 /*background:#333333;*/
 height: 50px;/* overflow: auto;*/
 }
.logo {
 float: left;
 width: 78px;
}
.logo p {
 color:#CCCCCC;
 font-weight:bold;
 font-family: Verdana;
}
.featured {
 min-height:100px;
 padding:10px;
 margin: auto auto 4px;
 background:#FAFAFA;
}
.featured-icon {
 height:80px;
 width:80px;
 background:#CCCCCC;
 float:left;
 margin: 10px;
}
.featured-icon img {
 margin:auto;
 width:100%;
 height:100%;
}
.featured-article {
 float: left;
 padding: 10px;
 width: 56%;
}
.footer {
 padding:20px;
 margin:auto;
 background:#2A3744;
 overflow:auto;
}
.footer h3 {
 color:#fff;
 text-align:center;
 padding:0px;
 margin:0px;
}
.readmore {
 background: #333;
 padding: 10px;
 width: 173px;
}
.readmore p {
 color:#CCCCCC;
 font-family: caption;
}
.readmore a {
 color: #898989;
 text-decoration:none;
}
.readmore a:hover {
 color:#00CCFF;
 text-decoration:none;
}
.footer-block {
 background: #ccc;
 float: left;
 height: 108px;
 margin: 10px;
 width: 152px;
}
.footer-block img {
 margin:auto;
 width:100%;
 height:100%;
}

/*Responsive code place here*/
@media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .header {
 background: #fafafa;
 margin: auto;
 padding: 20px;
 width: 86%;
}
.container-block {
 background: #ffffff;
 float: none;
 margin: auto;
 padding: 20px;
 width: 86%;
 overflow: auto;
}
 .container-right {
 background: #edf0f0;
 float: none;
 margin: auto;
 padding: 10px;
 width: 93%;
}
.featured-article {
 float: left;
 padding: 4px;
 width: 55%;
}
 .block-me {
 background: #333 none repeat scroll 0 0;
 float: none;
 height: 250px;
 margin: auto auto 10px;
 width: 194px;
}
.footer-block {
 background: #ccc none repeat scroll 0 0;
 float: none;
 height: 108px;
 margin: auto auto 10px;
 width: 152px;
}
}

Monday 22 June 2015

Responsive Template Gallery Website

Create index.html

Create style.css

No comments:

Post a Comment