98 lines
3.7 KiB
Markdown
98 lines
3.7 KiB
Markdown
# 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.
|
|
|
|
## Table of contents
|
|
|
|
- [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.**
|
|
|
|
## Overview
|
|
|
|
### The challenge
|
|
|
|
Users should be able to:
|
|
|
|
- View the optimal layout depending on their device's screen size
|
|
- See hover states for interactive elements
|
|
|
|
### Screenshot
|
|
|
|
|
|
|
|
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.
|
|
|
|
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
|
|
|
|
**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
|
|
|
|
### Links
|
|
|
|
- Solution URL: [Add solution URL here](https://your-solution-url.com)
|
|
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
|
|
|
|
## My process
|
|
|
|
### Built with
|
|
|
|
- Semantic HTML5 markup
|
|
- CSS custom properties
|
|
- Flexbox
|
|
- CSS Grid
|
|
- Mobile-first workflow
|
|
- [React](https://reactjs.org/) - JS library
|
|
- [Next.js](https://nextjs.org/) - React framework
|
|
- [Styled Components](https://styled-components.com/) - For styles
|
|
|
|
**Note: These are just examples. Delete this note and replace the list above with your own choices**
|
|
|
|
### What I learned
|
|
|
|
To only be so beholden to the design. If I was in a position to I would be actively going to the designer to ask why certain padding areas are uneven (for instance the product card, the left/right padding is odd / unbalanced. Particularly around the price block, where for tablet and mobile its more indented)
|
|
|
|
|
|
### Continued development
|
|
|
|
|
|
### 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.
|
|
|
|
## Author
|
|
|
|
- Website - [Robert McGovern](https://tarasis.net)
|
|
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
|
|
- Twitter - [@tarasis](https://www.twitter.com/tarasis)
|
|
|
|
## Acknowledgments
|
|
|
|
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
|
|
|
|
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
|
|
|
|
----
|
|
|
|
NOTES
|
|
|
|
Lighthouse notes that the offwhite on redish isn't a good contract. |