Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arpit-shrivastva/restaurant-webpage

Introducing a captivating Restaurant Webpage crafted with HTML and CSS, featuring enticing design elements and seamless navigation. Delight in an immersive culinary journey with our visually appealing interface, thoughtfully designed to showcase our menu, ambiance, and dining experience.
https://github.com/arpit-shrivastva/restaurant-webpage

css html

Last synced: about 24 hours ago
JSON representation

Introducing a captivating Restaurant Webpage crafted with HTML and CSS, featuring enticing design elements and seamless navigation. Delight in an immersive culinary journey with our visually appealing interface, thoughtfully designed to showcase our menu, ambiance, and dining experience.

Awesome Lists containing this project

README 

        
# Build a Web Page for Mexican Cafe



Introducing a captivating Restaurant Webpage crafted with HTML and CSS, featuring enticing design elements and seamless navigation. Delight in an immersive culinary journey with our visually appealing interface, thoughtfully designed to showcase our menu, ambiance, and dining experience. Indulge your senses as you explore our offerings, from delectable dishes to exquisite beverages, all presented in an inviting online environment. Experience the essence of our restaurant right at your fingertips, where every detail reflects our commitment to exceptional dining.



## Context



Mexican Cafe is a one-stop destination for all people who are in love with authentic Mexican culinary and crave for it. This fine dining restaurant has a premium menu which is in line with the larger than life ambiance. The exotic collection of signature drinks paired up with a spectacular outdoor seating instantly elevates your mood.



The signature dish - braised Pork Taco's is the crowd's favorite and really flavourful cooked in true Mexican cooking style. This place is really amazing and one of the best Mexican restaurants and should definitely be on your must-visit list! 



As a Frontend Developer, you would have to create a Web Page to showcase all the restaurant services by laying out information in a way that is quickly usable and readable to help Mexican Cafe reach a wider audience.



## Problem Statement



Create a web page that provides customers with information about the restaurant's menu, specialties, food reviews, etc.. The web page should resemble the below image.



![](./Restaurant.png)



### Tasks



- The solution for this challenge can be developed in 3 steps:​

    - Step 1: Create a Header​

    - Step 2: Create the Main section​

    - Step 3: Create a Footer​

- Edit the `index.html` file to add various HTML elements.​

- Define styles inside `style.css` file located in the `css` folder.

- All the required images used to build the web page are available inside the `assets` folder.



### CSS Recommendations



- Step 1: Create Header​

  - The header items must be created using the semantic `header` tag and all the menu items must float left with the suggested background color.

  - All the menu items in the header should be hyperlinks.​



- Step 2: Create Main Section​​

  - Wrap the image and text by using CSS floats.​

  - Embed text over the image at the top left corner by using the CSS position property​



- Step 3: Create Footer​

  - The footer section should be created using the semantic `footer` tag.​

  - Use CSS floats in the footer to wrap the text and the images.

- CSS spacing properties (margin and padding), and color properties (background-color, color) should be used to style the HTML elements to generate the required output. 



### Details



- Color codes used frequently in this web page are:

    - #ecd7d2 (body background color)

    - #451207 (menu item background color)

    - yellow (menu item font color)

- All the required images to build the web page are available inside the `assets` folder.

- Text used in the web page are as follows:

```

The Mexican Cafe is a one-stop destination for all people who are in love with authentic Mexican culinary and crave for it. This fine dining restaurant has a premium menu which is in line with the larger than life ambiance. The exotic collection of signature drinks paired up with a spectacular outdoor seating instantly elevates your mood.



The signature dish - braised Pork Taco's is the crowd's favorite and really flavourful cooked in true Mexican cooking style.



Enjoy the fantastic dance floor. Hire a DJ to set the mood for a party.



Enjoy the Music with food and frolic



Sing out loud to the music with delight



Hit the dance floor and groove to the latest hits



Enjoy an evening with the DJs

```