diff --git a/README.md b/README.md index fc9f0759b..3d1fce5e1 100644 --- a/README.md +++ b/README.md @@ -69,11 +69,11 @@ You **must** use the Google Chrome developer tools during your HTML/CSS implemen Review the provided design file for the home page. -* [ ] Build the HTML and CSS to create the missing header and footer sections. -* [ ] Link the h1 page title to the [index.html](index.html) page. -* [ ] Link the `Menu` navigation item to the [menu.html](menu.html) page. -* [ ] Create social media buttons on header for Facebook, Twitter, and Instagram with icons from [FontAwesome](https://fontawesome.com/search). *NOTE: * ENSURE that the icon name includes "facebook", "twitter", or "instagram" respectively. -* [ ] Build the rest of the home page layout to match the design. Much of it has already been implemented; you should only need to fix the header, footer, and gallery portions. +* [X] Build the HTML and CSS to create the missing header and footer sections. +* [X] Link the h1 page title to the [index.html](index.html) page. +* [X] Link the `Menu` navigation item to the [menu.html](menu.html) page. +* [X] Create social media buttons on header for Facebook, Twitter, and Instagram with icons from [FontAwesome](https://fontawesome.com/search). *NOTE: * ENSURE that the icon name includes "facebook", "twitter", or "instagram" respectively. +* [X] Build the rest of the home page layout to match the design. Much of it has already been implemented; you should only need to fix the header, footer, and gallery portions. Colors and fonts: Light text: rgb(225, 239, 230); @@ -85,13 +85,13 @@ Dark transparency: background-color: rgb(0, 4, 17, .8); Review the provided design files for the menu page. -* [ ] Copy and paste your home page header and footer into the menu page. -* [ ] Update the header image with the menu page image. -* [ ] Use the article element for the menu and a div inside of it; change the div's class to "menu-container" -* [ ] Create a container for each section (e.g. drinks or entrees) with class "menu-section" -* [ ] Create a container for each item (e.g. soda or burger) with class "menu-item" -* [ ] Add an H4 for every price and title of the menu, two h4 for each menu -* [ ] Add a p element for every description, second line such as (v) will require it's own p +* [X] Copy and paste your home page header and footer into the menu page. +* [X] Update the header image with the menu page image. +* [X] Use the article element for the menu and a div inside of it; change the div's class to "menu-container" +* [X] Create a container for each section (e.g. drinks or entrees) with class "menu-section" +* [X] Create a container for each item (e.g. soda or burger) with class "menu-item" +* [X] Add an H4 for every price and title of the menu, two h4 for each menu +* [X] Add a p element for every description, second line such as (v) will require it's own p Colors and fonts for desktop: Light text: rgb(225, 239, 230); diff --git a/css/index.css b/css/index.css index 21442c782..287f959e4 100644 --- a/css/index.css +++ b/css/index.css @@ -18,7 +18,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; + /* border: 0; */ font-size: 100%; font: inherit; vertical-align: baseline; @@ -49,6 +49,7 @@ table { * { box-sizing: border-box; + /* border: 1px solid white; */ } html { @@ -68,21 +69,25 @@ h1, h2, h3, h4, h5, h6, p, a, i { } h1 { - font-size: 7.5rem; + font-size: 6rem; } h2 { - font-size: 6rem; + font-size: 4rem; } h3 { - font-size: 5rem; + font-size: 3.5rem; } -p, a { +h4 { font-size: 3rem; } +p, a { + font-size: 2rem; +} + /* header section */ header { width: 100%; @@ -93,16 +98,63 @@ header { background-repeat: no-repeat; } +header h1 { + display: flex; + color: rgb(225, 239, 230); + background-color: rgb(0, 4, 17, .8); + justify-content: center; + align-items: center; +} + +header a { + text-decoration: none; + color: rgb(225, 239, 230); +} + +header nav { + display: flex; + flex-flow: column; + flex-wrap: wrap; + font-size: 3rem; + background-color: rgb(0, 4, 17, .8); +} + +nav div { + display: flex; + flex-direction: row; + justify-content: space-around; + text-decoration: none; + color: rgb(225, 239, 230); +} + +.socials { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; +} + +i { + padding: 1%; + height: auto; + width: auto; + font-size: 2rem; +} + + /* spacers */ .spacer { width: 100%; - height: 20vh; + height: 40vh; background-color: rgb(0, 4, 17); } .spacer-sm { width: 100%; height: 10vh; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + padding: 2.5%; + padding-bottom: 2.5%; } /* gallery section */ @@ -111,17 +163,26 @@ header { height: 100vh; text-align: center; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + padding: 1%; + padding-bottom: 2.5%; +} + +img { + padding: 1% 1%; + width: 30%; } /* about us section */ .about { width: 100%; - height: 75vh; + height: 90vh; text-align: center; background-image: url("../img/staff-cooks.jpg"); background-size: cover; background-position: top; background-repeat: no-repeat; + color: rgb(225, 239, 230); } .about-container { @@ -131,6 +192,7 @@ header { justify-content: center; align-items: center; background-color: rgb(0, 4, 17, .8); + padding-top: 5%; } .about h2 { @@ -138,7 +200,7 @@ header { } .about-container .text { - width: 50%; + width: 75%; } /* contact us section */ @@ -149,6 +211,7 @@ header { background-position: center; background-repeat: no-repeat; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); } .contact-container { @@ -157,16 +220,26 @@ header { background-color: rgb(0, 4, 17, .8); } +.contact a { + text-decoration: none; + justify-content: space-around; + color: rgb(225, 239, 230); + font-size: 3rem; +} + .contact h2 { padding-top: 5vh; + font-size: 5rem; } .contact h3 { padding-top: 2.5vh; + font-size: 4rem; } .contact p { padding: .5vh 0; + font-size: 3rem; } .info { @@ -176,16 +249,17 @@ header { } .address { - width: 25%; + width: 30%; } .hours { - width: 25%; + width: 30%; padding-bottom: 2.5vh; } .contacts { - width: 25%; + width: 30%; + justify-content: center; } /* footer section */ @@ -194,11 +268,60 @@ footer { height: 15vh; padding-top: 2.5vh; font-size: 3rem; + background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + text-decoration: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +footer a { + text-decoration: none; + color: rgb(225, 239, 230); +} + +footer div { + display: flex; + flex-direction: column; + margin-right: 2%; +} + +footer nav { + display: flex; + justify-content: space-around; + width: 70%; +} + +footer .copyright { + font-size: 2rem; + width: 100%; + height: auto; + display: flex; + justify-content: flex-end; + padding-left: 60%; } /* mobile media query */ @media (max-width: 428px) { /* header section */ + header { + width: 100%; + display: flex; + } + + header a { + width: 100%; + text-align: center; + justify-content: center; + } + + header nav div { + width: 100%; + text-align: center; + flex-direction: column; + justify-content: center; + } /* gallery section */ diff --git a/css/menu.css b/css/menu.css index 9aba6954d..bde1ac25b 100644 --- a/css/menu.css +++ b/css/menu.css @@ -18,7 +18,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; + /* border: 0; */ font-size: 100%; font: inherit; vertical-align: baseline; @@ -49,11 +49,13 @@ table { * { box-sizing: border-box; + border: 1px solid grey; } html { max-width: 1920px; min-width: 428px; + width: 100%; font-size: 62.5%; } @@ -67,23 +69,23 @@ h1, h2, h3, h4, h5, h6, p, a, i { } h1 { - font-size: 7.5rem; + font-size: 6rem; } h2 { - font-size: 6rem; + font-size: 4rem; } h3 { - font-size: 5rem; + font-size: 3.5rem; } h4 { - font-size: 4rem; + font-size: 3rem; } p, a { - font-size: 3rem; + font-size: 2rem; } /* header section */ @@ -96,6 +98,49 @@ header { background-repeat: no-repeat; } +header h1 { + display: flex; + color: rgb(225, 239, 230); + background-color: rgb(0, 4, 17, .8); + justify-content: center; + align-items: center; +} + +header a { + text-decoration: none; + color: rgb(225, 239, 230); +} + +header nav { + display: flex; + flex-flow: column; + flex-wrap: wrap; + font-size: 3rem; + background-color: rgb(0, 4, 17, .8); +} + +nav div { + display: flex; + flex-direction: row; + justify-content: space-around; + text-decoration: none; + color: rgb(225, 239, 230); +} + +.socials { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; +} + +i { + padding: 1%; + height: auto; + width: auto; + font-size: 2rem; +} + /* spacer */ .spacer { width: 100%; @@ -106,18 +151,56 @@ header { width: 100%; height: 10vh; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + padding: 2.5%; + padding-bottom: 2.5; } /* menu */ .menu { width: 100%; - height: auto; + height: 240vh; background-image: url('../img/staff-bartender.jpg'); - background-color: rgb(0, 4, 17); + background-color: rgb(0, 4, 17, .8); background-size: cover; background-position: center; background-repeat: no-repeat; + display: flex; + color: rgb(225, 239, 230); +} + +.menu-title { + display: flex; + width: 100%; + justify-content: center; +} + +.menu-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + width: 100%; + justify-content: space-around; +} + +.menu-section { + display: flex; + justify-content: flex-start; + flex-direction: column; + flex-wrap: wrap; + height: 50%; + width: 30%; + margin: 4%; +} + +.menu-item { + padding: 5%; +} + +i { + font-style: italic; } /* footer section */ @@ -126,8 +209,41 @@ footer { height: 15vh; padding-top: 2.5vh; font-size: 3rem; + background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + text-decoration: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +footer a { + text-decoration: none; + color: rgb(225, 239, 230); } +footer div { + display: flex; + flex-direction: column; + margin-right: 2%; +} + +footer nav { + display: flex; + justify-content: space-around; + width: 70%; +} + +footer .copyright { + font-size: 2rem; + width: 100%; + height: auto; + display: flex; + justify-content: flex-end; + padding-left: 60%; +} + + /* mobile media query */ @media (max-width: 428px) { /* header section */ diff --git a/index.html b/index.html index 775cccb67..efa7f2bb2 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,9 @@
- +diff --git a/menu.html b/menu.html index 08457325c..c64f7e62a 100644 --- a/menu.html +++ b/menu.html @@ -4,9 +4,9 @@
- +
- + @@ -15,102 +15,141 @@
©2022 BloomTech Restaurant Group, Inc. All Rights Reserved.
+