mobile version mostly styled

projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css

@@ -17,6 +17,57 @@
 }
 
 :root {
+    /* Colors */
+    --col-cyan: hsla(177, 68%, 64%, 1);
+    --col-orange: hsla(33, 100%, 70%, 1);
+    --col-orangey-red: hsla(12, 94%, 65%, 1);
+    --col-off-white: hsla(20, 33%, 98%, 1);
+    --col-black: hsla(244, 23%, 12%, 1);
+    /* Typography */
+    --fw-400: 400;
+    --fw-700: 700;
+
+    --fs-header-page: 2.5rem;
+    --lh-header-page: 3rem;
+    --ls-header-page: -0.0284rem;
+    --fw-header-page: var(--fw-700);
+
+    --fs-header-card: 2rem;
+    --lh-header-card: 2.5rem;
+    --fw-header-card: var(--fw-700);
+
+    --fs-body-page: 1rem;
+    --lh-body-page: 1.625rem;
+    --fw-body-page: var(--fw-400);
+
+    --fs-body-card: 1.125rem;
+    --lh-body-card: 1.75rem;
+    --fw-body-card: var(--fw-400);
+
+    --fs-footer: 1rem;
+    --lh-footer: 1.625rem;
+    --fw-footer: var(--fw-400);
+
+    --fs-price: 4.0625rem;
+    --lh-price: 3.25rem;
+    --fw-price: var(--fw-700);
+
+    --fs-term: 1.25rem;
+    --lh-term: 2rem;
+    --fw-term: var(--fw-400);
+    --ls-term: -0.0125rem;
+
+    --fs-button: 1.125rem;
+    --lh-button: 2rem;
+    --ls-button: -0.0112rem;
+    --fw-button: var(--fw-700);
+
+    /* Other */
+    --image-background: url(../assets/bg-main-mobile.png);
+    --image-page-background: none;
+    --image-card-background: url(../assets/bg-pattern-2.svg);
+
+    --border-radius: 0.75rem;
 }
 
 body {
@@ -25,8 +76,169 @@ body {
     font-family: "IBM Plex Sans", sans-serif;
 }
 
+header {
+    position: relative;
+    background-position: right;
+    background-image: var(--image-background);
+
+    padding: 0 1.5rem;
+}
+
+.logo {
+    margin-top: 2.5rem;
+}
+.intro-section {
+    margin-top: 3.6875rem; /* per design ...4rem; */
+
+    padding: 0 1.5rem;
+}
+.page-header {
+    font-size: var(--fs-header-page);
+    line-height: var(--lh-header-page);
+    letter-spacing: var(--ls-header-page);
+    font-weight: var(--fw-header-page);
+}
+.main-body {
+    margin-top: 1.25rem;
+
+    font-size: var(--fs-body-page);
+    line-height: var(--lh-body-page);
+    font-weight: var(--fw-body-page);
+}
+.product-card {
+    margin-top: 34.125rem; /* ehh */
+    padding: 3rem 2.25rem 3rem 2.25rem;
+
+    color: var(--col-off-white);
+    background-color: var(--col-orangey-red);
+
+    border-radius: var(--border-radius);
+}
+.product-card__header {
+    font-size: var(--fs-header-card);
+    line-height: var(--lh-header-card);
+    font-weight: var(--fw-header-card);
+}
+.product-card__body {
+    margin-top: 0.75rem;
+
+    font-size: var(--fs-body-card);
+    line-height: var(--lh-body-card);
+    font-weight: var(--fw-body-card);
+}
+.price-block {
+    margin-top: 2.25rem;
+    padding-left: 0.5rem;
+
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+.price-block__price {
+    font-size: var(--fs-price);
+    line-height: var(--lh-price);
+    font-weight: var(--fw-price);
+}
+.price-block__term {
+    font-size: var(--fs-term);
+    line-height: var(--lh-term);
+    letter-spacing: var(--ls-term);
+    font-weight: var(--fw-term);
+}
+.button-block {
+    margin-top: 2rem;
+    padding-left: 0.5rem;
+}
+
+.button + .button {
+    margin-top: 1rem;
+}
+
+.button {
+    font-size: var(--fs-button);
+    line-height: var(--lh-button);
+    font-weight: var(--fw-button);
+
+    text-decoration: none;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    padding: 0.9375rem 0;
+
+    border-radius: var(--border-radius);
+}
+
+.button-ios {
+    background-color: var(--col-black);
+    color: var(--col-off-white);
+}
+
+.button-android {
+    background-color: var(--col-off-white);
+    color: var(--col-black);
+}
+
+.button-ios:is(:hover, :focus) {
+    background-color: var(--col-cyan);
+}
+.button-android:is(:hover, :focus) {
+    background-color: var(--col-orange);
+}
+
+footer {
+    margin-top: 3.75rem; /* per design 4rem; */
+
+    padding: 0 1.5rem;
+}
+
+.logo-footer {
+    margin-bottom: 1.8125rem; /* per design 2rem; */
+}
+.footer__body {
+    font-size: var(--fs-footer);
+    font-weight: var(--fw-footer);
+    line-height: var(--lh-footer);
+    width: 30ch;
+
+    margin-bottom: 4rem;
+}
+.footer__email {
+    font-weight: var(--fw-700);
+}
+.social-image-block {
+    display: flex;
+    gap: 1.25rem;
+}
+
 @media screen and (min-width: 700px) {
+    :root {
+        --fs-header-page: 4rem;
+        --lh-header-page: 4rem;
+        --ls-header-page: -0.0456rem;
+
+        --fs-body-page: 1.125rem;
+        --lh-body-page: 1.75rem;
+
+        --image-background: url(../assets/bg-main-tablet.png);
+        --image-page-background: url(../assets/bg-pattern-1.svg);
+    }
 }
 
 @media screen and (min-width: 1400px) {
+    :root {
+        --fs-header-page: 5.5rem;
+        --lh-header-page: 5.5rem;
+        --ls-header-page: -0.0625rem;
+
+        --fs-header-card: 2.5rem;
+        --lh-header-card: 3.25rem;
+
+        --fs-body: 1.25rem;
+        --lh-body: 2.125rem;
+
+        --image-background: url(../assets/bg-main-desktop.png);
+    }
 }

projects/FrontendMentor/newbie/equalizer-landing-page/index.html

@@ -14,35 +14,39 @@
 <body>
 
   <header>
-    <img src="assets/logo.svg" alt="equalizer company logo">
+    <img class="logo" src="assets/logo.svg" alt="equalizer company logo">
   </header>
 
   <main>
-    <section>
+    <section class="intro-section">
-      <h1>We make your music sound extraordinary.</h1>
+      <h1 class="page-header">We make your music sound extraordinary.</h1>
 
-      <p>
+      <p class="main-body">
         A system audio equalizer specifically designed for Android and iOS. Freely tune the
         way your music sounds with a professional grade parametric EQ & volume mixer. Control
         bass, mids, treble, gain control, reverb, and more!
       </p>
 
     </section>
-    <section>
+    <section class="product-card">
-      <h2>Premium EQ</h2>
+      <h2 class="product-card__header">Premium EQ</h2>
 
-      <p>
+      <p class="product-card__body">
         Get expert-level control with a robust equalizer, volume mixer, and spatial audio. Take
         your listening experience to a whole new level and access all our incredible features!
       </p>
 
-      <div class="price-block">
+      <p class="price-block">
-        $4 <span>/ month</span>
+        <span class="price-block__price">$4</span> <span class="price-block__term">/ month</span>
-      </div>
+      </p>
 
       <div class="button-block">
-        <a href="#">iOS Download</a>
+        <a class="button button-ios" href="#">
-        <a href="#">Android Download</a>
+          <img src="assets/icon-apple.svg" alt="Apple Logo" aria-hidden="true">
+          iOS Download</a>
+        <a class="button button-android" href="#">
+          <img src="assets/icon-android.svg" alt="Android Logo" aria-hidden="true">
+          Android Download</a>
       </div>
     </section>
   </main>
@@ -50,11 +54,12 @@
 
   <footer>
 
-    <img src="assets/logo.svg" alt="equalizer company logo">
+    <img class="logo-footer" src="assets/logo.svg" alt="equalizer company logo">
 
-    <p>
+    <p class="footer__body">
       All rights reserved © Equalizer 2021
-      Have any problems? Contact us via social media or email us at <span>equalizer@example.com</span>
+      Have any problems? Contact us via social media or email us at <span
+        class="footer__email">equalizer@example.com</span>
     </p>
 
     <div class="social-image-block">