Cara Membuat Card HTML dan CSS

Assalamualaikum wr wb

Hallo semua, kali ini saya akan membuat tutorial cara membuat kartu/card dengan html dan css. Card dan css biasanya digunakan di dalam home page untuk menampilkan daftar konten yang dimiliki suatu web.

oke langsung saja lihat dibawah ini :
1. Buat file bernama index.html dan isikan code dibawah ini


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Membuat Card</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div id='wrap'>
  <div class="kartu">
   <div class="kartu-img">
    <img src="http://ikaprama.org/wp-content/uploads/2017/08/TI.jpg" alt="ini gambar" class="gambar">
   </div>
   <div class="kartu-header">
    <h2>Ini judul</h2>
   </div>
   <div class="kartu-konten">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
   </div>
   <div class="kartu-footer">
    <a href="#">Baca Selengkapnya...</a>
   </div>
  </div>


  <div class="kartu">
   <div class="kartu-img">
    <img src="http://ikaprama.org/wp-content/uploads/2017/08/TI.jpg" alt="ini gambar" class="gambar">
   </div>
   <div class="kartu-header">
    <h2>Ini judul</h2>
   </div>
   <div class="kartu-konten">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
   </div>
   <div class="kartu-footer">
    <a href="#">Baca Selengkapnya...</a>
   </div>
  </div>
 </div>
</body>
</html>

2. Selanjutnya buat file bernama style.css isikan code dibawah ini


.gambar {
    max-width: 300px;
    width: 100%;
}

.kartu {
    max-width: 300px;
    width: 100%;
    display: inline-block;
    margin: 0 10px;
}

.kartu-header {
    margin: 16px 0;
}

.kartu-header h2 {
    margin: 0;
}

sekian post kali ini. sampai jumpa di tutorial selanjutnya.

Cara Membuat Card HTML dan CSS

0 Response to "Cara Membuat Card HTML dan CSS"

Post a Comment