From 616f84c7d129f415fe574950b22fde8e70c4b49f Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Wed, 12 Oct 2022 16:47:33 +0100 Subject: [PATCH] finished mobile version --- .../newbie/equalizer-landing-page/README.md | 34 +++++++++------- .../equalizer-landing-page/css/style.css | 39 ++++++++++++++++--- .../newbie/equalizer-landing-page/index.html | 2 + 3 files changed, 57 insertions(+), 18 deletions(-) diff --git a/projects/FrontendMentor/newbie/equalizer-landing-page/README.md b/projects/FrontendMentor/newbie/equalizer-landing-page/README.md index c2a6a1a..e829087 100644 --- a/projects/FrontendMentor/newbie/equalizer-landing-page/README.md +++ b/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) - - [The challenge](#the-challenge) - - [Screenshot](#screenshot) - - [Links](#links) -- [My process](#my-process) - - [Built with](#built-with) - - [What I learned](#what-i-learned) - - [Continued development](#continued-development) - - [Useful resources](#useful-resources) -- [Author](#author) -- [Acknowledgments](#acknowledgments) +- [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) + - [Links](#links) + - [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [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. diff --git a/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css b/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css index 80ad819..e8893f1 100644 --- a/projects/FrontendMentor/newbie/equalizer-landing-page/css/style.css +++ b/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; } diff --git a/projects/FrontendMentor/newbie/equalizer-landing-page/index.html b/projects/FrontendMentor/newbie/equalizer-landing-page/index.html index 926def8..b948268 100644 --- a/projects/FrontendMentor/newbie/equalizer-landing-page/index.html +++ b/projects/FrontendMentor/newbie/equalizer-landing-page/index.html @@ -29,6 +29,8 @@
+

Premium EQ