Accueil

Modèles de café gratuits

Vous pouvez librement copier le code ou utiliser notre éditeur HTML en direct pour modifier le code selon vos besoins spécifiques.


Exemple 1 de modèles de sites web de café

<!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;
        }

Aperçu

Exemple 2 de modèles de sites web de café

<!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;
}

Aperçu