Afiseaza de carduri
John
Arhitect și inginer
| Clasă | defineste |
|---|---|
| W3-card | Recipient pentru orice conținut HTML (With border) |
| W3-card-2 | Recipient pentru orice conținut HTML (2px bordered shadow) |
| W3-card-4 | Recipient pentru orice conținut HTML (4px bordered shadow) |
| W3-card-8 | Recipient pentru orice conținut HTML (8px bordered shadow) |
| W3-card-12 | Recipient pentru orice conținut HTML (12px bordered shadow) |
| W3-card-16 | Recipient pentru orice conținut HTML (16px bordered shadow) |
| W3-card-24 | Recipient pentru orice conținut HTML (24px bordered shadow) |
Carduri colorate
Creați cărți de hârtie cum ar fi cu clasele W3-cărți, și de a folosi o clasa W3-culoare pentru a adăuga o culoare:
W3-card-2
W3-card-4
W3-card-8
Card foto
Limba Troll în Hardanger, Norvegia
Exemplu
<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> Încearcă - l singur » Conținut card
Antet
Unele ipsum dolor de text .. Lorem sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod ut incididunt Labore et dolore magna aliqua. Ut enim anunț veniam minim, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Exemplu
<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> Încearcă - l singur » hover Efect
Clasa W3-Hover-umbra adaugă un efect de umbră asupra Hover - acest lucru va face orice element arata ca un card cu mouse-ul (same style as w3-card-4) .
Treceți cursorul peste mine!
Exemplu
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Încearcă - l singur » Mai multe exemple
Cerere de prietenie
John Doe
Exemplu
<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> Încearcă - l singur » John Doe
1 cerere de prietenie nouă
CEO-ul de la Mighty școli. Marketing și publicitate. Căutând un nou loc de muncă și noi oportunități.
Exemplu
<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> Încearcă - l singur »