Modèle HTML pour restaurant de restauration rapide

59 ik07

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML pour restaurant de restauration rapide

Recommandé

22 August 2025

Carrousel de cartes Lion 3D HTML CSS et JavaScript

25 April 2025

Un code de Metehan

25 August 2024

Animation du formulaire de connexion/inscription

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sizzle & Spice - Your Go-To Fast Food!</title>
    
    <style>
        /* General Body Styles */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            line-height: 1.6;
            color: #333;
            background-color: #f8f8f8;
        }

/* Container for content width */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header Styles */
        header {
            background-color: #e44d26; /* A vibrant red-orange */
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header .logo {
            font-size: 1.8rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        header nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        header nav ul li {
            margin-left: 25px;
        }
        header nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }
        header nav ul li a:hover {
            color: #ffc107; /* A bright yellow for hover */
        }

/* Hero Section */
        .hero {
            background: url('https://via.placeholder.com/1500x600/ff6f42/ffffff?text=Delicious+Fast+Food+Delivered') no-repeat center center/cover;
            color: white;
            text-align: center;
            padding: 120px 20px;
            min-height: 450px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .hero::before { /* Overlay for better text readability */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.45);
        }
        .hero .hero-content {
            position: relative;
            z-index: 1;
            max-width: 900px;
        }
        .hero h1 {
            font-size: 3.8rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
        }
        .hero p {
            font-size: 1.6rem;
            margin-bottom: 40px;
            opacity: 0.9;
        }
        .btn {
            background-color: #ffc107; /* Yellow CTA button */
            color: #e44d26;
            padding: 18px 35px;
            text-decoration: none;
            border-radius: 8px;
            font-size: 1.3rem;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.3s ease;
            display: inline-block;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .btn:hover {
            background-color: #ffda6a;
            transform: translateY(-3px);
        }

/* Section Styles */
        section {
            padding: 60px 0;
            margin-bottom: 20px;
        }
        .section-title {
            text-align: center;
            font-size: 2.8rem;
            margin-bottom: 50px;
            color: #e44d26;
            text-transform: capitalize;
        }

/* About Section */
        .about-us {
            background-color: white;
            text-align: center;
        }
        .about-us p {
            font-size: 1.15rem;
            max-width: 850px;
            margin: 0 auto;
            color: #555;
        }

/* Featured Items Section */
        .featured-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            padding-bottom: 40px;
        }
        .item-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .item-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .item-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-bottom: 1px solid #eee;
        }
        .item-card h3 {
            font-size: 1.6rem;
            color: #e44d26;
            margin: 20px 0 10px;
            padding: 0 15px;
        }
        .item-card p {
            padding: 0 20px 25px;
            font-size: 1rem;
            color: #666;
        }

/* CTA Banner */
        .cta-banner {
            background-color: #e44d26;
            color: white;
            text-align: center;
            padding: 80px 20px;
            margin-top: 60px;
        }
        .cta-banner h2 {
            font-size: 3rem;
            margin-bottom: 25px;
        }
        .cta-banner p {
            font-size: 1.4rem;
            margin-bottom: 50px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        .cta-banner .btn {
            background-color: #ffc107;
            color: #e44d26;
        }
        .cta-banner .btn:hover {
            background-color: #ffda6a;
            color: #c73e1c;
        }

/* Footer */
        footer {
            background-color: #222;
            color: white;
            text-align: center;
            padding: 40px 0;
            margin-top: 50px;
            font-size: 0.95rem;
        }
        footer .social-links {
            margin-bottom: 20px;
        }
        footer .social-links a {
            color: white;
            margin: 0 12px;
            text-decoration: none;
            font-size: 1.8rem;
            transition: color 0.3s ease;
        }
        footer .social-links a:hover {
            color: #ffc107;
        }
        footer p {
            margin-top: 15px;
            margin-bottom: 0;
            color: #bbb;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">Sizzle & Spice</div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>Your Hunger, Our Priority. <br>Fast, Fresh & Flavorful!</h1>
                <p>Craving something delicious? Get your favorite fast food delivered right to your door!</p>
                <a href="#menu" class="btn">Explore Our Menu</a>
            </div>
        </section>

<section id="about" class="about-us">
            <div class="container">
                <h2 class="section-title">Experience the Sizzle & Spice Difference</h2>
                <p>At Sizzle & Spice, we're passionate about serving up joy in every bite. We use only the freshest ingredients, prepared with care and cooked to perfection, ensuring a mouth-watering experience every time. Whether it's a quick lunch or a family dinner, we've got your cravings covered with speed and quality!</p>
            </div>
        </section>

<section id="menu" class="container">
            <h2 class="section-title">Our Irresistible Picks</h2>
            <div class="featured-items">
                <div class="item-card">
                    <img src="https://via.placeholder.com/400x220/ff6f42/ffffff?text=Juicy+Burger" alt="Juicy Burger">
                    <h3>The Sizzle Burger</h3>
                    <p>Our classic beef patty, crisp lettuce, ripe tomato, pickles, and our special Sizzle sauce on a toasted bun.</p>
                </div>
                <div class="item-card">
                    <img src="https://via.placeholder.com/400x220/ff6f42/ffffff?text=Crispy+Fries" alt="Crispy Fries">
                    <h3>Golden Power Fries</h3>
                    <p>Perfectly seasoned, extra crispy, and golden brown. The ultimate sidekick to any meal!</p>
                </div>
                <div class="item-card">
                    <img src="https://via.placeholder.com/400x220/ff6f42/ffffff?text=Chicken+Wings" alt="Chicken Wings">
                    <h3>Spicy Wing Feast</h3>
                    <p>Tender chicken wings tossed in our fiery house-made sauce, served with a cool ranch dip.</p>
                </div>
                <div class="item-card">
                    <img src="https://via.placeholder.com/400x220/ff6f42/ffffff?text=Veggie+Wrap" alt="Veggie Wrap">
                    <h3>Fresh Veggie Delight Wrap</h3>
                    <p>A wholesome wrap filled with fresh greens, grilled veggies, and a tangy dressing. Healthy and delicious!</p>
                </div>
            </div>
        </section>

<section class="cta-banner">
            <div class="container">
                <h2>Hungry Now? Don't Wait!</h2>
                <p>Click below to browse our full menu and place your order for pickup or speedy delivery!</p>
                <a href="#menu" class="btn">Order Online Today!</a>
            </div>
        </section>
    </main>

<footer id="contact">
        <div class="container">
            <div class="social-links">
                <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
            </div>
            <p>© 2023 Sizzle & Spice. All rights reserved.</p>
            <p>123 Flavorful Drive, Tasteville, TS 98765 | Phone: (123) 456-7890 | Email: info@sizzleandspice.com</p>
        </div>
    </footer>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</body>
</html>

Recommandé

Carrousel de cartes Lion 3D HTML CSS et JavaScript

Un code de Metehan

Animation du formulaire de connexion/inscription

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS