Responsive Website Design: June 2015

Wednesday 24 June 2015

Responsive Travel Website Template

only you have to create index.html and style.css, js has msdn links so no need to create js, if you want to modify in js then download from given link, and you can modify as per your requirements

create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive web template</title>
<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
 width: 100%;
 margin: auto;
}
</style>

</head>
<body>
<div class="fixed-header">
  <div class="fixed-header-left"><a href="#"><span style="color:#fff"> Sign-up</span></a> </div>
  
  <div class="fixed-header-right"><a href="#"><span style="color:#fff"> Register</span></a> </div>
  
</div>

<div class="main-wrapper">
  <div class="main-menu">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header"> <a class="navbar-brand" href="#"><span style="color:#0099FF">Travel World</span></a> </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Places</a></li>
            <li><a href="#">Packages</a></li>
            <li><a href="#">New Offers</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  
  <div class="image-slider-preview">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      
      <div class="carousel-inner" role="listbox">
        <div class="item active"> <img src="http://curdweb.com/navin/click.com/images/slider/slider1.png" alt="image1">
          <div class="carousel-caption">
            <h3>Title1</h3>
            <p>The atmosphere in India has a touch of Florence and Venice.</p>
          </div>
        </div>
        <div class="item"> <img src="http://curdweb.com/navin/click.com/images/slider/slider2.jpg" alt="image2">
          <div class="carousel-caption">
            <h3>Title2</h3>
            <p>The atmosphere in India has a touch of Florence and Venice.</p>
          </div>
        </div>
        <div class="item"> <img src="http://curdweb.com/navin/click.com/images/slider/slider5.png" alt="image3">
          <div class="carousel-caption">
            <h3>Title3</h3>
            <p>Beatiful flowers in India, Crete.</p>
          </div>
        </div>
        <div class="item"> <img src="http://curdweb.com/navin/click.com/images/slider/slider4.png" alt="image4">
          <div class="carousel-caption">
            <h3>Title4</h3>
            <p>Beatiful flowers in India, Crete.</p>
          </div>
        </div>
      </div>
      
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  </div>
  
  <div class="tabbed-navigation">
    <div class="container">
      
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"> <a href="#home" role="tab" data-toggle="tab">
          <icon class="fa fa-home"></icon>
          Packages </a> </li>
        <li><a href="#profile" role="tab" data-toggle="tab"> <i class="fa fa-user"></i> Summer Specials </a> </li>
        <li> <a href="#messages" role="tab" data-toggle="tab"> <i class="fa fa-envelope"></i> India Tour </a> </li>
        <li> <a href="#settings" role="tab" data-toggle="tab"> <i class="fa fa-cog"></i> World Tour </a> </li>
      </ul>
      
      <div class="tab-content">
        <div class="tab-pane fade active in" id="home">
          <div class="tab-pane-left"> <img src="http://curdweb.com/navin/click.com/images/gallery1.png" alt="img1"/> </div>
          <div class="tab-pane-left">
            <h3>Packages</h3>
            <p>The atmosphere in India has a touch of Florence and Venice.</p>
          </div>
        </div>
        <div class="tab-pane fade" id="profile">
          <div class="tab-pane-left"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png" alt="img1"/> </div>
          <div class="tab-pane-left">
            <h3>Summer Specials</h3>
            <p>The atmosphere in India has a touch of Florence and Venice.</p>
          </div>
        </div>
        <div class="tab-pane fade" id="messages">
          <div class="tab-pane-left"> <img src="http://curdweb.com/navin/click.com/images/gallery3.png" alt="img1"/> </div>
          <div class="tab-pane-left">
            <h3>India Tour</h3>
            <p>The atmosphere in India has a touch of Florence and Venice.</p>
          </div>
        </div>
        <div class="tab-pane fade" id="settings">
          <div class="tab-pane-left"> <img src="http://curdweb.com/navin/click.com/images/gallery4.png" alt="img1"/> </div>
          <div class="tab-pane-left">
            <h3>World Tour</h3>
            <p>The atmosphere in India has a touch of Florence and Venice.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="footer">
    
    <div class="footer-block">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
      </ul>
    </div>
    
    <div class="footer-block">
      <ul>
        <li><a href="#">Aasam</a></li>
        <li><a href="#">Bangalore</a></li>
        <li><a href="#">Chandigdh</a></li>
        <li><a href="#">Delhi</a></li>
      </ul>
    </div>
    
    <div class="footer-block">
      <ul>
        <li><a href="#">Singapur</a></li>
        <li><a href="#">Thiland</a></li>
        <li><a href="#">Tokyo</a></li>
        <li><a href="#">Japan</a></li>
      </ul>
    </div>
    
    <div class="footer-block">
      <ul>
        <li><a href="#">Mysur</a></li>
        <li><a href="#">Otty</a></li>
        <li><a href="#">Kerla</a></li>
        <li><a href="#">Nandihills</a></li>
      </ul>
    </div>
    
    <div class="footer-block">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
      </ul>
    </div>
  </div>
  
</div>

<div class="footer-link-with-us">
  <p><a href="#">f</a> | <a href="#">t</a> | <a href="#">g+</a></p>
</div>
</body>
</html>

create style.css

@charset "utf-8";
body {
 background:#333;
}
.main-wrapper {
 padding:20px;
 background:#ccc;
 margin: 40px auto auto;
}
.fixed-header {
 background: #004080;
 display: inline-block;
 height: 39px;
 margin: -39px auto auto;
 padding: 10px;
 position: absolute;
 width: 100%;
}
.fixed-header-left {
 float:left;
 color:#ddd;
}
.fixed-header-right {
 float:right;
 color:#ddd;
 margin-right: 40px;
}
.main-menu {
/*margin:auto;
padding:20px;
background:#6E6E6E;*/
}
.image-slider-preview {
 margin:auto;
 padding:20px;
 background:#004080;
}
.tabbed-navigation {
 margin:auto;
 padding:20px;
 background:#575757;
}
/* Tab Navigation */
.nav-tabs {
 margin: 0;
 padding: 0;
 border: 0;
}
.nav-tabs > li > a {
 background: #333;
 border-radius: 0;
 box-shadow: inset 0 -8px 7px -9px rgba(0, 0, 0, .4), -2px -2px 5px -2px rgba(0, 0, 0, .4);
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
 background: #F5F5F5;
 box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .4), -2px -3px 5px -2px rgba(0, 0, 0, .4);
}
/* Tab Content */
.tab-pane {
 background: #ACACAC;
 box-shadow: 0 0 4px rgba(0, 0, 0, .4);
 border-radius: 0;
 /*text-align:justify;*/
    padding: 10px;
 overflow:auto;
}
.tab-pane-left {
 float:left;
 margin:10px;/*width:20%;
height:200px;*/
}
.tab-pane-left h3 {
 color:#004080;
}
.tab-pane-left p {
 color:#FFFFFF;
}
.footer {
 height: auto;
 margin: auto;
 overflow: auto;
 padding: 20px;
 background:#333;
}
.footer-block {
 float:left;
 width:216px;
 /*background:#ddd;*/
margin: 10px;
}
.footer-block ul {
}
.footer-block ul li {
 list-style-type:square;
 color:#0099FF;
}
.footer-link-with-us {
 margin:auto;
 background:#004080;
 padding:10px;
}
.footer-link-with-us p {
 text-align:center;
 color:#fff;
 font-size:18px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
 background-color: #004080!important;
 color: #fff;
}

/*for responsive design code is here*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .tab-pane-left {
 float: none;
 padding: 10px;
 text-align: center;
}
.footer-block {
 float: none;
 margin: auto;
 text-align: center;
 width: 100%;
}
.tab-pane-left img {
width:150px;
height:200px;
margin:auto;
}
}

Monday 22 June 2015

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;
}
}

Wednesday 17 June 2015

game station web template

you have to only create index.html and style.css file then copy and paste in as well, put the image as per required

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="#">Play Game Online</a></li>
<li><a href="#">   Gallery    </a></li>
<li><a href="#">     Buy     </a></li>
<li><a href="#">  Register  </a></li>
<li><a href="#">     Cart     </a></li>
</ul>
</div> 
</div> 
<div class="main-wrapper">
<div class="container-left">
<img src="6.png" height="262" width="871">
</div>
<div class="container-right">
<img src="red.png" height="314" width="295">
</div> 
<div class="container">
<div class="container-block">
<div class="hexagon">
<img src="img1.png">
</div> 
<div class="hexagon">
<img src="img1.png">
</div> 
<div class="hexagon">
<img src="img1.png">
</div> 
<div class="hexagon">
<img src="img1.png">
</div>

<div class="clear1">
<div class="hexagon">
<img src="img1.png">
</div>

</div>

</div> 
<div class="article">
<h2>Select the sticker to Play the Game</h2>
<p>Gamestation was a chain of UK retail shops selling used and new video games and was the second-largest specialist video game retailer in the UK until it was acquired by Game in 2007, a group which owns many different gaming stores throughout the UK and Europe. In March 2012 the Game Group went into administration and a number of Gamestation stores including the company's flagship store in Birmingham New Street were closed. Game and Gamestation were purchased from the administrators by OpCapita.

On 14 September 2012, it was announced that the Gamestation brand will disappear with all stores being rebranded as Game. On 18 November 2012, the Gamestation website closed and redirected to that of Game.</p>
<p>Gamestation was founded in 1993 in York and by 2002 it had 64 stores across the UK. In 2001/02 Gamestation was sold during the peak sales period of PlayStation 2 to American video rental giant Blockbuster who invested heavily in an aggressive store roll out program. This, coupled with competitive pricing subsidised by the buoyant video rental market of the time, elevated the chain to second highest market share in the UK games industry; behind Game.

2006 saw their American parent company file massive debts in the region of $560 million, leading to widespread speculation[by whom?] that the company was either rife to a take over or teetering on the edge of administration - however Gamestation was in fact still making healthy profits</p>
</div> 
</div>

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

Create style.css

@charset "utf-8";
body{
 background:#333;
}
.header{
 padding:12px;
 margin:auto;
}
.menu{
  background: #2a82cd;
    box-shadow: 23px 38px 64px 44px #ccc;
    margin: auto;
    width: 50%;
}
.menu ul{
 padding:0px;
 margin:0px;
}
.menu ul li{
 list-style-type:none;
 display:inline-block;
}
.menu ul li a{
 background:#2A82CD;
 text-decoration:none;
 color: #fff;
    margin-left: 20px;
    padding: 10px;
}
.menu ul li a:hover{
 background:#4A4A4A;
 box-shadow: 0 3px 0 0 #52ffa9;
}

.main-wrapper{
 background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

margin:auto;
 padding:20px;
 
}
.container{
 background: #f0f9ff; /* Old browsers */
background: -moz-linear-gradient(top,  #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

margin:auto;
 padding:10px;
 /*height:1000px;*/
}
.container-left{
 float:left;
 height:400px;
 width:300px;
 /*background:#000;*/
}
.container-right{
 float:right;
 height:400px;
 width:300px;
 /*background:#9C3;*/
}
 
.container-block{

height: 300px;
    margin: 40px auto auto;
    padding: 82px 10px 101px;
    width: 41%;
}
.clear{
 /*background: #333;*/
    /*clear: both;*/
    height: 100px;
    margin-left: 43px;
    padding: 20px;
  margin-top: 61px;
}
.clear1{
 /*background: #ccc;*/
    /*clear: both;*/
    height: 100px;
    margin-left: 103px;
    margin-top: -42px;
    padding: 20px;
}
.clear2{
 /*background: #ddd none repeat scroll 0 0;*/
    /*clear: both;*/
    height: 100px;
    margin-left: 162px;
    margin-top: -52px;
    padding: 20px;
}
/*hexagon code starts here*/
.hexagon {
 width: 100px;
 height: 55px;
 background: #002b84;
 position: relative;
 float:left;
 margin:10px;
 cursor:crosshair;
}
.hexagon:hover {
background: #333;
 
}
.hexagon img{
 height: 100%;
    
    margin-left: 13px;
    width: 71%;
}
.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 #257AC5;
}

.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 #257AC5;
}

.article{
 margin:auto;
  background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
padding:10px;
}
.article h2{
 background: #d0e4f7; /* Old browsers */
background: -moz-linear-gradient(top,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */

padding:10px;
}

Monday 15 June 2015

Responsive Fixed Navigation After Scroll

you have to create index.html only to get above screenshot as output. Jquery,minified file called(using google api), and css is written in index.html only.

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Navigation after scroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
header {
 height:150px;
 z-index:10;
}
.header-banner {
 background-color: #B0B0B0;
 background:url('http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 height: 100px;
 width: 100%;
}
header .logo {
 background-color: #fff;
 background-position: center top;
 background-repeat: no-repeat;
 border-radius: 50px;
 height: 95px;
 background:url('http://1.bp.blogspot.com/-8t9kSs6DivY/VXZ-SGVbY6I/AAAAAAAABL8/lYCOPdqz5Mk/s320/html5.png');
 position: absolute;
 top: 11px;
 width: 95px;
 text-align: center;
}
header h1 {
 position: absolute;
 color: #fff;
 display:inline-block;
}
.fixed-header {
 position: fixed;
 top:0;
 left:0;
 width: 100%;
}
nav {
 width:100%;
 height:60px;
 background: #0099FF;
 postion:fixed;
 z-index:10;
}
nav ul {
 list-style-type: none;
 margin: 0 auto;
 padding-left:0;
 text-align: center;
 width: 100%;
}
nav ul li {
 display: inline-block;
 line-height: 60px;
 margin-left: 10px;
}
nav ul li a {
 text-decoration: none;
 color: #fff;
}
.content {
 width: 960px;
 max-width: 100%;
 margin:0 auto;
 padding-top: 60px;
}
.content p {
 text-align:justify;
}
body {
 color: #292f36;
 font-family: helvetica;
 line-height: 1.6;
}
</style>
<script type="text/javascript">
$(window).scroll(function(){
    if ($(window).scrollTop() >= 150) {
       $('nav').addClass('fixed-header');

}
    else {
       $('nav').removeClass('fixed-header');
     
    }
 
  
 
});
</script>
</head>
<body>
<header>
<div class="header-banner"> <a href="#" class="logo"></a> </div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<ul>
</nav>
</header>
<div class="content">
  <p>Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
    
    A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
    
    The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
    Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
    Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.</p>
  <p>Mobile first, unobtrusive JavaScript, and progressive enhancement
    "Mobile first", unobtrusive JavaScript, and progressive enhancement are related concepts that predate RWD.[citation needed] Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice is to create a basic web site and enhance it for smart phones and PCs, rather than rely on graceful degradation to make a complex, image-heavy site work on mobile phones.
    
    Progressive enhancement based on browser, device, or feature detection
    Where a web site must support basic mobile devices that lack JavaScript, browser ("user agent") detection (also called "browser sniffing") and mobile device detection are two ways of deducing if certain HTML and CSS features are supported (as a basis for progressive enhancement)—however, these methods are not completely reliable unless used in conjunction with a device capabilities database.
    
    For more capable mobile phones and PCs, JavaScript frameworks like Modernizr, jQuery, and jQuery Mobile that can directly test browser support for HTML/CSS features (or identify the device or user agent) are popular. Polyfills can be used to add support for features—e.g. to support media queries (required for RWD), and enhance HTML5 support, on Internet Explorer. Feature detection also might not be completely reliable; some may report that a feature is available, when it is either missing or so poorly implemented that it is effectively nonfunctional.</p>
  <p>Luke Wroblewski has summarized some of the RWD and mobile design challenges, and created a catalog of multi-device layout patterns. He suggests that, compared with a simple RWD approach, device experience or RESS (responsive web design with server-side components) approaches can provide a user experience that is better optimized for mobile devices. Server-side "dynamic CSS" implementation of stylesheet languages like Sass or Incentivated's MML can be part of such an approach by accessing a server based API which handles the device (typically mobile handset) differences in conjunction with a device capabilities database in order to improve usability. RESS is more expensive to develop, requiring more than just client-side logic, and so tends to be reserved for organizations with larger budgets. Google recommends responsive design for smartphone websites over other approaches.
    
    Although many publishers are starting to implement responsive designs, one ongoing challenge for RWD is that some banner advertisements and videos are not fluid. However, search advertising and (banner) display advertising support specific device platform targeting and different advertisement size formats for desktop, smartphone, and basic mobile devices. Different landing page URLs can be used for different platforms, or Ajax can be used to display different advertisement variants on a page.CSS tables permit hybrid fixed+fluid layouts.
    
    There are now many ways of validating and testing RWD designs, ranging from mobile site validators and mobile emulators to simultaneous testing tools like Adobe Edge Inspect.The Firefox browser and the Chrome console offer responsive design viewport resizing tools, as do third parties.</p>
</div>
</body>
</html>

Friday 5 June 2015

Responsive Dashboard Design

index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<header> Header </header>
<div class="main-wrapper">
  <div class="sidebar">
    <ul>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
    </ul>
  </div>
  
  <div class="main-container">
    <div class="main-container-padding">
      <div class="title-head">
        <h3 style="color:#3399FF">Dashboard</h3>
      </div>
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery1.png"> </div>
      
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png"> </div>
      
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery3.png"> </div>
      
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery4.png"> </div>
      
      <div class="container ex3">
        <h3>Modernizr</h3>
        <p>Modernizr is a JavaScript library which is designed to detect HTML5 and CSS3 features in various browsers. Since the specifications for both HTML5 and CSS3 are only partially implemented or nonexistent in many browsers, it can be difficult to determine which techniques are available for use in rendering a page, and when it is necessary to avoid using a feature or to load a workaround such as a shim to emulate the feature. Modernizr aims to provide this feature detection in a complete and standardized manner</p>
        <p>Modernizr uses feature detection, rather than checking the browser's property, to discern what a browser can and cannot do. It considers feature detection more reliable since the same rendering engine may not necessarily support the same things in two different browsers using that engine. In addition, some users change their user agent string to get around websites that block features for browsers with specific user agent settings, despite their browsers having the necessary capabilities.
          
          Modernizr offers tests for over 150 next-generation features, then creates a JavaScript object (named "Modernizr") that contains the results of these tests as boolean properties. It also adds classes to the HTML element based on what features are and are not natively supported.</p>
      </div>
      <div class="container">
        <h3>JQuery Mobile</h3>
        <p>jQuery Mobile is a touch-optimized web framework (also known as a mobile framework), more specifically a JavaScript library, currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.</p>
        <p>
        <li>Compatible with all major desktop browsers as well as all major mobile platforms, including Android, iOS, Windows Phone, Blackberry, WebOS, Symbian.</li>
        <li>Built on top of jQuery core so it has a minimal learning curve for people already familiar with jQuery syntax.</li>
        <li>Theming framework that allows creation of custom themes.</li>
        <li>Limited dependencies and lightweight to optimize speed.</li>
        <li>The same underlying codebase will automatically scale to any screen.</li>
        <li>HTML5-driven configuration for laying out pages with minimal scripting.</li>
        <li>AJAX-powered navigation with animated page transitions that provides ability to create semantic URLs through pushState.</li>
        <li>UI widgets that are touch-optimized and platform-agnostic.</li>
        </p>
      </div>
      <div class="myimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div>
      <p> Responsive web design (RWD)</p>
    </div>
    
  </div>
  
</div>

<footer> Footer </footer>
</body>
</html>

style.css

@charset "utf-8";
body {
 background:#333;
}
.main-wrapper {
 margin:auto;
 background:#ddd;
 padding:15px;
 overflow:auto;
}
header {
 padding:10px;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.sidebar {
 float:left;
 width:20%;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
}
.sidebar ul {
 padding:0px;
 margin:0px;
}
.sidebar ul li {
 display: block;
}
.sidebar ul li a {
 background: #333;
 color: #fff;
 display: block;
 margin: 2px;
 padding: 10px;
 text-align: center;
 text-decoration: none;
}
.sidebar ul li a:hover {
 box-shadow: 1px 2px 1px 2px #fcc;
}
.main-container {
 width:80%;
 background: rgb(254,255,255); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254, 255, 255, 1)), color-stop(100%, rgba(210, 235, 249, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0 ); /* IE6-9 */
 margin:auto;
 overflow:auto;
}
.main-container-padding {
 padding:10px;
}
footer {
 padding:10px;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.block {
 float:left;
 padding:10px;
 width:200px;
 height:150px;
 margin:9px;
 background:#0082ff;
}
.block img {
 width:100%;
 height:100%;
 margin:auto;
}
.container {
 float:left;
 padding:10px;
 width:435px;
 height:200px;
 margin: 3px 3px 10px;
 background: #7abcff;
 overflow:scroll;
 overflow-x:hidden;
 border: 6px solid #0082ff;
 border-radius: 10px;
}
.title-head {
 margin:auto;
 padding:10px;
 background: rgb(59,103,158); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(59, 103, 158, 1)), color-stop(50%, rgba(43, 136, 217, 1)), color-stop(97%, rgba(32, 124, 202, 1)), color-stop(97%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8', GradientType=0 ); /* IE6-9 */
 box-shadow: 2px 5px 7px #333;
}
.myimg {
 height: 200px !important;
 margin: 10px auto auto;
 overflow: hidden;
 width: 100%;
}
.myimg img {
 width:100%;
 margin:auto;
 height:100%;
}

/*for responsive css starts here*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .sidebar {
 margin:auto;
 width:100%;
}
 .main-container {
 width:100%;
 margin:auto;
}
 .container {
float: none;
 margin: 10px auto auto;
 padding: 2%;
 width: 92%;
}
 .block {
 float: none;
 height: 150px;
 margin: 10px auto auto;
 padding: 10px;
 width: 200px;
}
}