Veb: katering
Katering veb-sahifasini qanday yaratish mumkin
Bu misol W3.CSS yordamida katering xizmati uchun moslashuvchan veb-sayt yaratishni ko‘rsatadi.
Maketda zamonaviy Flexbox va Grid W3.CSS klasslari bilan birga ishlatiladi.
Skelet yaratish
Sahifa tuzilishi, shriftlar va moslashuvchan rasmdan boshlang.
Rasm ustiga sarlavha joylashtirish uchun display konteyneridan foydalaning.
Le Catering
Skelet
<html lang="en">
<title>Catering</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
body {font-family:"Times New Roman", serif}
h1,h2,h3,h4,h5,h6 {font-family:serif;letter-spacing:5px}
</style>
<body>
<!-- Page Content -->
<div id="home" class="w3-content" style="max-width:1000px">
<header class="w3-display-container">
<img src="img_catering.jpg"
style="width:100%" alt="Catering">
<div class="w3-display-bottomleft w3-padding w3-text-white w3-opacity-min">
<h1>Le Catering</h1>
</div>
</header>
</div>
<!-- End Content -->
</body>
</html>
O‘zingiz sinab ko‘ring »
Navigatsiya qo‘shish
Sayt nomini chap tomonda, navigatsiya havolalarini esa o‘ng tomonda saqlash uchun Flexbox’dan foydalaning.
Navigatsiya
<!-- Navbar (Sits on top) -->
<div class="w3-flex w3-top w3-white w3-wide w3-padding w3-card">
<a href="#home" class="w3-button">Gourmet au Catering</a>
<nav class="w3-flex w3-hide-small" style="margin-left:auto">
<a href="#about" class="w3-button">About</a>
<a href="#menu" class="w3-button">Menu</a>
<a href="#contact" class="w3-button">Contact</a>
</nav>
</div>
O‘zingiz sinab ko‘ring »
margin-left:auto uslubi navigatsiya havolalarini o‘ng tomonga suradi.
"Biz haqimizda" bo‘limini qo‘shish
Rasm va "Biz haqimizda" matni uchun CSS Grid’dan foydalaning.
Joy yetarli bo‘lmaganda ustunlar avtomatik ravishda ustma-ust joylashadi.
About Catering
Tradition since 1889
The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit.
<section id="about" class="w3-grid w3-padding-64"
style="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))">
<div class="w3-padding-large">
<img src="img_tablesetting2.jpg"
class="w3-round w3-opacity-min"
style="width:100%" alt="Table">
</div>
<div class="w3-padding-large">
<h1 class="w3-center">About Catering</h1>
<h5 class="w3-center">Tradition since 1889</h5>
<p class="w3-large">
The Catering was founded in blabla by Mr. Smith...
</p>
<p class="w3-large w3-text-grey">
Excepteur sint occaecat cupidatat non proident...
</p>
</div>
</section>
O‘zingiz sinab ko‘ring »
minmax(300px,1fr) qoidasi joy yetarli bo‘lganda har bir ustunning kengligini kamida 300 piksel qilib saqlaydi.
Menyu qo‘shish
Menyu va uning rasmi uchun ham xuddi shu Grid andozasidan foydalaning.
Our Menu
Bread Basket
Assortment of fresh baked fruit breads and muffins 5.50
Belgian Waffle
Vanilla flavored batter with malted flour 7.50
Scrambled Eggs
Scrambled eggs, roasted red pepper and garlic, with green onions 7.50
Blueberry Pancakes
With syrup, butter and lots of berries 8.50
Menu
<section id="menu" class="w3-grid w3-padding-64"
style="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))">
<div class="w3-padding-large">
<h1 class="w3-center">Our Menu</h1>
<h4>Bread Basket</h4>
<p class="w3-text-grey">
Assortment of fresh baked fruit breads and muffins 5.50
</p>
<h4>Belgian Waffle</h4>
<p class="w3-text-grey">
Vanilla flavored batter with malted flour 7.50
</p>
<h4>Scrambled Eggs</h4>
<p class="w3-text-grey">
Scrambled eggs, roasted red pepper and garlic, with green onions 7.50
</p>
<h4>Blueberry Pancakes</h4>
<p class="w3-text-grey">
With syrup, butter and lots of berries 8.50
</p>
</div>
<div class="w3-padding-large">
<img src="img_tablesetting.jpg"
class="w3-round w3-opacity-min"
style="width:100%" alt="Menu">
</div>
</section>
O‘zingiz sinab ko‘ring »
Aloqa bo‘limini qo‘shish
Aloqa ma’lumotlari va oddiy forma qo‘shing.
Contact
Catering Service, 42nd Living St, 43043 New York, NY
You can also contact us by phone 00553123-2323 or email catering@catering.com, or send us a message here:
Contact
<section id="contact" class="w3-container w3-padding-64">
<h1>Contact</h1>
<p class="w3-text-blue-grey w3-large">
<b>Catering Service, 42nd Living St, 43043 New York, NY</b>
</p>
<p>You can also contact us by phone 00553123-2323 or email
catering@catering.com, or send us a message here:</p>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16"
type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16"
type="number" placeholder="How many people"
required name="People"></p>
<p><input class="w3-input w3-padding-16"
type="datetime-local" required name="date"></p>
<p><input class="w3-input w3-padding-16"
type="text" placeholder="Message / Special requirements"
required name="Message"></p>
<p><button class="w3-button w3-light-grey w3-section"
type="submit">SEND MESSAGE</button></p>
</form>
</section>
O‘zingiz sinab ko‘ring »
To‘liq veb-sahifa
Tayyor sahifada turli maket vazifalari uchun turli W3.CSS vositalari ishlatiladi:
| Qism | Maket |
|---|---|
| Navigatsiya | Flexbox |
| Header | Display klasslari |
| Biz haqimizda | Grid |
| Menu | Grid |
| Contact | Oddiy hujjat oqimi |
To‘liq sahifani sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!