Responsive Website Design: Responsive Website template

Code of abv template

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Website template</title>
<style>
body{

}
/*----------------------------------------------------Top Fixed header------------------------------------------------------------*/
.banneroo {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #e3cb4b;
background: #333;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
opacity: 0.94;
}

.banneroo h1 {
/*    line-height: 60px;*/
text-align:center;
color:#000000;
text-shadow: 1px 1px 1px #ccc;
}

.go{
width:200px;
height:100px;
background:#999999;
margin:auto;
box-shadow: 3px 3px 10px 5px #000;
}
/*-------------------------------------------------------Main container----------------------------------------------------------*/

.boxo1 {
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 14px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

.boxo1:before, .boxo:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.boxo1:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.boxo {
  position: relative;
  width: 60%;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 2em 1.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
}

.boxo:before, .boxo:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%; 
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7); 
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.boxo:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.boxo p{
font-size:40px;
text-align:center;
}
.boxo p:after{
content:"css3";
font-size:20px;
font-style:italic;
color:#666666;
padding:10px;
}
.boxo p::before{
content:"html5";
font-size:20px;
font-style:italic;
color:#666666;
padding:10px;
}
/*--------------------------------------------------Buttons------------------------------------------------------*/
.blues {
color: #fff;
/*width: 190px;
height: 35px;*/
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 11px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}
.blues h5{
color: #3284d7;
    font-size: 23px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px;
    text-align: center;
    text-shadow: 1px 1px 0 #330b33;
}
.blues h5:hover{
color: #33FFFF;
    font-size: 23px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px;
    text-align: center;
    text-shadow: 1px 1px 0 #330b33;
}

.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}

.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}

/*------------------------------------------------Form format--------------------------------------------------------*/

.formwrap { display: block; margin-bottom: 15px; }
.formwrap label { 
display: inline-block; 
width: 80px; 
font-size: 11px; 
font-weight: bold; 
color: #444; 
font-family: Arial, Tahoma, sans-serif; 
}

.formwrap .shadowfield {
position: relative;
width: 100%;

font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930; 
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}

/*------------------------------------image flip effect----------------------------------------- */
.newabc{
background:#333;
padding:10px;
margin:auto;
}
.mg-flip-container {
  perspective:1000px;
  margin:auto;
}
.mg-flip-container:hover .mg-flip-content,
.mg-flip-container.hover .mg-flip-content {
  transform:rotateY(180deg);
}
.mg-flip-container,.front-side,.back-side {
  width: 200px;
  height: 200px;
}
.mg-flip-content {
  transition:.6s; /* Flip duration */
  transform-style:preserve-3d;
  position:relative;
}
.front-side,
.back-side {
  backface-visibility:hidden;
  position:absolute;
  top:0;
  left:0;
}
.front-side {
  z-index:2;
  transform:rotateY(0deg);
}
.back-side {
  transform:rotateY(180deg);
}

/*---------------------------------------------second image hover effect(zoom-in)-----------------------------------------------*/
.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%;
 }
}
</style>
</head>

<body>
<div class="banneroo">
<h1>
Welcome To HTML5</h1>
</div>
<div class="boxo">
<div class="mg-flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="mg-flip-content">
    <div class="front-side">
     <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="front" width="200" height="200" class="aligncenter size-full wp-image-3079" />
    </div>
<div class="back-side">
      <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="back" width="200" height="200" class="aligncenter size-full wp-image-3078" />
    </div>
</div>
</div>
</div>
<div class="boxo1">
<form class="formwrap">
<label class="formwrap">Name</label> <input type="text" class="shadowfield" placeholder="name"><br>
<label class="formwrap">Password</label> <input type="password" class="shadowfield" placeholder="Password">
<div class="blues">
<h5>
SUBMIT</h5>
</div>
</form>
</div>
<div class="boxo">
<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 class="boxo">
<p>
Web design and development</p>
</div>
</body>
</html>

Friday 27 March 2015

Responsive Website template

Code of abv template

No comments:

Post a Comment