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

443

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

Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

8 months ago

1.7k
Brutalist Hero

Author:
threehymns

11 months ago

2.2k
vanessa
nice

Author:
Umutoniwase Yvette

5 months ago

413
Transparent Navbar

Author:
Rajesh Maheshwari

8 months ago

1.6k
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)

5 months ago

503
Sidebar with only icons

Author:
Rajesh Maheshwari

8 months ago

1.6k
No one
nice

Author:
Umutoniwase Yvette

5 months ago

278
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

5 months ago

249
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

694
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.4k
Yoga Coach Hero Section

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

1 year ago

5.4k
MyWebsite
Create a professional website for free with the Website.com website builder. Domain names, web hosting, website templates, and ecommerce solutions included.

Author:
Augustin

5 months ago

539

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components