使用HTML和CSS创建一个响应式咖啡网站

Web 开发 CSS HTML

本文将向您展示如何使用HTML和CSS创建一个响应式咖啡网站。我们将设计英雄区域、产品列表和联系表单等部分，并确保它们在台式机和移动设备上都能很好地显示。

在这篇文章中，我们将使用HTML和CSS创建一个响应式咖啡网站。

使用HTML和CSS创建一个响应式咖啡网站

在本教程中，我们将通过六个简单的步骤来构建一个时尚的响应式咖啡店网站。

理解响应式网页设计
咖啡网站的HTML结构
用于样式和响应式的CSS

响应式咖啡网站应该具备

我们将构建一个简洁时尚的咖啡店网站，该网站可以适应不同的屏幕尺寸。网站将包括

一个具有醒目欢迎信息的英雄区域。
一个展示几种咖啡选项及其描述的产品区域。
一个用于用户咨询的联系表单。
响应式设计，使网站在台式机和移动屏幕上都能显示良好。

理解响应式网页设计

响应式设计意味着网站布局会自动调整以适应不同的屏幕尺寸。对于这个咖啡网站，我们将使用CSS媒体查询来确保我们的网站布局在较小的屏幕（例如手机）上平滑地变化。

图像资源

为了创建一个视觉上吸引人的咖啡网站，我们需要几张图片

英雄区域图片：coffee-hero.jpg - 英雄区域的全宽、醒目的咖啡图片。
产品图片：coffee1.jpg、coffee2.jpg和coffee3.jpg - 产品区域中显示的各种咖啡类型（如浓缩咖啡、拿铁和卡布奇诺）的图片。

咖啡网站的HTML结构

让我们从基本的HTML结构开始。我们将在HTML文件中创建一个英雄区域、一个产品区域和一个联系区域。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Coffee Website</title>
    <link rel="stylesheet" href="style.css">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const faders = document.querySelectorAll(".about, .products, .contact");

            const appearOptions = {
                threshold: 0.2, // Trigger when 20% of the section is in view
                rootMargin: "0px 0px -100px 0px"
            };

            const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
                entries.forEach(entry => {
                    if (!entry.isIntersecting) {
                        return;
                    } else {
                        entry.target.classList.add("appear");
                        appearOnScroll.unobserve(entry.target);
                    }
                });
            }, appearOptions);

            faders.forEach(fader => {
                appearOnScroll.observe(fader);
            });
        });
    </script>


</head>

<body>
    <!-- Header Section -->
    <header>
        <div class="container">
            <h1 class="logo">CoffeeHouse</h1>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="container hero-content">
            <div class="hero-text">
                <h2>Welcome to CoffeeHouse</h2>
                <p>Experience the rich aroma and flavors of our carefully selected beans.</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </div>
    </section>


    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <h2>About Us</h2>
            <p>At CoffeeHouse, we believe in providing the best coffee experience. Our beans are sourced from the finest farms around the world and roasted to perfection to deliver a bold, smooth taste with every sip.</p>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="products">
        <div class="container">
            <h2>Our Products</h2>
            <div class="product-list">
                <div class="product">
                    <img src="img/coffee1.jpg" alt="Espresso">
                    <h3>Espresso</h3>
                    <p>A rich and intense coffee experience.</p>
                </div>
                <div class="product">
                    <img src="img/coffee2.jpg" alt="Latte">
                    <h3>Latte</h3>
                    <p>A smooth and creamy delight.</p>
                </div>
                <div class="product">
                    <img src="img/coffee3.png" alt="Cappuccino">
                    <h3>Cappuccino</h3>
                    <p>The perfect blend of coffee and foam.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <p>Got questions? We'd love to hear from you!</p>
            <a href="mailto:info@coffeehouse.com" class="btn">Email Us</a>
        </div>
    </section>

    <!-- Footer Section -->
    <footer>
        <div class="container">
            <p>© 2024 CoffeeHouse. All rights reserved.</p>
        </div>
    </footer>

</body>

</html>

用于样式和响应式的CSS

在我们的CSS文件中，我们将应用样式以使网站看起来简洁。我们还将添加媒体查询以使布局适应较小的屏幕。

/* Basic Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Arial, sans-serif;
}
 body {
     line-height: 1.6;
     color: #333;
}
 html {
     scroll-behavior: smooth;
}
/* Container */
 .container {
     width: 90%;
     max-width: 1200px;
     margin: auto;
}
/* Header */
 header {
     background-color: #333;
     color: #fff;
     padding: 10px 0;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 10;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     animation: fadeIn 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
 header .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 header .logo {
     font-size: 24px;
     font-weight: bold;
     text-transform: uppercase;
}
 header nav ul {
     list-style-type: none;
     display: flex;
     gap: 20px;
}
 header nav ul li a {
     color: #fff;
     text-decoration: none;
     padding: 5px 10px;
     border-radius: 5px;
     transition: background 0.3s;
}
 header nav ul li a:hover {
     background-color: #f0a500;
}
/* Hero Section */
 .hero {
     background: url('img/coffee-hero.jpg') no-repeat center center/cover;
     height: 80vh;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
     overflow: hidden;
     clip-path: ellipse(100% 60% at 50% 40%);
}
 .hero-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     max-width: 1200px;
     width: 100%;
}
 .hero-text {
     max-width: 50%;
     text-align: left;
     animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
     animation-delay: 0.5s;
     animation-fill-mode: backwards;
}
 .hero h2 {
     font-size: 42px;
     font-weight: bold;
}
 .hero p {
     margin: 10px 0 20px;
     font-size: 18px;
}
 .hero .btn {
     background-color: #f0a500;
     color: #fff;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 50px;
     transition: background 0.3s, transform 0.3s;
}
 .hero .btn:hover {
     background-color: #e89b00;
     transform: scale(1.05);
}
 .btn {
     background-color: #f0a500;
     color: #fff;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 50px;
     transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
 .btn:hover {
     background-color: #e89b00;
     transform: scale(1.05);
}
/* Coffee Bag Image Styling */
 .hero-image {
     max-width: 40%;
     display: flex;
     justify-content: center;
}
 .hero-image img {
     width: 100%;
     max-width: 300px;
     border-radius: 8px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s;
     animation: scaleUp 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
     animation-delay: 0.7s;
     animation-fill-mode: backwards;
}
 .hero-image img:hover {
     transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
     transform: scale(1.05);
}
/* Responsive Design for Hero Section */
 @media (max-width: 768px) {
     .hero-content {
         flex-direction: column;
         text-align: center;
    }
     .hero-text, .hero-image {
         max-width: 100%;
    }
     .hero h2 {
         font-size: 32px;
    }
     .hero p {
         font-size: 16px;
    }
}
/* About Section with cool shape */
 .about {
     padding: 60px 0;
     text-align: center;
     background-color: #fff;
     clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
     margin-top: -80px;
     z-index: 1;
     opacity: 0;
     animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
     animation-delay: 0.5s;
}
 .about h2 {
     font-size: 32px;
     margin-bottom: 20px;
     color: #f0a500;
}
 .about p {
     max-width: 700px;
     margin: auto;
     font-size: 18px;
}
/* Products Section */
/* Products Section */
 .products {
     padding: 60px 0;
     text-align: center;
}
 .products h2 {
     font-size: 36px;
     margin-bottom: 40px;
     color: #333;
}
 .product-list {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
}
 .product {
     width: 280px;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     background-color: #fff;
     cursor: pointer;
     overflow: hidden;
     text-align: center;
}
 .product img {
     width: 100%;
     height: auto;
     border-radius: 10px;
     transition: transform 0.3s ease;
}
 .product h3 {
     font-size: 24px;
     color: #333;
     margin: 15px 0 5px;
     transition: color 0.3s ease;
}
 .product p {
     color: #666;
     font-size: 16px;
     transition: color 0.3s ease;
}
/* Hover Effects */
 .product:hover {
     transform: translateY(-10px) scale(1.03);
    /* Lift and scale effect */
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    /* Stronger shadow on hover */
}
 .product:hover img {
     transform: scale(1.1);
    /* Slight zoom effect on image */
}
 .product:hover h3 {
     color: #e89b00;
    /* Change text color on hover */
}
 .product:hover p {
     color: #444;
    /* Darken text color on hover */
}
/* Contact Section */
 .contact {
     padding: 40px 0;
     text-align: center;
     background-color: #333;
     color: #fff;
     position: relative;
     clip-path: ellipse(100% 90% at 50% 10%);
     opacity: 0;
     animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
     animation-delay: 0.3s;
}
 .contact h2 {
     font-size: 32px;
     margin-bottom: 20px;
     color: #f0a500;
}
 .contact p {
     font-size: 18px;
}
 .contact .btn {
     background-color: #f0a500;
     color: #fff;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 50px;
     transition: background 0.3s, transform 0.3s;
}
 .contact .btn:hover {
     background-color: #e89b00;
     transform: scale(1.05);
}
/* Footer */
 footer {
     background-color: #222;
     color: #fff;
     padding: 10px 0;
     text-align: center;
     font-size: 14px;
}
/* Responsive Design */
 @media (max-width: 768px) {
     header .container {
         flex-direction: column;
    }
     header nav ul {
         flex-direction: column;
         gap: 10px;
    }
     .product-list {
         flex-direction: column;
    }
     .hero h2 {
         font-size: 32px;
    }
     .hero p {
         font-size: 16px;
    }
}
/* Fade-in Animation */
 @keyframes fadeIn {
     0% {
         opacity: 0;
         transform: translateY(40px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}
/* Slide-in Animation */
 @keyframes slideIn {
     0% {
         opacity: 0;
         transform: translateX(-40px);
    }
     100% {
         opacity: 1;
         transform: translateX(0);
    }
}
/* Scale Animation */
 @keyframes scaleUp {
     0% {
         transform: scale(0.8);
         opacity: 0;
    }
     100% {
         transform: scale(1);
         opacity: 1;
    }
}
/* Sections that fade in on scroll */
 .about, .products, .contact {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1.8s cubic-bezier(0.4, 0.0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}
 .appear {
     opacity: 1;
     transform: translateY(0);
     }

网站各部分的解释

这个咖啡网站被组织成几个关键部分，每个部分都旨在增强用户体验并引导访问者浏览网站。

页眉和英雄区域

页眉包含徽标和导航链接，允许用户跳转到页面的不同部分，例如“产品”和“联系”。
英雄区域包含一个全宽背景图片（coffee-hero.jpg），展示了一张视觉上醒目的咖啡图片，并以大型友好的标题和简短的标语欢迎用户。

关于部分

此可选部分提供了对咖啡店的简短描述。这是一个介绍咖啡店独特之处或特色产品的机会，从而与访客建立个人联系。

产品部分

此部分显示精选的咖啡产品，例如浓缩咖啡、拿铁和卡布奇诺，每个产品都配有图片和描述。

网格布局：在台式机屏幕上，产品以网格形式排列，这使每个产品都具有相同的可见性，并使布局简洁有序。
响应式布局：在较小的屏幕（如移动设备）上，网格布局切换为单列格式，使图像和文本更易于查看。

联系部分

联系部分包含一个表单，供用户在有疑问或想联系时填写。
该表单通常包括“姓名”、“电子邮件”和“消息”等字段，以及一个用于发送消息的号召性用语按钮。此部分鼓励用户互动，并可以帮助咖啡店收集咨询。

页脚部分

页脚包含简单的版权信息，使网站具有专业的完成度。
您也可以在此处添加指向社交媒体个人资料或联系信息的链接。

完整代码（HTML和CSS）

以下是我们咖啡网站的完整代码，结合了上面各部分的HTML和CSS代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Coffee Website</title>
    <!-- <link rel="stylesheet" href="style.css"> -->

    <style>
        /* Basic Reset */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            line-height: 1.6;
            color: #333;
        }

        html {
            scroll-behavior: smooth;
        }

        /* Container */

        .container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
        }

        /* Header */

        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 10;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: fadeIn 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
        }

        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        header .logo {
            font-size: 24px;
            font-weight: bold;
            text-transform: uppercase;
        }

        header nav ul {
            list-style-type: none;
            display: flex;
            gap: 20px;
        }

        header nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background 0.3s;
        }

        header nav ul li a:hover {
            background-color: #f0a500;
        }

        /* Hero Section */

        .hero {
            background: url('img/coffee-hero.jpg') no-repeat center center/cover;
            height: 80vh;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            clip-path: ellipse(100% 60% at 50% 40%);
        }

        .hero-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            max-width: 1200px;
            width: 100%;
        }

        .hero-text {
            max-width: 50%;
            text-align: left;
            animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation-delay: 0.5s;
            animation-fill-mode: backwards;
        }

        .hero h2 {
            font-size: 42px;
            font-weight: bold;
        }

        .hero p {
            margin: 10px 0 20px;
            font-size: 18px;
        }

        .hero .btn {
            background-color: #f0a500;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 50px;
            transition: background 0.3s, transform 0.3s;
        }



        .hero .btn:hover {
            background-color: #e89b00;
            transform: scale(1.05);
        }

        .btn {
            background-color: #f0a500;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 50px;
            transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .btn:hover {
            background-color: #e89b00;
            transform: scale(1.05);
        }

        /* Coffee Bag Image Styling */

        .hero-image {
            max-width: 40%;
            display: flex;
            justify-content: center;
        }

        .hero-image img {
            width: 100%;
            max-width: 300px;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
            animation: scaleUp 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation-delay: 0.7s;
            animation-fill-mode: backwards;
        }

        .hero-image img:hover {
            transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
            transform: scale(1.05);
        }

        /* Responsive Design for Hero Section */

        @media (max-width: 768px) {
            .hero-content {
                flex-direction: column;
                text-align: center;
            }

            .hero-text,
            .hero-image {
                max-width: 100%;
            }

            .hero h2 {
                font-size: 32px;
            }

            .hero p {
                font-size: 16px;
            }
        }

        /* About Section with cool shape */

        .about {
            padding: 60px 0;
            text-align: center;
            background-color: #fff;
            clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
            margin-top: -80px;
            z-index: 1;
            opacity: 0;
            animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation-delay: 0.5s;
        }

        .about h2 {
            font-size: 32px;
            margin-bottom: 20px;
            color: #f0a500;
        }

        .about p {
            max-width: 700px;
            margin: auto;
            font-size: 18px;
        }

        /* Products Section */

        /* Products Section */

        .products {
            padding: 60px 0;
            text-align: center;
        }

        .products h2 {
            font-size: 36px;
            margin-bottom: 40px;
            color: #333;
        }

        .product-list {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .product {
            width: 280px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background-color: #fff;
            cursor: pointer;
            overflow: hidden;
            text-align: center;
        }

        .product img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }

        .product h3 {
            font-size: 24px;
            color: #333;
            margin: 15px 0 5px;
            transition: color 0.3s ease;
        }

        .product p {
            color: #666;
            font-size: 16px;
            transition: color 0.3s ease;
        }

        /* Hover Effects */

        .product:hover {
            transform: translateY(-10px) scale(1.03);
            /* Lift and scale effect */
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
            /* Stronger shadow on hover */
        }

        .product:hover img {
            transform: scale(1.1);
            /* Slight zoom effect on image */
        }

        .product:hover h3 {
            color: #e89b00;
            /* Change text color on hover */
        }

        .product:hover p {
            color: #444;
            /* Darken text color on hover */
        }


        /* Contact Section */

        .contact {
            padding: 40px 0;
            text-align: center;
            background-color: #333;
            color: #fff;
            position: relative;
            clip-path: ellipse(100% 90% at 50% 10%);
            opacity: 0;
            animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
            animation-delay: 0.3s;
        }


        .contact h2 {
            font-size: 32px;
            margin-bottom: 20px;
            color: #f0a500;
        }

        .contact p {
            font-size: 18px;
        }

        .contact .btn {
            background-color: #f0a500;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 50px;
            transition: background 0.3s, transform 0.3s;
        }

        .contact .btn:hover {
            background-color: #e89b00;
            transform: scale(1.05);
        }

        /* Footer */

        footer {
            background-color: #222;
            color: #fff;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
        }

        /* Responsive Design */

        @media (max-width: 768px) {
            header .container {
                flex-direction: column;
            }

            header nav ul {
                flex-direction: column;
                gap: 10px;
            }

            .product-list {
                flex-direction: column;
            }

            .hero h2 {
                font-size: 32px;
            }

            .hero p {
                font-size: 16px;
            }
        }

        /* Fade-in Animation */

        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(40px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Slide-in Animation */

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateX(-40px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Scale Animation */

        @keyframes scaleUp {
            0% {
                transform: scale(0.8);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Sections that fade in on scroll */

        .about,
        .products,
        .contact {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.8s cubic-bezier(0.4, 0.0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        .appear {
            opacity: 1;
            transform: translateY(0);
        }
    </style>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const faders = document.querySelectorAll(".about, .products, .contact");

            const appearOptions = {
                threshold: 0.2, // Trigger when 20% of the section is in view
                rootMargin: "0px 0px -100px 0px"
            };

            const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
                entries.forEach(entry => {
                    if (!entry.isIntersecting) {
                        return;
                    } else {
                        entry.target.classList.add("appear");
                        appearOnScroll.unobserve(entry.target);
                    }
                });
            }, appearOptions);

            faders.forEach(fader => {
                appearOnScroll.observe(fader);
            });
        });
    </script>


</head>

<body>
    <!-- Header Section -->
    <header>
        <div class="container">
            <h1 class="logo">CoffeeHouse</h1>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="container hero-content">
            <div class="hero-text">
                <h2>Welcome to CoffeeHouse</h2>
                <p>Experience the rich aroma and flavors of our carefully selected beans.</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </div>
    </section>


    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <h2>About Us</h2>
            <p>At CoffeeHouse, we believe in providing the best coffee experience. Our beans are sourced from the finest farms around the world and roasted to perfection to deliver a bold, smooth taste with every sip.</p>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="products">
        <div class="container">
            <h2>Our Products</h2>
            <div class="product-list">
                <div class="product">
                    <img src="img/coffee1.jpg" alt="Espresso">
                    <h3>Espresso</h3>
                    <p>A rich and intense coffee experience.</p>
                </div>
                <div class="product">
                    <img src="img/coffee2.jpg" alt="Latte">
                    <h3>Latte</h3>
                    <p>A smooth and creamy delight.</p>
                </div>
                <div class="product">
                    <img src="img/coffee3.png" alt="Cappuccino">
                    <h3>Cappuccino</h3>
                    <p>The perfect blend of coffee and foam.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <p>Got questions? We'd love to hear from you!</p>
            <a href="mailto:info@coffeehouse.com" class="btn">Email Us</a>
        </div>
    </section>

    <!-- Footer Section -->
    <footer>
        <div class="container">
            <p>© 2024 CoffeeHouse. All rights reserved.</p>
        </div>
    </footer>

</body>

</html>

输出

以下是最终输出的样子。

在这篇文章中，我们使用HTML和CSS创建了一个响应式咖啡网站。我们设计了一个简洁易用的布局，其中包含英雄横幅、产品和联系表单部分，确保它在所有屏幕尺寸上都能显示良好。本项目演示了构建响应式网站的基础知识，为类似项目提供了坚实的基础。

REDUAN AHMAD

内容撰写人 | Web 开发和UI/UX设计爱好者 | 清晰、引人入胜、经SEO优化的见解

更新于：2024年11月7日

40 次浏览

启动您的职业生涯

通过完成课程获得认证

开始