From d8902ce8ae4065b0a1727751025f90798e1b6163 Mon Sep 17 00:00:00 2001 From: Faduma Mukhtar Date: Tue, 9 Feb 2021 00:35:17 -0600 Subject: [PATCH] first commit --- README.md | 81 ---------------------------------------------------- index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 76 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 159 insertions(+), 81 deletions(-) delete mode 100644 README.md create mode 100644 index.html create mode 100644 style.css diff --git a/README.md b/README.md deleted file mode 100644 index 83c9dab..0000000 --- a/README.md +++ /dev/null @@ -1,81 +0,0 @@ -# Responsive-Design - -In this module task you will continue working on the restaurant website to make it compatible for different browser widths. - - -## Responsive Design - -## Objectives - -- describe the differences in fixed, fluid, adaptive, and responsive layouts -- implement media queries in a project. -- describe how using scalable units for font sizes impacts accessibility and why designing accessible web pages is important - -## Introduction - -It goes without saying that this skill is essential for a professional Web Developer. Imagine trying to visit a store's webpage on your phone and not being able to even read the names of items? That would be totally unacceptable in this day and age! Same goes for the restaurant website. - -In this task you will refactor the restaurant website code to make it responsive. You have the ability to write HTML, CSS, and responsive media queries. You also know how to identify and write responsive units. It's time to put that knowledge into action! - -## Instructions - -### Task 1: Set up Project - -New features of a project should occur in a new branch in the same repository. Follow these steps to set up and work on your project from yesterday: - -- [ ] `cd` into the restaurant folder -- [ ] Create a new branch from ``: - -```bash -git checkout -b . -``` - -- [ ] Implement the project on your newly created `` branch, committing changes regularly. -- [ ] Push commits: git push origin ``. - -### Task 2: Minimum Viable Product - -Use the checklist below to guide your work today. Your final product should work with mobile, tablet and a desktop-width. - -- [ ] Insert a viewport meta tag into the head like this: content="width=device-width, initial-scale=1" -- [ ] Introduce max-width media queries into your project at 800px and 500px -- [ ] Add accessability features to your webpage -- [ ] Design should look like design_responsive.jpg file. -- [ ] The Gallery section and the newsletter form in the design are optional. - - -### Task 3: Stretch Goals - -Once you finish the minimum viable tasks, work on any of the following stretch goals: - -- [ ] Test your website at several breakpoints and refactor code as needed. A few common breakpoints are below: - - [ ] iPhone: 360×640 - - [ ] Laptop: 1366×768 - - [ ] Widescreen: 1920×1080 -- [ ] Test your webpage's accessibility with a screen reader like [this](https://support.google.com/accessibility/answer/7031755?hl=en) -- [ ] Start over with min-width media queries to get a feel for how a mobile first approach would be like. I recommend making a branch of all your content in a new folder named "mobile-first" to keep it separate -- [ ] Test your webpage's accessibility with a screen reader like [this](https://support.google.com/accessibility/answer/7031755?hl=en) - -## FAQs - -**What if I'm not done with my site from last time?** - -*If you're not totally happy with your site, that's fine. Try to work with what you have. If your task from yesterday is in a state that you **absolutely** cannot work on it, reach out to your GL for starter code and attend support hours for more HTML/CSS help.* - -**My site works on mobile - does that count as responsive?** - -*A mobile website is **not** the same thing as a responsive website! A responsive webpage works at any browser width, not just mobile. Keep on coding!* - -## Resources - -📚[Best Practices for Responsive Design](https://www.browserstack.com/guide/responsive-design-breakpoints) - -🤝[W3 Schools - Responsive Design](https://www.w3schools.com/html/html_responsive.asp) - -👀 [If you need images for the gallery section, go here](https://www.pexels.com/search/food/) - -## Submission format - -Follow these steps for completing your project. - -- [ ] Submit a Pull-Request to merge Branch into main (student's Repo). **Please don't merge your own pull request** diff --git a/index.html b/index.html new file mode 100644 index 0000000..e7227b7 --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + + + +
+
+ +
+ + + + + +
+ + +
Taste the difference +
Local. Fresh & Delicious
+
+ + +
+ + +

+ABOUT FATUMA RESTAURANT + +

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+ + +
+

Pasta with Banana

+

scrambled it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.

+ +

+ Rice with Banana

+ +

scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

+
+

Catering

+

Nullam quis odio sit amet arcu sagittis ullamcorper vel vel ex. Duis consectetur sit amet metus quis congue. Nullam vitae viverra quam, vel volutpat nisi. Phasellus id mi sit amet nibh rutrum luctus.

+

Contact

+ + info@fatumarestaurant.com + 619-555-0144 + 4209 Bobcat Drive + San Diego, CA, 48219
+ +
+ + + + + + + + +
+ +
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..371160c --- /dev/null +++ b/style.css @@ -0,0 +1,76 @@ +.company-name {background-color: #454f6f; + text-align: center; + color: white; + width: 100%; + padding: 10px 10px; + font-size: 20px; + + } + + .navigation {display: flex; + flex-direction: row; + width: 100%; + justify-content: space-around; + color: white; + background-color: #454f6f; + width: 100%; + border-top: 1px solid black; + text-align: center; + margin: 0px 0px 10px 0px; + font-size: 20px;} + + .card {background-color: #e6834c; + width: 100%; + height: 300px; + font-size: 80px; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + padding: 80px 80px 10px 80px; + margin-top: 10px; + color: white; + } + + .card2 {background-color: lightgray; + text-align:center; + width: 800px; + align-content: center; + font-family: Arial, Helvetica, sans-serif; + padding: 25px; + margin-left: 200px; + margin-top: 50px; + font-size: 20px; + } + + .contents { + background-color: lightgray; + + margin: 20px 20px; + padding: 20px; + } + + .container {display: flex; + flex-direction: row; + align-items: center; + + + footer nav {display: flex; + justify-content: space-around; } + + @media (min-width: 700px) { + div nav { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; + border-top: 2px solid black; + border-bottom: 2px solid black;} + + .container { + display: flex; + flex-direction: column; + } + + + + } + } \ No newline at end of file