Artikel Dengan Gambar

06 Juni 2023

Halo pembaca semua, kali ini Saya akan memberikan materi membuat artikel dengan gambar yang responsif.

Persiapan

Buat kode Html nya seperti contoh di bawah ini, Sebaiknya Anda buat dengan mengetik nya secara langsung mengikuti seperti di bawah ini agar Anda lebih dapat memahami fungsi fungsi apa saja yang telah Anda buat. Namun jika Anda malas silahkan kopi paste saja ya.

<div class="container">
  <div class="post">
    <div class="img">
      <img alt="Kotak Uang" src="https://dl.dropboxusercontent.com/s/vo4jxqki7pp86br/demo-gambar-kotak-uang.png"/>
    </div>
    <div class="box">
      <h2>Kotak Uang</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="post alt">
    <div class="img">
      <img alt="Cerobong" src="https://dl.dropboxusercontent.com/s/ymtgriatx8apjmv/demo-gambar-cerobong-asap.png"/>
    </div>
    <div class="box">
      <h2>Cerobong</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="post">
    <div class="img">
      <img alt="Pesawat" src="https://dl.dropboxusercontent.com/s/15lj7s9h4q3qk68/demo-gambar-pesawat.png"/>
    </div>
    <div class="box">
      <h2>Pesawat</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="post alt">
    <div class="img">
      <img alt="Restoran" src="https://dl.dropboxusercontent.com/s/ju96q2wq1ilqq91/demo-gambar-restoran.png"/>
    </div>
    <div class="box">
      <h2>Restoran</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

Selanjutnya kita tambahkan kode Css agar tampilannya menjadi seperti yang Kita inginkan.

Berikut adalah kode Css nya.

* {
  margin: 0;
  padding: 0;
}

.container {
  font-family: 'Lato' , sans-serif;
}
.post {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  background: #ddd;
}
.alt {
  background: #c8e0dd;
  flex-direction: row-reverse;
}
.img {
  width: 300px;
  display: flex;
  justify-content: center;
}
.img img {
  width: 150px;
  height: 150px;
}
.box {
  max-width: 300px;
  text-align: center;
}
.box h2 {
  line-height: 1.5;
  letter-spacing: 3px;
}
.box p {
  line-height: 1.5;
}
@media (max-width: 500px) {
  .post {
    flex-direction: column;
  }
}

Setelah Anda membuat kode di atas dan menyimpan nya dengan benar, maka saat di tampilkan pada halaman browser akan menjadi seperti di bawah ini.

See the Pen Daftat Artikel 1- by Firmansyah (@firmansyahbio) on CodePen.

Penjelasan

Pada kode di atas menampilkan sebuah artikel dengan gambar yang responsif mengikuti ukuran layar. Hal pertama Saya membuat sebuah elemen container yang menjadi pembungkus semua artikel.

Lalu Saya buat lagi sebuah elemen post yang terdapat dalam elemen container.

Sekian tutorial dari Saya, Sedikit banyak nya semoga bermanfaat untuk Anda pembaca semua, Terimakasih.