Submitted almost 2 years ago

Four card feature section

Christopher Alvarez• 430

@Chrisesbueno

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @Chrisesbueno, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

1.I saw that for some properties you’ve used rem and for others px. In this case, it is better to use only one kind of unit to have a better organization for your code. relative units as rem or em have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well. 2.The box-shadow is a bit too strong, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

✌️ I hope this helps you and happy coding!

Marked as helpful

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey there! Here are some suggestions to help improve your code:

To give your HTML code structure, you want to set up your code in the following manner:

<body>
   <header></header>
   <main>
      <section>
            <div class="supervisor-card"></div>
            <div class="team-card"></div>
            <div class="karma-card"></div>
            <div class="calculator-card"></div>
      </section>
   </main>
</body>

The Header Element represents introductory content.

The Main Element identifies the main content of the document.

The Section Element can be used to wrap content that is related to each other.

And since none of the cards make sense on their own, a simple Div will do for each card.

The “Reliable, efficient delivery Powered by Technology” is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.
Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.
Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord