Assalamualaikum Wr.Wb
Pada postingan kali ini saya akan membahas sebuah style yang ada di W3.Css yaitu style yang bisa di gunakan untuk membuat sebuah quotes,ada banyak macam style quotes mari kita mulai satu persatu.
Quotes dengan style ini memiliki tampilan dengan background grey dan menurut saya style jenis ini sangat cocok untuk membuat quotes karena terlihat simpel.
Pada postingan kali ini saya akan membahas sebuah style yang ada di W3.Css yaitu style yang bisa di gunakan untuk membuat sebuah quotes,ada banyak macam style quotes mari kita mulai satu persatu.
- Displaying Quotes
<!DOCTYPE html>Dan inilah hasilnya
<html>
<head>
<title>W3quotes</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 Displaying Quotes</h2>
<p>Gunakan w3-panel Untuk memanggil style quotes</p>
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif"><i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</i>
</p>
<p>Quotes</p>
</div><!--w3panel-->
</div><!--w3container-->
</body>
</html>
- Black Quotes
<!DOCTYPE html>Dan ini hasilnya
<html>
<head>
<title>W3quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<h2>Black Quotes</h2>
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge xw3-margin-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</i>
</p>
</div><!--w3panel black-->
</div><!--w3container-->
</body>
</html>
- Quotes Card
<!DOCTYPE html>Dan inilah hasilnya
<html>
<head>
<title>W3quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<h2>Black Quotes</h2>
<div class="w3-panel w3-card-4 w3-light-grey" style="width: 50%">
<p class="w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-text-red"></i>
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.
<br>
</p>
</div><!--w3panel black-->
</div><!--w3container-->
</body>
</html>
Ya mungkin sekian dulu postingan kali ini semoga bermanfaat terimakasih sudah berkunjung.
Refrensi:https://www.w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar