From b035dc4210f7a6ac9573c917908163db095dc5a1 Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Sun, 11 Dec 2022 11:50:26 -0500 Subject: [PATCH 1/3] completed header section of the challange --- .DS_Store | Bin 6148 -> 6148 bytes css/index.css | 34 +++++++++++++++++++++++++++++++++- index.html | 25 +++++++++++++++++-------- menu.html | 3 ++- 4 files changed, 52 insertions(+), 10 deletions(-) diff --git a/.DS_Store b/.DS_Store index 807956c495580cc3bdfe2be806a62c781c2d02c7..8564d0db2dbfac856c110ef2546047263611c2bb 100644 GIT binary patch delta 96 zcmZoMXfc=|#>B`mu~2NHo}wrd0|Nsi1A_oVaY0f}eiD$kBdK6w;qu7_A}pKLSsyTM rR^VV~nb;t>nVo~51E_DaAjfy+$^0Ug0zkDOtsoOXG|T1)ku}T!Idc>e delta 307 zcmZoMXfc=|#>B!ku~2NHo}wrV0|Nsi1A_nqLpnnqgDyiFLncGc=8ufanIk|_JPaue zsSL$HK_qFANK$!mK~heB5>U;Fq=KBx;t~Uc>x@jyEUawo92{I6T)bSd!5R7G!6k_$ zrNvH(MbRK$Kw?Qo(qv~w?|KeS4$gQ1@#<=GGXot3Ba2!cg=$M9Ak)OythSbuLtNF+ z)-xfuvZ}hKwr&Q{79d~*Ius1}p)`z|31r}OX<2YlUQT{qI#3NrKQquTxeS{{8E-Ld jX6NAN00srnyWg27^NUyt02P4k01`|f!#78WtYHQKWW7H8 diff --git a/css/index.css b/css/index.css index 21442c782..e982c159d 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 grey; } html { @@ -91,6 +92,37 @@ header { background-size: cover; background-position: center; background-repeat: no-repeat; + background-color: rgb(0, 4, 17, .8); + color: rgb(225, 239, 230); +} +h1{ + display: flex; + justify-content: center; + color: rgb(225, 239, 230); +} +nav{ + display: flex; + flex-direction: column; +} +.navlinks{ + display: flex; + justify-content: space-evenly; +} +nav a{ + color: rgb(225, 239, 230); +} +nav a:hover{ + color: lightskyblue; +} +i{ + font-size: 3.5rem; +} +.sociallinks{ + width: 25%; + margin: auto; + padding: 20px; + display: flex; + justify-content: space-evenly; } /* spacers */ diff --git a/index.html b/index.html index 775cccb67..dc605251a 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,12 @@ - + Sprint Challenge - Home + @@ -16,13 +17,21 @@
- BLOOMTECH BAR AND GRILL - +

BLOOMTECH BAR AND GRILL

- Menu - Reservations - Special Offers - Contact +
@@ -82,7 +91,7 @@

Good Food, Great People

-
+

CONTACT US

diff --git a/menu.html b/menu.html index 08457325c..f47dbf371 100644 --- a/menu.html +++ b/menu.html @@ -9,13 +9,14 @@ +
- BLOOMTECH BAR AND GRILL +

BLOOMTECH BAR AND GRILL

Menu From 60b73c1091e7d9bb3f8b1bcdb791b4c95a01e217 Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Sun, 11 Dec 2022 20:10:19 -0500 Subject: [PATCH 2/3] updated remainder html and css for desktop version --- css/index.css | 76 +++++++++++++++++++++++++++-------- index.html | 109 +++++++++++++++++++++++++++++--------------------- 2 files changed, 122 insertions(+), 63 deletions(-) diff --git a/css/index.css b/css/index.css index e982c159d..fb4a2198c 100644 --- a/css/index.css +++ b/css/index.css @@ -104,10 +104,20 @@ nav{ display: flex; flex-direction: column; } +/* .navlinks{ + display: flex; + flex-direction: row-reverse; + justify-content: space-evenly; +} */ .navlinks{ display: flex; + flex-direction: row-reverse; justify-content: space-evenly; } +/* .solciallinks{ + display: flex; + flex-direction: column; +} */ nav a{ color: rgb(225, 239, 230); } @@ -125,7 +135,7 @@ i{ justify-content: space-evenly; } -/* spacers */ +/* spacers .spacer { width: 100%; height: 20vh; @@ -135,25 +145,34 @@ i{ width: 100%; height: 10vh; background-color: rgb(0, 4, 17); -} +} */ /* gallery section */ .gallery { - width: 100%; - height: 100vh; + /* width: 70%; */ + /* height: 90vh; */ text-align: center; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); + /* display: flex; */ + /* flex-direction: column; */ +} +.galleryimg{ + display: flex; + justify-content: space-evenly; + padding: 30px; } /* about us section */ .about { width: 100%; - height: 75vh; + height: 100vh; 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 { @@ -181,6 +200,7 @@ i{ background-position: center; background-repeat: no-repeat; background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); } .contact-container { @@ -220,12 +240,42 @@ i{ width: 25%; } +.contacts a{ + color: rgb(225, 239, 230); +} + + /* footer section */ -footer { +footer{ width: 100%; - height: 15vh; - padding-top: 2.5vh; - font-size: 3rem; + display: flex; + justify-content: space-between; + padding: 20px; + background-color: rgb(0, 4, 17); + color: rgb(225, 239, 230); +} +.maillist{ + width: 35%; + text-align: center; +} +input{ + padding: 10px 10px; + width: 70%; +} +button{ + padding: 10px 20px; +} +.navrow{ + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + gap: 0 100px; +} +.copyright p{ + font-size: 1.5rem; + display: flex; + justify-content: flex-end; + align-items: flex-end; } /* mobile media query */ @@ -270,16 +320,8 @@ footer { .hours { width: 100%; } - .contacts { width: 100%; padding-bottom: 2.5vh; } - - /* footer section */ - footer { - height: auto; - padding-top: 2.5vh; - font-size: 2rem; - } } diff --git a/index.html b/index.html index dc605251a..3fb57fc14 100644 --- a/index.html +++ b/index.html @@ -16,47 +16,58 @@
- +

BLOOMTECH BAR AND GRILL

+ +
@@ -134,15 +145,21 @@

Contacts

- Join our mailing list! - Sign Up - - Menu - Reservations - Special Offers - Contact - - ©2022 BloomTech Restaurant Group, Inc. All Rights Reserved. +
+

Join our mailing list!

+ +
+
+ + +
From ffb7e874584278c7b49163f7602e43820d88cdd9 Mon Sep 17 00:00:00 2001 From: Ashish Desai Date: Wed, 14 Dec 2022 06:14:12 -0500 Subject: [PATCH 3/3] created menu.html --- css/index.css | 52 ++++++++--- index.html | 12 +-- menu.html | 250 +++++++++++++++++++++++++++++--------------------- 3 files changed, 189 insertions(+), 125 deletions(-) diff --git a/css/index.css b/css/index.css index fb4a2198c..1bf8b1de4 100644 --- a/css/index.css +++ b/css/index.css @@ -104,20 +104,12 @@ nav{ display: flex; flex-direction: column; } -/* .navlinks{ - display: flex; - flex-direction: row-reverse; - justify-content: space-evenly; -} */ + .navlinks{ display: flex; flex-direction: row-reverse; justify-content: space-evenly; } -/* .solciallinks{ - display: flex; - flex-direction: column; -} */ nav a{ color: rgb(225, 239, 230); } @@ -135,7 +127,7 @@ i{ justify-content: space-evenly; } -/* spacers +spacers .spacer { width: 100%; height: 20vh; @@ -145,7 +137,7 @@ i{ width: 100%; height: 10vh; background-color: rgb(0, 4, 17); -} */ +} /* gallery section */ .gallery { @@ -158,9 +150,17 @@ i{ /* flex-direction: column; */ } .galleryimg{ + width: 100%; display: flex; justify-content: space-evenly; - padding: 30px; + flex-flow: row wrap; +} +.galleryimg div{ + width: 30%; + margin-bottom: 10px; +} +.galleryimg div img{ + width: 100%; } /* about us section */ @@ -281,11 +281,37 @@ button{ /* mobile media query */ @media (max-width: 428px) { /* header section */ - + header { + width: 100%; + display: flex; + flex-direction: column; + text-align: center; + } + h1{ + font-size: 5rem; + } + .navlinks{ + display: flex; + flex-direction: column; + text-align: center; + } + .sociallinks{ + display: flex; + gap: 0 10px; + } /* gallery section */ .gallery { + /* height: auto; */ + } + .galleryimg{ + width: 100%; height: auto; + display: flex; + flex-direction: column; + } + .galleryimg div{ + width: 100%; } /* about us section */ diff --git a/index.html b/index.html index 3fb57fc14..e3f6ef219 100644 --- a/index.html +++ b/index.html @@ -16,14 +16,14 @@
-

BLOOMTECH BAR AND GRILL

+

BLOOMTECH BAR AND GRILL