<!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
Very good.
ReplyDeleteImprove CSS code more...