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
- [Overview](#overview)
- [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)
- [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)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
**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
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.

View File

@ -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;
}

View File

@ -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">