CSS Responsive Design Project - Cafe Project

Create a responsive cafe website that works well on desktop, tablet, and mobile screens.

The page will contain a header, navigation menu, cafe information, menu cards, a fixed contact button, and a footer. The project will use the Responsive Design module concepts such as website layout, box model, media queries, flexible images, positioning, nesting, and grouping.

Requirements

Create a complete cafe webpage.
Use a header, navigation, content sections, and footer.
Make the layout responsive for different screen sizes.
Use flexible widths and images.
Use box-sizing: border-box for predictable sizing.
Use positioning for the contact button.
Use CSS nesting through parent-child selectors and grouping to reduce repeated styles.
Keep everything in one HTML file.

Module Articles Used

Step-by-Step Implementation

1. Create the Website Structure

First, create the main layout with a header, navigation menu, content area, cafe sections, and footer.

HTML

<header>
    <h1>GeeksforGeeks Cafeh1>
    <p>Fresh Coffee. Simple Moments.p>
header>

<nav>
    <a href="#">Homea>
    <a href="#">Menua>
    <a href="#">Abouta>
    <a href="#">Contacta>
nav>

<main>
    <section class="intro">
        <h2>Welcome to Cafeh2>
        <p>
            Enjoy freshly brewed coffee, homemade snacks,
            and a comfortable place to relax.
        p>
    section>

    <section class="menu">
        <h2>Our Menuh2>

        <div class="menu-item">
            <h3>Classic Coffeeh3>
            <p>Freshly brewed coffee with a rich taste.p>
            <strong>₹120strong>
        div>

        <div class="menu-item">
            <h3>Cold Coffeeh3>
            <p>Chilled coffee served with a smooth finish.p>
            <strong>₹160strong>
        div>

        <div class="menu-item">
            <h3>Chocolate Cakeh3>
            <p>Soft chocolate cake made for coffee lovers.p>
            <strong>₹180strong>
        div>
    section>
main>

<footer>
    <p>© 2026 GeeksforGeeks Cafep>
footer>

<a href="#" class="contact-button">Contact Usa>

2. Build the Main Layout and Box Model

Now style the header, navigation, content, menu items, and footer. The layout uses the website-layout and box-model concepts.

HTML



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
--Driver Code Ends-->

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f1eb;
            color: #333;
        }

        header {
            padding: 30px;
            background-color: #5b3924;
            color: white;
            text-align: center;
        }

        header h1,
        header p {
            margin: 8px;
        }

        nav {
            overflow: hidden;
            background-color: #382317;
        }

        nav a {
            float: left;
            display: block;
            padding: 16px 22px;
            color: white;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #70472c;
        }

        main {
            width: 90%;
            max-width: 1000px;
            margin: 30px auto;
        }

        .intro {
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            text-align: center;
        }

        .intro img {
            max-width: 100%;
            height: auto;
            margin-top: 15px;
        }

        .menu {
            margin-top: 25px;
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            overflow: hidden;
        }

        .menu h2 {
            text-align: center;
        }

        .menu-item {
            float: left;
            width: 31.33%;
            margin: 1%;
            padding: 20px;
            background-color: #f8eee4;
            border: 1px solid #d8c0aa;
        }

        .menu-item h3,
        .menu-item p,
        .menu-item strong {
            display: block;
            margin: 10px 0;
        }

        footer {
            margin-top: 30px;
            padding: 20px;
            background-color: #382317;
            color: white;
            text-align: center;
        }

--Driver Code Starts-->
    style>
head>

<body>

<header>
    <h1>GeeksforGeeks Cafeh1>
    <p>Fresh Coffee. Simple Moments.p>
header>

<nav>
    <a href="#">Homea>
    <a href="#">Menua>
    <a href="#">Abouta>
    <a href="#">Contacta>
nav>

<main>
    <section class="intro">
        <h2>Welcome to Cafeh2>
        <p>
            Enjoy freshly brewed coffee, homemade snacks,
            and a comfortable place to relax.
        p>
    section>

    <section class="menu">
        <h2>Our Menuh2>

        <div class="menu-item">
            <h3>Classic Coffeeh3>
            <p>Freshly brewed coffee with a rich taste.p>
            <strong>₹120strong>
        div>

        <div class="menu-item">
            <h3>Cold Coffeeh3>
            <p>Chilled coffee served with a smooth finish.p>
            <strong>₹160strong>
        div>

        <div class="menu-item">
            <h3>Chocolate Cakeh3>
            <p>Soft chocolate cake made for coffee lovers.p>
            <strong>₹180strong>
        div>
    section>
main>

<footer>
    <p>© 2026 GeeksforGeeks Cafep>
footer>

body>
html>

3. Add Positioning and Responsive Design

The contact button can stay visible while scrolling using fixed positioning. Media queries then change the layout for smaller screens.

HTML



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        /* Previous CSS */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f1eb;
            color: #333;
        }

        header {
            padding: 30px;
            background-color: #5b3924;
            color: white;
            text-align: center;
        }

        header h1,
        header p {
            margin: 8px;
        }

        nav {
            overflow: hidden;
            background-color: #382317;
        }

        nav a {
            float: left;
            display: block;
            padding: 16px 22px;
            color: white;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #70472c;
        }

        main {
            width: 90%;
            max-width: 1000px;
            margin: 30px auto;
        }

        .intro {
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            text-align: center;
        }

        .intro img {
            max-width: 100%;
            height: auto;
            margin-top: 15px;
        }

        .menu {
            margin-top: 25px;
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            overflow: hidden;
        }

        .menu h2 {
            text-align: center;
        }

        .menu-item {
            float: left;
            width: 31.33%;
            margin: 1%;
            padding: 20px;
            background-color: #f8eee4;
            border: 1px solid #d8c0aa;
        }

        .menu-item h3,
        .menu-item p,
        .menu-item strong {
            display: block;
            margin: 10px 0;
        }

        footer {
            margin-top: 30px;
            padding: 20px;
            background-color: #382317;
            color: white;
            text-align: center;
        }

--Driver Code Ends-->

        .contact-button {
            position: fixed;
            right: 20px;
            bottom: 20px;
            padding: 12px 20px;
            background-color: #c56b2d;
            color: white;
            text-decoration: none;
            border: 2px solid #a65320;
        }

        @media screen and (max-width: 768px) {
            .menu-item {
                width: 48%;
            }

            nav a {
                padding: 14px;
            }
        }

        @media screen and (max-width: 500px) {
            header {
                padding: 20px;
            }

            main {
                width: 94%;
            }

            nav a {
                float: none;
                text-align: center;
            }

            .menu-item {
                float: none;
                width: 100%;
                margin: 10px 0;
            }

            .contact-button {
                right: 10px;
                bottom: 10px;
            }
        }

--Driver Code Starts-->
    style>
head>

<body>

<header>
    <h1>GeeksforGeeks Cafeh1>
    <p>Fresh Coffee. Simple Moments.p>
header>

<nav>
    <a href="#">Homea>
    <a href="#">Menua>
    <a href="#">Abouta>
    <a href="#">Contacta>
nav>

<main>
    <section class="intro">
        <h2>Welcome to Cafeh2>
        <p>
            Enjoy freshly brewed coffee, homemade snacks,
            and a comfortable place to relax.
        p>
        <img
                src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png">
    section>

    <section class="menu">
        <h2>Our Menuh2>

        <div class="menu-item">
            <h3>Classic Coffeeh3>
            <p>Freshly brewed coffee with a rich taste.p>
            <strong>₹120strong>
        div>

        <div class="menu-item">
            <h3>Cold Coffeeh3>
            <p>Chilled coffee served with a smooth finish.p>
            <strong>₹160strong>
        div>

        <div class="menu-item">
            <h3>Chocolate Cakeh3>
            <p>Soft chocolate cake made for coffee lovers.p>
            <strong>₹180strong>
        div>
    section>
main>

<footer>
    <p>© 2026 GeeksforGeeks Cafep>
footer>

<a href="#" class="contact-button">Contact Usa>

body>
html>

This makes the three menu items appear in columns on larger screens, two columns on medium screens, and one column on smaller screens.

4. Combine Nesting and Grouping

Use parent-child selectors to style related elements and group selectors when several elements need the same styling.

HTML



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        /* Previous CSS remains here */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f1eb;
            color: #333;
        }

        header {
            padding: 30px;
            background-color: #5b3924;
            color: white;
            text-align: center;
        }

        header h1,
        header p {
            margin: 8px;
        }

        nav {
            overflow: hidden;
            background-color: #382317;
        }

        nav a {
            float: left;
            display: block;
            padding: 16px 22px;
            color: white;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #70472c;
        }

        main {
            width: 90%;
            max-width: 1000px;
            margin: 30px auto;
        }

        .intro {
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            text-align: center;
        }

        .intro img {
            max-width: 100%;
            height: auto;
            margin-top: 15px;
        }

        .menu {
            margin-top: 25px;
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            overflow: hidden;
        }

        .menu h2 {
            text-align: center;
        }

        .menu-item {
            float: left;
            width: 31.33%;
            margin: 1%;
            padding: 20px;
            background-color: #f8eee4;
            border: 1px solid #d8c0aa;
        }

        .menu-item h3,
        .menu-item p,
        .menu-item strong {
            display: block;
            margin: 10px 0;
        }

        footer {
            margin-top: 30px;
            padding: 20px;
            background-color: #382317;
            color: white;
            text-align: center;
        }

        .contact-button {
            position: fixed;
            right: 20px;
            bottom: 20px;
            padding: 12px 20px;
            background-color: #c56b2d;
            color: white;
            text-decoration: none;
            border: 2px solid #a65320;
        }

        @media screen and (max-width: 768px) {
            .menu-item {
                width: 48%;
            }

            nav a {
                padding: 14px;
            }
        }

        @media screen and (max-width: 500px) {
            header {
                padding: 20px;
            }

            main {
                width: 94%;
            }

            nav a {
                float: none;
                text-align: center;
            }

            .menu-item {
                float: none;
                width: 100%;
                margin: 10px 0;
            }

            .contact-button {
                right: 10px;
                bottom: 10px;
            }
        }

--Driver Code Ends-->

        .intro h2,
        .menu h2 {
            color: #5b3924;
        }

        .menu-item h3,
        .menu-item strong {
            color: #8b4d25;
        }

        header h1,
        header p {
            text-align: center;
        }

--Driver Code Starts-->
    style>
head>

<body>

<header>
    <h1>GeeksforGeeks Cafeh1>
    <p>Fresh Coffee. Simple Moments.p>
header>

<nav>
    <a href="#">Homea>
    <a href="#">Menua>
    <a href="#">Abouta>
    <a href="#">Contacta>
nav>

<main>
    <section class="intro">
        <h2>Welcome to Cafeh2>
        <p>
            Enjoy freshly brewed coffee, homemade snacks,
            and a comfortable place to relax.
        p>
        <img
                src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png">
       
    section>

    <section class="menu">
        <h2>Our Menuh2>

        <div class="menu-item">
            <h3>Classic Coffeeh3>
            <p>Freshly brewed coffee with a rich taste.p>
            <strong>₹120strong>
        div>

        <div class="menu-item">
            <h3>Cold Coffeeh3>
            <p>Chilled coffee served with a smooth finish.p>
            <strong>₹160strong>
        div>

        <div class="menu-item">
            <h3>Chocolate Cakeh3>
            <p>Soft chocolate cake made for coffee lovers.p>
            <strong>₹180strong>
        div>
    section>
main>

<footer>
    <p>© 2026 GeeksforGeeksp>
footer>

<a href="#" class="contact-button">Contact Usa>

body>
html>

These selectors keep related styles together and avoid repeating the same declarations.

Final Source Code

HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks Cafetitle>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f1eb;
            color: #333;
        }

        header {
            padding: 30px;
            background-color: #5b3924;
            color: white;
            text-align: center;
        }

        header h1,
        header p {
            margin: 8px;
        }

        nav {
            overflow: hidden;
            background-color: #382317;
        }

        nav a {
            float: left;
            display: block;
            padding: 16px 22px;
            color: white;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #70472c;
        }

        main {
            width: 90%;
            max-width: 1000px;
            margin: 30px auto;
        }

        .intro {
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            text-align: center;
        }

        .intro img {
            max-width: 100%;
            height: auto;
            margin-top: 15px;
        }

        .menu {
            margin-top: 25px;
            padding: 25px;
            background-color: white;
            border: 2px solid #ddd0c3;
            overflow: hidden;
        }

        .intro h2,
        .menu h2 {
            color: #5b3924;
        }

        .menu h2 {
            text-align: center;
        }

        .menu-item {
            float: left;
            width: 31.33%;
            margin: 1%;
            padding: 20px;
            background-color: #f8eee4;
            border: 1px solid #d8c0aa;
        }

        .menu-item h3,
        .menu-item p,
        .menu-item strong {
            display: block;
            margin: 10px 0;
        }

        .menu-item h3,
        .menu-item strong {
            color: #8b4d25;
        }

        footer {
            margin-top: 30px;
            padding: 20px;
            background-color: #382317;
            color: white;
            text-align: center;
        }

        .contact-button {
            position: fixed;
            right: 20px;
            bottom: 20px;
            padding: 12px 20px;
            background-color: #c56b2d;
            color: white;
            text-decoration: none;
            border: 2px solid #a65320;
        }

        @media screen and (max-width: 768px) {
            .menu-item {
                width: 48%;
            }

            nav a {
                padding: 14px;
            }
        }

        @media screen and (max-width: 500px) {
            header {
                padding: 20px;
            }

            main {
                width: 94%;
            }

            nav a {
                float: none;
                text-align: center;
            }

            .menu-item {
                float: none;
                width: 100%;
                margin: 10px 0;
            }

            .contact-button {
                right: 10px;
                bottom: 10px;
            }
        }
    style>
head>

<body>

    <header>
        <h1>GeeksforGeeks Cafeh1>
        <p>Fresh Coffee. Simple Moments.p>
    header>

    <nav>
        <a href="#">Homea>
        <a href="#">Menua>
        <a href="#">Abouta>
        <a href="#">Contacta>
    nav>

    <main>

        <section class="intro">
            <h2>Welcome to Cafeh2>

            <p>
                Enjoy freshly brewed coffee, homemade snacks,
                and a comfortable place to relax.
            p>

            <img
                src="https://media.geeksforgeeks.org/wp-content/uploads/20251217100826943000/gfglogo-100.png"
                alt="Cafe interior"
            >
        section>

        <section class="menu">
            <h2>Our Menuh2>

            <div class="menu-item">
                <h3>Classic Coffeeh3>
                <p>Freshly brewed coffee with a rich taste.p>
                <strong>₹120strong>
            div>

            <div class="menu-item">
                <h3>Cold Coffeeh3>
                <p>Chilled coffee served with a smooth finish.p>
                <strong>₹160strong>
            div>

            <div class="menu-item">
                <h3>Chocolate Cakeh3>
                <p>Soft chocolate cake made for coffee lovers.p>
                <strong>₹180strong>
            div>
        section>

    main>

    <footer>
        <p>© 2026 GeeksforGeeks Cafep>
    footer>

    <a href="#" class="contact-button">Contact Usa>

body>
html>

CSS Responsive Design Project - Cafe Project

Requirements

Module Articles Used

Step-by-Step Implementation

1. Create the Website Structure

2. Build the Main Layout and Box Model

3. Add Positioning and Responsive Design

4. Combine Nesting and Grouping

Final Source Code

Output

Explore