diff --git a/assets/location-pin.png b/assets/location-pin.png new file mode 100644 index 0000000..9505b58 Binary files /dev/null and b/assets/location-pin.png differ diff --git a/assets/number-1.jpg b/assets/number-1.jpg new file mode 100644 index 0000000..2237221 Binary files /dev/null and b/assets/number-1.jpg differ diff --git a/assets/number-2.jpg b/assets/number-2.jpg new file mode 100644 index 0000000..93dca70 Binary files /dev/null and b/assets/number-2.jpg differ diff --git a/assets/number-3.jpg b/assets/number-3.jpg new file mode 100644 index 0000000..fc4dfc7 Binary files /dev/null and b/assets/number-3.jpg differ diff --git a/fonts/sodo-sans-regular.woff b/fonts/sodo-sans-regular.woff new file mode 100644 index 0000000..45ad373 Binary files /dev/null and b/fonts/sodo-sans-regular.woff differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..85f39b3 --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + + + StarBucks© + + +
+
+
+ + + + + +
+ +
+ +
+
+
+ +
+
+ Starbucks® Rewards +
+ +
+ Star Decoration + +
+
+

FREE COFFEE IS A TAP AWAY

+

Join now to start earning Rewards.

+ +

+ Or join in the app for the best experience +

+
+
+
+ + +
+
+

Getting started is easy

+

Earn stars and get rewarded at every step

+
+
+
+ +
+

Create an account

+

+ To get started, + join now. + You can also + join in the app + to get access to the full range of Starbucks benefits +

+
+
+
+ +
+

Order and pay how you'd like

+

+ Use cash, credit/debit card or save some time and pay right + through the app. You'll collect stars all ways. + + Learn how. +

+
+
+
+ +
+

Earn stars, get rewards

+

+ As you earn Star, you can redeem them for Rewards- like free + food, drinks and more. Start redeeming with as little as 25 + stars. +

+
+
+
+
+
+ + + + diff --git a/page.html b/page.html deleted file mode 100644 index d64c7a4..0000000 --- a/page.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - Document - - - - \ No newline at end of file diff --git a/queries.css b/queries.css new file mode 100644 index 0000000..9b3c0c0 --- /dev/null +++ b/queries.css @@ -0,0 +1,133 @@ +@media only screen and (max-width: 900px) { + .main-nav-list, + .other-nav { + gap: 1.5rem; + } + + .other-nav li:first-child { + margin-right: 2rem; + } + .header-section-breadcrumbs { + padding-left: 13.5rem; + } +} + +@media only screen and (max-width: 820px) { + .other-nav { + display: none; + } +} + +@media only screen and (max-width: 768px) { + .container-fluid { + justify-content: center; + align-items: flex-start; + text-align: center; + height: 100vh; + } + + .old-md-5 { + margin-top: 2rem; + } + + .content { + padding: 2rem; + max-width: 100%; + } + + .content h1 { + font-size: 2.5rem; + margin: 0 auto 2rem; + } + + .background-image { + top: 0; + bottom: 0; + height: 100%; + } + + .subtext { + display: none; + } + + .container-footer { + margin: 2rem auto 6rem; + } + + .footer-lower { + flex-direction: column; + align-items: center; + } + + .footer-explanation { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1rem; + justify-content: flex-start; + } + + .footer-explanation img { + width: 4rem; + height: 4rem; + margin-right: 1rem; + } + + /* Ensures h3 is above p */ + .footer-explanation div { + display: flex; + flex-direction: column; + text-align: left; + } + + .container-footer h1 { + font-size: 2.4rem; + } + + .footer-upper p { + font-size: 1.6rem; + margin-bottom: 3rem; + } + + .footer-explanation h3 { + font-size: 1.6rem; + margin: 0 0 1rem 0; + } + + .footer-explanation p { + font-size: 1.4rem; + margin: 0; + line-height: 1.6; + } +} + +@media only screen and (max-width: 420px) { + .main-nav-list { + gap: 1.2rem; + font-size: 1.6rem; + } + .main-nav-list a { + padding-bottom: 3.1rem; + } + .main-nav-list a:hover, + .main-nav-list a:active, + .other-nav a:active { + border-bottom: 0.5rem solid var(--green); + margin-bottom: -0.5rem; + } + .logo-nav-section { + gap: 1.5rem; + } + .header-section-breadcrumbs { + padding-left: 10rem; + } +} + +@media only screen and (max-width: 372px) { + .main-nav-list { + display: none; + } + .header-section-breadcrumbs { + padding-left: 4rem; + } +} diff --git a/styles.css b/styles.css index e69de29..f3093c0 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,367 @@ +/* Colors defined */ +:root { + --dark-green: #1e3932; + --green: #008248; + --pale-green: #d4e9e2; + --off-white-green: #f1f8f6; + --light-beige: #f3f1e7; + --black: #2b2b2b; +} + +/* Reset everything */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* Set font size to 10px by default. By using this technique it is easier to measure everything */ +html { + font-size: 62.5%; +} + +/* Font family */ +@font-face { + font-family: "SoDo-Sans"; + src: url("/fonts/sodo-sans-regular.woff") format("woff"); +} + +body { + font-family: "SoDo-Sans", sans-serif; + color: var(--black); +} + +/* Styling */ +.header-section { + display: flex; + justify-content: space-between; + align-items: center; + padding: 3rem 3rem 1.5rem; +} + +.logo-nav-section { + display: flex; + align-items: center; + gap: 3.5rem; +} + +.logo { + height: 6rem; +} + +.main-nav-list, +.other-nav { + list-style-type: none; + display: flex; + gap: 2.4rem; +} + +.other-nav li:first-child { + margin-right: 5rem; +} + +.main-nav-list { + font-size: 1.8rem; + font-weight: 600; + text-transform: uppercase; +} + +.other-nav { + font-size: 1.6rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + text-decoration: none; + color: var(--black); + position: relative; +} + +.main-nav-link:hover { + color: var(--green); +} + +.location-link { + display: flex; + align-items: center; + gap: 1rem; +} + +.main-nav-list a { + padding-bottom: 2.9rem; +} + +/* .main-nav-list a:hover, +.main-nav-list a:active, +.other-nav a:active { + border-bottom: 0.5rem solid var(--green); + margin-bottom: -0.5rem; + } */ + +.main-nav-list a.active { + border-bottom: 0.5rem solid var(--green); + margin-bottom: -0.5rem; +} + +.header-section-breadcrumbs { + height: 50px; + background-color: var(--dark-green); + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.122), 0 0 2px 0 rgba(0, 0, 0, 0.239); + padding-left: 14.5rem; + display: flex; + align-items: center; +} + +.breadcrumb-heading.active { + font-size: 1.6rem; + color: #fff; + text-transform: uppercase; + font-weight: 700; + letter-spacing: 0.1rem; + top: -0.5rem; + position: relative; +} + +/* buttons */ +.btn:link, +.btn:visited { + border: 1px solid var(--black); + padding: 0.5rem 2rem; + border-radius: 2.5rem; + text-decoration: none; + color: var(--black); +} + +.btn:hover { + background-color: #ebebeb; +} + +.nav-btn-black:link, +.nav-btn-black:visited { + color: var(--light-beige); + background-color: var(--black); +} + +.nav-btn-black:hover { + background-color: rgba(0, 0, 0, 0.7); +} + +/* ******************************************** */ +/* Body - First Section START (Michel Palacios) */ +/* ******************************************** */ +.container-fluid { + position: relative; + height: 90vh; + display: flex; + justify-content: left; + align-items: center; + text-align: left; + overflow: hidden; + /* margin-left: 200px; */ +} + +.background-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 90%; + object-fit: cover; + z-index: -1; + background-color: var(--pale-green); +} + +.content { + max-width: 90%; + position: relative; + color: black; + z-index: 1; + padding: 5rem; + /* font-family: Arial, sans-serif !important; */ +} + +.content h1 { + font-size: 3.5rem; + margin-bottom: 2rem; + max-width: 80%; +} + +.content p { + font-size: 1.8rem; + margin-bottom: 1.5rem; +} + +.join-button { + background-color: var(--green); + color: var(--light-beige); + padding: 1rem 2rem; + border: none; + border-radius: 2.5rem; + cursor: pointer; + font-size: 1.4rem; + margin-bottom: 2rem; + font-weight: 600; +} + +.join-button:hover { + background-color: #005a37; +} + +.subtext { + font-size: 1.8rem; +} + +.subtext a { + color: #00754a; + text-decoration: underline; +} + +.subtext a:hover { + text-decoration: none; +} +/* ****************************************** */ +/* Body - First Section END (Michel Palacios) */ +/* ****************************************** */ + +/* ------------------------------------------ */ + +/* ****************************************** */ +/* Body - Second Section START (Ly-Ly Janusz) */ +/* ****************************************** */ +/* Optimized by Umair */ +/* ****************** */ +.container-footer { + margin: 4rem auto 12rem; + text-align: center; + width: 92%; + /* height: 60rem; */ + /* margin: 0 auto; */ + /* color: var(--black); */ + /* margin: 30px, 10px; */ + /* margin-bottom: 1.5rem; */ + /* padding: 0; */ +} + +.footer-upper p { + font-size: 1.8rem; + margin-bottom: 5rem; + /* size: 12px; */ + /* font-family: "Helvetica Neue", sans-serif; */ + /* color: var(--black); */ +} + +.footer-lower { + display: flex; + flex-direction: row; + justify-content: center; + gap: 3rem; + /* margin: 0 auto; */ + /* max-width: 100%; + padding: 0; */ +} + +.footer-explanation { + display: flex; + flex-direction: column; + align-items: center; + line-height: 1.4; + flex-basis: 30%; + /* text-align: center; */ +} + +.footer-explanation img { + width: 5rem; + height: 5rem; +} +/* +@media (max-width: 768px) { + .footer-lower { + flex-direction: column; + align-items: center; + } + + .footer-explanation { + flex-basis: 100%; + margin-bottom: 20px; + } +} */ + +.container-footer h1 { + font-size: 3rem; + margin-bottom: 2rem; + font-weight: 600; + max-width: 100%; /* Set max-width to 100% to allow full centering */ + margin-left: auto; + margin-right: auto; + display: block; +} + +.container-footer h3 { + font-size: 1.8rem; + font-weight: 600; + margin-top: 1.5rem; + margin-bottom: 2rem; +} + +.footer-explanation p { + font-size: 1.6rem; +} + +.footer-explanation a:link, +.footer-explanation a:visited { + color: var(--green); + /* text-decoration: none; */ +} + +.footer-explanation a:hover, +.footer-explanation a:active { + text-decoration: none; +} + +/* ****************************************** */ +/* Body - Second Section END (Ly-Ly Janusz) */ +/* ****************************************** */ + +/* Footer */ +.orig-ftr { + padding: 3rem 0; + background-color: var(--pale-green); + overflow: hidden; + position: relative; +} + +.orig-ftr p { + font-size: 1.2rem; + text-align: center; +} + +.orig-ftr .group-names { + padding-top: 1rem; + animation: zoom 3s infinite; +} + +/* Keyframe animation for zoom effect */ +@keyframes zoom { + 0% { + transform: scale(1.5); + } + 100% { + transform: scale(1.5); + color: var(--dark-green); + } + 75% { + transform: scale(1.4); + color: var(--black); + } + 50% { + transform: scale(1.2); + color: var(--green); + } + 25% { + transform: scale(1); + color: var(--pale-green); + } +}