Submitted almost 3 years ago

Four card feature section using Bootstrap 5 & Custom CSS

Sky• 945

@Skyz03

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I successfully finished this challenge using Bootstrap 5 and Custom CSS. Any feedback to upgrade this to next level is highly appreciated. Thanks in advance ✌.

Community feedback

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Sky! 👋 Well done on this challenge! Here's a few things I'd suggest you to take a look at:

You should wrap your main heading into one heading element instead of using two. If you want to style some text within that heading other way just wrapp that part into span. Like this - <h1>Reliable, efficient delivery <span>Powered by Technology</span></h1>
Change the alt attributes for the .card-icon icons, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.

Keep up the good work! 💪

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko Thanks a lot ... Will surely keep those in mind .👍

Account Deleted

maybe you can use col-md-? for tablets.

Sky• 945

@Skyz03

Posted almost 3 years ago

@gurkanozer Thanks for the idea but the above mentioned comment codes worked perfect for me. 👍 Keep up the Good Work !!

Patrick• 14,325

@palgramming

Posted almost 3 years ago

when the design is at 1020px wide the icons in each card are trying to fly out of the card

Sky• 945

@Skyz03

Posted almost 3 years ago

@palgramming yeah thanks , I have noticed that ... What would be the best fix for that ... Is it using media queries ?

tediko• 6,580

@tediko

Posted almost 3 years ago

@Skyz03 Hi! I all you have to do is remove this margin-left: 220px from .card-icon and then add align-self: end so they will be sticking to bottom right of your container :)

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko Sure I will give it a try ... Thanks for the information.

tediko• 6,580

@tediko

Posted almost 3 years ago

@Skyz03 There's also another solution. Not sure if you're familiar with pseudo-elements. You can set position: relative to your .card container and set ::before pseudo-element on that card. Apply position: absolute, content: "url('image.jpg')", bottom: 0, right: 0. This way you'll set that image in CSS.

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko I am aware of those like have ideas of hover ... But didn't thought this could be applied in such a way. Thank you for sharing your knowledge 😃.

Sky• 945

@Skyz03

Posted almost 3 years ago

@tediko Thanks a lot. The codes work perfectly plus responsive.

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