Webleb - HTML UI Elements

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Home | Just-Eat </title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="Home.css">
        <link rel="shortcut icon" type="image/x-icon" href="Home/just eat.ico">
    </head>
    <body>
            
                <section id="Home">
                    <header>
                        <div id="navbar">
                            <a href="Home.html"><img src="Home/Just-Eat-logo.png" alt="Just Eat Logo"></a>
                            <nav>
                                <ul>
                                    <li><a href="#Home" class="active">Home</a></li>
                                    <li><a href="Menu.html">Menu</a></li>
                                    <li><a href="Reservation.html">Reservation</a></li>
                                    <li><a href="Gallery.html">Gallery</a></li>
                                    <li><a href="About Us.html">About Us</a></li>
                                    <li><a href="Contact Us.html">Contact Us</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="content">
                            <h1>Don't Cook <span class="primary-text"> Just Eat </span></h1>
                            <p>Welcome to Our  <span class="primary-text">Restaurant</span></p>
                            <p>Here you can find Most <span class="primary-text">delicious</span>  food in the world</p>
                            <a href="#Menu" class="btn btn-primary" >See Our Menu</a>
                            <a href="Reservation.html" class="btn btn-primary">Book a Table</a>
                            <a href="#offers" class="btn btn-primary">Discover Our Special Offers</a>
                        </div>
                    </header>
                </section>

<section id="Menu">
                    <div class="container">
                        <div class="title">
                            <h2>Our Special <span class="primary-text"> Menu</span></h2>
                            <p>Explore our <span class="primary-text">Delicious</span>  menu with a variety of dishes to satisfy every palate.</p>
                        </div>
                        <div class="menu-items">
                            <div class="menu-items-left">
                                <div class="menu-item">
                                    <img src="Home/food1.jpg" alt="LASAL Cheese">
                                    <div>
                                        <h3>LASAL CHEESE <span class="primary-text"> 40.00 DH</span></h3>
                                        <p>Fresh cow cheese with a touch of herbs and a creamy texture.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food2.jpg" alt="JUMBO CRAB SHRIMP" width="80px" height="80px">
                                    <div>
                                        <h3>JUMBO CRAB SHRIMP <span class="primary-text"> 55.00 DH</span></h3>
                                        <p>Large shrimp cooked to perfection with a rich crab sauce.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food3.jpeg" alt="KOKTAIL JUCIE">
                                    <div>
                                        <h3>KOKTAIL JUCIE <span class="primary-text"> 30.00 DH</span></h3>
                                        <p>A refreshing blend of seasonal fruits served chilled.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food4.jpg" alt="CAPO STEAK">
                                    <div>
                                        <h3>CAPO STEAK <span class="primary-text">89.00 DH</span></h3>
                                        <p>Tender beef steak grilled with special seasoning and flavoro.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food5.jpg" alt="ORGANIC FRUIT SALAD">
                                    <div>
                                        <h3>ORGANIC FRUIT SALAD <span class="primary-text"> 30.00 DH</span></h3>
                                        <p>A healthy mix of organic fruits, rich in vitamins and color.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food6.jpg" alt="CHEESE PIZZA">
                                    <div>
                                        <h3>CHEESE PIZZA <span class="primary-text"> 50.00 DH</span></h3>
                                        <p>Classic cheese pizza with a crispy crust and melted cheese.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="menu-items-right">
                                <div class="menu-item">
                                    <img src="Home/food7.jpeg" alt="KOFTA MEAT">
                                    <div>
                                        <h3>KOFTA MEAT <span class="primary-text"> 100.00 DH</span></h3>
                                        <p>Juicy spiced meat kofta grilled and served with herbs.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food8.jpeg" alt="SPANISH PIES">
                                    <div>
                                        <h3>SPANISH PIES <span class="primary-text"> 60.00 DH</span></h3>
                                        <p>Baked Spanish-style pies stuffed with cheese and vegetables.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food9.jpeg" alt="CHEESE TOST">
                                    <div>
                                        <h3>CHEESE TOST <span class="primary-text"> 35.00 DH</span></h3>
                                        <p>Crispy toast topped with melted cheese and light seasoning.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food10.jpeg" alt="FRUIT SALAD">
                                    <div>
                                        <h3>FRUIT SALAD <span class="primary-text"> 30.00 DH</span></h3>
                                        <p>A colorful mix of fresh fruits served with a hint of mint.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food11.jpeg" alt="CHICKEN SHAWARMA">
                                    <div>
                                        <h3>CHICKEN SHAWARMA <span class="primary-text"> 45.00 DH</span></h3>
                                        <p>Marinated chicken slices grilled and wrapped in warm bread.</p>
                                    </div>
                                </div>
                                <div class="menu-item">
                                    <img src="Home/food12.jpeg" alt="MEGA CHEESE PIZZA">
                                    <div>
                                        <h3>MEGA CHEESE PIZZA <span class="primary-text"> 35.00 DH</span></h3>
                                        <p>Large-size pizza loaded with multiple types of cheese.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="solo">
                            <a href="#Home" class="btn btn-third">Back To Top</a>
                            <a href="Reservation.html" class="btn btn-third">Book Now</a>
                            <a href="Menu.html" class="btn btn-third">See More</a>
                        </div>
                    </div>
                </section>

<section id="offers">
                    <div class="container">
                        <div class="title">
                            <h2>Our Special <span class="primary-text">Offers</span></h2>
                            <p>More than <span class="primary-text"> 10 </span>years of experience</p>
                        </div>
                        <div class="offers-items">
                            <div>
                                <img src="Home/offer1.png" alt="Quattro Pasta">
                                <div>
                                    <h3>Quattro Pasta</h3>
                                    <p>A delicious pasta dish made with four types of cheese, served with a creamy sauce and fresh herbs.</p>
                                    <p><del>55.00 DH</del> <span class="primary-text">25.00 DH</span></p>
                                </div>
                            </div>
                            <div>
                                <img src="Home/offer2.png" alt="Vegetarian Pasta">
                                <div>
                                    <h3>Vegetarian Pasta</h3>
                                    <p>Fresh pasta tossed with seasonal vegetables, olive oil, and a touch of garlic for a healthy meal.</p>
                                    <p><del>55.00 DH</del> <span class="primary-text">35.00 DH</span></p>
                                </div>
                            </div>
                            <div>
                                <img src="Home/offer3.png" alt="Gluten-Free Pasta">
                                <div>
                                    <h3>Gluten-Free Pasta</h3>
                                    <p>Enjoy our gluten-free pasta, made with premium ingredients and served with your choice of sauce.</p>
                                    <p><del>55.00 DH</del> <span class="primary-text">30.00 DH</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            
            
            
                <section id="daytime">
                        <div class="title">
                        <h2>Our <span class="primary-text">Daytime</span> Items</h2>
                        <p>Available from <span class="primary-text">07:00 to 23:00</span></p>
                    </div>
                    <div class="container">
                        <div class="daytime-items">
                            <div class="daytime-item">
                                <img src="Home/breckfastIcon.png" alt="Breakfast">
                                <h3>Breakfast</h3>
                                <p> <span class="primary-text">07:00  to 11:00 </span></p>
                            </div>
                            <div class="daytime-item">
                                <img src="Home/lunchIcon.png" alt="Lunch">
                                <h3>Lunch</h3>
                                <p><span class="primary-text">12:00  to 17:00</span></p>
                            </div>
                            <div class="daytime-item">
                                <img src="Home/dinnerIcon.png" alt="Dinner">
                                <h3>Dinner</h3>
                                <p><span class="primary-text">18:00  to 23:00</span></p>
                            </div>
                            <div class="daytime-item">
                                <img src="Home/dessertIcon.png" alt="dessert">
                                <h3>Dessert</h3>
                                <p><span class="primary-text">All Day</span></p>
                            </div>
                        </div>
                    </div>
                </section>

<footer id="footer">
                    <p>© 2025 All rights reserved | created by <b> <a href="Dr/Login.html"
                    target="_blank"> Hicham EL-Kasmi</a></b></p>
                    <div class="ph">
                        <a href="Home.html"><img src="Home/Just-Eat-logo.png" alt="Just Eat"  ></a>
                    </div>
                </footer>
            
    </body>
</html>

/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Quicksand", sans-serif;
}

/* Utility Classes */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}
.btn-primary {
  border: 1px solid #fff;
}
.btn-primary:hover{
  background: #eb8e14;
  color: black;
}
.btn-third:hover{
  background: #eb8e14;
  color: #000000;
}
.primary-text {
  color: #eb8e14;
}
.btn-third {
  background: #383848;
  color:#ffffff;
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
}

/* Header Styling */
header {
  height: 100vh;
  background: url("Home/ssss14.jpg") center center/cover no-repeat;
  position: relative;
}
#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  width: 100%;
  backdrop-filter: blur(30px);
  box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
#navbar img {
  width: 100px;
  margin-left: 70px;
}
a {
  text-decoration: none;
  color: #fff;
}
ul {
  list-style: none;
}
nav ul {
  display: flex;
}
nav ul li a {
  padding: 15px 20px;
  font-weight: 600;
}
nav ul li a:hover {
  border-bottom: 2px solid #eb8e14;
}
header .active {
  color: #eb8e14;
  border-bottom: 2px solid #eb8e14;
  text-transform: uppercase;
  font-weight: 700;
}
header .content {
  align-items: center;
  justify-items: center;
}
header::before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.781);
}
header .content h1 {
  font-size: 50px;
  color: #fff;
  font-weight: bold;
  margin-top: 100px;
  margin-bottom: 50px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
header .content p {
  color: #fff;
  margin: 25px 0 25px;
  margin-top: 20px;
  font-weight: bold;
  font-weight: 600;
  font-size: 20px;
  color: #fafafa;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
header .content a {
  font-weight: 500;
}
header * {
  z-index: 10;
}

/* Menu Styling */
#Menu {
  background:url(Home/Bk3.jpg) center center/cover no-repeat;
  padding: 3rem 0;
}
#Menu .container {
  max-width: 1100px;
  margin: auto;
}
#Menu .title h2 {
  text-align: center;
  font-size: 35px;
  color: #383848;
  font-weight: bold;
}
#Menu .title p {
  text-align: center;
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  margin-bottom: 20px;
}
#Menu .menu-items {
  display: flex;
  justify-content: center;
  align-items: center;
}
#Menu .menu-items .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px;
}
#Menu .menu-items .menu-item img {
  width: 80px;
  margin-right: 15px;
  border-radius: 10%;
}
#Menu .menu-items .menu-item h3 {
  color: #2a2a38;
  border-bottom: 1.5px dashed #eb8e14;
  padding-bottom: 10px;
  position: relative;
}
#Menu .menu-items .menu-item span {
  position: absolute;
  right: 0px;
  top: 0;
}
#Menu .menu-items .menu-item p {
  margin-top: 10px;
}
#Menu .solo{
  text-align: center;
}

/* Offers Section Styling */
#offers {
  height: 100vh;
  background: url("Home/offer-background.jpg") center center/cover fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#offers h2 {
  color: #fff;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 10px;
}
#offers .title p {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  margin-bottom: 30px;
}
#offers .offers-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
#offers .offers-items img {
  width: 200px;
}
#offers .offers-items h3 {
  font-size: 25px;
  color: #fff;
  margin: 15px 0;
}
#offers .offers-items p {
  color: #fff;
  font-size: 14px;
  padding: 0 20px;
  font-weight: 300;
  margin-bottom: 15px;
}
#offers .offers-items span {
  font-weight: 600;
  font-size: 18px;
  margin-left: 5px;
}

/* Daytime section Styling */
#daytime {
  background: url("Home/bodybg-2.jpg") center center/cover fixed no-repeat;
  color: #1d1d1d;
  text-align: center;
}
#daytime .title h2 {
  font-size: 30px;
  color: #161616;
  font-weight: bold;
  margin-bottom: 10px;
}
#daytime .title p {
  font-size: 16px;
  color: #161616;
  font-weight: bold;
  margin-bottom: 30px;
}
#daytime .daytime-items {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 35vh;
}
#daytime .daytime-items h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 20px 0 10px;
}
#daytime .daytime-items p {
  font-weight: bolder;
}

/* Footer Styling */
#footer {
  background-color: #383848;
  align-items: center;
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  height: 7vh;
}
.ph img{
  width: 85px;
  margin-right: 30px;
}
#footer p b a {
  color: #eb8e14;;
}

Validating your code, please wait...

HTML

CSS

/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Quicksand", sans-serif;
}