finished mobile version
This commit is contained in:
parent
43f4096b2d
commit
616f84c7d1
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue