Responsive Website Design: Responsive-Template

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive-Template</title>
<link rel="stylesheet" href="style.css" />
</head>

<nav>
 <ul>
  <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Portfolio</a></li>
  
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

</div> 
</div> 
<div class="banner">
<img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" />
</div>

<div class="artblock_wrapper">

<div class="left-col">

<div class="hexagon">
<p><a href="#"> About</a></p>
</div>

<div class="hexagon">
<p><a href="#">UX</a></p>
</div>

<div class="hexagon">
<p><a href="#">Software</a></p>
</div>

<div class="hexagon">
<p><a href="#">Design</a></p>
</div>

<div class="hexagon">
<p><a href="#">Development</a></p>
</div>

<div class="hexagon">
<p><a href="#">UI</a></p>
</div>

</div>

<div class="image-zoom-container">
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>Place</h3>
   </span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" />
  </a>
 </div>
 
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>Where</h3>
   </span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" />
  </a>
 </div>
 
 <div class="zoom-container">
  <a href="#">
   <span class="zoom-caption">
    <h3>Peace</h3>
   </span>
   <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" />
  </a>
 </div>
 
</div>

</div>

</div>

<div class="footer3">
<div class="footer-block">
<div class="footer-block1">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ul>
</div>
<div class="right-side">
<h1>DBMS</h1>
</div>
</div>

<div class="footer-block">
<div class="footer-block1">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ul>
</div>
<div class="right-side">
<h1>ORACEL</h1>
</div>
</div>
<div class="footer-block">
<div class="footer-block1">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Content</a></li>
</ul>
</div>
<div class="right-side">
<h1>PL-SQL</h1>
</div>
</div>

</div>

</div> 
</body>
</html>

style.css

@charset "utf-8";
body{
background:#333333;
}
.mainwrapper{
margin:auto;
padding:10px;
border:3px solid #999999;
}
.header{
padding:20px;
background:#999999;
}
.menu{
/*background:#333;*/
/*padding: 10px;
box-shadow: 0 19px 10px #3c3333;*/

}
/*------------menu */
nav {width:960px;height: 79px;margin: 0 auto 15px auto;
/*background:#333333;
border-radius: 5px;
border: 1px solid #355806; */
}
nav ul {list-style: none;margin: 0;padding: 0;}
nav ul li 
{
position: relative;
float: left;

background: #222222;
margin-left: 4px;
margin-right:4px;
padding: 15px;
margin-top: 10px;
    }
nav ul li:hover {background:#666666;}
nav ul li a {font-size: 13px; line-height:14px;color: #ffffff;display: block;padding: 6px 10px 6px 10px;margin-bottom: 5px;z-index: 6;position: relative;font-weight:bold;}
nav ul li:hover a{}

/*menu responsive*/

@media only screen and (min-width: 768px) and (max-width: 959px) {
 nav{width:100%;}
}

@media only screen and (max-width: 767px) {
 
 nav {width:100%;background:none;height:auto;}
 nav ul li {float: none;text-align:center;padding: 0px; }
 
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
 
}

.banner{
width:100%;
margin:auto;
}
.banner img{
margin:auto;
width:100%;
}

.artblock_wrapper{
padding:20px;
background:#999999;
margin:auto;
overflow:auto;
}
.left-col{
background:#333;
    
    box-shadow: 1px 1px 1px 7px #ccc;
    margin: auto auto 20px;
    overflow: auto;
   
    width: 100%;
}
@media (max-width: 767px) {
 .left-col {
  width: 100%;
 }
}
 
@media (max-width: 480px) {
 .left-col {
  width: 100%;
 }
}
/*----------------------------------------hexagon code here---------------------------------------*/

.hexagon {
 width: 100px;
 height: 55px;
 background: #CCCCCC;
 position: relative;
 margin:48px;
 float: left;
}

@media (max-width: 767px) {
 .hexagon{
 margin: 56px 47px 33px 29px;
 }
}
 
@media (max-width: 480px) {
 .hexagon{
  margin: 56px 47px 33px 29px;
 }
}

.hexagon:before {
 content: "";
 position: absolute;
 top: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid #ddd;
}
.hexagon:after {
 content: "";
 position: absolute;
 bottom: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid #ddd;
}
.hexagon p{
text-align:center;
}
.hexagon:hover{
background:#666666;
color:#FFFFFF;
}
.hexagon:hover:before {
 content: "";
 position: absolute;
 top: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid #fff;
}
.hexagon:hover:after {
 content: "";
 position: absolute;
 bottom: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid #fff;
}

/*---------------------------------------------image mouse hover effect------------------------------*/

.image-zoom-container {
 list-style: none;
 font-size: 0px;
}
.zoom-container {
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 33.33%;
 font-size: 16px;
 font-size: 1rem;
 border: 1px solid #fff;
 vertical-align: top;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.zoom-container img {
 display: block;
 width: 100%;
 height: auto;
 -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 background: rgba(0, 0, 0, .5);
 -webkit-transition: all .5s ease; /* Safari and Chrome */
        -moz-transition: all .5s ease; /* Firefox */
        -ms-transition: all .5s ease; /* IE 9 */
        -o-transition: all .5s ease; /* Opera */
        transition: all .5s ease;
}
.zoom-container .zoom-caption h3 {
 display: block;
 text-align: center;
 font-family: 'Source Sans Pro', sans-serif;
 font-size: 1.5em;
 font-weight: 900;
 letter-spacing: -1px;
 text-transform: uppercase;
 color: #fff;
 margin: 23% 0 0;
 padding: 10px 0;
 border-top: 5px solid #333333;
 border-bottom: 5px solid #000000;
}
.zoom-container:hover img {
 -webkit-transform:scale(1.25); /* Safari and Chrome */
        -moz-transform:scale(1.25); /* Firefox */
        -ms-transform:scale(1.25); /* IE 9 */
        -o-transform:scale(1.25); /* Opera */
         transform:scale(1.25);
}
.zoom-container:hover .zoom-caption {
 background: none;
}
 
@media (max-width: 767px) {
 .zoom-container {
  width: 50%;
 }
}
 
@media (max-width: 480px) {
 .zoom-container {
  width: 100%;
 }
}

.footer1{
padding:10px;
background:#ccc;
overflow:auto;
}
.footer2{
padding:10px;
background:#FFFFFF;
overflow:auto;
}
.footer3{
padding:10px;
background:#ccc;
overflow:auto;
}
.footer-block{
background:#999999;
    float: left;
    margin: 5px;
    opacity: 0.82;
    width: 290px;
}
@media (max-width: 767px) {
 .footer-block {
  width: 50%;
 }
}
 
@media (max-width: 480px) {
 .footer-block {
  width: 100%;
 }
}
.footer-block1{
float:left;
width:50%;
}

.footer-block1 ul{
padding: 10px;
}
.footer-block1 ul li{
 line-height: 26px;
list-style-type: none;
}
.footer-block1 ul li a{
text-decoration:none;
/*background:#CCCCCC;*/
color:#000000;
}
.footer-block1 ul li a:hover{
text-decoration:none;
background:#333333;
color:#FFFFFF;
}
.right-side{
background:#333333;
    float: left;
    height: 200px;
    width: 50%;
}
.right-side h1{
margin-top: 80px;
text-align: center;
 }

Wednesday, 1 April 2015

Responsive-Template

Index.html

style.css

No comments:

Post a Comment