Restaurante

1,585 lev3ling

Abrir en el editor Publica tu código

Recomendado

10 June 2025

Un código de Mete

25 November 2025

Magnate minero inactivo

29 August 2024

Secciones continuas animadas con GSAP Observer

HTML

<!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>

CSS

/* 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;;
}