Start learning

Coffe Free Templates

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.


Coffe website Templates Example 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffe Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <h1>Coffe Name</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">Menu</a>
    <a href="#">Contact</a>
</nav>
<div class="menu-container">
    <div class="menu-item">
        <div class="menu-title" onclick="toggleDetails(this)">
            Espresso
        </div>
        <div class="menu-description">Strong and rich coffee</div>
        <div class="menu-price">$2.99</div>
    </div>

    <div class="menu-item">
        <div class="menu-title" onclick="toggleDetails(this)">
            Latte
        </div>
        <div class="menu-description">Coffee with steamed milk</div>
        <div class="menu-price">$3.49</div>
    </div>

    <div class="menu-item">
        <div class="menu-title" onclick="toggleDetails(this)">
            Cappuccino
        </div>
        <div class="menu-description">Espresso with frothy milk</div>
        <div class="menu-price">$3.99</div>
    </div>
</div>
<script>
    function toggleDetails(element) {
        const item = element.parentElement;
        const description = item.querySelector('.menu-description');
        const price = item.querySelector('.menu-price');

        if (description.style.display === 'block') {
            description.style.display = 'none';
            price.style.display = 'none';
        } else {
            description.style.display = 'block';
            price.style.display = 'block';
        }
    }
</script>
</body>
</html>

  body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f1e8;
            color: #4a4a4a;
        }

        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            background-color: #34495e;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #2c3e50;
            color: white;
        }

        .menu-container {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }

        .menu-item {
            position: relative;
            background-color: #ecf0f1;
            border: 1px solid #bdc3c7;
            padding: 15px;
            text-align: center;
            transition: transform 0.3s;
        }

        .menu-item:hover {
            transform: scale(1.05);
        }

        .menu-title {
            font-size: 1.2em;
            font-weight: bold;
            color: #e74c3c;
            cursor: pointer;
        }

        .menu-description,
        .menu-price {
            display: none;
            margin-top: 10px;
        }

        .menu-item:hover .menu-description,
        .menu-item:hover .menu-price {
            display: block;
        }

Preview

Coffe website Templates Example 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffe Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <nav class="sidebar">
            <h1>Coffee Menu</h1>
            <ul>
                <li><a href="#espresso">Espresso</a></li>
                <li><a href="#latte">Latte</a></li>
                <li><a href="#cappuccino">Cappuccino</a></li>
                <li><a href="#americano">Americano</a></li>
                <li><a href="#macchiato">Macchiato</a></li>
                <li><a href="#mocha">Mocha</a></li>
            </ul>
        </nav>

        <main class="content">
            <section id="espresso" class="drink" onmouseover="toggleContent('espresso', true)" onmouseout="toggleContent('espresso', false)">
                <div class="drink-info">
                    <h2 class="drink-name">Espresso</h2>
                    <span class="toggle-icon" onclick="toggleContent('espresso', true)">▼</span>
                </div>
                <p class="drink-description" style="display: none;">Strong and concentrated black coffee</p>
                <p class="price" style="display: none;">$2.99</p>
            </section>

            <section id="latte" class="drink" onmouseover="toggleContent('latte', true)" onmouseout="toggleContent('latte', false)">
                <div class="drink-info">
                    <h2 class="drink-name">Latte</h2>
                    <span class="toggle-icon" onclick="toggleContent('latte', true)">▼</span>
                </div>
                <p class="drink-description" style="display: none;">Espresso with steamed milk and a small amount of foam</p>
                <p class="price" style="display: none;">$4.49</p>
            </section>

            <section id="cappuccino" class="drink" onmouseover="toggleContent('cappuccino', true)" onmouseout="toggleContent('cappuccino', false)">
                <div class="drink-info">
                    <h2 class="drink-name">Cappuccino</h2>
                    <span class="toggle-icon" onclick="toggleContent('cappuccino', true)">▼</span>
                </div>
                <p class="drink-description" style="display: none;">Equal parts of espresso, steamed milk, and foam</p>
                <p class="price" style="display: none;">$4.99</p>
            </section>

            <section id="americano" class="drink" onmouseover="toggleContent('americano', true)" onmouseout="toggleContent('americano', false)">
                <div class="drink-info">
                    <h2 class="drink-name">Americano</h2>
                    <span class="toggle-icon" onclick="toggleContent('americano', true)">▼</span>
                </div>
                <p class="drink-description" style="display: none;">Espresso with added hot water</p>
                <p class="price" style="display: none;">$3.49</p>
            </section>

            <section id="macchiato" class="drink" onmouseover="toggleContent('macchiato', true)" onmouseout="toggleContent('macchiato', false)">
                <div class="drink-info">
                    <h2 class="drink-name">Macchiato</h2>
                    <span class="toggle-icon" onclick="toggleContent('macchiato', true)">▼</span>
                </div>
                <p class="drink-description" style="display: none;">Espresso with a small amount of milk</p>
                <p class="price" style="display: none;">$3.99</p>
            </section>

            <section id="mocha" class="drink" onmouseover="toggleContent('mocha', true)" onmouseout="toggleContent('mocha', false)">
                <div class="drink-info">
                    <h2 class="drink-name">Mocha</h2>
                    <span class="toggle-icon" onclick="toggleContent('mocha', true)">▼</span>
                </div>
                <p class="drink-description" style="display: none;">Espresso with steamed milk and chocolate</p>
                <p class="price" style="display: none;">$5.49</p>
            </section>
        </main>
    </div>
<script>
function toggleContent(id, isHovered) {
    const drinkElement = document.getElementById(id);
    const descriptionElement = drinkElement.querySelector('.drink-description');
    const priceElement = drinkElement.querySelector('.price');
    const toggleIconElement = drinkElement.querySelector('.toggle-icon');

    if (isHovered) {
        descriptionElement.style.display = 'block';
        priceElement.style.display = 'block';
        toggleIconElement.innerText = '▲';
    } else {
        descriptionElement.style.display = 'none';
        priceElement.style.display = 'none';
        toggleIconElement.innerText = '▼';
    }
}
</script>
</body>
</html>

  
    body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
}

.sidebar {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 20px;
    width: 250px;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
}

.sidebar h1 {
    margin-bottom: 20px;
    color: #3498db;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    text-decoration: none;
    color: #ecf0f1;
    font-weight: bold;
    transition: color 0.3s;
}

.sidebar a:hover {
    color: #3498db;
}

.content {
    flex-grow: 1;
    padding: 20px;
}

/* ... (unchanged) ... */

.drink {
    margin-bottom: 40px;
    border: 1px solid #ecf0f1;
    border-radius: 10px;
    padding: 20px;
    background-color: #ecf0f1;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.drink-info {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.toggle-icon {
    font-size: 1.2em;
    color: #3498db;
}

.drink-description:hover,
.price:hover {
    background-color: #ecf0f1;
}


.price {
    font-weight: bold;
    color: #e74c3c;
    font-size: 1.2em;
}

Preview