Revamp project

Table of contents

• Introduction
• Built with
• Further information
• Authors and acknowledgement

Introduction

I used the current version of the Mos Burger website and updated it while retaining the brand feelings. The current website for Mos Burger Singapore can be improved upon! On the top of the website, there are many social media icons that clutter the brand logo and brand motto. On a smaller screen, the brand logo is hidden! The navigation bar is barely accessible. With some adjustment to HTML and CSS, the website becomes cleaner and responsive to the user.

Built with

• HTML
• CSS
• Bootstrap
• JavaScript
• Visual Studios Code
• GitHub

Further information

Starting point

Mos Burger website:

Outcome for phone:

The navigation bar is hidden when the screen size is small. It can be accessed using the hamburger menu on the top right corner.

Outcome for iPad:

Outcome for laptop:

Requirement

1. Positioning – used on various elements across website
2. Flexbox – used on navigation bar & main content, and footer, most important feature is the wrapping of flex items when screen size is small (navigation bar stacks on top of main content, and footer hides copyright while showing social media icons)
3. Demonstrate the website is responsive in adjusting to the sizing of a phone, ipad and laptop – media query provided for phone (width < 600px), ipad (width 600px-999px) and laptop (width > 1000px)
4. Website ability to load one background image – background image of burger
5. Website ability to load an image directly into HTML – used images uploaded and used images URL
6. Padding and Margin should be used when necessary – used on various elements across website
7. Row and columns should be used when necessary – row used for navigation bar and main content, columns used for navigation bar links

Authors and acknowledgement

• Web Dev Simplified - Responsive Navbar Tutorial