File: /mnt/HC_Volume_102964888/html/club-35/Club35.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rohnni - Premium Vineyard</title>
<!-- <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&display=swap" rel="stylesheet"> -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet"> -->
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@400;500;600&family=Cardo:wght@400;700&display=swap"
rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cormorant Infant', serif;
color: #333;
line-height: 1.6;
}
header.scrolled {
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.5);
top: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.menu-toggle {
display: none;
}
header {
width: 100%;
position: fixed;
top: 0px;
left: 0;
z-index: 1000;
}
.header-logo {
width: 100px;
}
.header-logo img {
width: 100%;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
font-size: 40px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
header nav ul {
list-style: none;
display: flex;
gap: 25px;
}
.header-container img {
width: 100px;
}
header nav ul li {
margin-left: 20px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
font-weight: 500;
transition: color 0.3s ease;
font-size: 18px;
position: relative;
}
header nav ul li a::before {
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: #c96838;
bottom: -2px;
transition: 0.5s ease-in-out;
transform-origin: left;
}
header nav ul li a:hover::before {
width: 100%;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgb(0 0 0 / 66%), rgba(0, 0, 0, 0.4)), url(./images/banner.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
position: relative;
}
.hero-content {
position: relative;
z-index: 10;
}
.hero-content p {
font-size: 14px;
letter-spacing: 3px;
margin-bottom: 20px;
text-transform: uppercase;
}
.hero-content h1 {
font-size: 60px;
margin-bottom: 30px;
color: #ffffff;
}
.custom-btn {
display: inline-block;
padding: 15px 40px;
background: transparent;
color: white;
border: 2px solid white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 2px;
transition: all 0.3s;
cursor: pointer;
}
.custom-btn-transparent {
display: inline-block;
padding: 15px 40px;
background: transparent;
color: #4A4A4A;
border: 2px solid #4A4A4A;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 2px;
transition: all 0.3s;
cursor: pointer;
}
.custom-btn:hover {
background: #fff;
color: #333;
}
.custom-btn-transparent:hover {
background: #333;
color: #fff;
}
/* Vineyard Section */
.vineyard-section {
background-color: #f9f9f9;
}
.vineyard-section .vineyard-section-content {
padding: 100px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.vineyard-section .vineyard-section-content .vineyard-content,
.vineyard-section .vineyard-section-content .vineyard-images {
width: 100%;
max-width: 48%;
}
.vineyard-content h2 {
font-size: 40px;
margin-bottom: 20px;
color: #4A4A4A;
}
.vineyard-content p {
color: #666;
margin-bottom: 30px;
font-size: 18px;
line-height: 24px;
}
.vineyard-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.vineyard-images img {
width: 100%;
height: 200px;
object-fit: cover;
}
.vineyard-images img:first-child {
grid-row: span 2;
height: 100%;
}
.signature {
font-family: 'Brush Script MT', cursive;
font-size: 48px;
color: #C9A96E;
margin-top: 20px;
}
/* Quality Section */
.quality-section .quality-section-content {
padding: 70px 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.quality-section .quality-section-content .quality-image,
.quality-section .quality-section-content .quality-premium {
width: 100%;
max-width: 48%;
}
.quality-section .quality-section-content .quality-image img {
width: 100%;
}
.quality-section .quality-section-content .quality-premium .quality-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 8px;
}
.quality-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.feature {
margin-bottom: 20px;
}
.feature h3 {
font-size: 24px;
margin-bottom: 10px;
color: #4A4A4A;
}
.feature p {
font-size: 18px;
color: #666;
line-height: 24px;
}
/* Tasting Section */
.tasting-section {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%23556B2F" width="1200" height="400"/></svg>');
background-size: cover;
padding: 70px 0px;
color: white;
position: relative;
}
.tasting-section h2 {
font-size: 40px;
margin-bottom: 60px;
text-align: center;
}
.tasting-subtitle {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
}
.tasting-section-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tasting-section-content .content-left {
width: 100%;
max-width: 48%;
}
.tasting-section-content .contact-right {
width: 100%;
max-width: 40%;
}
.tasting-section-content .content-left img {
width: 100%;
margin-bottom: 20px;
}
.tasting-section-content .content-left .contact-details img {
width: 100%;
max-width: 30px;
margin: 20px 15px 0px 0px;
}
.tasting-section-content .content-left .contact-details ul.contact-info li {
margin: 10px 0px 10px 20px;
font-size: 18px;
}
.tasting-section-content .content-left .contact-details p {
font-size: 18px;
}
/* Membership Section */
.membership-section {
background-color: #f9f9f9;
}
.membership-section .membership-section-content {
padding: 70px 0px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.membership-section .membership-section-content .membership-content {
width: 100%;
max-width: 48%;
}
.membership-section .membership-section-content h2 {
font-size: 40px;
margin-bottom: 20px;
color: #4A4A4A;
}
.membership-section .membership-section-content .membership-content p {
font-size: 18px;
}
.membership-section .membership-section-content .membership-benefits {
margin-top: 40px;
}
.membership-section .membership-section-content .membership-benefits .benefit {
display: flex;
align-items: start;
gap: 20px;
margin-bottom: 25px;
}
.membership-section .membership-section-content .membership-image {
width: 100%;
max-width: 48%;
}
.membership-section .membership-section-content .membership-image img {
width: 100%;
}
.membership-section .membership-section-content .membership-benefits .benefit .benefit-icon {
width: 40px;
height: 40px;
background: #c96838;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 12px;
flex-shrink: 0;
}
.membership-section .membership-section-content .membership-benefits .benefit .benefit-text h4 {
font-size: 20px;
margin-bottom: 5px;
color: #4A4A4A;
}
.membership-section .membership-section-content .membership-benefits .benefit .benefit-text p {
font-size: 18px;
color: #666;
}
/* Events Section */
.events-section {
padding: 70px 0px;
text-align: center;
}
.events-section h2 {
font-size: 40px;
margin-bottom: 60px;
color: #4A4A4A;
}
.events-grid {
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.event-card {
text-align: left;
width: 100%;
max-width: 30%;
}
.event-image {
width: 100%;
margin-bottom: 20px;
}
.event-date {
display: inline-block;
background: #4A4A4A;
color: white;
padding: 5px 15px;
font-size: 12px;
margin-bottom: 15px;
border-radius: 4px;
}
.event-title {
font-size: 22px;
margin-bottom: 10px;
color: #333;
}
.event-link {
color: #c96838;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.event-image img {
width: 100%;
}
/* Footer */
footer {
background: #1a1a1a;
color: white;
}
.footer-logo {
font-size: 24px;
letter-spacing: 3px;
margin-bottom: 20px;
}
.footer-section h3 {
font-size: 16px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.footer-section ul {
list-style: none;
}
.footer-section a {
color: #999;
text-decoration: none;
font-size: 14px;
line-height: 2;
transition: color 0.3s;
}
.footer-section a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #333;
padding: 30px 0;
text-align: center;
color: #fff;
font-size: 16px;
}
.contact .social-icons {
margin-top: 20px;
}
.contact .social-icons a {
text-decoration: none;
margin-right: 20px;
}
.contact .social-icons img {
width: 30px;
}
.contact-form {
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
}
.form-group textarea {
resize: vertical;
min-height: 150px;
}
/*-----------partner section ----------------*/
.partners {
overflow: hidden;
padding: 70px 0 100px;
}
.partners h2 {
text-align: center;
margin-bottom: 30px;
font-size: 40px;
color: #4A4A4A;
}
.partners .slider-container {
width: 100%;
}
.partners .partner-logos {
display: flex;
gap: 40px;
width: max-content;
animation: scroll 40s linear infinite;
}
.partners .partner-logos .partner-logo {
background: white;
border-radius: 10px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
transition: transform 0.3s ease;
width: auto;
height: 100px;
font-size: 1.2rem;
flex-shrink: 0;
}
.partners .partner-logos .partner-logo img {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 10px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.partner .partner-logo:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.quality-premium h2 {
font-size: 40px;
margin-bottom: 40px;
color: #4A4A4A;
}
.feature img {
width: 100%;
max-width: 100px;
}
@media (max-width: 768px) {
header nav ul {
flex-direction: column;
gap: 15px;
position: absolute;
top: 80%;
right: 20px;
background: white;
padding: 10px 20px;
border-radius: 8px;
display: none;
}
header nav ul.active {
display: flex;
width: 100%;
right: 0;
border-radius: 0;
}
nav ul li a {
font-size: 16px;
line-height: 24px;
color: #000;
}
.menu-toggle {
display: block;
font-size: 1.5rem;
cursor: pointer;
color: #722F37;
}
.quality-section .quality-section-content .quality-image,
.quality-section .quality-section-content .quality-premium {
max-width: 100%;
}
.vineyard-section .vineyard-section-content .vineyard-content,
.vineyard-section .vineyard-section-content .vineyard-images {
max-width: 100%;
}
.tasting-section-content .content-left,
.tasting-section-content .contact-right,
.membership-section .membership-section-content .membership-image,
.membership-section .membership-section-content .membership-content {
max-width: 100%;
}
.event-card {
max-width: 100%;
}
.events-section h2,
.membership-section .membership-section-content .membership-content h2,
.tasting-section h2,
.vineyard-content h2,
.partners h2,
.quality-premium h2 {
font-size: 24px;
line-height: 32px;
}
.quality-premium h2 {
margin: 40px 0 20px;
}
.membership-section .membership-section-content .membership-content {
margin-bottom: 20px;
}
.tasting-section-content .content-left {
margin-bottom: 30px;
}
.hero-content h1 {
font-size: 36px;
}
header .logo {
font-size: 26px;
}
header nav ul li a {
color: #000;
}
}
</style>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="header-container">
<a href="#" class="logo"><img src="./images/club_35_transparent-logo.png" alt="club 35"></a>
<nav>
<ul id="navMenu">
<li><a href="#partners">Partners</a></li>
<li><a href="#about">About</a></li>
<li><a href="#membership">Membership</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<span class="menu-toggle" id="menuToggle">☰</span>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle">Welcome to Our CLUB 35</p>
<h1>Not Your Parents’ Wine Club.</h1>
<a href="#about" class="custom-btn">Learn More</a>
</div>
</div>
</section>
<!-- Vineyard Section -->
<section class="vineyard-section" id="about">
<div class="container">
<div class="vineyard-section-content">
<div class="vineyard-content">
<h2>About Club 35</h2>
<p>Club 35 is more than a community—it’s a journey into refined experiences, meaningful connections,
and a shared passion for celebration. Inspired by the elegance of vineyard culture, our club
brings together individuals who appreciate quality, craftsmanship, and the art of living well.
<p>Rooted in the spirit of unity and discovery, we curate elevated experiences—from exclusive
wine tastings and premium events to opportunities for personal and professional networking.
Every gathering is crafted to bring people together in an environment where stories are
shared, friendships are formed, and moments turn into memories.</p>
<p>At Club 35, we believe that every experience should be savored—just like a fine vintage.</p>
<a href="#" class="custom-btn-transparent">Explore the Club</a>
</div>
<div class="vineyard-images">
<img src="./images/distinction.jpg" alt="Vineyard">
<img src="./images/vineyard2.jpg">
<img src="./images/vaneyard3.jpg" alt="Harvest">
</div>
</div>
</div>
</section>
<!-- Quality Section -->
<section class="quality-section">
<div class="container">
<div class="quality-section-content">
<div class="quality-image">
<img src="./images/Premium-quality.jpg" alt="Quality">
</div>
<div class="quality-premium">
<h2>Premium Quality</h2>
<div class="quality-features">
<div class="feature">
<img src="./images/organic.jpg" alt="">
<h3>100% Organic</h3>
<p>Our grapes are grown using organic and sustainable farming practices, ensuring the
highest
quality and environmental responsibility.</p>
</div>
<div class="feature">
<img src="./images/award_ribbon.jpg" alt="">
<h3>Award Winning</h3>
<p>Recognized internationally for excellence, our wines have received numerous awards and
accolades
from wine critics worldwide.</p>
</div>
<div class="feature">
<img src="./images/oak.jpg" alt="">
<h3>Oak Aged Perfection</h3>
<p>Aged in French oak barrels, our wines develop complex flavors and aromas that distinguish
them
from the rest.</p>
</div>
<div class="feature">
<img src="./images/winemaker.jpg" alt="">
<h3>Master Winemaker</h3>
<p>Led by our experienced winemaker with over 30 years of expertise, each bottle reflects
true
craftsmanship and passion.</p>
</div>
</div>
<a href="#" class="custom-btn-transparent">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Membership Section -->
<section class="membership-section" id="membership">
<div class="container">
<div class="membership-section-content">
<div class="membership-content">
<h2>Become a Member</h2>
<p>Join our exclusive wine club and enjoy premier benefits, including early access to new releases,
special
pricing, and invitations to members-only events.</p>
<div class="membership-benefits">
<div class="benefit">
<div class="benefit-icon">15%</div>
<div class="benefit-text">
<h4>15% on All Wines</h4>
<p>Enjoy exclusive discounts on every purchase</p>
</div>
</div>
<div class="benefit">
<div class="benefit-icon">★</div>
<div class="benefit-text">
<h4>Curated Vintages</h4>
<p>Receive hand-selected wines quarterly</p>
</div>
</div>
<div class="benefit">
<div class="benefit-icon">VIP</div>
<div class="benefit-text">
<h4>VIP Events & Tours</h4>
<p>Access to exclusive tastings and vineyard tours</p>
</div>
</div>
<div class="benefit">
<div class="benefit-icon">🚚</div>
<div class="benefit-text">
<h4>Free Shipping & Premiere</h4>
<p>Complimentary shipping on all orders</p>
</div>
</div>
</div>
<a href="#" class="custom-btn-transparent">Join Now</a>
</div>
<div class="membership-image">
<img src="images/member.jpg" alt="Members" style="width: 100%; border-radius: 8px;">
</div>
</div>
</div>
</section>
<!-- Events Section -->
<section class="events-section" id="events">
<div class="container">
<h2>Club 35 Events</h2>
<div class="events-grid">
<div class="event-card">
<div class="event-image"><img src="./images/even1.jpeg"></div>
<span class="event-date">15 Nov - 20 Nov</span>
<h3 class="event-title">Summer Wine Festival</h3>
<a href="#" class="event-link">Read More →</a>
</div>
<div class="event-card">
<div class="event-image"><img src="./images/event2.jpeg"></div>
<span class="event-date">22 Nov - 25 Nov</span>
<h3 class="event-title">Harvest Celebration</h3>
<a href="#" class="event-link">Read More →</a>
</div>
<div class="event-card">
<div class="event-image"><img src="./images/event3.jpeg"></div>
<span class="event-date">01 Dec - 05 Dec</span>
<h3 class="event-title">Holiday Wine & Dine</h3>
<a href="#" class="event-link">Read More →</a>
</div>
</div>
</div>
</section>
<!-- Partner Logos -->
<section class="partners" id="partners">
<h2>Our Esteemed Partners</h2>
<div class="slider-container">
<div class="partner-logos" id="partnerSlider">
<div class="partner-logo"><img src="./images/Barefoot-Wines.png" alt=""></div>
<div class="partner-logo"><img src="./images/almare.png"></div>
<div class="partner-logo"><img src="./images/justin.png" alt=""></div>
<div class="partner-logo"><img src="./images/Caymus-Vineyards.png" alt=""></div>
<div class="partner-logo"><img src="./images/AVMountainsBlue.png"></div>
<div class="partner-logo"><img src="./images/korbel-logo-email-01.jpg"></div>
<div class="partner-logo"><img src="./images/Andre.png"></div>
</div>
</div>
</section>
<!-- Tasting Section -->
<section class="tasting-section" id="contact">
<div class="container">
<h2>Join us Wine & Tasting</h2>
<div class="tasting-section-content">
<div class="content-left">
<img src="./images/banner1.jpg" alt="">
<div class="contact-details">
<p>We would love to hear from you! Whether you have a question about our services, pricing,
or anything
else, our team is ready to answer all your questions.</p>
<ul class="contact-info">
<li><strong>Address:</strong> 123 Winery Lane, Napa Valley, CA</li>
<li><strong>Phone:</strong> +1 (555) 123-4567</li>
<li><strong>Email:</strong> info@wildapricot.com</li>
</ul>
<div class="social-icons">
<a href="https://www.facebook.com/wildapricot" target="_blank">
<img src="./images/facebook.svg" alt="">
</a>
<a href="https://www.youtube.com/wildapricotcom" target="_blank">
<img src="./images/youtube.svg" alt="">
</a>
</div>
</div>
</div>
<div class="contact-right">
<form class="contact-form" onsubmit="handleSubmit(event)">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required="">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required="">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required="">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" required=""></textarea>
</div>
<button type="submit" class="custom-btn">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact">
<div class="footer-bottom">
<p>© 2025 Club 35. All rights reserved.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('.partner-logos');
if (slider) {
slider.innerHTML += slider.innerHTML;
}
const header = document.getElementById('header');
if (header) {
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
}
});
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.getElementById('menuToggle');
const navMenu = document.getElementById('navMenu');
if (menuToggle && navMenu) {
menuToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
});
});
}
});
</script>
</body>
</html>