Kartlar gösteriliyor
John
Mimar ve mühendis
| Sınıf | tanımlar |
|---|---|
| w3-kart | Herhangi bir HTML içeriği için konteyner (With border) |
| w3-kart-2 | Herhangi bir HTML içeriği için konteyner (2px bordered shadow) |
| w3-kart-4 | Herhangi bir HTML içeriği için konteyner (4px bordered shadow) |
| w3-kart-8 | Herhangi bir HTML içeriği için konteyner (8px bordered shadow) |
| w3-kart-12 | Herhangi bir HTML içeriği için konteyner (12px bordered shadow) |
| w3-kart-16 | Herhangi bir HTML içeriği için konteyner (16px bordered shadow) |
| w3-kart-24 | Herhangi bir HTML içeriği için konteyner (24px bordered shadow) |
Renkli Kartlar
W3-kart sınıfları ile kağıt benzeri kartlar oluşturun ve bir renk eklemek için bir w3 renkli sınıfını kullanın:
w3-kart-2
w3-kart-4
w3-kart-8
Fotoğraf Kartı
Hardanger, Norveç Troll 'dil
Örnek
<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> Kendin dene " Kart İçeriği
Başlık
Bazı metin .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod incididunt ut tempor do sed Labore et dolore magna aliqua. Ut enim reklam damla veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Örnek
<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> Kendin dene " Hover Etkisi
W3-vurgulu-gölge sınıf vurgulu üzerinde gölge efekti ekler - Bu herhangi eleman Fare ile üzerine bir kart gibi görünmesini sağlayacaktır (same style as w3-card-4) .
üzerime gelin!
Diğer Örnekler
Arkadaşlık isteği
John Doe
Örnek
<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> Kendin dene " John Doe
1 yeni arkadaşlık isteği
Mighty Okulları CEO'su. Pazarlama ve Reklamcılık. yeni bir iş ve yeni fırsatlar aranıyor.
Örnek
<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> Kendin dene "