finished mobile version

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

@@ -1,20 +1,22 @@
 # Frontend Mentor - Equalizer landing page solution
 
-This is a solution to the [Equalizer landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 
+This is a solution to the [Equalizer landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
 
 ## Table of contents
 
-- [Overview](#overview)
+- [Frontend Mentor - Equalizer landing page solution](#frontend-mentor---equalizer-landing-page-solution)
-  - [The challenge](#the-challenge)
+  - [Table of contents](#table-of-contents)
-  - [Screenshot](#screenshot)
+  - [Overview](#overview)
-  - [Links](#links)
+    - [The challenge](#the-challenge)
-- [My process](#my-process)
+    - [Screenshot](#screenshot)
-  - [Built with](#built-with)
+    - [Links](#links)
-  - [What I learned](#what-i-learned)
+  - [My process](#my-process)
-  - [Continued development](#continued-development)
+    - [Built with](#built-with)
-  - [Useful resources](#useful-resources)
+    - [What I learned](#what-i-learned)
-- [Author](#author)
+    - [Continued development](#continued-development)
-- [Acknowledgments](#acknowledgments)
+    - [Useful resources](#useful-resources)
+  - [Author](#author)
+  - [Acknowledgments](#acknowledgments)
 
 **Note: Delete this note and update the table of contents based on what sections you keep.**
 
@@ -33,7 +35,7 @@ Users should be able to:
 
 Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
 
-Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. 
+Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it.
 
 Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
 
@@ -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">