Responsive Website Design: 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;
}

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

Create style.css

No comments:

Post a Comment