Spaces:

mistpe
/

showWine

Running

App Files Files Community

mistpe commited on Nov 9, 2024

Commit

bac0298

verified ·

1 Parent(s): f2d5a0b

Create culture.html

Browse files

Files changed (1) hide show

culture.html +989 -0

culture.html ADDED Viewed

	@@ -0,0 +1,989 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>绍兴黄酒 - 文化底蕴</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <!-- 复用首页的第一个style标签的内容 -->
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
+        :root {
+            --primary-color: #FFB42E;      /* 明亮温暖的金黄 */
+            --secondary-color: #FF8264;    /* 暖橙色 */
+            --accent-color: #FF6B6B;       /* 活力红色 */
+            --bg-light: #FFF9F0;          /* 温暖的背景色 */
+            --text-dark: #2D232E;         /* 深紫色文字 */
+            --text-light: #FFF9F0;        /* 浅色文字 */
+            --gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B);
+            --gradient-2: linear-gradient(45deg, #FFB42E, #FF8264);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-light);
+            color: var(--text-dark);
+            overflow-x: hidden;
+        }
+        /* 现代导航栏 */
+        .navigation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(255, 249, 240, 0.8);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        .navigation.scrolled {
+            background: rgba(255, 249, 240, 0.95);
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+            padding: 0.8rem 2rem;
+        }
+        .nav-logo {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            text-decoration: none;
+        }
+        .logo-text {
+            font-size: 1.5rem;
+            font-weight: bold;
+            background: var(--gradient-1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            position: relative;
+        }
+        .logo-text::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: var(--gradient-1);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+            transform-origin: right;
+        }
+        .nav-logo:hover .logo-text::after {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            align-items: center;
+        }
+        .nav-link {
+            text-decoration: none;
+            color: var(--text-dark);
+            font-size: 1rem;
+            padding: 0.8rem 1.5rem;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            background: transparent;
+            border: 2px solid transparent;
+        }
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: var(--gradient-1);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: -1;
+        }
+        .nav-link:hover {
+            color: white;
+            border-color: transparent;
+        }
+        .nav-link:hover::before {
+            opacity: 1;
+        }
+        .nav-link.active {
+            background: var(--gradient-1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
+        }
+        /* 英雄区域 */
+        .hero {
+            min-height: 100vh;
+            padding-top: 80px;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+        }
+        .hero-content {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            position: relative;
+            z-index: 2;
+        }
+        .hero-text {
+            position: relative;
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: var(--accent-color);
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .hero-subtitle::before {
+            content: '';
+            width: 50px;
+            height: 2px;
+            background: var(--gradient-1);
+        }
+        .hero-title {
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            line-height: 1.2;
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+        .hero-title .highlight {
+            display: inline-block;
+            position: relative;
+            color: var(--primary-color);
+        }
+        .hero-title .highlight::after {
+            content: '';
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 8px;
+            background: var(--gradient-1);
+            opacity: 0.3;
+            z-index: -1;
+        }
+        .hero-description {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: var(--text-dark);
+            opacity: 0.8;
+            margin-bottom: 2rem;
+            position: relative;
+        }
+        .hero-cta {
+            display: flex;
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+        .cta-button {
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .cta-primary {
+            background: var(--gradient-1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
+        }
+        .cta-primary::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .cta-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4);
+        }
+        .cta-primary:hover::after {
+            opacity: 1;
+        }
+        .cta-secondary {
+            background: transparent;
+            border: 2px solid var(--primary-color);
+            color: var(--text-dark);
+        }
+        .cta-secondary:hover {
+            background: var(--gradient-2);
+            color: white;
+            border-color: transparent;
+        }
+        /* 装饰元素 */
+        .hero-decoration {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
+        }
+        .decoration-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: var(--gradient-1);
+            opacity: 0.1;
+            filter: blur(40px);
+        }
+        .circle-1 {
+            width: 400px;
+            height: 400px;
+            top: -100px;
+            right: -100px;
+        }
+        .circle-2 {
+            width: 300px;
+            height: 300px;
+            bottom: -50px;
+            left: -50px;
+            background: var(--gradient-2);
+        }
+        .floating-text {
+            position: absolute;
+            font-size: clamp(5rem, 15vw, 10rem);
+            font-weight: bold;
+            opacity: 0.03;
+            white-space: nowrap;
+            color: var(--text-dark);
+        }
+        .floating-text-1 {
+            top: 20%;
+            left: -10%;
+            transform: rotate(-15deg);
+        }
+        .floating-text-2 {
+            bottom: 10%;
+            right: -5%;
+            transform: rotate(10deg);
+        }
+        /* 动态背景图案 */
+        .bg-pattern {
+            position: absolute;
+            inset: 0;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%),
+                radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%);
+            opacity: 0.5;
+            animation: patternMove 20s linear infinite;
+        }
+        @keyframes patternMove {
+            0% {
+                background-position: 0% 0%;
+            }
+            100% {
+                background-position: 100% 100%;
+            }
+        }
+        /* 3D展示区占位 */
+        .model-showcase {
+                    position: relative;
+                    width: 100%;
+                    height: 500px;
+                    border-radius: 20px;
+                    overflow: hidden;
+                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+                    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+                    backdrop-filter: blur(10px);
+                }
+                #model-container canvas {
+                    width: 100% !important;
+                    height: 100% !important;
+                    border-radius: 20px;
+                }
+    </style>
+     <style>
+        /* 复用首页的基础样式 */
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
+        :root {
+            --primary-color: #FFB42E;
+            --secondary-color: #FF8264;
+            --accent-color: #FF6B6B;
+            --bg-light: #FFF9F0;
+            --text-dark: #2D232E;
+            --text-light: #FFF9F0;
+            --gradient-1: linear-gradient(135deg, #FFB42E, #FF6B6B);
+            --gradient-2: linear-gradient(45deg, #FFB42E, #FF8264);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-light);
+            color: var(--text-dark);
+            overflow-x: hidden;
+        }
+        /* 复用首页的导航栏样式 */
+        .navigation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(255, 249, 240, 0.8);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        /* 以下是hero区域的样式，参考首页的设计 */
+        .hero {
+            min-height: 100vh;
+            padding-top: 80px;
+            position: relative;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            background: var(--bg-light);
+        }
+        .hero-content {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            position: relative;
+            z-index: 2;
+        }
+        .hero-text {
+            position: relative;
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: var(--accent-color);
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .hero-subtitle::before {
+            content: '';
+            width: 50px;
+            height: 2px;
+            background: var(--gradient-1);
+        }
+        .hero-title {
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            line-height: 1.2;
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+        .hero-title .highlight {
+            display: inline-block;
+            position: relative;
+            color: var(--primary-color);
+        }
+        .hero-description {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: var(--text-dark);
+            opacity: 0.8;
+            margin-bottom: 2rem;
+        }
+        .model-showcase {
+            position: relative;
+            width: 100%;
+            height: 500px;
+            border-radius: 20px;
+            overflow: hidden;
+            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+            backdrop-filter: blur(10px);
+        }
+        /* 装饰元素样式 */
+        .hero-decoration {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
+        }
+        .bg-pattern {
+            position: absolute;
+            inset: 0;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(255, 180, 46, 0.1) 0%, transparent 10%),
+                radial-gradient(circle at 80% 70%, rgba(255, 107, 107, 0.1) 0%, transparent 10%);
+            opacity: 0.5;
+            animation: patternMove 20s linear infinite;
+        }
+        .decoration-circle {
+            position: absolute;
+            border-radius: 50%;
+            background: var(--gradient-1);
+            opacity: 0.1;
+            filter: blur(40px);
+        }
+        .circle-1 {
+            width: 400px;
+            height: 400px;
+            top: -100px;
+            right: -100px;
+        }
+        .circle-2 {
+            width: 300px;
+            height: 300px;
+            bottom: -50px;
+            left: -50px;
+            background: var(--gradient-2);
+        }
+        .hero-image {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .hero-image img {
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+            border-radius: 20px;
+        }
+        .cta-button {
+            display: inline-block;
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+        }
+        .cta-primary {
+            background: var(--gradient-1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(255, 180, 46, 0.3);
+        }
+        .cta-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 180, 46, 0.4);
+        }
+    </style>
+</head>
+<body>
+    <!-- 导航栏 -->
+    <nav class="navigation">
+        <a href="index.html" class="nav-logo">
+            <span class="logo-text">绍兴黄酒</span>
+        </a>
+        <div class="nav-links">
+            <a href="culture.html" class="nav-link active">文化底蕴</a>
+            <a href="products.html" class="nav-link">臻品佳酿</a>
+            <a href="innovation.html" class="nav-link">创新未来</a>
+            <a href="contact.html" class="nav-link">联系我们</a>
+            <a href="shop.html" class="nav-link">立即品鉴</a>
+        </div>
+    </nav>
+    <!-- 文化英雄区域 -->
+    <section class="hero">
+        <!-- 背景装饰 -->
+        <div class="hero-decoration">
+            <div class="bg-pattern"></div>
+            <div class="decoration-circle circle-1"></div>
+            <div class="decoration-circle circle-2"></div>
+            <div class="floating-text floating-text-1">匠心</div>
+            <div class="floating-text floating-text-2">传承</div>
+        </div>
+        <!-- 主要内容 -->
+        <div class="hero-content">
+            <div class="hero-text">
+                <div class="hero-subtitle">千年酿造 · 文化传承</div>
+                <h1 class="hero-title">
+                    探寻 <span class="highlight">绍兴黄酒</span><br>
+                    千年文化瑰宝
+                </h1>
+                <p class="hero-description">
+                    走进绍兴黄酒的世界，感受中国传统酿造艺术的精髓，
+                    探索一段跨越千年的文化瑰宝。每一滴都凝聚着匠人的智慧与岁月的沉淀。
+                </p>
+                <div class="hero-cta">
+                    <a href="#culture-heritage" class="cta-button cta-primary">了解文化</a>
+                </div>
+            </div>
+            <div class="model-showcase">
+                <div class="hero-image">
+                    <img src="img2/culture-hero.jpg" alt="绍兴黄酒文化展示">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 后续内容将在下一部分继续 -->
+     <!-- 完整的3D立体卡片设计 -->
+<!-- 优化后的水平展开布局 -->
+<section id="culture-heritage" class="culture-section">
+    <!-- 完整的样式代码 -->
+<style>
+    .culture-section {
+        padding: 4rem 0;
+        background: var(--bg-light);
+        position: relative;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+    }
+    .section-container {
+        width: 100%;
+        max-width: 1600px;
+        margin: 0 auto;
+        padding: 2rem;
+        perspective: 2000px;
+    }
+    .timeline {
+        display: flex;
+        justify-content: center;
+        gap: 1.5rem;
+        height: 600px;
+        transform-style: preserve-3d;
+        position: relative;
+    }
+    .timeline-item {
+        position: relative;
+        flex: 0.18;
+        min-width: 100px;
+        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
+        transform-style: preserve-3d;
+        transform: perspective(1000px) rotateY(10deg) translateZ(0);
+    }
+    /* 悬停状态展开 */
+    .timeline-item:hover {
+        flex: 0.6;
+        transform: perspective(1000px) rotateY(0) translateZ(50px);
+    }
+    /* 其他卡片收起 */
+    .timeline-item:hover ~ .timeline-item {
+        flex: 0.12;
+        transform: perspective(1000px) rotateY(20deg) translateZ(0);
+    }
+    /* 前面的卡片也收起 */
+    .timeline-item:has(~ .timeline-item:hover) {
+        flex: 0.12;
+        transform: perspective(1000px) rotateY(-20deg) translateZ(0);
+    }
+    .timeline-card {
+        position: absolute;
+        inset: 0;
+        padding: 3rem 2.5rem;
+        background: white;
+        border-radius: 24px;
+        transition: all 0.6s ease;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+    /* 卡片装饰线 */
+    .timeline-card::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        border-radius: 2px;
+        transition: all 0.3s ease;
+    }
+    /* 卡片样式变体 */
+    .timeline-card-1 {
+        background: linear-gradient(135deg, #fff 0%, #fff8ef 100%);
+        box-shadow: 20px 20px 60px rgba(255, 180, 46, 0.1);
+    }
+    .timeline-card-1::before {
+        background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
+    }
+    .timeline-card-2 {
+        background: linear-gradient(135deg, #fff 0%, #fff4f0 100%);
+        box-shadow: 20px 20px 60px rgba(255, 107, 107, 0.1);
+    }
+    .timeline-card-2::before {
+        background: linear-gradient(to bottom, var(--secondary-color), var(--accent-color));
+    }
+    .timeline-card-3 {
+        background: linear-gradient(135deg, #fff 0%, #fff8f8 100%);
+        box-shadow: 20px 20px 60px rgba(255, 130, 100, 0.1);
+    }
+    .timeline-card-3::before {
+        background: linear-gradient(to bottom, var(--accent-color), var(--secondary-color));
+    }
+    .timeline-card-4 {
+        background: linear-gradient(135deg, #fff 0%, #fff6ef 100%);
+        box-shadow: 20px 20px 60px rgba(255, 180, 46, 0.1);
+    }
+    .timeline-card-4::before {
+        background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
+    }
+    /* 悬停时装饰线效果 */
+    .timeline-item:hover .timeline-card::before {
+        width: 6px;
+        box-shadow: 0 0 20px rgba(var(--primary-color), 0.3);
+    }
+    /* 增加卡片内阴影效果 */
+    .timeline-card::after {
+        content: '';
+        position: absolute;
+        inset: 1rem;
+        border-radius: 20px;
+        box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    .timeline-item:hover .timeline-card::after {
+        opacity: 1;
+    }
+    /* 图标样式 */
+    .timeline-icon {
+        width: 72px;
+        height: 72px;
+        border-radius: 50%;
+        background: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 2rem;
+        transition: all 0.5s ease;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+        transform: translateZ(20px);
+    }
+    .timeline-item:hover .timeline-icon {
+        transform: scale(1.1) translateZ(30px);
+    }
+    .timeline-card-1 .timeline-icon {
+        border: 3px solid var(--primary-color);
+        color: var(--primary-color);
+    }
+    .timeline-card-2 .timeline-icon {
+        border: 3px solid var(--secondary-color);
+        color: var(--secondary-color);
+    }
+    .timeline-card-3 .timeline-icon {
+        border: 3px solid var(--accent-color);
+        color: var(--accent-color);
+    }
+    .timeline-card-4 .timeline-icon {
+        border: 3px solid var(--primary-color);
+        color: var(--primary-color);
+    }
+    .timeline-icon svg {
+        width: 36px;
+        height: 36px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+    }
+    /* 文字样式和动画 */
+    .timeline-content {
+        opacity: 0.5;
+        transition: all 0.5s ease;
+        overflow: hidden;
+        flex: 1;
+        transform-style: preserve-3d;
+    }
+    .timeline-item:hover .timeline-content {
+        opacity: 1;
+        transform: translateZ(30px);
+    }
+    .timeline-era {
+        font-size: 1.8rem;
+        font-weight: 500;
+        margin-bottom: 1rem;
+        transition: all 0.5s ease;
+        letter-spacing: 0.05em;
+    }
+    .timeline-title {
+        font-size: 2.4rem;
+        margin-bottom: 1.5rem;
+        color: var(--text-dark);
+        font-weight: 700;
+        transition: all 0.5s ease;
+        line-height: 1.2;
+        transform: translateZ(10px);
+    }
+    .timeline-text {
+        line-height: 1.8;
+        color: var(--text-dark);
+        font-size: 1.4rem;
+        opacity: 0;
+        transition: all 0.5s ease;
+        transform: translateX(-20px) translateZ(0);
+    }
+    .timeline-item:hover .timeline-text {
+        opacity: 0.85;
+        transform: translateX(0) translateZ(20px);
+    }
+    /* 添加卡片底部阴影 */
+    .timeline-item::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -40px;
+        height: 40px;
+        background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        pointer-events: none;
+    }
+    .timeline-item:hover::after {
+        opacity: 1;
+    }
+    /* 响应式设计 */
+    @media (max-width: 1400px) {
+        .timeline {
+            height: 500px;
+        }
+        .timeline-text {
+            font-size: 1.2rem;
+        }
+        .timeline-title {
+            font-size: 2rem;
+        }
+    }
+    @media (max-width: 1024px) {
+        .timeline {
+            flex-direction: column;
+            height: auto;
+            gap: 2rem;
+        }
+        .timeline-item {
+            height: 180px;
+            width: 100%;
+            transform: none !important;
+        }
+        .timeline-item:hover {
+            height: 400px;
+        }
+        .timeline-content {
+            padding: 0 1rem;
+        }
+        .timeline-icon {
+            width: 56px;
+            height: 56px;
+        }
+        .timeline-era {
+            font-size: 1.4rem;
+        }
+        .timeline-title {
+            font-size: 1.8rem;
+        }
+        .timeline-text {
+            font-size: 1.1rem;
+        }
+    }
+</style>
+    <div class="section-container">
+        <div class="timeline">
+            <!-- 春秋战国 -->
+            <div class="timeline-item">
+                <div class="timeline-card timeline-card-1">
+                    <div class="timeline-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12,3 L17,8 L12,13 L7,8 L12,3 Z"/>
+                            <path d="M12,13 L12,21"/>
+                        </svg>
+                    </div>
+                    <div class="timeline-content">
+                        <div class="timeline-era">春秋战国</div>
+                        <h3 class="timeline-title">黄酒诞生</h3>
+                        <p class="timeline-text">绍兴黄酒诞生于春秋战国时期，相传越王勾践曾以黄酒犒赏将士。这片土地得天独厚的地理环境与先进的酿酒工艺，开启了黄酒文化的先河。</p>
+                    </div>
+                </div>
+            </div>
+            <!-- 唐宋时期 -->
+            <div class="timeline-item">
+                <div class="timeline-card timeline-card-2">
+                    <div class="timeline-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M6,4 L18,4 L16,20 L8,20 L6,4 Z"/>
+                            <path d="M4,4 L20,4"/>
+                            <path d="M8,8 L16,8"/>
+                        </svg>
+                    </div>
+                    <div class="timeline-content">
+                        <div class="timeline-era">唐宋时期</div>
+                        <h3 class="timeline-title">黄酒繁荣</h3>
+                        <p class="timeline-text">唐宋时期，"会稽美酒"享誉天下。当时的文人墨客常以黄酒为题，挥毫泼墨，留下了无数诗词佳作。苏东坡更是亲自改进酿酒工艺，开创了"东坡醉酒"的佳话。</p>
+                    </div>
+                </div>
+            </div>
+            <!-- 明清时代 -->
+            <div class="timeline-item">
+                <div class="timeline-card timeline-card-3">
+                    <div class="timeline-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M9,4 C7,4 5,6 5,8 C5,10 7,12 9,12 L15,12 C17,12 19,14 19,16 C19,18 17,20 15,20"/>
+                            <circle cx="15" cy="16" r="2"/>
+                            <circle cx="9" cy="8" r="2"/>
+                        </svg>
+                    </div>
+                    <div class="timeline-content">
+                        <div class="timeline-era">明清时代</div>
+                        <h3 class="timeline-title">工艺完善</h3>
+                        <p class="timeline-text">明清时期，绍兴黄酒的酿造工艺臻于完善，形成了独特的"绍兴酿法"。这一时期，黄酒不仅是饮品，更成为了文人雅士交流的重要媒介，见证了无数风雅故事。</p>
+                    </div>
+                </div>
+            </div>
+            <!-- 现代发展 -->
+            <div class="timeline-item">
+                <div class="timeline-card timeline-card-4">
+                    <div class="timeline-icon">
+                        <svg viewBox="0 0 24 24">
+                            <circle cx="12" cy="12" r="9"/>
+                            <path d="M12,7 L12,12 L16,12"/>
+                        </svg>
+                    </div>
+                    <div class="timeline-content">
+                        <div class="timeline-era">现代发展</div>
+                        <h3 class="timeline-title">创新传承</h3>
+                        <p class="timeline-text">传统与现代的完美融合，绍兴黄酒在保持传统工艺精髓的同时，不断创新。推出适合年轻人口味的新品，让这份千年文化在新时代焕发出璀璨光彩。</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+</body>
+</html>