Notifikasi
Tidak ada notifikasi baru.
Beranda Bahasa Pemrograman HTML

Cara Membuat Flip Card Menggunakan HTML

Yosa AP
Yosa AP
---

Cara Mudah Membuat Flip Card Dengan HTML - Hai Sobat, pada kesempatan ini saya akan memposting tutorial tentang cara membuat flip card di HTML. Flip card atau kartu lipat merupakan kartu yang apabila disentuh dengan kursor maka akan langsung berbalik (flip). Untuk kalian yang mungkin merasa biasa saja dengan kartu identitas pada tutorial sebelumnya tentang membuat kartu identitas di HTML, maka bisa mencoba membuat kartu flip ini. Untuk pembuatannya sangat mudah cukup ikuti tutorial dibawah ini ya.


Cara membuat kartu flip di HTML
Cara membuat kartu flip di HTML


Untuk tampilan flip card yang akan kita buat adalah seperti gambar dibawah ini :

Contoh Kartu Flip card

Arahkan kursor ke gambar dibawah ini


Flip Card


Yosa Aditya Pakosa

Guru Produktif TKJ

SMK Tunas Bangsa Tawangsari

"Salah satu kunci kesuksesan adalah KONSISTEN"



Daftar Isi :

1. Alat dan Bahan

2. Cara Pembuatan

3. Cara Pengujian


Alat dan Bahan


Alat dan bahan yang digunakan adalah sebagai berikut :
1. HTML Editor



Cara Pembuatan


1. Buka halaman HTML Editor disini.

2. Salin skrip dibawah ini ke HTML Editor.


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h4 style="text-align: center;">Contoh Kartu Flip card</h4>
<h4 style="text-align: center;">Arahkan kursor ke gambar dibawah ini</h4>
<br />
<center><div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front" style="text-align: center;">
      <img alt="Flip Card" src="https://blogger.googleusercontent.com/img/a/AVvXsEj23wkIFGW4HDtuIZaPrgaTv4rExqSQxaPh-D6IdGdtldtVbgri2SUT8CyZHK76dXF7kgfQxE4fsXLVuqJK0AncLtoh0iTacsvKAtnq_WQE3YScPtyVO0XJhc-RV2Qd0KjO75wsL_sWa2eML59X0eEVxqJHaa2Oo46PBDMNnKuHxI0CFQEfsV-O2l2F=w640-h592" style="height: 300px; width: 300px;" />
    </div>
    <div class="flip-card-back">
      <br />
      <br />
      <p><b>Yosa Aditya Pakosa</b></p> 
      <p>Guru Produktif TKJ</p> 
      <p>SMK Tunas Bangsa Tawangsari</p>
      <p>"Salah satu kunci kesuksesan adalah KONSISTEN"</p>
    </div>
  </div>
</div>
</center>
</body>
</html>


Cara Pengujian Code Flip Card di HTML Editor


Pengujian  Flip Card sangat mudah yaitu klik "Run" pada HTML Editor maka akan secara otomatis muncul hasilnya di kolom bawah. Apabila proses Run berhasil maka tampilannya akan seperti dibawah ini :

Uji code flip card di HTML Editor
Uji code flip card di HTML Editor

Baca Juga : Cara Membuat Pop Up Menggunakan HTML

Sekian tutorial tentang cara label di HTML. Semoga sedikit ilmu ini bermanfaat. Selamat mencoba dan sampai jumpa di tutorial berikutnya. Terimakasih telah berkunjung.


Bahasa Pemrograman HTML
Yosa AP
Yosa AP
Guru, Desainer, Programmer
Gabung dalam percakapan (2)
2 komentar
  1. materisenibudayasmk-trisuwastri
    16 Maret 2022 pukul 18.13
    Profil
    materisenibudayasmk-trisuwastri
    materisenibudayasmk-trisuwastri
    Berkata: Ditunggu workshopnya ,,,
    Lihat profil
    Ditunggu workshopnya ,,,
    Balas
    Balas