From 97009870578cc87595c65078676f2c31c8426cd4 Mon Sep 17 00:00:00 2001 From: Christopher-Martinez-422 <107010274+Christopher-Martinez-422@users.noreply.github.com> Date: Wed, 18 Jan 2023 10:29:24 -0800 Subject: [PATCH 1/2] first commit --- css/index.css | 129 ++++++++++++++++++++++++-- css/menu.css | 116 +++++++++++++++++++++++- index.html | 63 +++++++------ menu.html | 246 +++++++++++++++++++++++++++++--------------------- 4 files changed, 412 insertions(+), 142 deletions(-) diff --git a/css/index.css b/css/index.css index 21442c782..b2de0ebf9 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,11 +69,11 @@ 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 { @@ -86,23 +87,69 @@ p, a { /* header section */ header { width: 100%; - height: 100vh; + height: 70vh; background-image: url('../img/home-header.jpg'); background-size: cover; background-position: center; 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: 2.5%; + height: auto; + width: auto; +} + + /* 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 +158,21 @@ header { height: 100vh; text-align: center; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + padding: 2.5%; + padding-bottom: 2.5%; } /* 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 +182,7 @@ header { justify-content: center; align-items: center; background-color: rgb(0, 4, 17, .8); + padding-top: 5%; } .about h2 { @@ -138,7 +190,7 @@ header { } .about-container .text { - width: 50%; + width: 75%; } /* contact us section */ @@ -149,6 +201,7 @@ header { background-position: center; background-repeat: no-repeat; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); } .contact-container { @@ -157,6 +210,12 @@ header { background-color: rgb(0, 4, 17, .8); } +.contact a { + text-decoration: none; + justify-content: space-around; + color: rgb(225, 239, 230); +} + .contact h2 { padding-top: 5vh; } @@ -176,16 +235,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 +254,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..a7589aece 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%; } @@ -89,13 +91,55 @@ p, a { /* header section */ header { width: 100%; - height: 100vh; + height: 70vh; background-image: url('../img/menu-header.jpg'); background-size: cover; background-position: center; 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: 2.5%; + height: auto; + width: auto; +} + /* spacer */ .spacer { width: 100%; @@ -106,18 +150,49 @@ 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-size: cover; background-position: center; background-repeat: no-repeat; + display: flex; + color: rgb(225, 239, 230); +} + +.menu_container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + align-self:flex-start; + height: 100%; +} + +.menu_section { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 40%; +} + +.menu-item h4 { + padding: 5%; + display: inline-block; + /* float: left; */ + flex-direction: row; +} + +i { + font-style: italic; } /* footer section */ @@ -126,8 +201,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 @@ - + Sprint Challenge - Home - + @@ -15,15 +15,21 @@
-
- BLOOMTECH BAR AND GRILL - +

BLOOMTECH BAR AND GRILL

 - Menu - Reservations - Special Offers - Contact -
+
@@ -31,23 +37,23 @@

OUR FOOD

- img/food-avocadotoast.jpg + food-avocadotoast - img/food-burger.jpg + food-burger - img/food-poutine.jpg + food-poutine - img/food-ribs.jpg + food-ribs - img/food-sandwich.jpg + food-sandwich - img/food-sausage.jpg + food-sausage - img/food-steak.jpg + food-steak - img/food-tacos.jpg + food-tacos - img/food-wings.jpg + food-wings
@@ -125,15 +131,20 @@

Contacts

diff --git a/menu.html b/menu.html index 08457325c..f41cbcf76 100644 --- a/menu.html +++ b/menu.html @@ -4,9 +4,9 @@ - + Sprint Challenge - Menu - + @@ -15,102 +15,139 @@
- BLOOMTECH BAR AND GRILL - +

BLOOMTECH BAR AND GRILL

 - Menu - Reservations - Special Offers - Contact -
+ +
- Food & Drink - - Drinks - Soda - $2 - Coke products - - Coffee - $2 - Cream and sugar available upon request - - Beer - $5 - Delicious and refreshing - - Wine - $5 - Light and fruity - - Cocktail - $10 - Ask about our specials - - Appetizers - Fried Pickles - $6 - Golden and crispy with tang! - (V) - - Buffalo Wings - $10 - 5 wings per order; mild, medium, or hot sauce and served with bleu cheese/ranch and carrot sticks - (GF) - - Poutine - $5 - Homemade fries topped with everything but the kitchen sink - - Soup and Salad - House Salad - $8 - Spinach and arugala with all the good veggies; add chicken for $6 - (GF, V) - - French Onion Soup - $4 - Served with a thick topping of cheese and delicious bread - - Cheddar Broccoli Soup - $5 - Creamy and filling - (GF) - - Entrees - Ribeye Steak - $32 - Served with mashed potatoes and roasted asparagus - - Big Boy Burger - $14 - Beef or black bean burger on homemade bun served with fries - Black Bean Burger: (V) - - Pork Shortrib - $18 - Melt off the bone finger food - (GF) - - Desserts - Flourless Chocolate Cake - $7 - Gooey and chocolatey heaven - (GF) - - Cookies and Ice Cream - $6 - Choose 2 cookies and 1 scoop of ice cream from an assortment - - Creme Brulee - $8 - Crispy scorched top containing a perfect, smooth custard - (GF) +
+

Food & Drink

+
+

Drinks

+
+

Soda

+

$2

+

Coke products

+
+
+

Coffee

+

$2

+

Cream and sugar available upon request

+
+
+

Beer

+

$5

+

Delicious and refreshing

+
+
+

Wine

+

$5

+

Light and fruity

+
+
+

Cocktails

+

$10

+

Ask about our specials

+
+
+
+

Appetizers

+
+

Fried Pickles

+

$6

+

Golden and crispy with tang!

+ (V) +
+
+

Buffalo Wings

+

$10

+

5 wings per order; mild, medium, or hot sauce and served with bleu cheese/ ranch and carrot sticks

+ (GF) +
+
+

Poutine

+

$5

+

Homemade fries topped with everything but the kitchen sink

+
+
+
+

Soup and Salad

+
+

House Salad

+

$8

+

Spinach and arugula with all the good veggies; add checken for $6

+ (GF, V) +
+
+

French Onion Soup

+

$4

+

Served with a thick topping of cheese and delicious bread

+
+
+

Cheddar Broccoli Soup

+

$5

+

Creamy and filling

+ (GF) +
+
+
+

Entrees

+
+

Ribeye Steak

+

$32

+

Served with mashed potatoes and roasted asparagus

+
+
+

Big Boy Burger

+

$14

+

Beef or black bean burger on homemade bun served with fries

+ Black Bean Burger: (V) +
+
+

Pork Shortrib

+

$18

+

Melt off the bone finger food

+ (GF) +
+
+
+

Desserts

+
+

Flourless Chocolate Cake

+

$7

+

Gooey and chocolatey heaven

+ (GF) +
+
+

Cookies and Ice Cream

+

$6

+

Choose 2 cookies and 1 scoop of ice cream from an assortment

+
+
+

Crème Brûlée

+

$7

+

Crispy scorched top containing a perfect, smooth custard

+ (GF) +
+
+
@@ -118,17 +155,22 @@ + +
+

Join our mailing list!

+ + +
+ + + +

©2022 BloomTech Restaurant Group, Inc. All Rights Reserved.

+
From 3bd281816c181c57db1fe0462f44d8647f6b0124 Mon Sep 17 00:00:00 2001 From: Christopher-Martinez-422 <107010274+Christopher-Martinez-422@users.noreply.github.com> Date: Thu, 19 Jan 2023 12:42:05 -0800 Subject: [PATCH 2/2] second commit --- README.md | 24 ++++++++++++------------ css/index.css | 26 ++++++++++++++++++++------ css/menu.css | 42 ++++++++++++++++++++++++----------------- menu.html | 52 ++++++++++++++++++++++++++------------------------- 4 files changed, 84 insertions(+), 60 deletions(-) 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 b2de0ebf9..287f959e4 100644 --- a/css/index.css +++ b/css/index.css @@ -49,7 +49,7 @@ table { * { box-sizing: border-box; - border: 1px solid white; + /* border: 1px solid white; */ } html { @@ -77,17 +77,21 @@ h2 { } h3 { - font-size: 5rem; + font-size: 3.5rem; } -p, a { +h4 { font-size: 3rem; } +p, a { + font-size: 2rem; +} + /* header section */ header { width: 100%; - height: 70vh; + height: 100vh; background-image: url('../img/home-header.jpg'); background-size: cover; background-position: center; @@ -131,9 +135,10 @@ nav div { } i { - padding: 2.5%; + padding: 1%; height: auto; width: auto; + font-size: 2rem; } @@ -159,10 +164,15 @@ i { text-align: center; background-color: rgb(0, 4, 17); color: rgb(225, 239, 230); - padding: 2.5%; + padding: 1%; padding-bottom: 2.5%; } +img { + padding: 1% 1%; + width: 30%; +} + /* about us section */ .about { width: 100%; @@ -214,18 +224,22 @@ i { 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 { diff --git a/css/menu.css b/css/menu.css index a7589aece..bde1ac25b 100644 --- a/css/menu.css +++ b/css/menu.css @@ -69,29 +69,29 @@ 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 */ header { width: 100%; - height: 70vh; + height: 100vh; background-image: url('../img/menu-header.jpg'); background-size: cover; background-position: center; @@ -135,9 +135,10 @@ nav div { } i { - padding: 2.5%; + padding: 1%; height: auto; width: auto; + font-size: 2rem; } /* spacer */ @@ -161,6 +162,7 @@ i { width: 100%; height: 240vh; background-image: url('../img/staff-bartender.jpg'); + background-color: rgb(0, 4, 17, .8); background-size: cover; background-position: center; background-repeat: no-repeat; @@ -168,27 +170,33 @@ i { color: rgb(225, 239, 230); } -.menu_container { +.menu-title { + display: flex; + width: 100%; + justify-content: center; +} + +.menu-container { display: flex; flex-direction: row; flex-wrap: wrap; - align-items: center; - align-self:flex-start; - height: 100%; + align-items: flex-start; + width: 100%; + justify-content: space-around; } -.menu_section { +.menu-section { display: flex; + justify-content: flex-start; flex-direction: column; flex-wrap: wrap; - width: 40%; + height: 50%; + width: 30%; + margin: 4%; } -.menu-item h4 { +.menu-item { padding: 5%; - display: inline-block; - /* float: left; */ - flex-direction: row; } i { diff --git a/menu.html b/menu.html index f41cbcf76..c64f7e62a 100644 --- a/menu.html +++ b/menu.html @@ -4,7 +4,7 @@ - + Sprint Challenge - Menu @@ -37,110 +37,112 @@
-
-

Food & Drink

-
+
+
+

Food & Drink

+
+

Drinks

-
+

Soda

$2

Coke products

-
+

Coffee

$2

Cream and sugar available upon request

-
+

Beer

$5

Delicious and refreshing

-
+

Wine

$5

Light and fruity

-
+

Cocktails

$10

Ask about our specials

-
+

Appetizers

-
+

Fried Pickles

$6

Golden and crispy with tang!

(V)
-
+

Buffalo Wings

$10

5 wings per order; mild, medium, or hot sauce and served with bleu cheese/ ranch and carrot sticks

(GF)
-
+

Poutine

$5

Homemade fries topped with everything but the kitchen sink

-
+

Soup and Salad

-
+

House Salad

$8

Spinach and arugula with all the good veggies; add checken for $6

(GF, V)
-
+

French Onion Soup

$4

Served with a thick topping of cheese and delicious bread

-
+

Cheddar Broccoli Soup

$5

Creamy and filling

(GF)
-
+

Entrees

-
+

Ribeye Steak

$32

Served with mashed potatoes and roasted asparagus

-
+

Big Boy Burger

$14

Beef or black bean burger on homemade bun served with fries

Black Bean Burger: (V)
-
+

Pork Shortrib

$18

Melt off the bone finger food

(GF)
-
+

Desserts

-
+

Flourless Chocolate Cake

$7

Gooey and chocolatey heaven

(GF)
-
+

Cookies and Ice Cream

$6

Choose 2 cookies and 1 scoop of ice cream from an assortment

-
+

Crème Brûlée

$7

Crispy scorched top containing a perfect, smooth custard