Create a Responsive Coffee Website with HTML, CSS, and JavaScript

Creating a visually appealing, functional and responsive coffee website requires the right combination of HTML, CSS, and JavaScript. Whether you're designing a website for a specialty coffee shop, an online coffee store, or a coffee blog, it’s essential to focus on aesthetics, smooth navigation, and mobile responsiveness. In this guide, we will walk you through the key elements of building a stunning coffee website that engages visitors and enhances their browsing experience. check out fast food website with html and css

1. Structuring the Coffee Website with HTML

HTML (Hypertext Markup Language) provides the structure of your website. Here are the essential sections every coffee website should have:

Header & Navigation: A sticky navigation bar with links to Home, About, Products, Gallery, and Contact.
Hero Section: A captivating hero image or video showcasing the coffee shop’s ambiance or brewing process.
About Section: A short story about the coffee brand, its philosophy, and commitment to quality.
Products Section: A showcase of specialty blends with high-quality images and descriptions.
Gallery Section: A visual collection of coffee moments, from roasting to serving.
Contact Section: Business contact details, location, and a contact form for inquiries.

By structuring your HTML properly, you create a strong foundation for your website.

2. Styling with CSS for a Premium Coffee Experience

CSS (Cascading Style Sheets) is crucial in making your coffee website visually stunning. Here are some key styling tips:

a) Using Elegant Colors and Fonts

Choose an elegant color palette with warm, earthy tones (brown, beige, gold) to reflect the essence of coffee. Use fonts that convey sophistication, such as serif fonts for headings and clean sans-serif fonts for body text.

b) Creating a Responsive Design

Ensure your website is fully responsive by using flexible grid layouts and media queries.

c) Adding Smooth Animations

Enhance the user experience with smooth animations on scroll and hover effects.

3. Enhancing Functionality with JavaScript

JavaScript brings interactivity to your website. Here’s how you can use it:

a) Implementing a Sticky Header

A sticky header improves navigation by keeping the menu visible as users scroll.

b) Creating a Mobile Menu Toggle

For mobile users, a responsive navigation menu is essential.

c) Implementing Smooth Scrolling

Smooth scrolling provides a seamless browsing experience when clicking navigation links.

Creating a coffee website with HTML, CSS, and JavaScript is an exciting project that allows you to showcase the essence of specialty coffee through design and functionality. By following the principles of structure, aesthetics, responsiveness, and interactivity, you can craft a website that attracts coffee lovers and enhances their experience. Whether it’s for a local coffee shop or an online store, a well-designed coffee website can help build a strong brand presence and engage customers effectively.

If you’re looking to take your coffee website to the next level, consider adding features like e-commerce integration, subscription services, and blog sections for coffee-related content. Happy coding, and enjoy your coffee journey!

Setting Up the Project

To build this website, you only need a basic understanding of HTML, CSS and JavaScript. create the below files

Step 1: HTML (index.html)

Step 2: Styling with CSS (style.css)

Step 3: JavaScript (script.js)

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NOIR | Specialty Coffee</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Header -->
    <header>
      <div class="container">
        <nav>
          <a href="#" class="logo">NOIR<span>.</span></a>
          <div class="nav-links">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#products">Signature Blends</a>
            <a href="#gallery">Gallery</a>
            <a href="#contact">Contact</a>
          </div>
          <div class="mobile-menu">
            <div class="menu-btn">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </nav>
      </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
      <div class="hero-video">
        <img src="./images/hero.jpg" alt="Coffee Brewing Process" />
      </div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-tag">Premium Experience</div>
          <h1 class="hero-title">Elevate Your <span>Coffee Ritual</span></h1>
          <p class="hero-subtitle">
            Discover our meticulously crafted blends sourced from sustainable
            farms around the world, roasted to perfection to highlight the
            unique characteristics of each origin.
          </p>
          <a href="#products" class="btn hero-btn"
            >Explore Collection <span class="btn-icon">→</span></a
          >
        </div>
      </div>
      <div class="scroll-indicator">
        <p>Scroll</p>
        <div class="scroll-arrow"></div>
      </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Our Philosophy</h2>
        </div>
        <div class="about-container">
          <div class="about-img">
            <img src="./images/coffee.jpg" alt="Coffee Roasting Process" />
          </div>
          <div class="about-content">
            <h3>Craftsmanship in Every Cup</h3>
            <p>
              Founded in 2020, NOIR has been dedicated to redefining the coffee
              experience through innovative approaches to sourcing, roasting,
              and brewing. Our mission is to honor the journey of each coffee
              bean - from crop to cup.
            </p>
            <p>
              We work directly with small-scale farmers who share our commitment
              to sustainable and ethical practices, ensuring that every harvest
              supports both environmental health and community development.
            </p>
            <div class="features">
              <div class="feature">
                <div class="feature-icon">♨️</div>
                <div class="feature-content">
                  <h4>Small-Batch Roasting</h4>
                  <p>
                    Meticulously roasted in small batches to ensure optimal
                    flavor development.
                  </p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">🌱</div>
                <div class="feature-content">
                  <h4>Sustainable Sourcing</h4>
                  <p>
                    Direct trade relationships with farmers committed to ethical
                    practices.
                  </p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">⏱️</div>
                <div class="feature-content">
                  <h4>Peak Freshness</h4>
                  <p>
                    Shipped within 48 hours of roasting for the freshest
                    experience.
                  </p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">🔬</div>
                <div class="feature-content">
                  <h4>Precision Brewing</h4>
                  <p>
                    Custom brewing parameters for each blend to maximize flavor
                    potential.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Products Section -->
    <section class="products" id="products">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Signature Blends</h2>
          <p>
            Each of our signature blends is crafted to highlight the unique
            character of its origin while delivering a sophisticated and
            memorable coffee experience.
          </p>
        </div>
        <div class="products-grid">
          <div class="product-card">
            <div class="product-img">
              <img src="./images/product-01.jpg" alt="Ethiopian Yirgacheffe" />
            </div>
            <div class="product-content">
              <div class="product-tag">Single Origin</div>
              <h3 class="product-title">Ethiopian Yirgacheffe</h3>
              <p>
                Bright and complex with vibrant citrus notes, bergamot, and a
                delicate floral finish that lingers on the palate.
              </p>
              <div class="product-info">
                <div class="product-price">$24.00</div>
                <div class="product-rating">★★★★★</div>
              </div>
            </div>
          </div>
          <div class="product-card">
            <div class="product-img">
              <img src="./images/product-02.jpg" alt="Midnight Blend" />
            </div>
            <div class="product-content">
              <div class="product-tag">Signature</div>
              <h3 class="product-title">Midnight Blend</h3>
              <p>
                Our flagship espresso blend featuring rich dark chocolate,
                caramelized sugar, and a subtle spice finish with remarkable
                body.
              </p>
              <div class="product-info">
                <div class="product-price">$22.00</div>
                <div class="product-rating">★★★★★</div>
              </div>
            </div>
          </div>
          <div class="product-card">
            <div class="product-img">
              <img src="./images/product-03.jpg" alt="Colombian Reserve" />
            </div>
            <div class="product-content">
              <div class="product-tag">Limited</div>
              <h3 class="product-title">Colombian Reserve</h3>
              <p>
                Exceptionally smooth with notes of brown sugar, red apple, and
                hazelnut with a clean, sweet finish that satisfies.
              </p>
              <div class="product-info">
                <div class="product-price">$26.00</div>
                <div class="product-rating">★★★★★</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery" id="gallery">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Coffee Journey</h2>
          <p>
            A visual exploration of our process from bean selection to the final
            brew.
          </p>
        </div>
        <div class="gallery-container">
          <div class="gallery-item">
            <img src="./images/hero.jpg" alt="Coffee Farm" />
            <div class="gallery-overlay">
              <div class="gallery-icon">+</div>
            </div>
          </div>
          <div class="gallery-item">
            <img src="./images/coffee.jpg" alt="Coffee Beans" />
            <div class="gallery-overlay">
              <div class="gallery-icon">+</div>
            </div>
          </div>
          <div class="gallery-item">
            <img src="./images/product-01.jpg" alt="Roasting Process" />
            <div class="gallery-overlay">
              <div class="gallery-icon">+</div>
            </div>
          </div>
          <div class="gallery-item">
            <img src="./images/product-02.jpg" alt="Brewing" />
            <div class="gallery-overlay">
              <div class="gallery-icon">+</div>
            </div>
          </div>
          <div class="gallery-item">
            <img src="./images/product-03.jpg" alt="Coffee Shop" />
            <div class="gallery-overlay">
              <div class="gallery-icon">+</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">Get In Touch</h2>
          <p>
            Have questions about our coffee or interested in wholesale
            partnerships? We'd love to hear from you.
          </p>
        </div>
        <div class="contact-container">
          <div class="contact-info">
            <h3>Let's Connect</h3>
            <ul class="info-list">
              <li class="info-item">
                <div class="info-icon">📍</div>
                <div class="info-content">
                  <h4>Our Flagship Store</h4>
                  <p>
                    1235 Coffee Avenue, Design District<br />New York, NY 10001
                  </p>
                </div>
              </li>
              <li class="info-item">
                <div class="info-icon">⏰</div>
                <div class="info-content">
                  <h4>Opening Hours</h4>
                  <p>
                    Monday - Friday: 7AM - 8PM<br />Saturday - Sunday: 8AM - 9PM
                  </p>
                </div>
              </li>
              <li class="info-item">
                <div class="info-icon">📞</div>
                <div class="info-content">
                  <h4>Contact</h4>
                  <p>
                    Phone: +1 (212) 555-0123<br />Email:
                    <a href="mailto:hello@noircoffee.com"
                      >hello@noircoffee.com</a
                    >
                  </p>
                </div>
              </li>
            </ul>
            <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="contact-form">
            <h3>Send a Message</h3>
            <form>
              <div class="form-group">
                <input
                  type="text"
                  class="form-control"
                  placeholder="Your Name"
                  required
                />
              </div>
              <div class="form-group">
                <input
                  type="email"
                  class="form-control"
                  placeholder="Your Email"
                  required
                />
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Subject" />
              </div>
              <div class="form-group">
                <textarea
                  class="form-control"
                  placeholder="Your Message"
                  required
                ></textarea>
              </div>
              <button type="submit" class="btn">
                Send Message <span class="btn-icon">→</span>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer-top">
          <div class="footer-col">
            <div class="footer-logo">NOIR<span>.</span></div>
            <p>
              Crafting exceptional coffee experiences since 2020. Our mission is
              to elevate your daily ritual with thoughtfully sourced and
              expertly roasted specialty coffee.
            </p>
          </div>
          <div class="footer-col">
            <h4>Quick Links</h4>
            <ul class="footer-links">
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About Us</a></li>
              <li><a href="#products">Products</a></li>
              <li><a href="#gallery">Gallery</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div class="footer-col">
            <h4>Information</h4>
            <ul class="footer-links">
              <li><a href="#">Subscription Details</a></li>
              <li><a href="#">Brewing Guides</a></li>
              <li><a href="#">Shipping Policy</a></li>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Terms & Conditions</a></li>
            </ul>
          </div>
          <div class="footer-col">
            <h4>Newsletter</h4>
            <p>
              Subscribe to our newsletter for exclusive offers and coffee
              insights.
            </p>
            <form class="newsletter-form">
              <input
                type="email"
                class="newsletter-input"
                placeholder="Your Email"
                required
              />
              <button type="submit" class="newsletter-btn">→</button>
            </form>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="copyright">© 2025 NOIR Coffee. All rights reserved.</div>
          <div class="footer-nav">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Sitemap</a>
          </div>
        </div>
      </div>
    </footer>

    <script src="script.js"></script>
  </body>
</html>

css

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap");

:root {
  --primary: #ffffff;
  --secondary: #8b5a2b;
  --accent: #d35400;
  --dark: #333333;
  --light: #f8f9fa;
  --gray: #6c757d;
  --text: #2d2d2d;
  --overlay: rgba(255, 255, 255, 0.7);
  --glass: rgba(255, 255, 255, 0.8);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --border: #eeeeee;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Sora", sans-serif;
  background-color: var(--primary);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
}

p {
  font-weight: 300;
  color: var(--gray);
  margin-bottom: 1.5rem;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 120px 0;
  position: relative;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;
  background-color: var(--secondary);
  color: var(--primary);
  border: none;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--dark);
  z-index: -1;
  transition: width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.btn:hover {
  color: var(--primary);
}

.btn:hover::before {
  width: 100%;
}

.btn-icon {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.btn:hover .btn-icon {
  transform: translateX(5px);
}

/* Header Styles */
header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  transition: all 0.4s ease;
  padding: 30px 0;
}

header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 15px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 2px;
}

.logo span {
  color: var(--secondary);
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-links a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 1px;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.nav-links a::before {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--secondary);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.nav-links a:hover {
  color: var(--secondary);
}

.nav-links a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.mobile-menu {
  display: none;
  cursor: pointer;
  z-index: 1001;
}

.menu-btn {
  width: 30px;
  height: 20px;
  position: relative;
}

.menu-btn span {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--dark);
  transition: all 0.3s ease;
  left: 0;
}

.menu-btn span:nth-child(1) {
  top: 0;
}

.menu-btn span:nth-child(2) {
  top: 9px;
  width: 80%;
}

.menu-btn span:nth-child(3) {
  bottom: 0;
}

.menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Hero Section */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--light);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(248, 249, 250, 0.9) 100%
  );
  z-index: 1;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-tag {
  display: inline-block;
  padding: 5px 15px;
  background-color: var(--accent);
  color: var(--primary);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.hero-title {
  font-size: 4.5rem;
  line-height: 1.1;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s forwards 0.2s;
}

.hero-title span {
  color: var(--secondary);
  display: block;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 40px;
  max-width: 600px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s forwards 0.4s;
}

.hero-btn {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s forwards 0.6s;
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: fadeIn 1s forwards 1s;
}

.scroll-indicator p {
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--dark);
}

.scroll-arrow {
  width: 30px;
  height: 60px;
  border: 2px solid var(--secondary);
  border-radius: 15px;
  position: relative;
}

.scroll-arrow::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--secondary);
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  animation: scrollDown 2s infinite;
}

/* About Section */
.about {
  background-color: var(--primary);
  overflow: hidden;
}

.section-header {
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 3rem;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 3px;
  background-color: var(--secondary);
  bottom: -10px;
  left: 0;
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-img {
  position: relative;
  height: 600px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.about-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.about-img:hover img {
  transform: scale(1.05);
}

.about-img::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100px;
  height: 100px;
  border-top: 2px solid var(--secondary);
  border-left: 2px solid var(--secondary);
  z-index: 1;
}

.about-img::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-bottom: 2px solid var(--secondary);
  border-right: 2px solid var(--secondary);
  z-index: 1;
}

.about-content h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--secondary);
}

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

.feature {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.feature-icon {
  font-size: 1.5rem;
  color: var(--secondary);
  flex-shrink: 0;
}

.feature-content h4 {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.feature-content p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Products Section */
.products {
  background-color: var(--light);
  position: relative;
  overflow: hidden;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}

.product-card {
  background-color: var(--primary);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.5s ease;
  grid-column: span 4;
  opacity: 0;
  transform: translateY(50px);
}

.product-card:nth-child(1) {
  animation: fadeUp 0.8s forwards 0.2s;
}

.product-card:nth-child(2) {
  animation: fadeUp 0.8s forwards 0.4s;
}

.product-card:nth-child(3) {
  animation: fadeUp 0.8s forwards 0.6s;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.product-img {
  height: 300px;
  overflow: hidden;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.product-card:hover .product-img img {
  transform: scale(1.1);
}

.product-content {
  padding: 30px;
  position: relative;
}

.product-tag {
  display: inline-block;
  padding: 5px 10px;
  background-color: var(--secondary);
  color: var(--primary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  top: -15px;
  left: 30px;
  border-radius: 3px;
}

.product-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.product-price {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--secondary);
}

.product-rating {
  display: flex;
  align-items: center;
  color: var(--secondary);
}

/* Gallery Section */
.gallery {
  background-color: var(--primary);
  overflow: hidden;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  animation: fadeIn 0.8s forwards;
}

.gallery-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
  animation-delay: 0.2s;
}

.gallery-item:nth-child(2) {
  animation-delay: 0.3s;
}

.gallery-item:nth-child(3) {
  animation-delay: 0.4s;
}

.gallery-item:nth-child(4) {
  animation-delay: 0.5s;
}

.gallery-item:nth-child(5) {
  animation-delay: 0.6s;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(139, 90, 43, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-icon {
  font-size: 2rem;
  color: var(--primary);
}

/* Contact Section */
.contact {
  background-color: var(--light);
  position: relative;
}

.contact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: url("/api/placeholder/800/1200") center/cover no-repeat;
  opacity: 0.1;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  position: relative;
  z-index: 1;
}

.contact-form {
  background-color: var(--primary);
  padding: 50px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 25px;
}

.form-control {
  width: 100%;
  padding: 15px;
  background-color: var(--light);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.1);
}

.form-control::placeholder {
  color: var(--gray);
}

textarea.form-control {
  height: 120px;
  resize: none;
}

.contact-info h3 {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: var(--secondary);
}

.info-list {
  list-style: none;
  margin-bottom: 40px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.info-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(139, 90, 43, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 1.2rem;
  color: var(--secondary);
  flex-shrink: 0;
}

.info-content h4 {
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.info-content p,
.info-content a {
  color: var(--gray);
  text-decoration: none;
  transition: color 0.3s ease;
}

.info-content a:hover {
  color: var(--secondary);
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--secondary);
  color: var(--primary);
  transform: translateY(-5px);
}

/* Footer */
footer {
  background-color: var(--dark);
  color: var(--primary);
  padding: 80px 0 30px;
  position: relative;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

.footer-logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 20px;
  letter-spacing: 2px;
}

.footer-logo span {
  color: var(--secondary);
}

.footer-col p {
  color: #bbbbbb;
  margin-bottom: 20px;
}

.footer-col h4 {
  font-size: 1.2rem;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
  color: var(--primary);
}

.footer-col h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--secondary);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #bbbbbb;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer-links a::before {
  content: "→";
  position: absolute;
  left: -20px;
  opacity: 0;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: var(--secondary);
  transform: translateX(20px);
}

.footer-links a:hover::before {
  opacity: 1;
}

.newsletter-form {
  display: flex;
}

.newsletter-input {
  flex-grow: 1;
  padding: 10px 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--primary);
  font-family: inherit;
}

.newsletter-input:focus {
  outline: none;
}

.newsletter-btn {
  background-color: var(--secondary);
  color: var(--primary);
  border: none;
  padding: 0 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.newsletter-btn:hover {
  background-color: var(--primary);
  color: var(--dark);
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  color: #bbbbbb;
  font-size: 0.9rem;
}

.footer-nav {
  display: flex;
  gap: 20px;
}

.footer-nav a {
  color: #bbbbbb;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--secondary);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollDown {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  75% {
    opacity: 0;
    transform: translateX(-50%) translateY(35px);
  }
  76% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Media Queries */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 3.5rem;
  }

  .products-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .product-card {
    grid-column: span 3;
  }

  .gallery-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .hero-title {
    font-size: 3rem;
  }

  .about-container,
  .contact-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-img {
    height: 400px;
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card {
    grid-column: span 1;
  }

  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item:nth-child(1) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  header {
    padding: 20px 0;
  }

  .mobile-menu {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: var(--primary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    gap: 30px;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
  }

  .nav-links.active {
    right: 0;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  section {
    padding: 80px 0;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .gallery-container,
  .products-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

javascript

// Sticky Header
window.addEventListener("scroll", function () {
  const header = document.querySelector("header");
  header.classList.toggle("scrolled", window.scrollY > 50);
});

// Mobile Menu Toggle
const menuBtn = document.querySelector(".menu-btn");
const navLinks = document.querySelector(".nav-links");

menuBtn.addEventListener("click", function () {
  menuBtn.classList.toggle("active");
  navLinks.classList.toggle("active");
});

// Smooth Scrolling
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener("click", function (e) {
    e.preventDefault();

    const targetId = this.getAttribute("href");
    if (targetId === "#") return;

    const targetElement = document.querySelector(targetId);

    window.scrollTo({
      top: targetElement.offsetTop - 80,
      behavior: "smooth",
    });

    // Close mobile menu if open
    menuBtn.classList.remove("active");
    navLinks.classList.remove("active");
  });
});

const observeElements = (elements, className) => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add(className);
        }
      });
    },
    { threshold: 0.1 }
  );

  elements.forEach((element) => {
    observer.observe(element);
  });
};

document.addEventListener("DOMContentLoaded", () => {
  const productCards = document.querySelectorAll(".product-card");
  observeElements(productCards, "animated");
});

CodingVox

Web Developer and Content Creator

responsive web designcoffee websitecoffee shop websiteweb development