Veb: restoran
Pitsa restorani veb-sahifasini qanday yaratish mumkin
Bu misol W3.CSS yordamida restoran uchun moslashuvchan veb-sayt yaratishni ko‘rsatadi.
Sahifada Flexbox W3.CSS display, rang, rasm va forma klasslari bilan birga ishlatiladi.
Skelet yaratish
Sahifa tuzilishi, navigatsiya, shrift va katta fon rasmidan boshlang.
CRUST PIZZA
Skelet
<html lang="en">
<meta charset="UTF-8">
<title>Pizza</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family:"Amatic SC",sans-serif}
</style>
<body>
<!-- Navbar -->
<div class="w3-flex w3-top w3-xlarge w3-black w3-opacity-min">
<a href="#home" class="w3-button">HOME</a>
<a href="#menu" class="w3-button">MENU</a>
<a href="#about" class="w3-button">ABOUT</a>
<a href="#contact" class="w3-button">CONTACT</a>
</div>
<!-- Header -->
<header id="home" style="height:800px;background-image:url('img_pizza.jpg');background-size:cover;background-position:center" class="w3-display-container w3-grayscale-min">
<div class="w3-display-bottomleft">
<span class="w3-tag w3-xlarge">Open from 10am to 12pm</span>
</div>
<div class="w3-display-middle w3-center">
<span class="w3-text-white" style="font-size:100px">
thin<br>CRUST PIZZA
</span>
<p><a href="#menu" class="w3-button w3-xxlarge w3-black">
Let me see the menu</a></p>
</div>
</header>
</body>
</html>
O‘zingiz sinab ko‘ring »
Menyu qo‘shish
Menyu navigatsiyasini yaratish uchun Flexbox’dan foydalaning.
THE MENU
Margherita $12.50
Fresh tomatoes, fresh mozzarella, fresh basil
Formaggio $15.50
Four cheeses (mozzarella, parmesan, pecorino, jarlsberg)
Meat Town Hot! $20.00
Fresh tomatoes, mozzarella, hot pepperoni, hot sausage, beef, chicken
PASTA
Lasagna Popular $13.50
Special sauce, mozzarella, parmesan, ground beef
Ravioli $14.50
Ravioli filled with cheese
Spaghetti Classica $11.00
Fresh tomatoes, onions, ground beef
STARTERS
Today's Soup Seasonal $5.50
Ask the waiter
Bruschetta $8.50
Bread with pesto, tomatoes, onion, garlic
Garlic Bread $9.50
Grilled ciabatta, garlic butter, onions
Menu
<section id="menu" class="w3-container w3-black w3-xxlarge w3-padding-64">
<h1 class="w3-center w3-jumbo w3-padding-32">THE MENU</h1>
<nav class="w3-flex w3-center w3-border w3-border-dark-grey">
<a href="#pizza" class="w3-button w3-red" style="flex:1">Pizza</a>
<a href="#pasta" class="w3-button w3-hover-red" style="flex:1">Pasta</a>
<a href="#starters" class="w3-button w3-hover-red" style="flex:1">Starters</a>
</nav>
<div id="pizza" class="w3-container w3-white w3-padding-32">
</div>
</section>
O‘zingiz sinab ko‘ring » To‘liq menyu »
flex:1 uslubi menyudagi uchala tugmaga bir xil kenglik beradi.
"Biz haqimizda" bo‘limini qo‘shish
Restoran va uning ish vaqti haqida ma’lumot qo‘shing.
Biz haqimizda
The Pizza Restaurant was founded in blabla by Mr. Italiano in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Chef? Mr. Italiano himself
We are proud of our interiors.
Opening Hours
Mon & Tue CLOSED
Wednesday 10:00 - 24:00
Thursday 10:00 - 24:00
Friday 10:00 - 12:00
Saturday 10:00 - 23:00
Sunday Closed
Biz haqimizda
<section id="about" class="w3-container w3-red w3-grayscale w3-xlarge w3-padding-64">
<h1 class="w3-center w3-jumbo">About</h1>
<p>The Pizza Restaurant was founded in blabla...</p>
<p><b>The Chef?</b> Mr. Italiano himself
<img src="/w3images/chef.jpg" style="width:150px"
class="w3-circle w3-right" alt="Chef"></p>
<p>We are proud of our interiors.</p>
<img src="img_restaurant.jpg"
style="width:100%" alt="Restaurant">
<h1><b>Opening Hours</b></h1>
<div class="w3-flex" style="gap:32px">
<div style="flex:1">
<p>Mon & Tue CLOSED</p>
<p>Wednesday 10:00 - 24:00</p>
<p>Thursday 10:00 - 24:00</p>
</div>
<div style="flex:1">
<p>Friday 10:00 - 12:00</p>
<p>Saturday 10:00 - 23:00</p>
<p>Sunday Closed</p>
</div>
</div>
</section>
O‘zingiz sinab ko‘ring »
Aloqa bo‘limini qo‘shish
Xarita, aloqa ma’lumotlari va stol band qilish formasini qo‘shing.
Contact
Find us at some [address] or call us at 05050515-122330.
We offer full-service catering for any event, large or small. We understand your needs and will cater the food to satisfy both look and taste.
Reserve a table, ask for today's special, or just send us a message:
Contact
<img id="contact" src="map.jpg" class="w3-greyscale" alt="Map" style="width:100%">
<section class="w3-container w3-blue-grey w3-grayscale-min w3-padding-32">
<h1 class="w3-center w3-jumbo">Contact</h1>
<p>Find us at some [address] or call us at 05050515-122330.</p>
<form action="/action_page.php" target="_blank">
...
</form>
</section>
O‘zingiz sinab ko‘ring » To‘liq aloqa bo‘limi »
To‘liq veb-sahifa
Tayyor sahifada turli vazifalar uchun turli W3.CSS vositalari ishlatiladi:
| Qism | Maket |
|---|---|
| Navigatsiya | Flexbox |
| Header | Display klasslari |
| Menyu navigatsiyasi | Flexbox |
| Menyu elementlari | Oddiy hujjat oqimi |
| Ish vaqti | Flexbox |
| Contact | Oddiy hujjat oqimi |
To‘liq sahifani sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!