Close Menu

    Subscribe to Updates

    Get the latest creative post from Developer Goutam about Web Development & design.

    What's Hot

    Simple Startup Landing Page Using HTML CSS

    September 29, 2024

    Responsive Google Gemini Clone Using HTML CSS JavaScript

    September 19, 2024

    Password Generator Using HTML CSS JS

    September 17, 2024
    Facebook X (Twitter) Instagram
    • Terms & Conditions
    • Disclaimer
    • Privacy Policy
    • Contact Me
    • About Us
    Instagram YouTube Telegram
    DevGoutam
    • Home
    • Projects
    • Contact
    • web development

      Simple Startup Landing Page Using HTML CSS

      September 29, 2024

      Responsive Google Gemini Clone Using HTML CSS JavaScript

      September 19, 2024

      Password Generator Using HTML CSS JS

      September 17, 2024

      Foody Restaurant Website Using HTML CSS

      September 13, 2024

      Coffee Shop Website Using HTML CSS

      September 10, 2024
    DevGoutam
    Home»Coffee landing page»Coffee Shop Website Using HTML CSS
    Coffee landing page

    Coffee Shop Website Using HTML CSS

    Developer GoutamBy Developer GoutamSeptember 10, 2024No Comments8 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp Email
    Coffee Shop Website Using HTML CSS

    Coffee Shop Website Using HTML CSS With Source Code

    Introduction

    Hey coders, i hope you all are doing well. As you know, in this article we’ll build a Coffee Shop Website Using HTML CSS. This coffee shop website is a simple one page website which is build using html and CSS. No JavaScript is used in this project. This project is a very simple project and if you know the html and CSS then you can also build this website. 

    The structure of the website is build using HTML and later CSS is applied to give some styling to our website.  This coffee shop website contains different sections like Our Story, Products etc. The main structure of our website is build using HTML. Every section of our website is build using HTML. Once when the structure of the website is completed then we applied the CSS for our webpage. As we know that CSS is used to style webpages. Using CSS we’ve styled our website. 

    Let’s see and understand our code.

    index.html

    This code is our HTML Code. HTML stands for Hyper Text Markup Language. So basically HTML is used to create the structure of any website or webpage. In our today’s project this HTML code makes the basic structure of our website. 

    This webpage shows a clean and attractive layout for a coffee shop. At the top, you’ll see a simple navigation bar with the shop’s logo and links to Home About, Menu, and Contact. The links are easy to use, and the “Home” link stands out to show which page you’re on. Right below, the main header grabs your eye with big friendly text that says “Start Your Day With Our Coffee.” There’s also a clear “Shop Now” button that lets you check out what the shop sells.

    After that, you’ll find the “Our Story” section. It gives a quick rundown of the coffee shop’s background, along with a picture to make it feel more personal and real. The section has a clear title with a line under it to set it apart from the rest. Below that, there’s a short paragraph with some placeholder text that hints at the shop’s history. If you want to know more, there’s a “Learn More” button you can click.

    The next part highlights the coffee shop as the ideal spot to savor coffee using text in a big, eye-catching font. This message pairs with a matching image making a welcoming feel for guests. The shop then shows its products in a grid of cards. Each card has a picture, the coffee product’s name, and its main ingredients such as espresso, chocolate, and steamed milk. Every card has a “Learn More” button letting users dig deeper into the products.

    At the end, the footer gives contact info, the shop’s open hours, and some extra text about the business. The footer looks neat and pro, with a final copyright note and a nod to the developer who built the page.

    				
    					<html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Coffee</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/09/post16-768x377.png 768w, https://developergoutam.com/wp-content/uploads/2024/09/post16-300x147.png 300w, https://developergoutam.com/wp-content/uploads/2024/09/post16-1024x503.png 1024w, https://developergoutam.com/wp-content/uploads/2024/09/post16-1536x754.png 1536w, https://developergoutam.com/wp-content/uploads/2024/09/post16-150x74.png 150w, https://developergoutam.com/wp-content/uploads/2024/09/post16-450x221.png 450w, https://developergoutam.com/wp-content/uploads/2024/09/post16-1200x589.png 1200w, https://developergoutam.com/wp-content/uploads/2024/09/post16.png 1833w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <!-- nav -->
        <nav>
          <h1 class="logo">Logo</h1>
          <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
    
        <!-- header -->
        <section class="header">
          <h1 class="main-headings">START YOUR DAY</h1>
          <h1 class="primary-heading">WITH OUR COFFEE</h1>
          <button class="main-btn">Shop Now</button>
        </section>
    
        <!-- our story -->
    
        <section id="our-story">
          <div class="img-container">
            <div class="img"></div>
          </div>
          <div class="section-content">
            <div class="title-style">
              <span class="line"></span>
              <h1 class="title">Our Story</h1>
            </div>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
              doloremque reiciendis ea voluptatibus. Quis modi ratione incidunt
              ipsam
            </p>
            <button>Learn More</button>
          </div>
        </section>
    
        <!-- Perfect place to enjoy your coffee -->
        <section class="coffee-container">
          <div class="content-section">
            <div class="title-style">
              <h1 class="title-two">
                Perfect Place <br />
                To Enjoy Your <br />
                Coffee
              </h1>
            </div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <button style="margin-top: 20px">Learn More</button>
          </div>
    
          <section class="img-container">
            <img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/1.%20Coffee/Images/2.png" class="img-2" alt="" />
          </section>
        </section>
    
        <!-- Products -->
        <section class="products">
          <h1 class="title title-three">Products</h1>
    
          <section class="cards">
            <div class="card">
              <div class="card-img img-one"></div>
              <div class="card-title">
                <h1>Mocha</h1>
              </div>
              <div class="items">
                <p>Espresso</p>
                <p>Chocolate</p>
                <p>Steamed Milk</p>
              </div>
              <button>Learn More</button>
            </div>
            <div class="card">
              <div class="card-img img-two"></div>
              <div class="card-title">
                <h1>Mocha</h1>
              </div>
              <div class="items">
                <p>Espresso</p>
                <p>Chocolate</p>
                <p>Steamed Milk</p>
              </div>
              <button>Learn More</button>
            </div>
            <div class="card">
              <div class="card-img img-three"></div>
              <div class="card-title">
                <h1>Mocha</h1>
              </div>
              <div class="items">
                <p>Espresso</p>
                <p>Chocolate</p>
                <p>Steamed Milk</p>
              </div>
              <button>Learn More</button>
            </div>
          </section>
        </section>
    
        <!-- footer -->
        <hr />
        <footer>
          <div class="container">
            <h1 class="heading-info">About <span>Us</span></h1>
            <p>
              Sit amet consectetur adipisicing elit. Dolor doloremque reiciendis ea
              voluptatibus.
            </p>
          </div>
          <div class="container">
            <h1 class="heading-info">Contact <span>Us</span></h1>
            <p>
              Sit amet consectetur adipisicing elit. Dolor doloremque reiciendis ea
              voluptatibus.
            </p>
          </div>
          <div class="container">
            <h1 class="heading-info">Opening <span> Hourse</span></h1>
            <p>
              Sit amet consectetur adipisicing elit. Dolor doloremque reiciendis ea
              voluptatibus.
            </p>
          </div>
        </footer>
        <hr class="hr-two" />
    
        <p class="para">
          Copyright @ 2022 YoursDeveloper | Provided by <span>Arvind Prajapat</span>
        </p>
    
        <script src="app.js"></script>
      
    </body>
    </html>
    				
    			

    style.css

    This is our CSS code. Using this code we’ve styled our webpage. All the styling to our website is given by this CSS code. 

    This CSS code styles a coffee shop webpage. It starts by bringing in a custom font named “Playfair Display SC” from Google Fonts and sets up two main colors as CSS variables. These colors create a consistent look throughout the design.

    The button style gives all buttons the same look with padding, a background color from the main color variable, and no border. A reset style applies to all elements (*) to get rid of default padding and margins leading to a cleaner layout.

    The body has a dark background color, which creates a warm and welcoming feel. The nav is set up as a flexible container (display: flex) spreading its elements and lining them up in the center. The navigation links (li a) appear inline, without underlines, and show a bottom border when the user hovers over them.

    The header background has a large image that occupies the full height of the screen (100vh) and contains its contents in such a way that they are centered both vertically and horizontally. Inside it, the typefaces are relatively huge, positioned either at the top or bottom of the section.

    On one side is an image while some text is shown on another within ‘Our Story’ section. Flexbox layout is employed to get everything in the center. This text goes with some custom fonts as well as colors while the images have specific sizes and placements.

    In the ‘Products’ section, coffee items appear on cards each bound with a border line bearing an image, title and description below it. For their part, footers consist of well-structured columns sharing assorted details about the coffee shop.

    Small screens will also definitely like how this page appears after resizing fonts and rearranging its components through media queries.

    				
    					@import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap");
    
    :root {
      --main-color: #deab5f;
      --primary-color: #312e2e;
    }
    
    /* Utility Styles */
    button {
      padding: 10px 30px;
      background: var(--main-color);
      border: none;
      cursor: pointer;
    }
    
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    body {
      background: #100e0f;
    }
    
    nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #fff;
      font-family: sans-serif;
      padding-top: 15px;
    }
    
    li {
      display: inline;
      list-style: none;
    }
    
    li a {
      color: #fff;
      text-decoration: none;
      margin-left: 40px;
    }
    
    li a:hover {
      border-bottom: 2px solid #deab5f;
    }
    
    .header {
      background: url("https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/1.%20Coffee/Images/pexels-nao-triponez-129207.jpg");
      background-position: center;
      background-size: cover;
      height: 100vh;
      font-family: "Playfair Display SC", serif;
      font-weight: normal;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      position: relative;
      text-align: center;
    }
    
    .main-headings {
      position: absolute;
      top: 7rem;
      font-size: 4rem;
      word-spacing: 10px;
    }
    .primary-heading {
      position: absolute;
      bottom: 4rem;
      font-size: 4rem;
      word-spacing: 10px;
      margin-bottom: -40px;
    }
    
    .main-btn {
      position: absolute;
      bottom: 2rem;
      padding: 10px 30px;
      margin-top: 20px;
      background: transparent;
      background: var(--main-color);
      border: none;
      cursor: pointer;
      transform: translateY(60px);
    }
    
    #our-story {
      margin-top: 15%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
    
    .img {
      width: 400px;
      height: 400px;
      background: url('https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/1.%20Coffee/Images/pexels-chitokan-2183027-removebg-preview.png');
      background-position: center;
      background-size: cover;
    }
    
    .title-style {
      display: flex;
      align-items: center;
    }
    
    .title {
      font-family: "Playfair Display SC", serif;
      font-size: 4rem;
      color: #fff;
      transform: translateX(-100px);
    }
    
    .line {
      width: 100px;
      height: 2px;
      background: #fff;
      transform: translateX(-120px);
    }
    
    .section-content p {
      max-width: 500px;
      color: #fff;
      font-family: sans-serif;
      line-height: 20px;
      margin: 20px 0;
    }
    
    .coffee-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10rem;
    }
    
    .content-section p {
      max-width: 500px;
    }
    
    .img-container {
      width: 500px;
      height: 400px;
    }
    
    .img-2 {
      width: 400px;
      height: 400px;
    }
    
    .title-two {
      font-size: 3rem;
      color: #fff;
      font-family: "Playfair Display SC", serif;
      font-weight: normal;
    }
    
    .content-section p {
      color: white;
      margin-top: 20px;
      font-family: sans-serif;
    }
    
    .products {
      margin-top: 5rem;
    }
    
    .title-three {
      font-size: 4rem;
      margin-left: 10rem;
      margin-top: 10rem;
      margin-bottom: 10rem;
    }
    
    .cards {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }
    
    .card {
      border: 2px solid #deab5f;
      padding: 0 20px;
      height: 400px;
      width: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      border-radius: 5px;
      position: relative;
      margin-bottom: 4rem;
    }
    
    .card-img {
      width: 100px;
      height: 100px;
      position: absolute;
      top: -60px;
    }
    
    .img-one {
      background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/1.%20Coffee/Images/1.png);
      background-position: center;
      background-size: cover;
    }
    .img-two {
      background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/1.%20Coffee/Images/3.png);
      background-position: center;
      background-size: cover;
    }
    .img-three {
      background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/1.%20Coffee/Images/4.png);
      background-position: center;
      background-size: cover;
    }
    
    .card-title {
      color: #fff;
      font-family: sans-serif;
      margin-top: 50px;
    }
    
    .card .items p {
      color: #fff;
      margin: 20px 0;
      font-family: sans-serif;
    }
    
    /* footer */
    footer {
      height: 50vh;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: sans-serif;
    }
    
    footer .container {
      margin: 20px;
      max-width: 300px;
      text-align: center;
    }
    
    footer .heading-info {
      margin-bottom: 20px;
    }
    
    footer p {
      line-height: 25px;
    }
    
    span {
      color: #deab5f;
    }
    
    hr {
      margin-bottom: 20px;
      border-color: #deab5f;
      width: 500px;
      margin: 0 auto;
    }
    
    .para {
      color: white;
      font-family: sans-serif;
      text-align: center;
      margin-top: 20px;
    }
    
    @media only screen and (max-width: 768px) {
      .main-headings,
      .primary-heading {
        font-size: 2.5rem;
      }
    
      #our-story {
        text-align: center;
      }
    
      #our-story .title {
        transform: translateX(50px);
      }
    
      #our-story .line {
        display: none;
      }
    
      .content-section {
        text-align: center;
      }
    
      #our-story .img-container .img {
        width: 70%;
        text-align: center;
        margin: 0 auto;
      }
    
      .coffee-container .img-container {
        margin-top: 5rem;
        width: 50%;
      }
    
      hr {
        width: 400px;
      }
    
      .hr-two {
        display: none;
      }
    
      .para {
        margin-top: 10rem;
      }
    }
    				
    			

    Live Preview

    coffee shop website using html css project using html css web development
    Share. Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp Email
    Developer Goutam
    Developer Goutam
    • Website

    Related Posts

    Simple Startup Landing Page Using HTML CSS

    September 29, 2024

    Responsive Google Gemini Clone Using HTML CSS JavaScript

    September 19, 2024

    Password Generator Using HTML CSS JS

    September 17, 2024

    Foody Restaurant Website Using HTML CSS

    September 13, 2024

    Responsive Hoodie Store Website Using HTML CSS

    September 7, 2024

    Personal Portfolio Using HTML CSS

    September 5, 2024
    Add A Comment
    Leave A Reply Cancel Reply

    Follow Me
    • Instagram
    • YouTube
    • Telegram
    Our Post

    Simple Startup Landing Page Using HTML CSS

    September 29, 2024

    Responsive Google Gemini Clone Using HTML CSS JavaScript

    September 19, 2024

    Password Generator Using HTML CSS JS

    September 17, 2024

    Foody Restaurant Website Using HTML CSS

    September 13, 2024

    Subscribe to Updates

    Get the latest creative post from Developer Goutam about Web Development & design.

    Instagram YouTube Telegram
    • Home
    • Privacy Policy
    • Disclaimer
    • About Us
    • Terms & Conditions
    • Contact Me
    © 2025 Developer Goutam. Designed by Goutam Prajapat.

    Type above and press Enter to search. Press Esc to cancel.