Narsi's blog
Creating a Responsive Restaurant Website Using HTML, CSS, and JavaScript

Creating a Responsive Restaurant Website Using HTML, CSS, and JavaScript

Narsi Bhati's photo
Narsi Bhati
·

10 min read

Table of contents

Introduction

In today's digital age, ensuring your website looks great and functions well on all devices is crucial. Responsive design helps by adjusting the layout and content based on the device's screen size. One key tool for achieving responsiveness is CSS media queries. In this blog post, we'll explore how media queries are used in different sections of a restaurant website to keep it user-friendly on smaller screens.

https://youtu.be/l1xMbfuBpnk

GitHub Repository

Explore the complete code for this restaurant website project on GitHub.

Header Section

The header is often the first impression visitors have of your website. Here’s how we structure and style it for responsiveness:

HTML:

<header>
    <div>
        <h1>Restaurant Name</h1>
        <p>Your tagline or description goes here.</p>
    </div>
</header>

CSS with Media Queries:

/* Header styles */
header {
    font-size: 24px;
    color: #fff;
    background-color: #f21616;
    padding: 5px;
    border: 3px solid;
    border-radius: 10px;
}
header div {
    padding: 5px;
    border: 5px solid #fff;
    border-radius: 10px;
}

/* Media Query for Header */
@media (max-width: 768px) {
    header {
        font-size: 18px; /* Adjusted font size for smaller screens */
    }
    header div {
        padding: 10px; /* Increased padding for smaller screens */
    }
}

Explanation:

  • Header Design: The header includes a restaurant name and tagline enclosed in a styled container.

  • Media Query Usage: The @media (max-width: 768px) query adjusts font sizes and padding to ensure the header remains visually appealing and readable on smaller screens. This improves the user experience by maintaining clarity and aesthetic consistency across devices.

Welcome Section

The welcome section sets the tone for the website and should be welcoming and informative:

HTML:

<section class="welcome-section">
    <div class="welcome-content">
        <h2 class="welcome-title">Welcome to Our Restaurant</h2>
        <p>A brief introduction or welcome message about your restaurant.</p>
    </div>
    <div class="welcome-image">
        <img src="welcome-image.jpg" alt="Welcome Image">
    </div>
</section>

CSS with Media Queries:

/* Welcome section specific styles */
.welcome-section {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 40px;
}
.welcome-title {
    font-size: 45px;
    margin-top: 0;
}
.welcome-content {
    flex: 1;
    padding: 15px;
}
.welcome-content p {
    font-size: 25px;
    line-height: 1.6;
    color: #666;
}
.welcome-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border: 5px solid gold;
    border-radius: 70px 0;
}

/* Media Query for Welcome Section */
@media (max-width: 768px) {
    .welcome-section {
        flex-direction: column; /* Stack content vertically on smaller screens */
        padding: 20px; /* Adjusted padding for smaller screens */
        align-items: center; /* Center align items */
    }
    .welcome-title {
        font-size: 35px; /* Adjusted font size for smaller screens */
    }
    .welcome-content p {
        font-size: 17px; /* Adjusted font size for smaller screens */
    }
    .welcome-image img {
        max-width: 100%; /* Ensure image stays within container width */
        border-radius: 10px; /* Adjusted border radius for smaller screens */
    }
}

Explanation:

  • Section Layout: The welcome section combines textual content with an illustrative image to engage visitors.

  • Responsive Design: Through media queries, the section adjusts its layout (flex-direction: column), font sizes (welcome-title and welcome-content p), and image size (welcome-image img) to maintain visual appeal and accessibility across various screen sizes. This ensures that both content and imagery are presented optimally, enhancing user engagement and satisfaction.

Call-to-Action Buttons Section

Effective call-to-action buttons encourage user interaction and facilitate navigation:HTML:

<div class="cta-buttons">
    <a href="#" class="cta-button">
        <svg>...</svg> Reserve a Table
    </a>
    <a href="#" class="cta-button">
        <svg>...</svg> View Menu
    </a>
    <!-- Add more buttons as needed -->
</div>

CSS with Media Queries:

/* Styles for call-to-action buttons container */
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    background-color: #f21616;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}
.cta-button svg {
    margin-right: 10px;
}
.cta-button:hover {
    background-color: #c11313;
}

/* Media Query for Call-to-Action Buttons */
@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column; /* Stack buttons vertically on smaller screens */
        align-items: center; /* Center align items */
        gap: 10px; /* Reduced gap between buttons */
    }
    .cta-button {
        width: 80%; /* Adjusted button width for smaller screens */
        margin: 5px; /* Adjusted margin for smaller screens */
    }
}

Explanation:

  • Button Design: Call-to-action buttons are styled to stand out and encourage user engagement.

  • Responsive Layout: Media queries (@media (max-width: 768px)) modify the button container's layout (flex-direction: column), ensuring buttons stack vertically on smaller screens for improved accessibility and ease of navigation. This responsive approach enhances usability and promotes user interaction, regardless of the device being used.

Menu Section

The menu section is designed to effectively organize and present restaurant offerings:

HTML Structure

htmlCopy code<section class="menu-section">
    <h2 class="menu-title">Our Menu</h2>
    <div class="menu-content">
        <div class="left-panel">
            <!-- Left panel content -->
        </div>
        <div class="right-panel">
            <!-- Right panel content -->
        </div>
    </div>
</section>

CSS with Media Queries

cssCopy code/* Menu section styles */
.menu-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: #f5f5f5;
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px 20px;
    border-radius: 8px;
}
.menu-title {
    font-size: 45px;
    margin-top: 0;
    margin-bottom: 20px;
}
.left-panel,
.right-panel {
    padding: 20px;
    margin: 20px;
    display: flex;
    border-radius: 8px;
}
.menu-content {
    display: flex;
    width: 80%;
}
.left-panel {
    width: 40%;
    flex-direction: column;
    justify-content: center;
    background-color: #f8f8f8;
}
.right-panel {
    width: 60%;
    flex-direction: column;
    justify-content: center;
}

/* Media Query for Menu Section */
@media (max-width: 768px) {
    .menu-section {
        padding: 20px; /* Adjusted padding for smaller screens */
    }
    .left-panel,
    .right-panel {
        width: 100%; /* Full width for panels on smaller screens */
        margin: 0;
        padding: 25px; /* Adjusted padding for smaller screens */
    }
}

Explanation

Menu Layout: The menu-section is structured with a title (menu-title) and two panels (left-panel and right-panel) to display menu items and details.

Responsive Adjustments: Utilizing media queries, adjustments ensure the section maintains clarity and accessibility on smaller screens by reorganizing panels and adjusting padding.

JavaScript Function: changePhoto

The changePhoto function dynamically updates the content of a menu item when clicked. Here’s how it works:

javascriptCopy codefunction changePhoto(newSrc, newName, newDescription, newPrice) {
    // Get the elements that will be updated
    const bigPhoto = document.getElementById('big-photo');
    const dishName = document.getElementById('dish-name');
    const dishDescription = document.getElementById('dish-description');
    const dishPrice = js('dish-price');

    // Start fading out the big photo by setting its opacity to 0
    bigPhoto.style.opacity = 0;

    // Use setTimeout to wait for 300 milliseconds before changing the content
    setTimeout(() => {
        // Change the source of the big photo
        bigPhoto.src = newSrc;
        // Update the text content for the dish name, description, and price
        dishName.textContent = newName;
        dishDescription.textContent = newDescription;
        dishPrice.textContent = newPrice;

        // Fade the big photo back in by setting its opacity to 1
        bigPhoto.style.opacity = 1;
    }, 300); // 300 milliseconds delay
}

Explanation of changePhoto Function

  • Purpose: This function is typically used in conjunction with clickable menu items (not shown here) to dynamically update a larger photo (big-photo) and display details (dish-name, dish-description, dish-price) of the selected menu item.

  • How It Works:

    1. Element Retrieval: Retrieves DOM elements (big-photo, dish-name, dish-description, dish-price) where content will be updated.

    2. Opacity Transition: Initially sets big-photo opacity to 0 to fade it out smoothly.

    3. Content Update: Updates big-photo source and text content (newSrc, newName, newDescription, newPrice) after a 300ms delay using setTimeout.

    4. Opacity Restoration: Fades big-photo back in by setting its opacity to 1.Order Section

The order section facilitates user transactions and engagement:

HTML:

<section class="order-section">
    <div class="order-content">
        <h2 class="order-title">Place Your Order</h2>
        <p>Details about how to place an order.</p>
        <a href="#" class="order-button">Order Now</a>
    </div>
    <div class="delivery-image">
        <img src="delivery-image.jpg" alt="Delivery Image">
    </div>
</section>

CSS with Media Queries:

/* Order section styles */
.order-section {


 display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    background-color: #fff;
}
.order-title {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 20px;
}
.order-content {
    flex: 1;
    padding: 20px;
}
.order-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
}
.order-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 20px;
    color: #fff;
    background-color: #f21616;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}
.order-button:hover {
    background-color: #c11313;
}
.delivery-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border: 5px solid gold;
    border-radius: 50%;
}

/* Media Query for Order Section */
@media (max-width: 768px) {
    .order-section {
        flex-direction: column; /* Stack content vertically on smaller screens */
        padding: 20px; /* Adjusted padding for smaller screens */
    }
    .order-content {
        text-align: center; /* Center align content */
    }
    .order-title {
        font-size: 30px; /* Adjusted font size for smaller screens */
    }
    .order-button {
        width: 100%; /* Full width for button on smaller screens */
        margin-top: 20px; /* Adjusted margin for smaller screens */
    }
    .delivery-image img {
        max-width: 100%; /* Ensure image stays within container width */
        border-radius: 10px; /* Adjusted border radius for smaller screens */
    }
}

Explanation:

  • Order Process: The order section provides users with information and prompts to facilitate ordering.

  • Media Query Utilization: By employing media queries (@media (max-width: 768px)), the section adapts its layout (flex-direction: column), font sizes (order-title and order-content p), button width (order-button), and image size (delivery-image img) to enhance accessibility and usability on smaller screens. These responsive adjustments optimize the user experience, making it easier for users to navigate and engage with the ordering process from various devices.

Location Section

The location section assists visitors in finding and contacting the restaurant:

HTML:

<section class="location-section">
    <h2 class="location-title">Our Location</h2>
    <div class="location-content">
        <div class="map-container">
            <!-- Google Maps iframe embedded here -->
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d49702.08940192447!2d-0.1409439983905417!3d51.50152699999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487605081ce624a5%3A0x8f5d0c2e6e2d1771!2sLondon%2C%20UK!5e0!3m2!1sen!2suk!4v1629802899925!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
        <div class="location-details">
            <p>Address: 123 Restaurant St, City, Country</p>
            <p>Phone: +123 456 789</p>
            <p>Email: info@example.com</p>
        </div>
    </div>
</section>

CSS with Media Queries:

/* Location section styles */
.location-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #f9f9f9;
}
.location-title {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 20px;
}
.location-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.map-container {
    width: 60%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}
.location-details {
    width: 30%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

/* Media Query for Location Section */
@media (max-width: 768px) {
    .location-section {
        padding: 20px; /* Adjusted padding for smaller screens */
    }
    .location-content {
        flex-direction: column; /* Stack content vertically on smaller screens */
        align-items: center; /* Center align items */
    }
    .map-container {
        width: 100%; /* Full width for map container on smaller screens */
        height: 300px; /* Adjusted height for smaller screens */
        margin-bottom: 20px; /* Adjusted margin for smaller screens */
    }
    .location-details {
        width: 100%; /* Full width for details container on smaller screens */
    }
}

Explanation:

  • Location Information: The location section includes a map, address, phone number, and email for easy access to restaurant information.

  • Responsive Design Enhancements: By incorporating media queries (@media (max-width: 768px)), the section adjusts its layout (flex-direction: column), map container width (map-container), and details container width (location-details) to optimize display and usability on smaller screens. These responsive adaptations ensure that visitors can easily locate and contact the restaurant from various devices, enhancing user convenience and satisfaction.

The footer section provides additional information and navigation options:

HTML:

<footer>
    <div>
        <p>&copy; 2024 Restaurant Name. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Order</a></li>
                <li><a href="#">Location</a></li>
            </ul>
        </nav>
    </div>
</footer>

CSS with Media Queries:

/* Footer styles */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}
footer div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer nav ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
}
footer nav ul li {
    font-size: 18px;
}
footer nav ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
footer nav ul li a:hover {
    color: #f21616;
}

/* Media Query for Footer Section */
@media (max-width: 768px) {
    footer div {
        flex-direction: column; /* Stack content vertically on smaller screens */
    }
    footer nav ul {
        flex-direction: column; /* Stack navigation links vertically on smaller screens */
        gap: 10px; /* Adjusted gap between links for smaller screens */
    }
    footer nav ul li {
        font-size: 16px; /* Adjusted font size for smaller screens */
    }
}

Explanation:

  • Footer Design: The footer includes copyright information, navigation links, and social media icons for easy access.

  • Responsive Layout: Using media queries (@media (max-width: 768px)), the footer adjusts its layout (flex-direction: column) and navigation links (footer nav ul) to ensure optimal display and functionality on smaller screens. These responsive adjustments enhance user navigation and accessibility, contributing to a seamless browsing experience across devices.

Conclusion

In conclusion, using media queries on your restaurant website improves responsiveness and ensures a consistent user experience across different devices. By effectively using CSS media queries, you can adjust the layout, content, and design elements to fit various screen sizes without losing visual appeal or usability. Implementing these responsive design techniques not only enhances user satisfaction but also boosts your website's accessibility and engagement.

HTML5CSSResponsive Web DesignresturantWeb DevelopmentJavaScript