Hello mate 👋, thanks for your interest in being part of Super.mx.
Here you are going to find the instructions for the CSS/Markup challenge.
We give you a new screen for our new life insurance flow where you can see the pricing options from each insurance type.
Your Job is to markup (HTML and CSS) the mobile screen.
You can inspect the Figma file in order to get the font sizes, colors, spacing, and dimensions but have in mind that we work for a lot of devices so try to use the most scalable units possible.
Some considerations to have in mind:
- We have a "switch" controller to switch between insurance types.
- We use the Google font "Outfit".
- If you have time, it would be awesome (and extra points) to have the desktop version as well.
- You can use Tailwind if you want but is not required.
- The minimum device size that we want to address is the iPhone 5.
- Ideally make the markup as semantic as possible and consider the a11y rules.
Once you finished the challenge, please make a PR to this repo.
Figma File: