In this article you will learn how to build a functional and aesthetically pleasing Responsive Coffee Website Template Using HTML, CSS and JavaScript.

Responsive Coffee Website Template Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Developing a mobile-friendly coffee website is a wonderful idea to advertise your coffee shop online. If you’re a café owner or a simple coffee lover who wants to express themselves through their website, having a modern and responsive site is crucial.

In this article you will learn how to build a functional and aesthetically pleasing Responsive Coffee Website Template Using HTML, CSS and JavaScript.

It is developed using the modern technologies that allow it to be responsive for all types including desktops, laptops and mobile phones.

GitHub Source:

Features

This Responsive Coffee Website Template includes several important sections and features that enhance its usability and design:

  • Hero Section: A friendly homepage with a quick link mechanism to help people to find their ways through the different areas.
  • About Section: Promote your coffee shop’s history, its mission and vision.
  • Menu Section: Do introduce the drinks and foods that are available for sale.
  • Testimonials Section: Show customer feedback on the website by using the slider for social proof.
  • Gallery Section: A sample of the atmosphere in your shop and beverages that you offer to the customers.
  • Contact Section: Give a contact page and other information that the visitors need for them to get to you.
  • Footer Section: Contains social network icons, other Internal and external links and the copyrights info.

These features are intended to develop a kind of active and convenient relationship for visitors, thanks to which they will be able to quickly and easily find out all the necessary information about your coffee shop. Using this template you are able to have your own optimized website that you will effectively market your brand.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Coffee Shop Website

The following are the procedures to follow when using the Responsive Coffee Website Template. First and foremost, let me start by downloading the source code of the files and unzipping them. Then, you need to take the HTML, CSS and JavaScript code provided above, and open their respective files in your project folder and paste them there.

This JavaScript file makes it possible to have normal functionality of elements like the testimonial slider and the smooth scrolling functionality. Setup your coffee website and then upload the files to a live server, and your responsive website will be done and ready to use.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- Coding by JV Codes - youtube.com/@jvcodes -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Coffee Website | JV Codes</title>
    <!-- Linking Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
    <!-- Linking Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Header / Navbar -->
    <header>
      <nav class="navbar">
        <a href="index.html" class="logo">
          <img src="images/logo.png" alt="" class="logo-1">
        </a>
        <ul class="nav-menu">
          <button id="menu-close-button" class="fas fa-times"></button>
          <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#about" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#menu" class="nav-link">Menu</a>
          </li>
          <li class="nav-item">
            <a href="#testimonials" class="nav-link">Testimonials</a>
          </li>
          <li class="nav-item">
            <a href="#gallery" class="nav-link">Gallery</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact</a>
          </li>
        </ul>
        <button id="menu-open-button" class="fas fa-bars"></button>
      </nav>
    </header>
    <main>
      <!-- Hero section -->
      <section class="hero-section">
        <div class="section-content">
          <div class="hero-details">
            <h2 class="title">Perfect Cup</h2>
            <h3 class="subtitle">Energize your morning with our special coffee!</h3>
            <p class="description">Welcome to our world of coffee, where every bean has a legacy and every sip brings a smile.</p>
            <div class="buttons">
              <a href="#" class="button order-now">Order Now</a>
              <a href="#contact" class="button contact-us">Contact Us</a>
            </div>
          </div>
          <div class="hero-image-wrapper">
            <img src="images/coffee-hero-section.png" alt="Coffee" class="hero-image" />
          </div>
        </div>
      </section>
      <!-- About section -->
      <section class="about-section" id="about">
        <div class="section-content">
          <div class="about-image-wrapper">
            <img src="images/about-image.jpg" alt="About" class="about-image" />
          </div>
          <div class="about-details">
            <h2 class="section-title">About Us</h2>
            <p class="text">At Coffee House in Berndorf, Germany, we’re passionate about crafting the perfect coffee moments. Our cozy space invites coffee lovers and conversationalists to gather, unwind, and indulge in an exceptional coffee experience.</p>
            <div class="social-link-list">
              <a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a>
              <a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a>
              <a href="#" class="social-link"><i class="fa-brands fa-x-twitter"></i></a>
            </div>
          </div>
        </div>
      </section>
      <!-- Menu section -->
      <section class="menu-section" id="menu">
        <h2 class="section-title">Our Menu</h2>
        <div class="section-content">
          <ul class="menu-list">
            <li class="menu-item">
              <img src="images/hot-beverages.png" alt="Hot Beverages" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Hot Beverages</h3>
                <p class="text">Our wide range of freshly brewed coffee will keep you energized and feeling light all day.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/cold-beverages.png" alt="Cold Beverages" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Cold Beverages</h3>
                <p class="text">Chill out with our rich and frothy cold coffee, crafted to keep you cool and relaxed.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/refreshment.png" alt="Refreshment" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Refreshment</h3>
                <p class="text">Treat yourself to a fruit-packed, icy drink that instantly refreshes.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/special-combo.png" alt="Special Combos" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Special Combos</h3>
                <p class="text">Your favorite eating and drinking combations.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/desserts.png" alt="Dessert" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Dessert</h3>
                <p class="text">Satisfy your cravings and indulge in a delightful culinary journey.</p>
              </div>
            </li>
            <li class="menu-item">
              <img src="images/burger-frenchfries.png" alt="burger & French Fries" class="menu-image" />
              <div class="menu-details">
                <h3 class="name">Burger & French Fries</h3>
                <p class="text">Perfectly sized snacks to fill those small hunger gaps.</p>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <!-- Testimonials section -->
      <section class="testimonials-section" id="testimonials">
        <h2 class="section-title">Testimonials</h2>
        <div class="section-content">
          <div class="slider-container swiper">
            <div class="slider-wrapper">
              <ul class="testimonials-list swiper-wrapper">
                <li class="testimonial swiper-slide">
                  <img src="images/human-1.jpg" alt="User" class="user-image" />
                  <h3 class="name">Sarah Johnson</h3>
                  <i class="feedback">"The French roast was fantastic! Rich, smooth, and perfectly balanced. I’ll definitely be ordering again!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/human-2.jpg" alt="User" class="user-image" />
                  <h3 class="name">James Wilson</h3>
                  <i class="feedback">"This espresso blend is top-notch! Smooth and bold, with quick shipping to boot!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/human-06.jpg" alt="User" class="user-image" />
                  <h3 class="name">Michael Brown</h3>
                  <i class="feedback">"What a fantastic mocha flavor! Fresh, aromatic, and perfectly balanced. Shipping was quick as well!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/human-3.jpg" alt="User" class="user-image" />
                  <h3 class="name">Emily Harris</h3>
                  <i class="feedback">"The quality is outstanding—fresh beans and fast delivery. Highly recommended!"</i>
                </li>
                <li class="testimonial swiper-slide">
                  <img src="images/human-5.jpg" alt="User" class="user-image" />
                  <h3 class="name">Anthony Thompson</h3>
                  <i class="feedback">"The best decaf I’ve ever had! Smooth, flavorful, and arrived on time."</i>
                </li>
              </ul>
              <div class="swiper-pagination"></div>
              <div class="swiper-slide-button swiper-button-prev"></div>
              <div class="swiper-slide-button swiper-button-next"></div>
            </div>
          </div>
        </div>
      </section>
      <!-- Gallery section -->
      <section class="gallery-section" id="gallery">
        <h2 class="section-title">Gallery</h2>
        <div class="section-content">
          <ul class="gallery-list">
            <li class="gallery-item">
              <img src="images/gallery-1.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-2.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-3.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-4.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-5.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
            <li class="gallery-item">
              <img src="images/gallery-6.jpg" alt="Gallery Image" class="gallery-image" />
            </li>
          </ul>
        </div>
      </section>
      <!-- Contact section -->
      <section class="contact-section" id="contact">
        <h2 class="section-title">Contact Us</h2>
        <div class="section-content">
          <ul class="contact-info-list">
            <li class="contact-info">
              <i class="fa-solid fa-location-crosshairs"></i>
              <p>123 Campsite Avenue, Wilderness, CA 98765</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-envelope"></i>
              <p>info@jvcodes.com</p>
            </li>
            <li class="contact-info">
              <i class="fa-solid fa-phone"></i>
              <p>(123) 456-78909</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-clock"></i>
              <p>Monday - Friday: 9:00 AM - 10:00 PM</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-clock"></i>
              <p>Saturday: 10:00 AM - 3:00 PM</p>
            </li>
            <li class="contact-info">
              <i class="fa-regular fa-clock"></i>
              <p>Sunday: Closed</p>
            </li>
            <li class="contact-info">
              <i class="fa-solid fa-globe"></i>
              <p>www.jvcodes.com</p>
            </li>
          </ul>
          <form action="#" class="contact-form">
            <input type="text" placeholder="Your name" class="form-input" required />
            <input type="email" placeholder="Your email" class="form-input" required />
            <textarea placeholder="Your message" class="form-input" required></textarea>
            <button type="submit" class="button submit-button">Submit</button>
          </form>
        </div>
      </section>
      <!-- Footer section -->
      <footer class="footer-section">
        <div class="section-content">
          <p class="copyright-text">© 2025 Coffee Shop</p>
          <div class="social-link-list">
            <a href="#" class="social-link"><i class="fa-brands fa-facebook"></i></a>
            <a href="#" class="social-link"><i class="fa-brands fa-instagram"></i></a>
            <a href="#" class="social-link"><i class="fa-brands fa-x-twitter"></i></a>
          </div>
          <p class="policy-text">
            <a href="#" class="policy-link">Privacy policy</a>
            <span class="separator">•</span>
            <a href="#" class="policy-link">Refund policy</a>
          </p>
        </div>
      </footer>
    </main>
    <!-- Linking Swiper script -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- Linking custom script -->
    <script src="script.js"></script>
  </body>
</html>

CSS

Here is the complete code for style.css file to style the coffee website:

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  /* Colors */
  --white-color: #fff;
  --dark-color: #250f14;
  --primary-color: #250f14;
  --secondary-color: #62abff;
  --light-pink-color: #faf4f5;
  --medium-gray-color: #ccc;
  /* Font size */
  --font-size-s: 0.9rem;
  --font-size-n: 1rem;
  --font-size-m: 1.12rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;
  /* Font weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Border radius */
  --border-radius-s: 8px;
  --border-radius-m: 30px;
  --border-radius-circle: 50%;
  /* Site max width */
  --site-max-width: 1300px;
}
html {
  scroll-behavior: smooth;
}
/* Stylings for whole site */
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}
img {
  width: 100%;
}
:where(section, footer) .section-content {
  margin: 0 auto;
  padding: 0 20px;
  max-width: var(--site-max-width);
}
section .section-title {
  text-align: center;
  padding: 60px 0 100px;
  text-transform: uppercase;
  font-size: var(--font-size-xl);
}
section .section-title::after {
  content: "";
  width: 80px;
  height: 5px;
  display: block;
  margin: 10px auto 0;
  background: var(--secondary-color);
  border-radius: var(--border-radius-s);
}
/* Navbar styling */
header {
  z-index: 5;
  width: 100%;
  position: fixed;
  background: var(--primary-color);
}
header .navbar {
  display: flex;
  padding: 20px;
  align-items: center;
  margin: 0 auto;
  justify-content: space-between;
  max-width: var(--site-max-width);
}
.navbar .nav-logo .logo-text {
  color: var(--white-color);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* CSS Code */
.logo {
  display: inline-block;
  text-decoration: none;
}

.logo-1 {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: block;
}

.navbar .nav-menu {
  gap: 10px;
  display: flex;
}
.navbar .nav-menu .nav-link {
  padding: 10px 18px;
  color: var(--white-color);
  font-size: var(--font-size-m);
  border-radius: var(--border-radius-m);
  transition: 0.3s ease;
}
.navbar .nav-menu .nav-link:hover {
  color: var(--primary-color);
  background: var(--secondary-color);
}
.navbar :where(#menu-open-button, #menu-close-button) {
  display: none;
}
/* Hero section styling */
.hero-section {
  min-height: 100vh;
  background: var(--primary-color);
}
.hero-section .section-content {
  display: flex;
  padding-top: 40px;
  align-items: center;
  min-height: 100vh;
  justify-content: space-between;
}
.hero-section .hero-details {
  color: var(--white-color);
}
.hero-section .hero-details .title {
  font-size: var(--font-size-xxl);
  color: var(--secondary-color);
  font-family: "Miniver", sans-serif;
}
.hero-section .hero-details .subtitle {
  margin-top: 8px;
  max-width: 70%;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}
.hero-section .hero-details .description {
  max-width: 70%;
  margin: 24px 0 40px;
  font-size: var(--font-size-m);
}
.hero-section .hero-details .buttons {
  display: flex;
  gap: 20px;
}
.hero-section .hero-details .button {
  padding: 10px 26px;
  display: block;
  border: 2px solid transparent;
  border-radius: var(--border-radius-m);
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  transition: 0.3s ease;
}
.hero-section .hero-details .button:hover,
.hero-section .hero-details .button.contact-us {
  color: var(--white-color);
  border-color: var(--white-color);
  background: transparent;
}
.hero-section .hero-details .button.contact-us:hover {
  color: var(--primary-color);
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}
.hero-section .hero-image-wrapper {
  max-width: 600px;
  margin-right: 10px;
}
/* About section styling */
.about-section {
  padding: 120px 0;
  background: var(--light-pink-color);
}
.about-section .section-content {
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
}
.about-section .about-image-wrapper .about-image {
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}
.about-section .about-details {
  max-width: 50%;
}
.about-section .about-details .section-title {
  padding: 0;
}
.about-section .about-details .text {
  line-height: 30px;
  margin: 50px 0 30px;
  text-align: center;
  font-size: var(--font-size-m);
}
.about-section .social-link-list {
  display: flex;
  gap: 25px;
  justify-content: center;
}
.about-section .social-link-list .social-link {
  color: var(--primary-color);
  font-size: var(--font-size-l);
  transition: 0.2s ease;
}
.about-section .social-link-list .social-link:hover {
  color: var(--secondary-color);
}
/* Menu section styling */
.menu-section {
  color: var(--white-color);
  background: var(--dark-color);
  padding: 50px 0 100px;
}
.menu-section .menu-list {
  display: flex;
  gap: 110px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.menu-section .menu-list .menu-item {
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(100% / 3 - 110px);
}
.menu-section .menu-list .menu-item .menu-image {
  width: 83%;
  aspect-ratio: 1;
  margin-bottom: 15px;
  object-fit: contain;
}
.menu-section .menu-list .menu-item .name {
  margin: 12px 0;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
}
.menu-section .menu-list .menu-item .text {
  font-size: var(--font-size-m);
}
/* Testimonials section styling */
.testimonials-section {
  padding: 50px 0 100px;
  background: var(--light-pink-color);
}
.testimonials-section .slider-wrapper {
  overflow: hidden;
  margin: 0 60px 50px;
}
.testimonials-section .testimonial {
  user-select: none;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.testimonials-section .testimonial .user-image {
  width: 180px;
  height: 180px;
  margin-bottom: 50px;
  object-fit: cover;
  border-radius: var(--border-radius-circle);
}
.testimonials-section .testimonial .name {
  margin-bottom: 16px;
  font-size: var(--font-size-m);
}
.testimonials-section .testimonial .feedback {
  line-height: 25px;
}
.testimonials-section .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: var(--secondary-color);
}
.testimonials-section .swiper-slide-button {
  color: var(--secondary-color);
  margin-top: -50px;
  transition: 0.3s ease;
}
.testimonials-section .swiper-slide-button:hover {
  color: var(--primary-color);
}
/* Gallery section styling */
.gallery-section {
  padding: 50px 0 100px;
}
.gallery-section .gallery-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.gallery-section .gallery-list .gallery-item {
  overflow: hidden;
  border-radius: var(--border-radius-s);
  width: calc(100% / 3 - 32px);
}
.gallery-section .gallery-item .gallery-image {
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  transition: 0.3s ease;
}
.gallery-section .gallery-item:hover .gallery-image {
  transform: scale(1.3);
}
/* Contact section styling */
.contact-section {
  padding: 50px 0 100px;
  background: var(--light-pink-color);
}
.contact-section .section-content {
  display: flex;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
}
.contact-section .contact-info-list .contact-info {
  display: flex;
  gap: 20px;
  margin: 20px 0;
  align-items: center;
}
.contact-section .contact-info-list .contact-info i {
  font-size: var(--font-size-m);
}
.contact-section .contact-form .form-input {
  width: 100%;
  height: 50px;
  padding: 0 12px;
  outline: none;
  margin-bottom: 16px;
  font-size: var(--font-size-s);
  border-radius: var(--border-radius-s);
  border: 1px solid var(--medium-gray-color);
}
.contact-section .contact-form {
  max-width: 50%;
}
.contact-section .contact-form textarea.form-input {
  height: 100px;
  padding: 12px;
  resize: vertical;
}
.contact-section .contact-form .form-input:focus {
  border-color: var(--secondary-color);
}
.contact-section .contact-form .submit-button {
  padding: 10px 28px;
  outline: none;
  margin-top: 10px;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-m);
  background: var(--primary-color);
  color: var(--white-color);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
  transition: 0.3s ease;
}
.contact-section .contact-form .submit-button:hover {
  color: var(--primary-color);
  background: transparent;
}
/* Footer section styling */
.footer-section {
  padding: 20px 0;
  background: var(--dark-color);
}
.footer-section .section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-section :where(.copyright-text, .social-link, .policy-link) {
  color: var(--white-color);
  transition: 0.2s ease;
}
.footer-section .social-link-list {
  display: flex;
  gap: 25px;
}
.footer-section .social-link-list .social-link {
  font-size: var(--font-size-l);
}
.footer-section .social-link-list .social-link:hover,
.footer-section .policy-text .policy-link:hover {
  color: var(--secondary-color);
}
.footer-section .policy-text .separator {
  color: #fff;
  margin: 0 5px;
}
/* Responsive media query code for max width 1024px */
@media screen and (max-width: 1024px) {
  .menu-section .menu-list {
    gap: 60px;
  }
  .menu-section .menu-list .menu-item {
    width: calc(100% / 3 - 60px);
  }
}
/* Responsive media query code for max width 900px */
@media screen and (max-width: 900px) {
  :root {
    --font-size-m: 1rem;
    --font-size-l: 1.3rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.8rem;
  }
  body.show-mobile-menu {
    overflow: hidden;
  }
  body.show-mobile-menu header::before {
    content: "";
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.2);
  }
  .navbar :is(#menu-open-button, #menu-close-button) {
    font-size: var(--font-size-l);
    display: block;
  }
  .navbar :is(#menu-open-button, #menu-close-button):hover {
    color: var(--secondary-color) !important;
  }
  .navbar #menu-open-button {
    color: #fff;
  }
  .navbar .nav-menu #menu-close-button {
    position: absolute;
    right: 30px;
    top: 30px;
  }
  .navbar .nav-menu {
    display: block;
    background: #fff;
    position: fixed;
    top: 0;
    left: -300px;
    height: 100%;
    width: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 100px;
    transition: left 0.2s ease;
  }
  body.show-mobile-menu .nav-menu {
    left: 0;
  }
  .navbar .nav-menu .nav-link {
    display: block;
    margin-top: 17px;
    padding: 10px 22px;
    color: var(--dark-color);
    font-size: var(--font-size-l);
  }
  .hero-section .section-content {
    text-align: center;
    gap: 50px;
    padding: 30px 20px 20px;
    justify-content: center;
    flex-direction: column-reverse;
  }
  .hero-section .hero-details :is(.subtitle, .description),
  .about-section .about-details,
  .contact-section .contact-form {
    max-width: 100%;
  }
  .hero-section .hero-details .buttons {
    justify-content: center;
  }
  .hero-section .hero-image-wrapper {
    max-width: 370px;
    margin-right: 0;
  }
  .about-section .section-content {
    gap: 70px;
    flex-direction: column-reverse;
  }
  .about-section .about-image-wrapper .about-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    max-width: 250px;
  }
  .menu-section .menu-list {
    gap: 30px;
  }
  .menu-section .menu-list .menu-item {
    width: calc(100% / 2 - 30px);
  }
  .menu-section .menu-list .menu-item .menu-image {
    max-width: 200px;
  }
  .gallery-section .gallery-list {
    gap: 30px;
  }
  .gallery-section .gallery-list .gallery-item {
    width: calc(100% / 2 - 30px);
  }
  .contact-section .section-content {
    align-items: center;
    flex-direction: column-reverse;
  }
}
/* Responsive media query code for max width 640px */
@media screen and (max-width: 640px) {
  .menu-section .menu-list .menu-item,
  .gallery-section .gallery-list .gallery-item {
    width: 100%;
  }
  .menu-section .menu-list {
    gap: 60px;
  }
  .testimonials-section .slider-wrapper {
    margin: 0 0 30px;
  }
  .testimonials-section .swiper-slide-button {
    display: none;
  }
  .footer-section .section-content {
    flex-direction: column;
    gap: 20px;
  }
}

JavaScript

Here is the complete code for script.js file to function the coffee website:

const navbarLinks = document.querySelectorAll(".nav-menu .nav-link");
const menuOpenButton = document.querySelector("#menu-open-button");
const menuCloseButton = document.querySelector("#menu-close-button");
menuOpenButton.addEventListener("click", () => {
  // Toggle mobile menu visibility
  document.body.classList.toggle("show-mobile-menu");
});
// Close menu when the close button is clicked
menuCloseButton.addEventListener("click", () => menuOpenButton.click());
// Close menu when nav link is clicked
navbarLinks.forEach((link) => {
  link.addEventListener("click", () => menuOpenButton.click());
});
/* Initializing Swiper */
let swiper = new Swiper(".slider-wrapper", {
  loop: true,
  grabCursor: true,
  spaceBetween: 25,
  // Pagination bullets
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  /* Responsive breakpoints */
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});

Download Source Code

If you want to start working with this Responsive Coffee Website Template then you are free to download it from the source link given below. All you have to do is click the button below to download the template and integrate it into your works.

Download Source Code

Conclusion

With this Responsive Coffee Website Template, you will be able to take your business to another level thus giving your portfolio that professional look you have always wanted. Using this clean, modern template, you will get the free website suitable for any business related to coffee, which is also mobile friendly.

Do not forget to add credits to JV Source Codes and make sure to link back to the source, also, do not forget to Subscribe to the channel for more wonderful resources. If you have any difficulties or questions, do not hesitate to comment under this post and I will gladly answer you!

Download JV Source Codes

Similar Posts

Navigation Menu Hover Animation
| | |

Navigation Menu Hover Animation in HTML and CSS

A navigation menu is one of the most important elements on any website. Navigation menus assist users in getting around various sections and pages that are in the website. Hover animations are another means through which you can enrich the user experience. The Navigation Menu Hover Animation in HTML, CSS enhances the look of any…

In this post I am going to share Free source code for building A Modern Animated Pricing Table With HTML & CSS.
| | |

Modern Animated Pricing Table Using HTML and CSS (Free Source Code)

In case you are looking for an engaging way to share your packages with your clients, look no further. Look no further! In this post I am going to share Free source code for building A Modern Animated Pricing Table With HTML & CSS. This pricing table is not only beautifully designed but also easy…

The Picture Puzzle Game Using HTML, CSS and JavaScript is very interesting and a good way to teach players to use their brain in order to solve problems.
| | |

Picture Puzzle Game Using HTML, CSS, and JavaScript (Free Source Code)

The Picture Puzzle Game Using HTML, CSS and JavaScript is very interesting and a good way to teach players to use their brain in order to solve problems. It is easier to practice and is a fun way to expand your understanding of coding. As for the game you wanna see its source code –…

Navigation Bar with Indicator
| | |

Navigation Bar with Indicator in HTML, CSS and JavaScript

Navigation bar with indicator is one of the user friendly ways of presenting menu options on the website that improves general appearance of the navigation. It includes a bar that changes its position when a user navigates to various parts of the website by clicking on the corresponding menu item. In this tutorial, I am…

Developing a Modern Animated Hero Section using HTML, CSS, and JavaScript can help to make a first impression on your webpage.
| | |

Modern Animated Hero Section Using HTML, CSS and JavaScript (Free Source Code)

Developing a Modern Animated Hero Section using HTML, CSS, and JavaScript can help to make a first impression on your webpage. The hero section is an excellent representation of a website, and when done correctly, will help to create the proper context for the rest of the site. This article will give you free codes…

Product Card With Quick View Popup Effect
| | |

Product Card With Quick View Popup Effect in HTML, CSS and JavaScript

In this article, I will give you the free source code to build Product Card With Quick View Popup Effect in HTML, CSS, & JS. This is an innovative feature which facilitates a preview of certain details without switching to another page – perfect for modern eCommerce websites. In this article, I will explain how…

Leave a Reply

Your email address will not be published. Required fields are marked *