finished mobile version

projects/FrontendMentor/newbie/equalizer-landing-page/README.md

@@ -4,6 +4,8 @@ This is a solution to the [Equalizer landing page challenge on Frontend Mentor](
 
 ## Table of contents
 
+- [Frontend Mentor - Equalizer landing page solution](#frontend-mentor---equalizer-landing-page-solution)
+  - [Table of contents](#table-of-contents)
   - [Overview](#overview)
     - [The challenge](#the-challenge)
     - [Screenshot](#screenshot)
@@ -91,6 +93,12 @@ Use this section to outline areas that you want to continue focusing on in futur
 
 ### Useful resources
 
+This article for reminding me how to do a fake background card
+
+https://chenhuijing.com/blog/css-card-shadow-effects/#%F0%9F%A6%8A
+
+
+
 - [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
 - [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
 

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

@@ -21,7 +21,7 @@
     --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-off-white: hsl(20, 33%, 98%);
     --col-black: hsla(244, 23%, 12%, 1);
     /* Typography */
     --fw-400: 400;
@@ -74,12 +74,16 @@ body {
     min-height: 100vh;
 
     font-family: "IBM Plex Sans", sans-serif;
+
+    background-image: var(--image-background);
+    background-repeat: no-repeat;
+    background-position: 1.875rem -16.875rem;
+
+    background-color: #f2f2f2;
 }
 
 header {
     position: relative;
-    background-position: right;
-    background-image: var(--image-background);
 
     padding: 0 1.5rem;
 }
@@ -107,13 +111,38 @@ header {
 }
 .product-card {
     margin-top: 34.125rem; /* ehh */
-    padding: 3rem 2.25rem 3rem 2.25rem;
+    padding: 3rem 2.25rem 2.875rem 2.25rem;
 
     color: var(--col-off-white);
     background-color: var(--col-orangey-red);
 
     border-radius: var(--border-radius);
+
+    position: relative;
 }
+
+.product-card__image {
+    position: absolute;
+    width: 208.97px;
+    margin: -33rem 3rem;
+}
+
+.product-card::before {
+    position: absolute;
+    z-index: -1;
+    background-color: #191826;
+    background-image: url(../assets/bg-pattern-2.svg);
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: 17.5rem;
+    top: -23.8rem;
+    left: -0px;
+    content: " ";
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius);
+}
+
 .product-card__header {
     font-size: var(--fs-header-card);
     line-height: var(--lh-header-card);
@@ -189,7 +218,7 @@ header {
 }
 
 footer {
-    margin-top: 3.75rem; /* per design 4rem; */
+    margin-top: 3.875rem; /* per design 4rem; */
 
     padding: 0 1.5rem;
 }

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

@@ -29,6 +29,8 @@
 
     </section>
     <section class="product-card">
+      <img class="product-card__image" src="assets/illustration-app.png" alt="Image of the Equalizer in use"
+        aria-hidden="true">
       <h2 class="product-card__header">Premium EQ</h2>
 
       <p class="product-card__body">