<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div Class="restaurant-name">
<br id="logo" scr="" /><br>
Vietpersie's Restaurant
</div>
<div Class="cat">Side Dishes</div>
<div Class="menu">
<div class="item">
<img src="https://lazi.vn/files/large/eaec0d5e27ce184" alt="side1">
<h3>Dragon Pass in Ocean</h3>
<p>Crispy slices of seasoned russet potatoes, air-fried to perfection. Served with zesty sour cream for a delightful twist on a classic favorite.</p>
<p><span>$10.99</span><span class="rightspan">Order</span></p>
</div>
<div class="item">
<img src="https://cdn.nguyenkimmall.com/images/companies/_1/Content/tin-tuc/gia-dung/top-10-mon-an-mua-dong-am-ap-kich-thich-vi-giac-h8.jpg" alt="Salad">
<h2>Warm Winter Day</h2>
<p>Crisp cucumber and vibrant radishes, tossed in a tangy vinaigrette for a refreshing crunch.<p>
<p><span>$5.99</span><span class="rightspan">Order</span></p>
</div>
</div>
<div class="cat">Entreé</div>
<div class="menu">
<div class="item">
<img src="https://assets.tmecosys.com/image/upload/t_web767x639/img/recipe/ras/Assets/102cf51c-9220-4278-8b63-2b9611ad275e/Derivates/3831dbe2-352e-4409-a2e2-fc87d11cab0a.jpg" alt="Burger">
<h3>Deluxe Burger</h3>
<p>A juicy beef burger with lettuce, tomato, cheese, and special sauce.</p>
<p><span>$10.99</span><span class="rightspan">Order</span></p>
</div>
<div class="item">
<img src="https://www.sidechef.com/recipe/48bc47bb-38ec-47e2-9e78-7bbed7552986.jpeg?d=1408x1120" alt="Pizza">
<h3>Pepperoni Pizza</h3>
<p>Classic pizza topped with pepperoni, mozzarella cheese, and tomato sauce.</p>
<p><span>$12.99</span><span class="rightspan">Order</span><p>
</div>
</div>
<div class="cat">Desserts</div>
<div class="menu">
<div class="item">
<img src="https://th.bing.com/th/id/OIP.21XG1xTLOPD5KUE5jbEtUQHaGU?pid=ImgDet&rs=1" alt="cheesecake">
<h3>Cheese Cake</h3>
<p>Indulge in the timeless delight of our classic cheesecake. Creamy, rich, and velvety-smooth, it's the perfect sweet ending to any meal.</p>
<p><span>$3.99</span><span class="rightspan">Order</span></p>
</div>
<div class="item">
<img src="https://www.cookingclassy.com/wp-content/uploads/2013/01/fried-ice-cream-5.jpg" alt="icecream">
<h>Fried Ice Cream</h>
<p>A hot and crispy surprise that reveals a cold, sweet secret.</p>
<p><span>$4.99</span><span class="rightspan">Order</span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.rightspan {
float:right;
background-color: darkslategrey;
border-radius: 25px;
font-size: 20px;
padding: 10px;
color: #ffffff;
cursor: pointer;
}
.rightspan:hover {
background-color: #e74c3c;
color: #ffffff;
}
.restaurant-name {
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
padding: 20px;
background-color: darkslategrey;
color: #fff;
font-size: 2.5rem;
}
.menu {
justify-content: center;
align-items: flex-start;
padding: 20px;
display:flex;
}
.item {
width: 450px;
background-color: #fff;
margin: 10px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.item img {
width: 100%;
height: 200px; /* Set a fixed height for uniformity */
object-fit: cover; /* Maintain aspect ratio and fill the container */
border-radius: 8px;
}
.item h3 {
margin-top: 10px;
font-size: 1.9rem;
}
.item p {
margin-top: 5px;
font-size: 1rem;
}
.item span {
font-weight: bold;
font-size: 36px;
color: #e74c3c;
}
.cat {
font-family: 'Rubik', sans-serif;
font-weight: bold;
width: 180px;
text-align: center;
color: #ffffff;
font-size: 25px;
padding: 5px;
border-radius: 25px;
margin:10px auto;
background-color: #e74c3c;
}
#logo {
height: 35px;
}