Responsive Website Design: Responsive Art Gallery Template

Create only index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>template</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
<style>
body {
 background:#333333;
}
.main_wrapper {
 background:#1A1A1A;
 margin:auto;
 padding:10px;
 overflow:auto;
}
.main_header {
 margin:auto;
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0 ); /* IE6-9 */
}
.m10 {
 margin:auto;
 padding:10px;
 text-align:center;
}
.red {
 color: #990000;
 font-family: georgia;
 font-size: 26px;
 font-style: italic;
 font-weight: bold;
 text-shadow: 1px 1px 9px #fff;
}
.blue {
 color:#0099FF;
 font-family: georgia;
 font-size: 26px;
 font-style: italic;
 font-weight: bold;
 text-shadow: 1px 1px 9px #fff;
}
.myblock_container {
 margin:auto;
 padding:10px;
 background:#000;
 overflow:auto;
}
.myblock {
 float:left;
 width: 31.6%;
 margin:10px;
 padding:10px;
 background:#ddd;
}
.myblock_img {
 height:400px;
 width:100%;
 margin:auto;
}
.myblock_img img {
 height:100%;
 width:100%;
 margin:auto;
}
.myblock_desc {
 margin:auto;
 padding:10px;
}
.myblock_desc p {
 text-align:left;
 color:#0099FF;
}
.myblock_button {
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: rgb(122,188,255); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(122, 188, 255, 1) 0%, rgba(96, 171, 248, 1) 44%, rgba(64, 150, 238, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(122, 188, 255, 1)), color-stop(44%, rgba(96, 171, 248, 1)), color-stop(100%, rgba(64, 150, 238, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(122, 188, 255, 1) 0%, rgba(96, 171, 248, 1) 44%, rgba(64, 150, 238, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(122, 188, 255, 1) 0%, rgba(96, 171, 248, 1) 44%, rgba(64, 150, 238, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(122, 188, 255, 1) 0%, rgba(96, 171, 248, 1) 44%, rgba(64, 150, 238, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(122, 188, 255, 1) 0%, rgba(96, 171, 248, 1) 44%, rgba(64, 150, 238, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
 text-align:center;
 font-weight:bold;
 color:#000;
 width:44%;
 float:left;
 margin:10px;
 cursor:pointer;
}
.myblock_button:hover {
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: rgb(64,150,238); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(64, 150, 238, 1)), color-stop(100%, rgba(64, 150, 238, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
}
.myblock_button a {
 text-decoration:none;
 color:#000;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
.myblock {
 float: none;
 margin: 10px auto;
 overflow: auto;
 padding: 10px;
 width: 100%;
}
.myblock_button {
width: 42%;
}
}
</style>
</head>
<body>
<div class="main_header">
  <div class="m10"> <span class="red">Art</span> <span class="blue">Gallery</span></div>
</div>

<div class="main_wrapper">
  <div class="myblock_container">
    <div class="myblock">
      <div class="myblock_img"> <img src="img/1.jpg" alt=""/> </div>
      
      <div class="myblock_desc">
        <p> Art Gallery Collections</p>
      </div>
      
      <div class="myblock_button" data-toggle="modal" data-target="#block1"> Demo </div>
      
      <div class="myblock_button"> <a href="img/1.jpg" target="_blank">Download</a> </div>
      
    </div>
    
    <div class="myblock">
      <div class="myblock_img"> <img src="img/2.jpg" alt=""/> </div>
      
      <div class="myblock_desc">
        <p> Art Gallery Collections</p>
      </div>
      
      <div class="myblock_button" data-toggle="modal" data-target="#block2"> Demo </div>
      
      <div class="myblock_button"> <a href="img/2.jpg" target="_blank">Download</a> </div>
      
    </div>
    
    <div class="myblock">
      <div class="myblock_img"> <img src="img/12.jpg" alt=""/> </div>
      
      <div class="myblock_desc">
        <p> Art Gallery Collections</p>
      </div>
      
      <div class="myblock_button" data-toggle="modal" data-target="#block3"> Demo </div>
      
      <div class="myblock_button"> <a href="img/12.jpg" target="_blank">Download</a> </div>
      
    </div>
    
    <div class="myblock">
      <div class="myblock_img"> <img src="img/4.jpg" alt=""/> </div>
      
      <div class="myblock_desc">
        <p> Art Gallery Collections</p>
      </div>
      
      <div class="myblock_button" data-toggle="modal" data-target="#block4"> Demo </div>
      
      <div class="myblock_button"> <a href="img/4.jpg" target="_blank">Download</a> </div>
      
    </div>
    
    <div class="myblock">
      <div class="myblock_img"> <img src="img/5.jpg" alt=""/> </div>
      
      <div class="myblock_desc">
        <p> Art Gallery Collections</p>
      </div>
      
      <div class="myblock_button" data-toggle="modal" data-target="#block5"> Demo </div>
      
      <div class="myblock_button"> <a href="img/5.jpg" target="_blank">Download</a> </div>
      
    </div>
    
    <div class="myblock">
      <div class="myblock_img"> <img src="img/6.jpg" alt=""/> </div>
      
      <div class="myblock_desc">
        <p> Art Gallery Collections</p>
      </div>
      
      <div class="myblock_button" data-toggle="modal" data-target="#block6"> Demo </div>
      
      <div class="myblock_button"> <a href="img/6.jpg" target="_blank">Download</a> </div>
      
    </div>
    
  </div>
  
</div>


<div class="modal fade" id="block1" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Art Gallery</h4>
      </div>
      <div class="modal-body">
        <div class="myblock_img"> <img src="img/1.jpg" alt=""/> </div>
        
        <div class="myblock_desc">
          <p> this is description block</p>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="block2" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Art Gallery</h4>
      </div>
      <div class="modal-body">
        <div class="myblock_img"> <img src="img/2.jpg" alt=""/> </div>
        
        <div class="myblock_desc">
          <p> this is description block</p>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="block3" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Art Gallery</h4>
      </div>
      <div class="modal-body">
        <div class="myblock_img"> <img src="img/12.jpg" alt=""/> </div>
        
        <div class="myblock_desc">
          <p> this is description block</p>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="block4" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Art Gallery</h4>
      </div>
      <div class="modal-body">
        <div class="myblock_img"> <img src="img/4.jpg" alt=""/> </div>
        
        <div class="myblock_desc">
          <p> this is description block</p>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="block5" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Art Gallery</h4>
      </div>
      <div class="modal-body">
        <div class="myblock_img"> <img src="img/5.jpg" alt=""/> </div>
        
        <div class="myblock_desc">
          <p> this is description block</p>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="block6" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Art Gallery</h4>
      </div>
      <div class="modal-body">
        <div class="myblock_img"> <img src="img/6.jpg" alt=""/> </div>
        
        <div class="myblock_desc">
          <p> this is description block</p>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Wednesday, 26 August 2015

Responsive Art Gallery Template

Create only index.html

No comments:

Post a Comment