diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..c00629883 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -16,7 +21,9 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +33,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +48,36 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + display: inline-block; + border-radius: 100px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +img { + border-radius: 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +87,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +95,17 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { @@ -69,17 +114,28 @@ img { /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; } .features-title { margin-bottom: 16px; + font-size: 20px; } .features-text { + font-size: 18px; + line-height: 1.7; } /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -89,32 +145,51 @@ img { .testimonial-box h2 { margin-bottom: 24px; + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 16px; } .chair-details li:last-child { @@ -122,13 +197,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + font-size: 20px; + align-items: center; } footer { margin-bottom: 48px; + font-size: 14px; + color: #495057; } diff --git a/starter/06-Components/Accordion/index.html b/starter/06-Components/Accordion/index.html new file mode 100644 index 000000000..021a84bcf --- /dev/null +++ b/starter/06-Components/Accordion/index.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + diff --git a/starter/06-Components/Accordion/style.css b/starter/06-Components/Accordion/style.css new file mode 100644 index 000000000..547abbf84 --- /dev/null +++ b/starter/06-Components/Accordion/style.css @@ -0,0 +1,95 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + line-height: 1; +} + +.accordion { + width: 700px; + margin: 0 auto; + + display: flex; + flex-direction: column; + gap: 24px; +} + +.item { + box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); + padding: 24px; + + display: grid; + grid-template-columns: auto 1fr auto; + column-gap: 24px; + row-gap: 32px; + align-items: center; +} + +.number, +.text { + font-size: 24px; + font-weight: 500; +} + +.number { + color: #ced4da; +} + +.icon { + width: 24px; + height: 24px; + stroke: #087f5b; +} + +.hidden-box { + grid-column: 2; + display: none; +} + +.hidden-box p { + line-height: 1.6; + margin-bottom: 24px; +} + +.hidden-box ul { + color: #868e96; + margin-left: 20px; + + display: flex; + flex-direction: column; + gap: 12px; +} + +.open { + border-top: 4px solid #087f5b; +} + +.open .number, +.open .text { + color: #087f5b; +} + +.open .hidden-box { + display: block; +} diff --git a/starter/06-Components/Carousel/index.html b/starter/06-Components/Carousel/index.html new file mode 100644 index 000000000..71648295d --- /dev/null +++ b/starter/06-Components/Carousel/index.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + diff --git a/starter/06-Components/Carousel/style.css b/starter/06-Components/Carousel/style.css new file mode 100644 index 000000000..ae6a0fbc4 --- /dev/null +++ b/starter/06-Components/Carousel/style.css @@ -0,0 +1,130 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + line-height: 1; +} + +.carousel { + width: 800px; + margin: 100px auto; + background-color: #087f5b; + padding: 32px 48px 32px 86px; + border-radius: 8px; + + display: flex; + align-items: center; + gap: 86px; + + position: relative; +} + +img { + height: 200px; + border-radius: 8px; + transform: scale(1.5); + + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); +} + +.testimonial { +} + +.testimonial-text { + font-size: 18px; + font-weight: 500; + line-height: 1.5; + margin-bottom: 32px; + color: #e6fcf5; +} + +.testimonial-author { + font-size: 14px; + margin-bottom: 4px; + color: #c3fae8; +} + +.testimonial-job { + font-size: 12px; + color: #c3fae8; +} + +.btn { + background-color: #fff; + border: none; + width: 40px; + height: 40px; + border-radius: 50%; + position: absolute; + top: 50%; + + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} + +.btn--left { + left: 0; + transform: translate(-50%, -50%); +} + +.btn--right { + right: 0; + transform: translate(50%, -50%); +} + +.btn-icon { + height: 24px; + width: 24px; + + stroke: #087f5b; +} + +.dots { + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 32px); + + display: flex; + gap: 12px; +} + +.dot { + height: 12px; + width: 12px; + + background-color: #fff; + border: 2px solid #087f5b; + border-radius: 50%; + cursor: pointer; +} + +.dot--fill { + background-color: #087f5b; +} diff --git a/starter/06-Components/Hero/hero.jpg b/starter/06-Components/Hero/hero.jpg new file mode 100644 index 000000000..26f1847c8 Binary files /dev/null and b/starter/06-Components/Hero/hero.jpg differ diff --git a/starter/06-Components/Hero/index.html b/starter/06-Components/Hero/index.html new file mode 100644 index 000000000..e67cd84bf --- /dev/null +++ b/starter/06-Components/Hero/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + +

+ + +

+

+

A healty meal delivered to your door, every single day

+

+ The smart 365-days-per-year food subscription that will make you eat + healty again. Tailored to your personal tastes and nutritional needs +

+ Start eating well +

+

+

+ +

+

+

Some random heading

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, non + distinctio impedit perferendis aliquid totam ipsam nobis quo incidunt + quidem, magni provident iure eos! Magnam, alias. Pariatur, velit + iusto? Optio. +

+

+

+ + diff --git a/starter/06-Components/Hero/style.css b/starter/06-Components/Hero/style.css new file mode 100644 index 000000000..a296e896e --- /dev/null +++ b/starter/06-Components/Hero/style.css @@ -0,0 +1,79 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-family: "Rubik", sans-serif; + color: #444; +} + +.container { + margin: 0 auto; + width: 1200px; +} + +header { + height: 100vh; + position: relative; + background-image: linear-gradient(rgb(34, 34, 34, 0.6), rgb(34, 34, 34, 0.6)), + url(hero.jpg); + background-size: cover; + color: #fff; +} + +nav { + font-size: 20px; + font-weight: 700; + display: flex; + justify-content: space-between; + padding-top: 32px; +} + +.header-container { + width: 1200px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.header-container-inner { + width: 50%; +} + +h1 { + font-size: 52px; + margin-bottom: 32px; + line-height: 1.05; +} + +h2 { + font-size: 44px; + margin-bottom: 48px; +} + +p { + font-size: 20px; + line-height: 1.6; + margin-bottom: 48px; +} + +.btn:link, +.btn:visited { + font-size: 20px; + font-weight: 600; + background-color: #e67e22; + color: #fff; + text-decoration: none; + display: inline-block; + padding: 16px 32px; + border-radius: 9px; +} + +section { + padding: 96px 0; + background-color: #f7f7f7; +} diff --git a/starter/06-Components/Layout/index.html b/starter/06-Components/Layout/index.html new file mode 100644 index 000000000..6d130b916 --- /dev/null +++ b/starter/06-Components/Layout/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + New + Reply + Forward + Mark unread + Trash + +

+

Email 1

+

Email 2

+

Email 3

+

Email 4

+

Email 5

+

Email 6

+

Email 7

+

Email 8

+

Email 9

+

Email 10

+

+

Email view

+ + + diff --git a/starter/06-Components/Layout/style.css b/starter/06-Components/Layout/style.css new file mode 100644 index 000000000..05bbfd20c --- /dev/null +++ b/starter/06-Components/Layout/style.css @@ -0,0 +1,78 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #343a40; + font-size: 24px; + height: 100vh; + text-align: center; + font-weight: bold; + + display: grid; + grid-template-columns: 80px 400px 1fr 250px; + grid-template-rows: 80px 1fr; +} + +nav, +main, +aside { + padding-top: 24px; +} + +nav { + color: #fff; + background-color: #343a40; + grid-row: 1 / -1; +} + +menu { + background-color: #7048e8; + grid-column: 2 / -1; + display: flex; + align-items: center; + gap: 12px; + padding: 0 40px; +} + +button { + display: inline-block; + font-size: 16px; + font-weight: bold; + background-color: #5f3dc4; + border: none; + cursor: pointer; + color: #fff; + padding: 8px 12px; +} + +button:last-child { + background-color: #d6336c; + margin-left: auto; +} + +section { + background-color: #e9ecef; + padding: 40px; + display: flex; + flex-direction: column; + gap: 40px; + overflow: scroll; +} + +.email { + background-color: #adb5bd; + height: 90px; + flex-shrink: 0; + + display: flex; + align-items: center; + justify-content: center; +} + +aside { + background-color: #e9ecef; +} diff --git a/starter/06-Components/Table/index.html b/starter/06-Components/Table/index.html new file mode 100644 index 000000000..3e650cc49 --- /dev/null +++ b/starter/06-Components/Table/index.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair	The Laid Back	The Worker Bee	The Chair 4/2
Width	80 cm	60 cm	220 cm
Height	100 cm	110 cm	90 cm
Depth	70 cm	65 cm	80 cm
Weight	16 kg	22 kg	80 kg

+ + + + diff --git a/starter/06-Components/Table/style.css b/starter/06-Components/Table/style.css new file mode 100644 index 000000000..516924358 --- /dev/null +++ b/starter/06-Components/Table/style.css @@ -0,0 +1,111 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + line-height: 1; +} + +table { + width: 800px; + margin: 0 auto; + margin-top: 100px; + border-collapse: collapse; + font-size: 18px; +} + +th, +td { + /* border: 1px solid #343a40; */ + padding: 16px 24px; + text-align: left; +} + +thead tr { + background-color: #087f5b; + color: #fff; +} + +thead th { + width: 25%; +} + +tbody tr:nth-child(odd) { + background-color: #f8f9fa; +} + +tbody tr:nth-child(even) { + background-color: #e9ecef; +} + +/* PAGINATION STYLES */ +.pagination { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + margin-top: 16px; +} + +.btn { + width: 32px; + height: 32px; + border: none; + border-radius: 50%; + background: none; + color: #343a40; + font-weight: 500; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.btn-previous, +.btn-next { + color: #087f5b; + border: 1px solid #087f5b; + width: 48px; + height: 48px; +} + +.btn-icon { + width: 24px; + height: 24px; + stroke: currentColor; +} + +.btn-active { + cursor: default; +} + +.btn-active, +.btn:hover { + background-color: #087f5b; + color: #fff; +} + +.dots { + color: #868e96; +} diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content.md similarity index 96% rename from starter/07-Omnifood-Desktop/content/content.md rename to starter/07-Omnifood-Desktop/content.md index 7193e017f..35fb1a3b4 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content.md @@ -119,10 +119,26 @@ Create account Sign in iOS app Android app + About Omnifood For Business Cooking partners Careers + Recipe directory Help center Privacy & terms + +###### + +## Sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (abd list of diets) +- Testimonials + gallery +- Pricing + features +- CTA +- Footer diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..7ca6edae4 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,258 @@ +/* +--- 01 TYPOGRAPHY SYSTEM + +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights: +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line height: +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS + +- Primary: #e67e22 +- Tints: + #fdf2e9 + #fae5d3 + #eb984e + +- Shades: + #cf711f + #45260a + +- Accents: +- Greys + #888 + #767676 (lightest grey allowed on #fff) + #6f6f6f (lightest grey allowed on #fdf2e9) + #555 + #333 + +--- 03 SHADOWS + +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 04 BORDER-RADIUS +Default 9px +Medium 11px + +--- 05 WHITESPACE + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; + overflow-x: hidden; + /* Does NOT work on Safari */ + /* scroll-behavior: smooth; */ +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + overflow-x: hidden; +} + +/*************************************/ +/* GENERAL REUSABLE COMPONENTS */ +/*************************************/ + +.container { + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; +} + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--center-v { + align-items: center; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn, +.btn:link, +.btn:visited { + display: inline-block; + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 2.3rem; + border-radius: 9px; + + border: none; + cursor: pointer; + font-family: inherit; + + transition: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + padding: 1.2rem; + align-self: end; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + line-height: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + font-size: 3rem; + color: #e67e22; +} + +*:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgb(230, 126, 34, 0.5); +} + +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} diff --git a/starter/07-Omnifood-Desktop/css/queries.css b/starter/07-Omnifood-Desktop/css/queries.css new file mode 100644 index 000000000..15f87e06a --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/queries.css @@ -0,0 +1,288 @@ +/* rem and em do NOT depend on html font-size in media queries! +Instead, 1rem = 1em = 16px */ + +/*************************************/ +/* BELOW 1344px (Smaller desktop) */ +/*************************************/ + +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +/*************************************/ +/* BELOW 1200px (Landscape Tablets) */ +/*************************************/ + +@media (max-width: 75em) { + html { + font-size: 56.25%; + } + + .grid { + column-gap: 4.8rem; + row-gap: 6.4rem; + } + + .heading-secondary { + font-size: 3.6rem; + } + + .heading-tertiary { + font-size: 2.4rem; + } + + .header { + padding: 0 3.2rem; + } + + .main-nav-list { + gap: 3.2rem; + } + + .hero { + gap: 4.8rem; + } + + .testimonials-container { + padding: 9.6rem 3.2rem; + } +} + +/*************************************/ +/* BELOW 944px (Tablets) */ +/*************************************/ + +@media (max-width: 59em) { + html { + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-text-box { + text-align: center; + } + + .hero-img-box { + text-align: center; + } + + .hero-img { + width: 60%; + } + + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + + .logos img { + height: 2.4rem; + } + + .step-number { + font-size: 7.4rem; + } + + .meal-content { + padding: 2.4rem 3.2rem 3.2rem 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + grid-template-columns: 3fr 2fr; + } + + .cta-form { + grid-template-columns: 1fr; + } + + .btn--form { + margin-top: 1.2rem; + } + + /* MOBILE NAVIGATION */ + .btn-mobile-nav { + display: block; + z-index: 1000; + } + + .main-nav { + background-color: rgb(255, 255, 255, 0.97); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(100%); + + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s ease-in; + + opacity: 0; + pointer-events: none; + visibility: hidden; + } + + .nav-open .main-nav { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: translateX(0); + } + + .nav-open .icon-mobile-nav[name="close-outline"] { + display: block; + } + + .nav-open .icon-mobile-nav[name="menu-outline"] { + display: none; + } + + .main-nav-list { + flex-direction: column; + gap: 4.8rem; + } + + .main-nav-link:link, + .main-nav-link:visited { + font-size: 3rem; + } + + .pricing-plan { + width: 85%; + } +} + +/*************************************/ +/* BELOW 704px (Smaller tablets) */ +/*************************************/ + +@media (max-width: 44em) { + .heading-secondary { + margin-bottom: 4.8rem; + } + + .grid--3-cols, + .grid--4-cols { + grid-template-columns: repeat(2, 1fr); + } + + .diets { + grid-column: 1 / -1; + justify-self: center; + } + + .pricing-plan { + width: 100%; + } + + .grid--footer { + grid-template-columns: repeat(6, 1fr); + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } + + .logo-col, + .address-col { + grid-column: span 3; + } +} + +/*************************************/ +/* BELOW 544px (Phones) */ +/*************************************/ +@media (max-width: 34rem) { + .grid { + row-gap: 4.8rem; + } + + .grid--2-cols, + .grid--3-cols, + .grid--4-cols { + grid-template-columns: 1fr; + } + + .hero { + padding: 0 3.2rem; + } + + .section-hero { + padding: 2.4rem 0 4.8rem 0; + } + + .btn, + .btn:link, + .btn:visited { + padding: 2.4rem 1.6rem; + } + + .hero-img { + width: 80%; + } + + .logos img { + height: 1.2rem; + } + + .step-img-box:nth-child(2) { + grid-row: 1; + } + + .step-img-box:nth-child(6) { + grid-row: 5; + } + + .step-img-box { + transform: translateY(2.4rem); + } + + .testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(4, 1fr); + gap: 1.2rem; + } + + .cta { + grid-template-columns: 1fr; + } + + .cta-img-box { + height: 32rem; + grid-row: 1; + } + + .cta-text-box { + padding: 3.2rem; + } +} diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..4a0714721 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,668 @@ +/*************************************/ +/* HEADER */ +/*************************************/ + +.header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fdf2e9; + + height: 9.6rem; + padding: 0 4.8rem; + position: relative; +} + +.logo { + height: 2.2rem; +} + +/*************************************/ +/* NAVIGATION */ +/*************************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 4.8rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + background-color: #cf711f; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +/* MOBILE */ + +.btn-mobile-nav { + border: none; + background: none; + cursor: pointer; + + display: none; +} + +.icon-mobile-nav { + height: 4.8rem; + width: 4.8rem; + color: #333; +} + +.icon-mobile-nav[name="close-outline"] { + display: none; +} + +/* STICKY NAVIGATION */ +.sticky .header { + position: fixed; + top: 0; + bottom: 0; + width: 100%; + height: 8rem; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(255, 255, 255, 0.97); + z-index: 100; + box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03); +} + +.sticky .section-hero { + margin-top: 9.6rem; +} + +/*************************************/ +/* HERO SECTION */ +/*************************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-img { + display: flex; +} + +.delivered-img img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-img img:last-child { + margin-right: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/*************************************/ +/* FEATURED IN SECTION */ +/*************************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos-img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/*************************************/ +/* HOW IT WORKS SECTION */ +/*************************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + padding-bottom: 60%; + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; +} + +/*************************************/ +/* MEALS SECTION */ +/*************************************/ + +.section-meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + border-radius: 11px; + overflow: hidden; + transition: all 0.4s; +} + +.meal:hover { + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); + transform: translateY(-1.2rem); +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + color: #333; + text-transform: uppercase; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegetarian { + background-color: #51cf66; +} + +.tag--vegan { + background-color: #94d82d; +} + +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + font-size: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/*************************************/ +/* TESTIMONIALS SECTION */ +/*************************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.gallery-img:hover { + transform: scale(1.1); +} + +/*************************************/ +/* TESTIMONIALS SECTION */ +/*************************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + width: 75%; +} + +.pricing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + overflow: hidden; + + position: relative; +} + +.pricing-plan--complete::before { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + + background-color: #ffd43b; + padding: 0.8rem 8rem; + + transform: rotate(45deg); +} + +.plicing-plan--starter { + justify-self: right; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sign-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + margin-bottom: 3.2rem; + background-color: #fdf2e9; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8rem; +} + +/*************************************/ +/* CTA SECTION */ +/*************************************/ + +.section-cta { + padding: 4.8rem 0 12.8rem 0; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta .heading-secondary { + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgb(235, 152, 78, 0.35), + rgb(230, 126, 34, 0.35) + ), + url("../img/eating.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta *:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgb(253, 242, 233, 0.5); +} + +/*************************************/ +/* FOOTER */ +/*************************************/ + +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} + +.grid--footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.4; + color: #767676; + margin-top: auto; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/starter/07-Omnifood-Desktop/img/app/app-screen-1.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png rename to starter/07-Omnifood-Desktop/img/app/app-screen-1.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/starter/07-Omnifood-Desktop/img/app/app-screen-2.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png rename to starter/07-Omnifood-Desktop/img/app/app-screen-2.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/starter/07-Omnifood-Desktop/img/app/app-screen-3.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png rename to starter/07-Omnifood-Desktop/img/app/app-screen-3.png diff --git a/starter/07-Omnifood-Desktop/img/apple-touch-icon.png b/starter/07-Omnifood-Desktop/img/apple-touch-icon.png new file mode 100644 index 000000000..a99814098 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/apple-touch-icon.png differ diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/starter/07-Omnifood-Desktop/img/customers/ben.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/ben.jpg rename to starter/07-Omnifood-Desktop/img/customers/ben.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/starter/07-Omnifood-Desktop/img/customers/dave.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/dave.jpg rename to starter/07-Omnifood-Desktop/img/customers/dave.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/starter/07-Omnifood-Desktop/img/customers/hannah.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg rename to starter/07-Omnifood-Desktop/img/customers/hannah.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/starter/07-Omnifood-Desktop/img/customers/steve.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/steve.jpg rename to starter/07-Omnifood-Desktop/img/customers/steve.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/starter/07-Omnifood-Desktop/img/eating.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/eating.jpg rename to starter/07-Omnifood-Desktop/img/eating.jpg diff --git a/starter/07-Omnifood-Desktop/img/favicon-192.png b/starter/07-Omnifood-Desktop/img/favicon-192.png new file mode 100644 index 000000000..1519d098a Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon-192.png differ diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/starter/07-Omnifood-Desktop/img/favicon-512.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/favicon.png rename to starter/07-Omnifood-Desktop/img/favicon-512.png diff --git a/starter/07-Omnifood-Desktop/img/favicon-original.png b/starter/07-Omnifood-Desktop/img/favicon-original.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon-original.png differ diff --git a/starter/07-Omnifood-Desktop/img/favicon.png b/starter/07-Omnifood-Desktop/img/favicon.png new file mode 100644 index 000000000..415ac82c3 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon.png differ diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg diff --git a/starter/07-Omnifood-Desktop/img/hero-min.png b/starter/07-Omnifood-Desktop/img/hero-min.png new file mode 100644 index 000000000..5ab2bfc03 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero-min.png differ diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/img/hero.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/hero.png rename to starter/07-Omnifood-Desktop/img/hero.png diff --git a/starter/07-Omnifood-Desktop/img/hero.webp b/starter/07-Omnifood-Desktop/img/hero.webp new file mode 100644 index 000000000..120fb8517 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero.webp differ diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/starter/07-Omnifood-Desktop/img/logos/business-insider.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/business-insider.png rename to starter/07-Omnifood-Desktop/img/logos/business-insider.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/starter/07-Omnifood-Desktop/img/logos/forbes.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/forbes.png rename to starter/07-Omnifood-Desktop/img/logos/forbes.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/starter/07-Omnifood-Desktop/img/logos/techcrunch.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png rename to starter/07-Omnifood-Desktop/img/logos/techcrunch.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png rename to starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/starter/07-Omnifood-Desktop/img/logos/usa-today.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/usa-today.png rename to starter/07-Omnifood-Desktop/img/logos/usa-today.png diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/starter/07-Omnifood-Desktop/img/meals/meal-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg rename to starter/07-Omnifood-Desktop/img/meals/meal-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/starter/07-Omnifood-Desktop/img/meals/meal-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg rename to starter/07-Omnifood-Desktop/img/meals/meal-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/starter/07-Omnifood-Desktop/img/omnifood-logo.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/omnifood-logo.png rename to starter/07-Omnifood-Desktop/img/omnifood-logo.png diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..c7a8f404b --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,758 @@ + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + + + + + + + + +

+ +

+

+

+

+

+ A healthy meal delivered to your door, every single day +

+

+ The smart 365-days-per-year food subscription that will make you + eat healthy again. Tailored to your personal tastes and + nutritional needs. +

+ Start eating well + Learn more ↓ +

+

+ + + + + + +

+

+ 250,000+ meals delivered last year! +

+

+

+

+ + + + + +

+

+

+ +

+

+

As featured in

+

+ + + + + +

+

+

+ +

+

+ How it works +

+ Your daily dose of health in 3 simple steps +

+

+ +

+ +

+

01

+

+ Tell us what you like (and what not) +

+

+ Never again waste time thinking about what to eat! Omnifood AI + will create a 100% personalized weekly meal plan just for you. It + makes sure you get all the nutrients and vitamins you need, no + matter what diet you follow! +

+

+

+ +

+ + +

+ +

+

+

02

+

Approve your weekly meal plan

+

+ Once per week, approve the meal plan generated for you by Omnifood + AI. You can change ingredients, swap entire meals, or even add + your own recipes. +

+

+ + +

+

03

+

Receive meals at convenient time

+

+ Best chefs in town will cook your selected meal every day, and we + will deliver it to your door whenever works best for you. You can + change delivery schedule and address daily! +

+

+

+ +

+

+

+ +

+

+ Meals +

+ Omnifood AI chooses from 5,000+ recipes +

+

+ +

+

+ +

+

+ Vegetarian +

+

Japonese Gyozas

+ +

+
• + + 650 calories +
+
• + + NutriScore ® 74 +
+
• + + 4.9 rating (537) +
+

+

+

+ +

+ +

+

+ Vegan + Paleo +

+

Avocado Salad

+ +

+
• + + 400 calories +
+
• + + NutriScore ® 92 +
+
• + + 4.8 rating (441) +
+

+

+

+ +

+

Works with any diet:

+

+
• + + Vegetarian +
+
• + + Pescatarian +
+
• + + Vegan +
+
• + + Gluten-free +
+
• + + Lactose-free +
+
• + + Keto +
+
• + + Paleo +
+
• + + Low FODMAP +
+
• + + Kid-friendly +
+

+

+

+ +

+ See all recipes → +

+

+ +

+

+ Testimonials +

Once you try it, you can't go back

+ +

+

+ +

+ Inexpensive, healthy and great-tasting meals, without even + having to order manually! It feels truly magical. +

+

— Dave Bryson

+

+ +

+ +

+ The AI algorithm is crazy good, it chooses the right meals for + me every time. It's amazing not to worry about food anymore! +

+

— Ben Hadley

+

+ +

+ +

+ IOmnifood is a life saver! I just started a company, so there's + no time for cooking. I couldn't live without my daily meals now! +

+

— Steve Miller

+

+ +

+ +

+ I got Omnifood for the whole family, and it frees up so much + time! Plus, everything is organic and vegan and without plastic. +

+

— Hannah Smith

+

+

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+

+

+

+ Pricing +

+ Eating well without breaking the bank +

+

+ +

+

+

+

Starter

+

$399

+

per month. That's just $13 per meal!

+

+ +

+
• + + 1 meal per day +
+
• + + Order from 11am and 9pm +
+
• + + Delivery is free +
+
• + +
+

+ +

+ Start eating well +

+

+ +

+

+

Complete

+

$649

+

per month. That's just $11 per meal!

+

+ +

+
• + + 2 meals per day +
+
• + + Order 24/7 +
+
• + + Delivery is free +
+
• + + Get access to latest recipes +
+

+ +

+ Start eating well +

+

+

+ +

+ +

+ +

+

+ +

Never cook again!

+

+ Our subscriptions cover 365 days per year, even including major + holidays. +

+

+ +

+ +

Local and organic

+

+ Our cooks only use local, fresh, and organic products to prepare + your meals. +

+

+ +

+ +

No waste

+

+ All our partners only use reusable containers to package all your + meals. +

+

+ +

+ +

Pause anytime

+

+ Going on vacation? Just pause your subscription, and we refund + unused days. +

+

+

+

+ +

+

+

+

+

Get your first meal for free!

+

+ Healthy, tasty and hassle-free meals are waiting for you. Start + eating well today. You can cancel or pause anytime. And the + first meal is on us! +

+ +

+

+ Full Name + +

+ +

+ Email address + +

+ +

+ Where did you hear from us? + + Please choose one aption: + Friends and family + Internet + News or magazines + +

+ + Sign up now +

+

+

+

+

+

+

+ + + + + + + + + diff --git a/starter/07-Omnifood-Desktop/js/script.js b/starter/07-Omnifood-Desktop/js/script.js new file mode 100644 index 000000000..5420d93bc --- /dev/null +++ b/starter/07-Omnifood-Desktop/js/script.js @@ -0,0 +1,137 @@ +/////////////////////////////////////////////////////////// +// Fixing flexbox gap property missing in some Safari versions +function checkFlexGap() { + var flex = document.createElement("div"); + flex.style.display = "flex"; + flex.style.flexDirection = "column"; + flex.style.rowGap = "1px"; + + flex.appendChild(document.createElement("div")); + flex.appendChild(document.createElement("div")); + + document.body.appendChild(flex); + var isSupported = flex.scrollHeight === 1; + flex.parentNode.removeChild(flex); + console.log(isSupported); + + if (!isSupported) document.body.classList.add("no-flexbox-gap"); +} +checkFlexGap(); + +const yearEl = document.querySelector(".year"); +const currentYear = new Date().getFullYear(); +yearEl.textContent = currentYear; + +// Make mobile navigation work +const btnMobileNavEl = document.querySelector(".btn-mobile-nav"); +const headerEl = document.querySelector(".header"); + +btnMobileNavEl.addEventListener("click", function () { + headerEl.classList.toggle("nav-open"); +}); + +///////////////////////////////////////////////////////////////////////////// +// Smooth scrolling animation +const allLinks = document.querySelectorAll("a:link"); +allLinks.forEach((link) => { + link.addEventListener("click", (e) => { + e.preventDefault(); + const href = link.getAttribute("href"); + + // Scroll back to top + if (href === "#") { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + + // Scroll to other links + if (href !== "#" && href.startsWith("#")) { + const section = document.querySelector(href); + section.scrollIntoView({ behavior: "smooth" }); + } + + // Close mobile navigation + if (link.classList.contains("main-nav-link")) { + headerEl.classList.toggle("nav-open"); + } + }); +}); +// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js + +////////////////////////////////////////////////////////////////////////////////// +// Sticky navigation + +const sectionHeroEl = document.querySelector(".section-hero"); + +const observer = new IntersectionObserver( + function (entries) { + const ent = entries[0]; + const bodyEl = document.body; + + if (!ent.isIntersecting) { + bodyEl.classList.add("sticky"); + } else { + bodyEl.classList.remove("sticky"); + } + }, + { + // In the viewport + root: null, + threshold: 0, + rootMargin: "-80px", + } +); +observer.observe(sectionHeroEl); + +/* +.no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 4.8rem; +} + +.no-flexbox-gap .list-item:not(:last-child) { + margin-bottom: 1.6rem; +} + +.no-flexbox-gap .list-icon:not(:last-child) { + margin-right: 1.6rem; +} + +.no-flexbox-gap .delivered-faces { + margin-right: 1.6rem; +} + +.no-flexbox-gap .meal-attribute:not(:last-child) { + margin-bottom: 2rem; +} + +.no-flexbox-gap .meal-icon { + margin-right: 1.6rem; +} + +.no-flexbox-gap .footer-row div:not(:last-child) { + margin-right: 6.4rem; +} + +.no-flexbox-gap .social-links li:not(:last-child) { + margin-right: 2.4rem; +} + +.no-flexbox-gap .footer-nav li:not(:last-child) { + margin-bottom: 2.4rem; +} + +@media (max-width: 75em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 3.2rem; + } +} + +@media (max-width: 59em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 0; + margin-bottom: 4.8rem; + } +} +*/ diff --git a/starter/07-Omnifood-Desktop/manifest.webmanifest b/starter/07-Omnifood-Desktop/manifest.webmanifest new file mode 100644 index 000000000..421df7193 --- /dev/null +++ b/starter/07-Omnifood-Desktop/manifest.webmanifest @@ -0,0 +1,6 @@ +{ + "icons": [ + { "src": "/img/favicon-192.png", "type": "image/png", "sizes": "192x192" }, + { "src": "/img/favicon-512.png", "type": "image/png", "sizes": "512x512" } + ] +}