Migracode-Barcelona · UmairRiazDev · Oct 5, 2024 · Oct 5, 2024 · Oct 6, 2024 · Oct 6, 2024
diff --git a/assets/location-pin.png b/assets/location-pin.png
diff --git a/assets/number-1.jpg b/assets/number-1.jpg
diff --git a/assets/number-2.jpg b/assets/number-2.jpg
diff --git a/assets/number-3.jpg b/assets/number-3.jpg
diff --git a/fonts/sodo-sans-regular.woff b/fonts/sodo-sans-regular.woff
diff --git a/index.html b/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <link rel="stylesheet" type="text/css" href="queries.css" />
+    <title>StarBucks&copy;</title>
+  </head>
+  <body>
+    <header>
+      <div class="header-section">
+        <div class="logo-nav-section">
+          <a href="#">
+            <img src="assets/logo.png" class="logo" alt="starbucks logo" />
+          </a>
+
+          <ul class="main-nav-list">
+            <li><a href="#" class="main-nav-link">Menu</a></li>
+            <li>
+              <a href="index.html" class="main-nav-link active">Rewards</a>
+            </li>
+            <li><a href="#" class="main-nav-link">Gift Cards</a></li>
+          </ul>
+        </div>
+
+        <div>
+          <ul class="other-nav">
+            <li>
+              <a href="#" class="main-nav-link location-link">
+                <img src="assets/location-pin.png" alt="location pin" />
+                Find a Store</a
+              >
+            </li>
+            <li>
+              <a href="#" class="btn">Sign in</a>
+            </li>
+            <li>
+              <a href="#" class="btn nav-btn-black">Join now</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <div class="header-section-breadcrumbs">
+        <span class="breadcrumb-heading active">Starbucks® Rewards</span>
+      </div>
+      <!-- Body - First Section -->
+      <div class="container-fluid">
+        <img
+          src="assets/xl-hero-desktop_2021.png"
+          alt="Star Decoration"
+          class="background-image"
+        />
+
+        <div class="old-md-5">
+          <div class="content">
+            <h1>FREE COFFEE IS A TAP AWAY</h1>
+            <p>Join now to start earning Rewards.</p>
+            <button class="join-button">Join now</button>
+            <p class="subtext">
+              Or <a href="#">join in the app</a> for the best experience
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Body - Second Section -  -->
+      <div class="container-footer">
+        <div class="footer-upper">
+          <h1>Getting started is easy</h1>
+          <p>Earn stars and get rewarded at every step</p>
+        </div>
+        <div class="footer-lower">
+          <div class="footer-explanation">
+            <img src="assets/number-1.jpg" />
+            <div>
+              <h3>Create an account</h3>
+              <p>
+                To get started,
+                <a href="https://www.starbucks.com/account/create">join now.</a>
+                You can also
+                <a href="https://www.starbucks.com/account/create"
+                  >join in the app</a
+                >
+                to get access to the full range of Starbucks benefits
+              </p>
+            </div>
+          </div>
+          <div class="footer-explanation">
+            <img src="assets/number-2.jpg" />
+            <div>
+              <h3>Order and pay how you'd like</h3>
+              <p>
+                Use cash, credit/debit card or save some time and pay right
+                through the app. You'll collect stars all ways.
+                <a href="https://www.starbucks.com/rewards#waystopay">
+                  Learn how.</a
+                >
+              </p>
+            </div>
+          </div>
+          <div class="footer-explanation">
+            <img src="assets/number-3.jpg" />
+            <div>
+              <h3>Earn stars, get rewards</h3>
+              <p>
+                As you earn Star, you can redeem them for Rewards- like free
+                food, drinks and more. Start redeeming with as little as 25
+                stars.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="orig-ftr">
+      <p>&copy;Starbucks Website Workshop</p>
+
+      <p class="group-names">By: Ly-Ly, Michel and Umair</p>
+    </footer>
+  </body>
+</html>
diff --git a/page.html b/page.html
diff --git a/queries.css 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;
+  }
+}