shopping

easy way to get pizza

This tailwind example is contributed by Nishimwe Jeanine, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Tag Cloud

Author Nishimwe Jeanine

1.1k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza Palace - Order Online</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background-color: #e74c3c;
            color: white;
            padding: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
        }
        
        .logo span {
            color: #f1c40f;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: #f1c40f;
        }
        
        .cart-icon {
            position: relative;
        }
        
        .cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #f1c40f;
            color: #333;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-weight: bold;
        }
        
        /* Hero Section */
        .hero {
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591');
            background-size: cover;
            background-position: center;
            height: 400px;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
        }
        
        .hero-content {
            width: 100%;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: #f1c40f;
            color: #333;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #e67e22;
            color: white;
        }
        
        /* Menu Section */
        .menu {
            padding: 60px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .section-title h2 {
            font-size: 36px;
            color: #e74c3c;
        }
        
        .section-title p {
            color: #777;
        }
        
        .pizza-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .pizza-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .pizza-card:hover {
            transform: translateY(-10px);
        }
        
        .pizza-img {
            height: 200px;
            overflow: hidden;
        }
        
        .pizza-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .pizza-card:hover .pizza-img img {
            transform: scale(1.1);
        }
        
        .pizza-info {
            padding: 20px;
        }
        
        .pizza-info h3 {
            font-size: 22px;
            margin-bottom: 10px;
        }
        
        .pizza-info p {
            color: #777;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .pizza-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price {
            font-size: 20px;
            font-weight: bold;
            color: #e74c3c;
        }
        
        .add-to-cart {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .add-to-cart:hover {
            background-color: #c0392b;
        }
        
        /* Footer */
        footer {
            background-color: #333;
            color: white;
            padding: 40px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #f1c40f;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column ul li a:hover {
            color: #f1c40f;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
            color: #bbb;
            font-size: 14px;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 20px;
                justify-content: center;
            }
            
            nav ul li {
                margin: 0 10px;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">Pizza<span>Palace</span></div>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li>
                            <a href="#" class="cart-icon">
                                🛒
                                <span class="cart-count">0</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    
    
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Delicious Pizza Delivered to Your Door</h1>
                <p>Order your favorite pizza online and get it hot and fresh in minutes</p>
                <a href="#menu" class="btn">Order Now</a>
            </div>
        </div>
    </section>
    
    
    <section class="menu" id="menu">
        <div class="container">
            <div class="section-title">
                <h2>Our Menu</h2>
                <p>Choose from our delicious selection of artisanal pizzas</p>
            </div>
            
            <div class="pizza-grid">
                
                <div class="pizza-card">
                    <div class="pizza-img">
                        <img src="https://images.unsplash.com/photo-1571066811602-716837d681de" alt="Margherita Pizza">
                    </div>
                    <div class="pizza-info">
                        <h3>Margherita</h3>
                        <p>Classic pizza with tomato sauce, fresh mozzarella, basil, and olive oil.</p>
                        <div class="pizza-price">
                            <span class="price">$12.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="pizza-card">
                    <div class="pizza-img">
                        <img src="https://images.unsplash.com/photo-1595854341625-f33ee10dbf94" alt="Pepperoni Pizza">
                    </div>
                    <div class="pizza-info">
                        <h3>Pepperoni</h3>
                        <p>Tomato sauce, mozzarella, and loads of spicy pepperoni.</p>
                        <div class="pizza-price">
                            <span class="price">$14.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="pizza-card">
                    <div class="pizza-img">
                        <img src="https://images.unsplash.com/photo-1601924582970-9238bcb495d9" alt="Vegetarian Pizza">
                    </div>
                    <div class="pizza-info">
                        <h3>Vegetarian</h3>
                        <p>Tomato sauce, mozzarella, bell peppers, mushrooms, onions, and olives.</p>
                        <div class="pizza-price">
                            <span class="price">$13.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="pizza-card">
                    <div class="pizza-img">
                        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38" alt="Hawaiian Pizza">
                    </div>
                    <div class="pizza-info">
                        <h3>Hawaiian</h3>
                        <p>Tomato sauce, mozzarella, ham, and pineapple - the controversial favorite!</p>
                        <div class="pizza-price">
                            <span class="price">$15.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="pizza-card">
                    <div class="pizza-img">
                        <img src="https://images.unsplash.com/photo-1541745537411-b8046dc6d66c" alt="BBQ Chicken Pizza">
                    </div>
                    <div class="pizza-info">
                        <h3>BBQ Chicken</h3>
                        <p>BBQ sauce, mozzarella, grilled chicken, red onions, and cilantro.</p>
                        <div class="pizza-price">
                            <span class="price">$16.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
                
                
                <div class="pizza-card">
                    <div class="pizza-img">
                        <img src="https://images.unsplash.com/photo-1561350111-7daa4f284bc6" alt="Meat Lovers Pizza">
                    </div>
                    <div class="pizza-info">
                        <h3>Meat Lovers</h3>
                        <p>Tomato sauce, mozzarella, pepperoni, sausage, bacon, and ham.</p>
                        <div class="pizza-price">
                            <span class="price">$17.99</span>
                            <button class="add-to-cart">Add to Cart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Pizza Palace</h3>
                    <p>Delivering delicious pizzas since 2010. Made with love and the freshest ingredients.</p>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>123 Pizza Street</li>
                        <li>New York, NY 10001</li>
                        <li>Phone: (555) 123-4567</li>
                        <li>Email: info@pizzapalace.com</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Opening Hours</h3>
                    <ul>
                        <li>Monday - Friday: 11am - 10pm</li>
                        <li>Saturday: 11am - 11pm</li>
                        <li>Sunday: 12pm - 9pm</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Pizza Palace. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Related Examples

Minimal tag cloud design with heading text

Author:
Rafferty Kim

3 years ago

10.3k
purchase
buy car online

Author:
Nishimwe Jeanine

9 months ago

997
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

1 year ago

2k
Category tags
Monocolor tag cloud

Author:
Piet Vriend

3 years ago

11k
GitHub

Author:
МОЙДОЫР

4 months ago

461
Tag Cloud - simple and clean

Author:
Prajwal Hallale

2 years ago

1.1k
Tag links component

Author:
Arya

3 years ago

9.3k
Tag/Button Cloud
Responsive tag cloud. Made with Flex-Box

Author:
TailwindFlex

3 years ago

12.1k
Tag Cloud
Display Trending Topics, Tags, etc.

Author:
Krishna Gudpalle

2 years ago

9.8k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

3 months ago

297
Info chips with icon

Author:
Bunny

3 years ago

10.2k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

9 months ago

542

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components