Membuat post artikel responsive

30 November 2022

Image

Di bawah ini adalah Kode CSS yang akan di gunakan, simpan pada file CSS

Html 
.my_card {
  display: flex;
  border-radius: 5px;
  margin-bottom: 15px; 
  }
.left {
  flex-direction: row;
  }
.right {
  flex-direction: row-reverse;
  }
 
.img_card img {
  max-width: 100%;
}
.text_card {
  padding-left: 10px;
  box-sizing: border-box;
  }
@media (max-width: 500px) {
  .my_card {
  display: inline-block;
  }
}

Berikut adalah Kode HTML yang akan di gunakan sebagai kerangka artikel.

Html 
<div class="my_card left">
  <div class="img_card">
    <img src="https://dummyimage.com/1000x500/1bc/fff"/>
  </div>
  <div class="text_card">
    <h1>Lorem Ipsum 1</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat pulvinar ipsum. Nullam tristique placerat porta. Aliquam erat volutpat. In hac habitasse platea dictumst.</p>
  </div>
</div>

<div class="my_card right">
  <div class="img_card">
    <img src="https://dummyimage.com/1000x500/1bc/fff"/>
  </div>
  <div class="text_card">
    <h1>Lorem Ipsum 2</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat pulvinar ipsum. Nullam tristique placerat porta. Aliquam erat volutpat. In hac habitasse platea dictumst.</p>
  </div>
</div>

Contoh

See the Pen Background Parallax- by Firmansyah (@firmansyahbio) on CodePen.


Cloud Hosting Indonesia