Saturday, 26 October 2019

Photo Gallery image Using HTML&CSS




<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;

 }

 body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
  border: 5px solid green;
  border-radius: 25px;
}

 .main {
  max-width: 1000px;
  margin: auto;
  padding: 0px;

   
}

 .row {
  margin: 8px -16px;
}

 .row1,
.row1 > .column {
  padding: 0px;
}

 .column {
  float: left;
  width: 25%;
}

 .row1:after {
  content: "";
  display: table;
  clear: both;
}

 .content {
  background-color: white;
  padding: 10px;
  border: 2px solid green;
  border-radius: 25px;
  
}

 @media screen and (max-width: 900px) {
  .column {
    width: 50%;
    border: 5px solid white;
  }
}

 @media screen and (max-width: 600px) {
  .column {
    width: 80%;
    border: 5px solid white;
    
  }
}
</style>
</head>
<body>

 <div class="main">
<hr>

 <div class="row1">
  <div class="column">
    <div class="content">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVI4aTW308Yx0cnP7XLKv0m9MXMlGO-b1OyAjcvnaiTvzJStCy&s" alt="Mountains" style="width:100%">
   
   
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://blog.murrayscheese.com/wp-content/uploads/2014/10/cider-background.jpg" alt="Lights" style="width:93%">
   
   
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRb_S2ZheNz1aeBjzoMYuCqZZU_I6dDQFSZDlPk2ee3Xn-_jRPe&s" alt="Nature" style="width:100%">
   
   
    </div>
  </div>
  <div class="column">
    <div class="content">
    <img src="http://www.aljanh.net/data/archive/img/1968920109.jpeg" alt="Mountains" style="width:100%">
   
   
    </div>
  </div>
</div>

 <div class="content">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWmEBKWII02BINA2WV8VjuXollypMzyUIB0cde08LWCE4arJmE&s" alt="Bear"style="width:100%" >
</div>

 </div>

 </body>
</html>


RUN CODE


1 comment: