Modello HTML per ristorante fast food

55 ik07

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

18 November 2024

Modello di sito Web moderno per portfolio

19 October 2024

Modulo di accesso HTML animato

1 January 2025

Un codice per codice

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>

Consigliato

Modello di sito Web moderno per portfolio

Modulo di accesso HTML animato

Un codice per codice

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS