W3.CSS iqtiboslar
Iqtiboslar
W3.CSS panellari iqtiboslarni ko‘rsatish uchun qulay.
Iqtiboslarga chegaralar, ranglar, shriftlar, o‘lchamlar va kartochkalar yordamida uslub berish mumkin.
Oddiy iqtibos
Chap chegara va och fon iqtibosni ajratib ko‘rsatishi mumkin.
Misol
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i>
</p>
<p>Albert Einstein</p>
</div>
O‘zingiz sinab ko‘ring »
blockquote elementidan foydalaning
HTML’ning <blockquote> elementi boshqa manbadan olingan iqtiboslar uchun mo‘ljallangan.
W3.CSS klasslarini to‘g‘ridan-to‘g‘ri shu elementga qo‘shish mumkin.
"The future depends on what you do today."
Mahatma Gandhi
Misol
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large w3-serif">
<i>"The future depends on what you do today."</i>
</p>
<p>Mahatma Gandhi</p>
</blockquote>
O‘zingiz sinab ko‘ring »
Kontent haqiqiy iqtibos bo‘lganda <blockquote> elementidan foydalaning.
Katta iqtiboslar
Shrift o‘lchami va shrift klasslari muhim iqtiboslarni yanada ko‘zga tashlanadigan qilishi mumkin.
Misol
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Simplicity is the ultimate sophistication."</i>
</p>
<p>Leonardo da Vinci</p>
</div>
O‘zingiz sinab ko‘ring »
HTML belgilaridan foydalanish
Iqtiboslar, eslatmalar va boshqa kontentni bezash uchun standart HTML belgilaridan foydalanishingiz mumkin.
Hatto emojilardan ham foydalanishingiz mumkin.
Hech qanday ikonkalar kutubxonasi talab qilinmaydi.
| Belgi | Kod |
|---|---|
| ❝ | ❝ |
| ❞ | ❞ |
| “ | “ |
| ” | ” |
| ≫ | ≫ |
| ✀ | ✀ |
| ✂ | ✂ |
| ✄ | ✄ |
| ✔ | ✔ |
| 📌 | 📌 |
| 📍 | 📍 |
Simplicity is the ultimate sophistication.
Leonardo da Vinci
Misol
<div class="w3-panel w3-light-grey">
<span style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>Simplicity is the ultimate sophistication.</i>
</p>
<p>Leonardo da Vinci</p>
</div>
O‘zingiz sinab ko‘ring »
Kartochka ko‘rinishidagi iqtiboslar
Yaqqolroq vizual komponent yaratish uchun iqtiboslarni w3-card bilan birlashtiring.
Great things are done by a series of small things brought together.
Vincent van Gogh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Misol
<div class="w3-container w3-card-4 w3-light-grey">
<span class="w3-text-red" style="font-size:100px">❝</span>
<p class="w3-xxlarge w3-serif w3-text-red">❝</p>
<p class="w3-large w3-serif">
<i>Great things are done by a series of small things brought together.</i>
</p>
<p>Vincent van Gogh</p>
</div>
O‘zingiz sinab ko‘ring »
Qo‘shimcha misollar
W3.CSS iqtiboslariga uslub berishning boshqa usullari bilan tanishing.
Misol
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i class="w3-serif w3-xlarge">
<span style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript will be more important.</i></p>
</div>
Learning never exhausts the mind.
Leonardo da Vinci
Misol
<div class="w3-panel w3-center w3-sand">
<p class="w3-xxlarge w3-serif">❝</p>
<p class="w3-xlarge"><i>Learning never exhausts the mind.</i></p>
<p>Leonardo da Vinci</p>
</div>
O‘zingiz sinab ko‘ring »
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Misol
<div class="w3-panel w3-light-grey">
<span style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert Einstein</p>
</div>
Katta iqtibos belgisi
Good design is as little design as possible.
Dieter Rams
Misol
<div class="w3-panel w3-light-grey">
<span style="font-size:120px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge">
<i>Good design is as little design as possible.</i>
</p>
<p>Dieter Rams</p>
</div>
O‘zingiz sinab ko‘ring »
Qorong‘i iqtibos
❝ Stay hungry. Stay foolish.
Steve Jobs
Misol
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<span class="w3-xxlarge w3-margin-right">❝</span>
<i>Stay hungry. Stay foolish.</i>
</p>
<p>Steve Jobs</p>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!