Latest solutions
Latest comments
- @scorpion61@sonickonic
Hey 👋 Congrats on submitting your first challenge! Nice work the
:hover
effect is super cool! 🚀On a widescreen, the cards are extremely wide did you consider
max-width
property?Don't forget to correct the HTML ISSUES, they are easy to solve)
- @JALCH-1512@sonickonic
Hey Javier! Nice work the screenshot looks awesome! 😎
Your code looks good overall, I have just a few observations:
- You've currently got multiple
<p>
elements, where different HTML elements may be more appropriate.
- The
<p>
defines a paragraph. The best use for it will be in the "Join our community" section, instead of the<div>
. - In the "Why Us" section, instead of using
<p>
twice, a<h2>
for the heading and<ul>
for the list of features will suit better for semantic and accessibility
- CSS reset will set the whole page to 0, for a fresh clean start, instead of setting
margin:0;
to a specific element.
* { margin:0; padding:0; }
Have you tried a Mobile-first approach? It's quite a common workflow, you starting with the mobile version and switch to
min-width
media queries instead ofmax-width
. It helps to simplify the CSS code) - You've currently got multiple
- @eriandev@sonickonic
Nice work, it looks great and scales down really good to mobile. Well done! 👍
- @aayush182@sonickonic
Congrats on submitting your first solution! it looks amazing!
You've currently got two h1 elements, it will be better to use it once as it can cause accessibility issues. Two ways to solve it:
- Wrap all of that text as a single h1 and use a span element inside it to separate the text.
- Use h1 for the main heading and h2 for the sub-title.
Although it is a pixel perfect solution for the wide-screen, the mobile version is slightly off. Try next time to use min-width media queries instead of max-width. Starting from the mobile-first can lead to more simple solution)
Good job!