menampilkan Kartu
John
Arsitek dan insinyur
| Kelas | mendefinisikan |
|---|---|
| w3-card | Wadah untuk setiap konten HTML (Dengan perbatasan) |
| w3-card-2 | Wadah untuk setiap konten HTML (2px shadow border) |
| w3-card-4 | Wadah untuk setiap konten HTML (4 piksel shadow border) |
| w3-card-8 | Wadah untuk setiap konten HTML (8px shadow border) |
| w3-card-12 | Wadah untuk setiap konten HTML (12px berbatasan shadow) |
| w3-card-16 | Wadah untuk setiap konten HTML (16px berbatasan shadow) |
| w3-card-24 | Wadah untuk setiap konten HTML (24px berbatasan shadow) |
Kartu berwarna
Membuat kartu seperti kertas dengan kelas w3-card, dan menggunakan kelas w3-warna untuk menambahkan warna:
w3-card-2
w3-card-4
w3-card-8
Kartu foto
Lidah Troll di Hardanger, Norwegia
Contoh
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> Cobalah sendiri " Konten kartu
Header
Beberapa teks .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Contoh
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> Cobalah sendiri " Hover Effect
Kelas w3-hover shadow menambahkan efek bayangan di hover - ini akan membuat setiap elemen terlihat seperti kartu pada mouse-over (gaya yang sama seperti w3-card-4).
Arahkan kursor saya!
Contoh
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Cobalah sendiri " Contoh lebih
Permintaan pertemanan
John Doe
Contoh
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> Cobalah sendiri " John Doe
1 permintaan teman baru
CEO di Perkasa Sekolah. Pemasaran dan Periklanan. Mencari pekerjaan baru dan kesempatan baru.
Contoh
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> Cobalah sendiri "