Coffee

custom

This tailwind example is contributed by Rebecca IRANKUNDA, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Rebecca IRANKUNDA

364

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brew Haven Coffee</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: #f9f5f0;
            color: #3a2e26;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background-color: #3a2e26;
            color: white;
            padding: 20px 0;
            position: fixed;
            width: 100%;
            z-index: 100;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: #d4a762;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 30px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav ul li a:hover {
            color: #d4a762;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
            padding-top: 80px;
            position: relative;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            background-color: #d4a762;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #c49555;
        }
        
        /* About Section */
        .about {
            padding: 100px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 36px;
            color: #3a2e26;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Menu Section */
        .menu {
            padding: 100px 0;
            background-color: #f0e6d9;
        }
        
        .menu-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .menu-item {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .menu-item-content {
            padding: 20px;
        }
        
        .menu-item h3 {
            font-size: 22px;
            margin-bottom: 10px;
            color: #3a2e26;
        }
        
        .menu-item p {
            margin-bottom: 15px;
            color: #6c757d;
        }
        
        .price {
            font-size: 20px;
            font-weight: 700;
            color: #d4a762;
        }
        
        /* Footer */
        footer {
            background-color: #3a2e26;
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #d4a762;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column ul li a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-column ul li a:hover {
            color: #d4a762;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            color: white;
            font-size: 20px;
            transition: color 0.3s;
        }
        
        .social-links a:hover {
            color: #d4a762;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }
            
            nav ul {
                margin-top: 20px;
            }
            
            nav ul li {
                margin-left: 15px;
                margin-right: 15px;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container header-container">
            <div class="logo">Brew Haven</div>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Artisanal Coffee Crafted With Love</h1>
            <p>Discover our handcrafted coffee blends made from the finest beans sourced from around the world</p>
            <a href="#menu" class="btn">View Our Menu</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <h2 class="section-title">Our Story</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Founded in 2010, Brew Haven began as a small coffee cart in downtown Portland. Our passion for quality coffee and community quickly grew into what is now a beloved local coffee shop.</p>
                    <p>We directly source our beans from sustainable farms and roast them in small batches to ensure maximum freshness and flavor. Every cup tells a story of craftsmanship and care.</p>
                    <p>Our baristas are trained in the art of coffee making, ensuring each beverage is prepared to perfection. We believe coffee is more than a drink - it's an experience.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1445116572660-236099ec97a0" alt="Coffee beans">
                </div>
            </div>
        </div>
    </section>

<section class="menu" id="menu">
        <div class="container">
            <h2 class="section-title">Our Menu</h2>
            <div class="menu-items">
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1517701550927-30cf4ba1dba5" alt="Espresso">
                    <div class="menu-item-content">
                        <h3>Espresso</h3>
                        <p>A concentrated coffee beverage brewed by forcing hot water under pressure through finely ground coffee.</p>
                        <div class="price">$3.50</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1551030173-122aabc4489c" alt="Cappuccino">
                    <div class="menu-item-content">
                        <h3>Cappuccino</h3>
                        <p>Espresso with steamed milk and a silky layer of foam, traditionally prepared with equal parts of each.</p>
                        <div class="price">$4.50</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1568649929103-28ffbefaca1e" alt="Cold Brew">
                    <div class="menu-item-content">
                        <h3>Cold Brew</h3>
                        <p>Our signature cold brew steeped for 18 hours for a smooth, rich flavor with lower acidity.</p>
                        <div class="price">$4.75</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1572442388796-11668a67e53d" alt="Pour Over">
                    <div class="menu-item-content">
                        <h3>Pour Over</h3>
                        <p>Handcrafted single-origin coffee brewed to order for maximum flavor clarity.</p>
                        <div class="price">$5.00</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1560717843-60cb77a8a8d1" alt="Latte">
                    <div class="menu-item-content">
                        <h3>Latte</h3>
                        <p>Espresso with a generous amount of steamed milk and a light layer of foam.</p>
                        <div class="price">$4.75</div>
                    </div>
                </div>
                <div class="menu-item">
                    <img src="https://images.unsplash.com/photo-1514066558159-fc8c737ef259" alt="Iced Coffee">
                    <div class="menu-item-content">
                        <h3>Iced Coffee</h3>
                        <p>Our house blend chilled and served over ice with your choice of milk.</p>
                        <div class="price">$4.25</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Brew Haven</h3>
                    <p>Artisanal coffee crafted with love. Serving the community since 2010.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Hours</h3>
                    <ul>
                        <li>Monday - Friday: 6am - 8pm</li>
                        <li>Saturday: 7am - 9pm</li>
                        <li>Sunday: 7am - 6pm</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact</h3>
                    <ul>
                        <li>123 Coffee Lane, Portland, OR</li>
                        <li>0787985412</li>
                        <li>rebeccairankunda789@gmail.com</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Brew Haven Coffee. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Related Examples

Header

Author:
Morris Muriuki Muthigani

2 months ago

359
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

289
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

4 months ago

740
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5k
yvette
vibes kbx

Author:
Umutoniwase Yvette

4 months ago

301
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.5k
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

684
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Plasma
plasma

Author:
Raul antonio de la cruz hernandez

1 week ago

40
Header with svg background

Author:
R.P Ketan

2 years ago

13.4k
Sidebar with only icons

Author:
Rajesh Maheshwari

7 months ago

1.5k
Title

Author:
Morris Muriuki Muthigani

2 months ago

384

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components