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 Landing Page Using HTML and CSS
    Coffee landing page

    Coffee Landing Page Using HTML and CSS

    Developer GoutamBy Developer GoutamJuly 26, 2024No Comments7 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp Email
    Coffee Landing Page Using HTML and CSS

    Coffee landing Page using HTML and CSS with free source code

    Introduction

    Hello coders, our today’s project is about a coffee shop landing page. We’ve developed this simple landing page using HTML and CSS. We’ve used HTML to create structure of the webpage and later on CSS is used to style our webpage. Images are used in this project as well. 

    A coffee is that we generally use in our day to day life. Creating this type of landing page isn’t a challenging task, all you need is knowledge of html and css. If you want to add some functionality then you can explore JavaScript as well. 

    This project is a one page simple landing page. By creating this you can develop your coding skills and revise all your previous knowledge. You can add your own idea’s in this project to make it even more better. We’ve used HTML and CSS to make this project. 

    Let’s see and and understand our code.

    index.html

    Any coffee shop business requires an online presence to interface with the clientele satisfactorily. This landing page is more or less like an eye-catcher that sets the tone for a proper customer experience. Let us now see how a structure for a very rudimentary but powerful coffee shop landing page can be represented in HTML and CSS.

    The HTML code gives us the framework of our landing page with an explicit semantic structure. At the top, we declare that it shall be an HTML5 document, associated with the declaration: <!DOCTYPE html>. On top, we identify the language to be English with <html lang=”en”> and the character set is to be set at UTF-8 for maximum compatibility and proper display of text.

    In the head section, adding meta tags like <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> and <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> will enhance the compatibility and responsiveness so that our page will show up perfectly on all devices. Linking to an external CSS file by <link rel=”stylesheet” href=”styles.css”> enables one to keep all the styling completely separate from our HTML. It allows our code to remain clean and easier for management.

    In the <body> section, we have all the content that will be displayed to the user. For that, we have a main wrapper, <div class=”container”>, centering our content. The <nav> element includes the logo with a link, <a href=”#” id=”logo”>Coffe</a>, and a navigation menu with different links to sections in the site, which improves navigation for the user.

    Main content goes inside a <div class=”content”>. Inside of that, the text is further enclosed within a <div class=”text”>, which has a big <h1> heading and a single descriptive paragraph. The text is an introduction to the specialty offerings of the coffee shop which will engage and incite the visitor to find out more. Beside that, in a <div class=”image”> there is an <img> element with an appealing image of coffee and pastries to be attractive.

    This is, in effect, an overview of the HTML that can form the basis of a visually appealing and user-friendly coffee shop landing page. It includes a compelling online presence when joined with thoughtful CSS styling to draw customers in and reflect the style of a coffee shop as a whole.

    				
    					<!DOCTYPE html>
    <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>Document</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/07/post3-768x366.png 768w, https://developergoutam.com/wp-content/uploads/2024/07/post3-300x143.png 300w, https://developergoutam.com/wp-content/uploads/2024/07/post3-1024x488.png 1024w, https://developergoutam.com/wp-content/uploads/2024/07/post3-1536x732.png 1536w, https://developergoutam.com/wp-content/uploads/2024/07/post3-150x71.png 150w, https://developergoutam.com/wp-content/uploads/2024/07/post3-450x214.png 450w, https://developergoutam.com/wp-content/uploads/2024/07/post3-1200x572.png 1200w, https://developergoutam.com/wp-content/uploads/2024/07/post3-600x286.png 600w, https://developergoutam.com/wp-content/uploads/2024/07/post3.png 1853w" 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="styles.css">
    </head>
    <body>
        <div class="container">
            <nav>
                <a href="#" id="logo">Coffe</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <div class="content">
                <div class="text">
                    <h1>Specialty Coffee <br> and Delicious Treats</h1>
                    <p>Indulge in the rich aroma of freshly brewed coffee and savor the exquisite flavors of our handcrafted pastries. Our cozy coffee shop is the perfect spot to relax, recharge, and enjoy your favorite brew.</p>
                </div>
                <div class="image">
                    <img decoding="async" src="img.png" alt="coffee and pastries">
                </div>
            </div>
        </div>
    
    </body>
    </html>
    				
    			

    styles.css

    Font and Global Styles
    The first responsibility towards creating a stylish web page is to introduce an appropriate font and setting for global styles. Importing the “Poppins” font from Google Fonts gives us a clean and modern look that corresponds perfectly with the atmosphere in a coffee shop. Global styles, margin, padding, or box-sizing, are set in a manner that keeps everything consistent and provides a clean slate for all elements.

    Background and Layout
    The body of the webpage will be gradient-filled, flowing into deep coffee hues, which gives off a very warm feeling. Flexbox layout assures a centering effect on content and equal spacing. In addition to this, a circular background effect gives beauty and depth to the design.

    Container and Navigation
    The outer container has styles that center the content, space it, and provide a semitransparent background that lets the gradient show through. It also has rounded corners and a blur effect with a very subtle shadow. The navigation bar is styled using Flexbox, which aligns items horizontally and spaces out the elements.

    Logo and Navigation Links
    The logo is styled with uppercase text, white color, and a transition effect on hover, thus making the logo an interactive visual. Navigation links are styled to remove default styles and add a hover effect that changes color and underlines the link using the defined theme color, providing visual continuity.

    Content Area
    The content area uses flexbox for the positioning of text and pictures side by side. An important message and image come straight into view for the visitor. On the text side, there is a large, bold heading and a paragraph of text setting out what the offer is of this coffee shop, and on the image side, a relevant visual, increasing the overall appeal.

    Responsive Design
    The media query permits adaptation of the styles concerning screen size, guaranteeing excellent display of the webpage on all devices. The layout changes to a vertical orientation on tablets and small screens, and adjustments are made to font sizes and spacing to retain readability and usability for effective functioning. This adjustment shall ensure fluent experience for all the users using any of the devices.

    Conclusion:
    Carefully selecting fonts, declaring global styles, and working out advanced CSS techniques for flexbox and media queries, we will create a trendy and responsive landing page for a coffee shop. It gives a sense of warmth and cosiness, making users want to know more and come to the coffee shop. Apply these techniques, and you’ll soon have your captivating online presence that showcases the soul of your coffee shop and attracts prospects.

    				
    					@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    
    
    :root{
        --coffe : #C8835A;
    }
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
    }
    
    body{
        background: linear-gradient(to left,#2b1301
        , #491f04
        );
        display: flex;
        height: 100vh;
    }
    
    body::after{
        content: '';
        position: absolute;
        inset: 0;
        background: var(--coffe);
        clip-path: circle(30% at right);
    
        z-index: -1;
    }
    
    .container{
        width: 80%;
        min-height: 80%;
        margin: auto;
        padding: 1rem 0;
        color: white;
    
        background: rgba(255, 255, 255, 0.046);
        border-radius: 1rem;
        backdrop-filter: blur(10px);
        box-shadow: 3px 3px 15px rgba(0, 0, 0, .5);
    
    }
    
    nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80%;
        margin: auto;
        padding: 1rem 0;
    }
    
    #logo{
        font-size: 40px;
        text-transform: uppercase;
        text-decoration: none;
        color: white;
        font-weight: 200;
    
        letter-spacing: 5px;
        transition: all .2s ease-in;
    }
    
    #logo:hover{
        letter-spacing: 12px;
        color: var(--coffe);
    }
    
    nav ul{
        list-style: none;
        display: flex;
        justify-content: end;
        flex: 1;
        gap: 7rem;
    }
    
    nav ul li a{
        all: unset;
        font-weight: 200;
        font-size: 20px;
        letter-spacing: 1px;
    
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.543);
        cursor: pointer;
        
        transition:  .3s ease-in;
        position: relative;
    }
    
    nav ul li a:hover{
        color: var(--coffe);
    }
    
    nav ul li a::after{
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0%;
        width: 0%;
        height: 2px;
    
        background: var(--coffe);
        border-radius: 1rem;
    
        transition: .2s ease-in;
    }
    
    nav ul li a:hover::after{
        width: 100%;
    }
    
    .content{
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    
        width: 80%;
        margin: auto;
    
        align-items: center;
        min-height: 60vh;
    }
    
    .content .text{
        width: 50%;
    }
    
    .content .text h1{
        font-size: 3vw;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: white;
        line-height: 110%;
        margin-bottom: 1.5rem;
    }
    
    .content .text p{
        font-weight: 300;
        font-size: 1vw;
    }
    
    .content img{
        width: 250px;
    }
    
    
    @media only screen and (max-width: 850px){ 
        nav, .content, .text{
            width: 90% !important;
        }
        nav #logo{
            font-size: 23px;
        }
        nav ul{
            gap: 2rem;
        } 
        .content{
            flex-direction: column-reverse;
            justify-content: center;
            text-align: center;
            width: 100%;
            margin-bottom: 1rem;
        }
        .content h1{
            font-size: 40px !important;
        }
        .content p{
            font-size: 16px !important;
            text-align: center;
        }
    
        .content img{
            width: 150px;
        }
    }
    
    @media only screen and (max-width: 550px){  
        nav ul{
            gap: 1.5rem;
        }
        nav ul a{
            font-size: 14px !important;
        }
        .content h1{
            font-size: 30px !important;
        }
        .content p{
            font-size: 14px !important;
        }
        .content img{
            width: 100px;
        }
     
    }
    				
    			

    Live Preview

    Coffee landing page using html css html css landing page
    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

    Coffee Shop Website Using HTML CSS

    September 10, 2024

    Responsive Hoodie Store Website Using HTML CSS

    September 7, 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.