|
<!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> |
|
@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%; |
|
} |
|
} |
|
|
|
|
|
.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> |
|
</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">文化底蕴</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 active">立即品鉴</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"> |
|
<button class="cta-button cta-primary">探索产品</button> |
|
<button class="cta-button cta-secondary">了解文化</button> |
|
</div> |
|
</div> |
|
<div class="model-showcase" id="model-container"> |
|
|
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
|
|
<section class="features"> |
|
<div class="section-header"> |
|
<h2 class="section-title">匠心臻品</h2> |
|
<p class="section-subtitle">传统与创新的完美融合</p> |
|
</div> |
|
|
|
<div class="feature-grid"> |
|
<div class="feature-card"> |
|
<div class="feature-icon"> |
|
<svg viewBox="0 0 24 24" width="40" height="40"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M12,2 C6.5,2 2,6.5 2,12 C2,17.5 6.5,22 12,22 C17.5,22 22,17.5 22,12 C22,6.5 17.5,2 12,2 Z |
|
M12,6 L12,12 L16,16"> |
|
</path> |
|
|
|
<defs> |
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
<stop offset="0%" style="stop-color:#FFB42E"/> |
|
<stop offset="100%" style="stop-color:#FF6B6B"/> |
|
</linearGradient> |
|
</defs> |
|
</svg> |
|
</div> |
|
<h3>千年传承</h3> |
|
<p>源自春秋的酿造工艺，千年匠心传承，完美呈现东方美酒精髓。</p> |
|
</div> |
|
|
|
<div class="feature-card"> |
|
<div class="feature-icon"> |
|
<svg viewBox="0 0 24 24" width="40" height="40"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M12,2 L15,6 L19,7 L19,11 L21,14 L19,17 L19,21 L15,22 L12,20 L9,22 L5,21 L5,17 L3,14 L5,11 L5,7 L9,6 L12,2 Z |
|
M12,8 L12,16 M8,12 L16,12"> |
|
</path> |
|
</svg> |
|
</div> |
|
<h3>匠心工艺</h3> |
|
<p>严选上乘原料，遵循传统酿造工序，每一滴都是匠心臻品。</p> |
|
</div> |
|
|
|
<div class="feature-card"> |
|
<div class="feature-icon"> |
|
<svg viewBox="0 0 24 24" width="40" height="40"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M4,10 C4,6 8,3 12,3 C16,3 20,6 20,10 C20,15 12,21 12,21 C12,21 4,15 4,10 Z |
|
M12,7 L12,13 M9,10 L15,10"> |
|
</path> |
|
</svg> |
|
</div> |
|
<h3>品质保证</h3> |
|
<p>现代化品控体系，严格把控每道工序，确保卓越品质。</p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
|
|
<section class="products"> |
|
<div class="section-header"> |
|
<h2 class="section-title">臻品系列</h2> |
|
<p class="section-subtitle">每一款都是时光的礼赞</p> |
|
</div> |
|
|
|
<div class="product-showcase"> |
|
|
|
<div class="product-card active"> |
|
<div class="product-image"> |
|
<div class="product-decoration"> |
|
<svg viewBox="0 0 100 100" class="decoration-circle"> |
|
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)" |
|
stroke-width="1" stroke-dasharray="8 4"/> |
|
</svg> |
|
</div> |
|
<div class="image-placeholder" role="img" aria-label="产品图片"></div> |
|
</div> |
|
<div class="product-info"> |
|
<span class="product-category">传统系列</span> |
|
<h3 class="product-name">十年陈酿</h3> |
|
<p class="product-description"> |
|
经典黄酒，十年陈酿，醇厚绵长，回味无穷。 |
|
</p> |
|
<div class="product-meta"> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z"> |
|
</path> |
|
</svg> |
|
<span>酒精度：14%</span> |
|
</div> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12"> |
|
</path> |
|
</svg> |
|
<span>容量：500ml</span> |
|
</div> |
|
</div> |
|
<button class="product-btn">了解更多</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card"> |
|
<div class="product-image"> |
|
<div class="product-decoration"> |
|
<svg viewBox="0 0 100 100" class="decoration-circle"> |
|
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)" |
|
stroke-width="1" stroke-dasharray="8 4"/> |
|
</svg> |
|
</div> |
|
<div class="image-placeholder" role="img" aria-label="产品图片"></div> |
|
</div> |
|
<div class="product-info"> |
|
<span class="product-category">青春系列</span> |
|
<h3 class="product-name">桂花米酒</h3> |
|
<p class="product-description"> |
|
融入新鲜桂花，清甜怡人，低度微醺，专为年轻人打造的清新黄酒体验。 |
|
</p> |
|
<div class="product-meta"> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z"> |
|
</path> |
|
</svg> |
|
<span>酒精度：8%</span> |
|
</div> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12"> |
|
</path> |
|
</svg> |
|
<span>容量：330ml</span> |
|
</div> |
|
</div> |
|
<button class="product-btn">了解更多</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card"> |
|
<div class="product-image"> |
|
<div class="product-decoration"> |
|
<svg viewBox="0 0 100 100" class="decoration-circle"> |
|
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)" |
|
stroke-width="1" stroke-dasharray="8 4"/> |
|
</svg> |
|
</div> |
|
<div class="image-placeholder" role="img" aria-label="产品图片"></div> |
|
</div> |
|
<div class="product-info"> |
|
<span class="product-category">调制系列</span> |
|
<h3 class="product-name">东方气泡</h3> |
|
<p class="product-description"> |
|
经典黄酒邂逅气泡水，加入精选花果茶，创新演绎东方美酒，清爽怡人。 |
|
</p> |
|
<div class="product-meta"> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z"> |
|
</path> |
|
</svg> |
|
<span>酒精度：5%</span> |
|
</div> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12"> |
|
</path> |
|
</svg> |
|
<span>容量：330ml</span> |
|
</div> |
|
</div> |
|
<button class="product-btn">了解更多</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card"> |
|
<div class="product-image"> |
|
<div class="product-decoration"> |
|
<svg viewBox="0 0 100 100" class="decoration-circle"> |
|
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)" |
|
stroke-width="1" stroke-dasharray="8 4"/> |
|
</svg> |
|
</div> |
|
<div class="image-placeholder" role="img" aria-label="产品图片"></div> |
|
</div> |
|
<div class="product-info"> |
|
<span class="product-category">季节限定</span> |
|
<h3 class="product-name">雪梨暖冬</h3> |
|
<p class="product-description"> |
|
冬季限定，精选雪梨果汁调配，温热饮用，让传统黄酒焕发冬日温暖魅力。 |
|
</p> |
|
<div class="product-meta"> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z"> |
|
</path> |
|
</svg> |
|
<span>酒精度：11%</span> |
|
</div> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12"> |
|
</path> |
|
</svg> |
|
<span>容量：400ml</span> |
|
</div> |
|
</div> |
|
<button class="product-btn">了解更多</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card"> |
|
<div class="product-image"> |
|
<div class="product-decoration"> |
|
<svg viewBox="0 0 100 100" class="decoration-circle"> |
|
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)" |
|
stroke-width="1" stroke-dasharray="8 4"/> |
|
</svg> |
|
</div> |
|
<div class="image-placeholder" role="img" aria-label="产品图片"></div> |
|
</div> |
|
<div class="product-info"> |
|
<span class="product-category">融合系列</span> |
|
<h3 class="product-name">玫瑰青梅</h3> |
|
<p class="product-description"> |
|
传统黄酒与玫瑰、青梅的完美融合，清新淡雅，既有传统韵味又充满创新精神。 |
|
</p> |
|
<div class="product-meta"> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z"> |
|
</path> |
|
</svg> |
|
<span>酒精度：10%</span> |
|
</div> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M5,12 A7,7 0 1,0 19,12 A7,7 0 1,0 5,12"> |
|
</path> |
|
</svg> |
|
<span>容量：375ml</span> |
|
</div> |
|
</div> |
|
<button class="product-btn">了解更多</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="product-card"> |
|
<div class="product-image"> |
|
<div class="product-decoration"> |
|
<svg viewBox="0 0 100 100" class="decoration-circle"> |
|
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#gradient2)" |
|
stroke-width="1" stroke-dasharray="8 4"/> |
|
</svg> |
|
</div> |
|
<div class="image-placeholder" role="img" aria-label="产品图片"></div> |
|
</div> |
|
<div class="product-info"> |
|
<span class="product-category">轻奢系列</span> |
|
<h3 class="product-name">金箔流光</h3> |
|
<p class="product-description"> |
|
匠心五年陈酿，搭配食用金箔，现代工艺与传统技术的完美结合，视觉与味觉的双重享受。 |
|
</p> |
|
<div class="product-meta"> |
|
<div class="meta-item"> |
|
<svg viewBox="0 0 24 24" width="20" height="20"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,3 L19,8 L19,16 L12,21 L5,16 L5,8 L12,3 Z"> |
|
</path> |
|
</svg> |
|
<span>酒精度：12%</span> |
|
</div> |
|
</div> |
|
<button class="product-btn">了解更多</button> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
|
|
<div class="showcase-controls"> |
|
<button class="control-btn prev"> |
|
<svg viewBox="0 0 24 24" width="24" height="24"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M15,6 L9,12 L15,18"> |
|
</path> |
|
</svg> |
|
</button> |
|
<div class="showcase-indicators"> |
|
<span class="indicator active"></span> |
|
<span class="indicator"></span> |
|
<span class="indicator"></span> |
|
<span class="indicator"></span> |
|
<span class="indicator"></span> |
|
<span class="indicator"></span> |
|
</div> |
|
<button class="control-btn next"> |
|
<svg viewBox="0 0 24 24" width="24" height="24"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M9,6 L15,12 L9,18"> |
|
</path> |
|
</svg> |
|
</button> |
|
</div> |
|
</section> |
|
<style> |
|
|
|
.product-card { |
|
display: none !important; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 4rem; |
|
align-items: center; |
|
padding: 2rem; |
|
background: white; |
|
border-radius: 30px; |
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); |
|
position: relative; |
|
overflow: hidden; |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
} |
|
|
|
.product-card.active { |
|
display: grid !important; |
|
opacity: 1; |
|
animation: fadeIn 0.5s ease forwards; |
|
} |
|
|
|
@keyframes fadeIn { |
|
from { |
|
opacity: 0; |
|
transform: translateX(50px); |
|
} |
|
to { |
|
opacity: 1; |
|
transform: translateX(0); |
|
} |
|
} |
|
</style> |
|
<style> |
|
|
|
.features { |
|
padding: 6rem 2rem; |
|
background: var(--bg-light); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.section-header { |
|
text-align: center; |
|
margin-bottom: 4rem; |
|
position: relative; |
|
} |
|
|
|
.section-title { |
|
font-size: 2.5rem; |
|
color: var(--text-dark); |
|
margin-bottom: 1rem; |
|
position: relative; |
|
display: inline-block; |
|
} |
|
|
|
.section-title::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: -10px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
width: 60%; |
|
height: 3px; |
|
background: var(--gradient-1); |
|
border-radius: 2px; |
|
} |
|
|
|
.section-subtitle { |
|
font-size: 1.2rem; |
|
color: var(--text-dark); |
|
opacity: 0.7; |
|
} |
|
|
|
.feature-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 2rem; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
} |
|
|
|
.feature-card { |
|
background: white; |
|
padding: 2rem; |
|
border-radius: 20px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.feature-card::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: var(--gradient-1); |
|
opacity: 0; |
|
transition: all 0.3s ease; |
|
z-index: 0; |
|
} |
|
|
|
.feature-card:hover { |
|
transform: translateY(-10px); |
|
} |
|
|
|
.feature-card:hover::before { |
|
opacity: 0.05; |
|
} |
|
|
|
.feature-icon { |
|
margin-bottom: 1.5rem; |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.feature-card h3 { |
|
font-size: 1.5rem; |
|
margin-bottom: 1rem; |
|
color: var(--text-dark); |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.feature-card p { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
line-height: 1.6; |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
|
|
.products { |
|
padding: 6rem 2rem; |
|
background: linear-gradient(135deg, #fff5e6, #fff9f0); |
|
position: relative; |
|
} |
|
|
|
.product-showcase { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem 0; |
|
position: relative; |
|
} |
|
|
|
.product-card { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 4rem; |
|
align-items: center; |
|
padding: 2rem; |
|
background: white; |
|
border-radius: 30px; |
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.product-image { |
|
position: relative; |
|
padding-top: 100%; |
|
background: var(--gradient-2); |
|
border-radius: 20px; |
|
overflow: hidden; |
|
} |
|
|
|
.image-placeholder { |
|
position: absolute; |
|
inset: 0; |
|
background-size: contain; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.image-placeholder:hover { |
|
transform: scale(1.05); |
|
} |
|
|
|
|
|
.product-card:nth-child(1) .image-placeholder { |
|
background-image: url('./img/传统系列.png'); |
|
} |
|
|
|
.product-card:nth-child(2) .image-placeholder { |
|
background-image: url('./img/青春系列.png'); |
|
} |
|
|
|
.product-card:nth-child(3) .image-placeholder { |
|
background-image: url('./img/东方气泡.png'); |
|
} |
|
|
|
.product-card:nth-child(4) .image-placeholder { |
|
background-image: url('./img/季节限定.png'); |
|
} |
|
|
|
.product-card:nth-child(5) .image-placeholder { |
|
background-image: url('./img/融合系列.png'); |
|
} |
|
|
|
.product-card:nth-child(6) .image-placeholder { |
|
background-image: url('./img/轻奢系列.png'); |
|
} |
|
|
|
.product-decoration { |
|
position: absolute; |
|
inset: 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
animation: rotate 20s linear infinite; |
|
} |
|
|
|
.decoration-circle { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.product-info { |
|
padding: 2rem; |
|
} |
|
|
|
.product-category { |
|
display: inline-block; |
|
padding: 0.5rem 1rem; |
|
background: var(--gradient-1); |
|
color: white; |
|
border-radius: 20px; |
|
font-size: 0.9rem; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.product-name { |
|
font-size: 2rem; |
|
margin-bottom: 1rem; |
|
color: var(--text-dark); |
|
} |
|
|
|
.product-description { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
line-height: 1.6; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.product-meta { |
|
display: flex; |
|
gap: 2rem; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.meta-item { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
} |
|
|
|
.product-btn { |
|
padding: 1rem 2rem; |
|
border: none; |
|
background: var(--gradient-1); |
|
color: white; |
|
border-radius: 25px; |
|
font-weight: bold; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.product-btn:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3); |
|
} |
|
|
|
.showcase-controls { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 2rem; |
|
margin-top: 3rem; |
|
} |
|
|
|
.control-btn { |
|
width: 50px; |
|
height: 50px; |
|
border: none; |
|
background: white; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.control-btn:hover { |
|
background: var(--gradient-1); |
|
color: white; |
|
} |
|
|
|
.showcase-indicators { |
|
display: flex; |
|
gap: 1rem; |
|
} |
|
|
|
.indicator { |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 50%; |
|
background: var(--text-dark); |
|
opacity: 0.2; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.indicator.active { |
|
width: 30px; |
|
border-radius: 5px; |
|
background: var(--gradient-1); |
|
opacity: 1; |
|
} |
|
|
|
@keyframes rotate { |
|
from { |
|
transform: rotate(0deg); |
|
} |
|
to { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
.youth-series { |
|
background: linear-gradient(135deg, #FFE4B5, #FFB6C1); |
|
} |
|
|
|
.cocktail-series { |
|
background: linear-gradient(135deg, #87CEEB, #98FB98); |
|
} |
|
|
|
.fusion-series { |
|
background: linear-gradient(135deg, #DDA0DD, #FFB6C1); |
|
} |
|
|
|
.premium-series { |
|
background: linear-gradient(135deg, #FFD700, #FFA07A); |
|
} |
|
|
|
.season-series { |
|
background: linear-gradient(135deg, #B0C4DE, #FFE4E1); |
|
} |
|
</style> |
|
|
|
<section class="culture-section"> |
|
<div class="section-header"> |
|
<h2 class="section-title">千年酿造，一脉相承</h2> |
|
<p class="section-subtitle">探寻绍兴黄酒的文化密码</p> |
|
</div> |
|
|
|
<div class="culture-grid"> |
|
|
|
<div class="culture-card"> |
|
<div class="culture-icon"> |
|
<svg viewBox="0 0 24 24" width="48" height="48"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M12,2 L12,22 M4,4 C4,4 8,3 12,3 C16,3 20,4 20,4 L20,20 C20,20 16,19 12,19 C8,19 4,20 4,20 L4,4"/> |
|
</svg> |
|
</div> |
|
<h3>千年酿造工艺</h3> |
|
<p>始于春秋，盛于唐宋，绍兴黄酒的酿造技艺被列入国家级非物质文化遗产名录</p> |
|
</div> |
|
|
|
|
|
<div class="culture-card"> |
|
<div class="culture-icon"> |
|
<svg viewBox="0 0 24 24" width="48" height="48"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M3,12 C3,16.9706 7.02944,21 12,21 C16.9706,21 21,16.9706 21,12"/> |
|
</svg> |
|
</div> |
|
<h3>江南水乡文化</h3> |
|
<p>与江南水乡的人文风情密不可分，融入诗词歌赋，见证千年文明</p> |
|
</div> |
|
|
|
|
|
<div class="culture-card"> |
|
<div class="culture-icon"> |
|
<svg viewBox="0 0 24 24" width="48" height="48"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M12,2 L15,8 L21,9 L17,14 L18,20 L12,17 L6,20 L7,14 L3,9 L9,8 Z"/> |
|
</svg> |
|
</div> |
|
<h3>匠心品质</h3> |
|
<p>秉承传统工艺，融合现代科技，每一滴都是时光的结晶</p> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="local-features"> |
|
<div class="section-header"> |
|
<h2 class="section-title">醉美绍兴</h2> |
|
<p class="section-subtitle">感受独特的地方魅力</p> |
|
</div> |
|
|
|
<div class="feature-showcase"> |
|
|
|
<div class="showcase-images"> |
|
<div class="image-grid"> |
|
<div class="feature-image" style="background-image: url('./img/古法酿造.jpg')"> |
|
<div class="image-overlay"> |
|
<h4>古法酿造</h4> |
|
</div> |
|
</div> |
|
<div class="feature-image" style="background-image: url('./img/黄酒街区.jpg')"> |
|
<div class="image-overlay"> |
|
<h4>黄酒街区</h4> |
|
</div> |
|
</div> |
|
<div class="feature-image" style="background-image: url('./img/品鉴文化.jpg')"> |
|
<div class="image-overlay"> |
|
<h4>品鉴文化</h4> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="feature-content"> |
|
<h3>千年绍兴，一城风味</h3> |
|
<p class="feature-description"> |
|
绍兴黄酒承载着这座城市的记忆与温度。从古法酿造到现代创新， |
|
从老街深巷到时尚酒吧，处处可见黄酒文化与城市生活的完美融合。 |
|
</p> |
|
<div class="feature-highlights"> |
|
<div class="highlight-item"> |
|
<span class="highlight-number">2000+</span> |
|
<span class="highlight-text">年酿造历史</span> |
|
</div> |
|
<div class="highlight-item"> |
|
<span class="highlight-number">100+</span> |
|
<span class="highlight-text">家特色酒坊</span> |
|
</div> |
|
<div class="highlight-item"> |
|
<span class="highlight-number">10+</span> |
|
<span class="highlight-text">个景点体验</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="innovation-section"> |
|
<div class="section-header"> |
|
<h2 class="section-title">传承创新，引领未来</h2> |
|
<p class="section-subtitle">用科技赋能传统，让黄酒文化焕发新生</p> |
|
</div> |
|
|
|
<div class="innovation-cards"> |
|
|
|
<div class="innovation-card"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 24 24" width="48" height="48"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M9,2 L15,2 L15,6 L9,6 L9,2 Z M12,6 L12,23"/> |
|
</svg> |
|
</div> |
|
<h3>智能酿造</h3> |
|
<p>引入AI温控系统，实现精准发酵，提升产品品质</p> |
|
<a href="#" class="learn-more">了解更多</a> |
|
</div> |
|
|
|
|
|
<div class="innovation-card"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 24 24" width="48" height="48"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M12,2 C6.5,2 2,6.5 2,12 C2,17.5 6.5,22 12,22 C17.5,22 22,17.5 22,12 C22,6.5 17.5,2 12,2 Z"/> |
|
</svg> |
|
</div> |
|
<h3>新品研发</h3> |
|
<p>开发低度果酒系列，迎合年轻消费群体需求</p> |
|
<a href="#" class="learn-more">了解更多</a> |
|
</div> |
|
|
|
|
|
<div class="innovation-card"> |
|
<div class="card-icon"> |
|
<svg viewBox="0 0 24 24" width="48" height="48"> |
|
<path fill="none" stroke="url(#gradient1)" stroke-width="2" |
|
d="M21,12 A9,9 0 0,1 12,21 A9,9 0 0,1 3,12"/> |
|
</svg> |
|
</div> |
|
<h3>文化体验</h3> |
|
<p>打造沉浸式黄酒文化体验馆，传统与现代的完美交融</p> |
|
<a href="#" class="learn-more">了解更多</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="experience-center"> |
|
<div class="section-header"> |
|
<h2 class="section-title">沉浸体验</h2> |
|
<p class="section-subtitle">邀您共赏绍兴黄酒的魅力时光</p> |
|
</div> |
|
|
|
<div class="experience-container"> |
|
|
|
<div class="booking-form"> |
|
<h3>预约参观</h3> |
|
<form class="visit-form"> |
|
<div class="form-group"> |
|
<input type="text" placeholder="您的姓名" required> |
|
</div> |
|
<div class="form-group"> |
|
<input type="tel" placeholder="联系电话" required> |
|
</div> |
|
<div class="form-group"> |
|
<input type="date" placeholder="参观日期" required> |
|
</div> |
|
<div class="form-group"> |
|
<select required> |
|
<option value="">选择体验项目</option> |
|
<option value="1">古法酿造体验</option> |
|
<option value="2">品酒鉴赏课程</option> |
|
<option value="3">文化展馆导览</option> |
|
</select> |
|
</div> |
|
<button type="submit" class="submit-btn">立即预约</button> |
|
</form> |
|
</div> |
|
|
|
|
|
<div class="experience-showcase"> |
|
<div class="experience-item"> |
|
<div class="experience-icon"> |
|
<svg viewBox="0 0 24 24" width="32" height="32"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,2 L12,22 M4,4 L20,4"/> |
|
</svg> |
|
</div> |
|
<h4>古法酿造体验</h4> |
|
<p>亲手参与传统酿造工艺，感受非遗文化魅力</p> |
|
</div> |
|
<div class="experience-item"> |
|
<div class="experience-icon"> |
|
<svg viewBox="0 0 24 24" width="32" height="32"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,2 L12,22 M4,4 L20,4"/> |
|
</svg> |
|
</div> |
|
<h4>品酒鉴赏课程</h4> |
|
<p>专业品酒师带您领略黄酒的独特韵味</p> |
|
</div> |
|
<div class="experience-item"> |
|
<div class="experience-icon"> |
|
<svg viewBox="0 0 24 24" width="32" height="32"> |
|
<path fill="none" stroke="currentColor" stroke-width="2" |
|
d="M12,2 L12,22 M4,4 L20,4"/> |
|
</svg> |
|
</div> |
|
<h4>文化展馆导览</h4> |
|
<p>沉浸式体验千年黄酒文化的魅力传承</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="footer"> |
|
<div class="footer-content"> |
|
<div class="footer-section"> |
|
<h3>联系我们</h3> |
|
<p>电话：0575-88888888</p> |
|
<p>邮箱：[email protected]</p> |
|
<p>地址：浙江省绍兴市越城区黄酒文化街区</p> |
|
</div> |
|
|
|
<div class="footer-section"> |
|
<h3>快速链接</h3> |
|
<ul> |
|
<li><a href="#">关于我们</a></li> |
|
<li><a href="#">产品系列</a></li> |
|
<li><a href="#">新闻资讯</a></li> |
|
<li><a href="#">加入我们</a></li> |
|
</ul> |
|
</div> |
|
|
|
<div class="footer-section"> |
|
<h3>关注我们</h3> |
|
<div class="social-links"> |
|
<a href="#" class="social-link">微信</a> |
|
<a href="#" class="social-link">微博</a> |
|
<a href="#" class="social-link">抖音</a> |
|
<a href="#" class="social-link">小红书</a> |
|
</div> |
|
</div> |
|
|
|
<div class="footer-section"> |
|
<h3>订阅资讯</h3> |
|
<form class="subscribe-form"> |
|
<input type="email" placeholder="请输入您的邮箱"> |
|
<button type="submit">订阅</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div class="footer-bottom"> |
|
<p>© 2024 绍兴黄酒. All rights reserved.</p> |
|
<div class="footer-links"> |
|
<a href="#">隐私政策</a> |
|
<a href="#">使用条款</a> |
|
<a href="#">网站地图</a> |
|
</div> |
|
</div> |
|
</footer> |
|
<style> |
|
|
|
.culture-section { |
|
padding: 6rem 2rem; |
|
background: linear-gradient(135deg, #fff9f0, #fff5e6); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.culture-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 2rem; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
} |
|
|
|
.culture-card { |
|
background: white; |
|
padding: 2.5rem; |
|
border-radius: 20px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
transition: all 0.3s ease; |
|
text-align: center; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.culture-card:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 15px 40px rgba(255, 180, 46, 0.1); |
|
} |
|
|
|
.culture-icon { |
|
margin-bottom: 1.5rem; |
|
height: 80px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.culture-card h3 { |
|
font-size: 1.5rem; |
|
color: var(--text-dark); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.culture-card p { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
line-height: 1.6; |
|
} |
|
|
|
|
|
.local-features { |
|
padding: 6rem 2rem; |
|
background: var(--bg-light); |
|
} |
|
|
|
.feature-showcase { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 4rem; |
|
align-items: center; |
|
} |
|
|
|
.showcase-images { |
|
position: relative; |
|
} |
|
|
|
.image-grid { |
|
display: grid; |
|
grid-template-columns: repeat(2, 1fr); |
|
gap: 1rem; |
|
} |
|
|
|
.feature-image { |
|
height: 200px; |
|
border-radius: 15px; |
|
background-size: cover; |
|
background-position: center; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.feature-image:nth-child(1) { |
|
grid-column: 1 / -1; |
|
height: 300px; |
|
} |
|
|
|
.image-overlay { |
|
position: absolute; |
|
inset: 0; |
|
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); |
|
display: flex; |
|
align-items: flex-end; |
|
padding: 1.5rem; |
|
color: white; |
|
opacity: 0; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.feature-image:hover .image-overlay { |
|
opacity: 1; |
|
} |
|
|
|
.feature-content { |
|
padding: 2rem; |
|
} |
|
|
|
.feature-content h3 { |
|
font-size: 2rem; |
|
color: var(--text-dark); |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.feature-description { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
line-height: 1.8; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.feature-highlights { |
|
display: grid; |
|
grid-template-columns: repeat(3, 1fr); |
|
gap: 1.5rem; |
|
} |
|
|
|
.highlight-item { |
|
text-align: center; |
|
} |
|
|
|
.highlight-number { |
|
display: block; |
|
font-size: 2.5rem; |
|
font-weight: bold; |
|
color: var(--primary-color); |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.highlight-text { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
} |
|
|
|
|
|
.innovation-section { |
|
padding: 6rem 2rem; |
|
background: linear-gradient(135deg, #fff5e6, #fff9f0); |
|
} |
|
|
|
.innovation-cards { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 2rem; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 2rem; |
|
} |
|
|
|
.innovation-card { |
|
background: white; |
|
padding: 2.5rem; |
|
border-radius: 20px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
transition: all 0.3s ease; |
|
text-align: center; |
|
} |
|
|
|
.innovation-card:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 15px 40px rgba(255, 180, 46, 0.1); |
|
} |
|
|
|
.card-icon { |
|
margin-bottom: 1.5rem; |
|
height: 80px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.innovation-card h3 { |
|
font-size: 1.5rem; |
|
color: var(--text-dark); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.innovation-card p { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
line-height: 1.6; |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.learn-more { |
|
display: inline-block; |
|
padding: 0.8rem 1.5rem; |
|
background: var(--gradient-1); |
|
color: white; |
|
border-radius: 25px; |
|
text-decoration: none; |
|
font-weight: 500; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.learn-more:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3); |
|
} |
|
|
|
|
|
.experience-center { |
|
padding: 6rem 2rem; |
|
background: var(--bg-light); |
|
} |
|
|
|
.experience-container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 4rem; |
|
align-items: start; |
|
} |
|
|
|
.booking-form { |
|
background: white; |
|
padding: 3rem; |
|
border-radius: 20px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
.booking-form h3 { |
|
font-size: 1.8rem; |
|
color: var(--text-dark); |
|
margin-bottom: 2rem; |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.form-group input, |
|
.form-group select { |
|
width: 100%; |
|
padding: 1rem; |
|
border: 2px solid rgba(0,0,0,0.1); |
|
border-radius: 10px; |
|
font-size: 1rem; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.form-group input:focus, |
|
.form-group select:focus { |
|
border-color: var(--primary-color); |
|
outline: none; |
|
} |
|
|
|
.submit-btn { |
|
width: 100%; |
|
padding: 1rem; |
|
border: none; |
|
background: var(--gradient-1); |
|
color: white; |
|
border-radius: 10px; |
|
font-size: 1rem; |
|
font-weight: bold; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.submit-btn:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 5px 15px rgba(255, 180, 46, 0.3); |
|
} |
|
|
|
.experience-showcase { |
|
display: grid; |
|
gap: 2rem; |
|
} |
|
|
|
.experience-item { |
|
background: white; |
|
padding: 2rem; |
|
border-radius: 15px; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.experience-item:hover { |
|
transform: translateX(10px); |
|
} |
|
|
|
.experience-icon { |
|
margin-bottom: 1rem; |
|
color: var(--primary-color); |
|
} |
|
|
|
.experience-item h4 { |
|
font-size: 1.2rem; |
|
color: var(--text-dark); |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.experience-item p { |
|
color: var(--text-dark); |
|
opacity: 0.8; |
|
line-height: 1.6; |
|
} |
|
|
|
|
|
.footer { |
|
background: var(--text-dark); |
|
color: var(--text-light); |
|
padding: 4rem 2rem 2rem; |
|
} |
|
|
|
.footer-content { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
gap: 3rem; |
|
margin-bottom: 3rem; |
|
} |
|
|
|
.footer-section h3 { |
|
font-size: 1.2rem; |
|
margin-bottom: 1.5rem; |
|
color: var(--primary-color); |
|
} |
|
|
|
.footer-section p { |
|
margin-bottom: 0.8rem; |
|
opacity: 0.8; |
|
} |
|
|
|
.footer-section ul { |
|
list-style: none; |
|
} |
|
|
|
.footer-section ul li { |
|
margin-bottom: 0.8rem; |
|
} |
|
|
|
.footer-section a { |
|
color: var(--text-light); |
|
text-decoration: none; |
|
opacity: 0.8; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.footer-section a:hover { |
|
opacity: 1; |
|
color: var(--primary-color); |
|
} |
|
|
|
.social-links { |
|
display: flex; |
|
gap: 1rem; |
|
} |
|
|
|
.social-link { |
|
padding: 0.5rem 1rem; |
|
border: 1px solid rgba(255,255,255,0.2); |
|
border-radius: 20px; |
|
} |
|
|
|
.subscribe-form { |
|
display: flex; |
|
gap: 1rem; |
|
} |
|
|
|
.subscribe-form input { |
|
flex: 1; |
|
padding: 0.8rem; |
|
border: none; |
|
border-radius: 5px; |
|
background: rgba(255,255,255,0.1); |
|
color: var(--text-light); |
|
} |
|
|
|
.subscribe-form button { |
|
padding: 0.8rem 1.5rem; |
|
border: none; |
|
border-radius: 5px; |
|
background: var(--primary-color); |
|
color: var(--text-dark); |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.subscribe-form button:hover { |
|
background: var(--secondary-color); |
|
} |
|
|
|
.footer-bottom { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding-top: 2rem; |
|
border-top: 1px solid rgba(255,255,255,0.1); |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
gap: 1rem; |
|
} |
|
|
|
.footer-bottom p { |
|
opacity: 0.6; |
|
} |
|
|
|
.footer-links { |
|
display: flex; |
|
gap: 2rem; |
|
} |
|
|
|
.footer-links a { |
|
color: var(--text-light); |
|
text-decoration: none; |
|
opacity: 0.6; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.footer-links a:hover { |
|
opacity: 1; |
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
.feature-showcase, |
|
.experience-container { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.footer-content { |
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
} |
|
|
|
.footer-bottom { |
|
flex-direction: column; |
|
text-align: center; |
|
} |
|
|
|
.footer-links { |
|
justify-content: center; |
|
} |
|
|
|
.subscribe-form { |
|
flex-direction: column; |
|
} |
|
} |
|
|
|
@media (max-width: 480px) { |
|
.culture-grid, |
|
.innovation-cards { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.feature-highlights { |
|
grid-template-columns: 1fr; |
|
} |
|
|
|
.highlight-item { |
|
padding: 1rem 0; |
|
border-bottom: 1px solid rgba(0,0,0,0.1); |
|
} |
|
} |
|
</style> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script> |
|
<script> |
|
|
|
const container = document.getElementById('model-container'); |
|
const scene = new THREE.Scene(); |
|
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); |
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); |
|
|
|
renderer.setSize(container.clientWidth, container.clientHeight); |
|
renderer.setClearColor(0x000000, 0); |
|
container.appendChild(renderer.domElement); |
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); |
|
scene.add(ambientLight); |
|
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); |
|
directionalLight.position.set(5, 5, 5); |
|
scene.add(directionalLight); |
|
|
|
|
|
const controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
controls.enableDamping = true; |
|
controls.dampingFactor = 0.05; |
|
controls.screenSpacePanning = false; |
|
controls.minDistance = 3; |
|
controls.maxDistance = 10; |
|
controls.autoRotate = true; |
|
controls.autoRotateSpeed = 2.0; |
|
|
|
|
|
camera.position.z = 5; |
|
|
|
|
|
const loader = new THREE.OBJLoader(); |
|
loader.load('wine.obj', function(object) { |
|
scene.add(object); |
|
}); |
|
|
|
function animate() { |
|
requestAnimationFrame(animate); |
|
controls.update(); |
|
renderer.render(scene, camera); |
|
} |
|
animate(); |
|
|
|
|
|
window.addEventListener('resize', onWindowResize, false); |
|
function onWindowResize() { |
|
camera.aspect = container.clientWidth / container.clientHeight; |
|
camera.updateProjectionMatrix(); |
|
renderer.setSize(container.clientWidth, container.clientHeight); |
|
} |
|
</script> |
|
<script> |
|
|
|
const productCards = document.querySelectorAll('.product-card'); |
|
const indicators = document.querySelectorAll('.indicator'); |
|
const prevButton = document.querySelector('.control-btn.prev'); |
|
const nextButton = document.querySelector('.control-btn.next'); |
|
|
|
|
|
let currentIndex = 0; |
|
|
|
|
|
function updateDisplay() { |
|
|
|
productCards.forEach(card => card.classList.remove('active')); |
|
indicators.forEach(indicator => indicator.classList.remove('active')); |
|
|
|
|
|
productCards[currentIndex].classList.add('active'); |
|
indicators[currentIndex].classList.add('active'); |
|
} |
|
|
|
|
|
function showNext() { |
|
currentIndex = (currentIndex + 1) % productCards.length; |
|
updateDisplay(); |
|
} |
|
|
|
|
|
function showPrev() { |
|
currentIndex = (currentIndex - 1 + productCards.length) % productCards.length; |
|
updateDisplay(); |
|
} |
|
|
|
|
|
nextButton.addEventListener('click', showNext); |
|
prevButton.addEventListener('click', showPrev); |
|
|
|
|
|
indicators.forEach((indicator, index) => { |
|
indicator.addEventListener('click', () => { |
|
currentIndex = index; |
|
updateDisplay(); |
|
}); |
|
}); |
|
|
|
|
|
let autoplayInterval; |
|
|
|
function startAutoplay() { |
|
autoplayInterval = setInterval(showNext, 5000); |
|
} |
|
|
|
function stopAutoplay() { |
|
clearInterval(autoplayInterval); |
|
} |
|
|
|
|
|
const productShowcase = document.querySelector('.product-showcase'); |
|
productShowcase.addEventListener('mouseenter', stopAutoplay); |
|
productShowcase.addEventListener('mouseleave', startAutoplay); |
|
|
|
|
|
updateDisplay(); |
|
startAutoplay(); |
|
</script> |
|
</body> |
|
</html> |
|
|
