Assalamualaikum Wr.Wb
Seperti judulnya yaitu membuat tampilan seperti sebuah kartu dengan w3css,karena framework ini telah menyediakan berbagai style css termasuk cards ini,baik mari kita mulai.
Ini di gunakan untuk membuat tampilan seperti kartu yang di dalamnya ada konten berupa gambar.
Seperti judulnya yaitu membuat tampilan seperti sebuah kartu dengan w3css,karena framework ini telah menyediakan berbagai style css termasuk cards ini,baik mari kita mulai.
- Card Content
<!DOCTYPE html>Untuk yang tulisan berwarna biru berfungsi untuk memanggil w3css dan membuat tampilan responsive,inilah hasilnya
<html>
<head>
<title>W3 cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container">
<h2>Contoh W3 Cards</h2>
<div class="w3-card-4" style="width: 50%;">
<header class="w3-container w3-blue">
<h1>Lorem</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>
</div><!--w3 card-->
</div><!--w3 container-->
</body>
</html>
- Photo Card
<!DOCTYPE html>
<html>
<head>
<title>W3 Cards Photo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
</head>
<body>
<div class="w3-container">
<h2>Contoh Photo Card</h2>
<div class="w3-card-12" style="width: 50%">
<img src="1.jpeg" alt="gambar" style="width: 100%">
<div class="w3-container w3-center">
<p>Letakan Caption Gambar Di sini</p>
</div>
</div>
</div>
</body>
</html>
Dan hasilnya seperti di bawah ini
Bagaimana mudah bukan?karena kita tidak perlu membuat style nya dari awal.Mungkin cukup sekian postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar