Hitam Putih Kehidupan
Resize the browser window to see the responsive effect.![](https://images.pexels.com/photos/285286/pexels-photo-285286.jpeg?auto=compress&cs=tinysrgb&h=350)
![](https://images.pexels.com/photos/167964/pexels-photo-167964.jpeg?auto=compress&cs=tinysrgb&h=350)
![](https://maxcdn.icons8.com/app/uploads/2017/08/black-and-white-photography.jpg)
![](https://cdn.mos.cms.futurecdn.net/5PMe5hr8tjSS9Nq5d6Cebe.jpg)
![](https://images.pexels.com/photos/279/black-and-white-branches-tree-high.jpg?auto=compress&cs=tinysrgb&h=350)
![](https://www.thephotoargus.com/wp-content/uploads/2016/04/BW9.jpg)
![](https://www.creativelive.com/blog/wp-content/uploads/2015/12/photo-1440631374394-b506a0b943fc-620x372.jpeg)
![](https://i1.wp.com/digital-photography-school.com/wp-content/uploads/2007/02/black-and-white-tips.jpg?resize=350%2C211&ssl=1)
![](https://images.pexels.com/photos/57905/pexels-photo-57905.jpeg?auto=compress&cs=tinysrgb&h=350)
![](https://create.adobe.com/content/dam/2018/03/black-and-white-photographers-on-instagram/soyboytoy.jpg)
![](https://picturecorrect-wpengine.netdna-ssl.com/wp-content/uploads/2016/02/Black-and-white-beach-570x377.jpg)
![](https://cdn.iphonephotographyschool.com/wp-content/uploads/iPhone-Photos-Black-And-White-12.jpg)
![](https://maxcdn.icons8.com/app/uploads/2017/08/black-and-white-monochrome.jpg)
![](https://mymodernmet.com/wp/wp-content/uploads/2017/11/black-and-white-photography-jason-m-peterson-16.jpg)
![](https://udemy-images.udemy.com/course/750x422/677874_2cad_9.jpg)
![](https://www.top13.net/wp-content/uploads/2016/09/mysterious-cats-photography-cover.jpg)
![](https://i.imgur.com/jrfWJ2f.jpg)
![](https://i.pinimg.com/736x/f1/1b/41/f11b4107022db8fe5bac19000fe0748d--ocean-photos-editorial-photography.jpg)
![](https://iso.500px.com/wp-content/uploads/2015/12/bwcover.jpg)
![](https://i.imgur.com/iOa6QFc.jpg)
![](https://maxcdn.icons8.com/app/uploads/2017/08/black-and-white-girl.jpg)
![](https://www.thephotoargus.com/wp-content/uploads/2016/04/BW6.jpg)
1. Dashboard → Layout / Post → HTML
2. Copy dan paste code ni
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
</div>
<div class="column">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
</div>
<div class="column">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
</div>
<div class="column">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
<img src="URL IMAGE" style="width:100%">
</div>
</div>
</body>
3. Korang just adjust apa yang patut okay.
0 Comments
Terima kasih sudi baca artikel ini. Sila berikan komen anda. Jemput follow blog ini ye!