finished mobile version

This commit is contained in:
Robert McGovern 2022-10-12 16:47:33 +01:00
parent 43f4096b2d
commit 616f84c7d1
3 changed files with 57 additions and 18 deletions

View File

@ -4,17 +4,19 @@ This is a solution to the [Equalizer landing page challenge on Frontend Mentor](
## Table of contents ## 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.** **Note: Delete this note and update the table of contents based on what sections you keep.**
@ -91,6 +93,12 @@ Use this section to outline areas that you want to continue focusing on in futur
### Useful resources ### 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 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. - [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.

View File

@ -21,7 +21,7 @@
--col-cyan: hsla(177, 68%, 64%, 1); --col-cyan: hsla(177, 68%, 64%, 1);
--col-orange: hsla(33, 100%, 70%, 1); --col-orange: hsla(33, 100%, 70%, 1);
--col-orangey-red: hsla(12, 94%, 65%, 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); --col-black: hsla(244, 23%, 12%, 1);
/* Typography */ /* Typography */
--fw-400: 400; --fw-400: 400;
@ -74,12 +74,16 @@ body {
min-height: 100vh; min-height: 100vh;
font-family: "IBM Plex Sans", sans-serif; 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 { header {
position: relative; position: relative;
background-position: right;
background-image: var(--image-background);
padding: 0 1.5rem; padding: 0 1.5rem;
} }
@ -107,13 +111,38 @@ header {
} }
.product-card { .product-card {
margin-top: 34.125rem; /* ehh */ 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); color: var(--col-off-white);
background-color: var(--col-orangey-red); background-color: var(--col-orangey-red);
border-radius: var(--border-radius); 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 { .product-card__header {
font-size: var(--fs-header-card); font-size: var(--fs-header-card);
line-height: var(--lh-header-card); line-height: var(--lh-header-card);
@ -189,7 +218,7 @@ header {
} }
footer { footer {
margin-top: 3.75rem; /* per design 4rem; */ margin-top: 3.875rem; /* per design 4rem; */
padding: 0 1.5rem; padding: 0 1.5rem;
} }

View File

@ -29,6 +29,8 @@
</section> </section>
<section class="product-card"> <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> <h2 class="product-card__header">Premium EQ</h2>
<p class="product-card__body"> <p class="product-card__body">