Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Bootsrap 5 - Profile card

Mahmood 1,070

@MahmoodHashem

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

In this challenge, I learned several valuable things about CSS:

  1. The background property: This versatile property allows you to apply multiple background images, position values, and other settings all in a single declaration. For example, you can set multiple background images, specify their positioning, and even control the size andrepeat behavior. This can be very powerful for creating complex and visually-interesting backgrounds.

  2. The background-position property: I gained a deeper understanding of this property, which controls the initial position of a background image. I learned thatit can take various values like keywords (e.g., top, bottom, left, right, center), lengths (e.g., 10px 20px), or percentages (e.g., 50% 30%). This allows for precise control overwherethe background image is placed within the element.In this challenge, I learned several valuable things about CSS.

  3. Bootstrap card footer styles: I noticed thatinthe Bootstrap CSS file, the footer class within a card element has the last-child pseudo-class applied. This means thatthe styles will only be applied tothelast child element within the card's footer. This is a common technique used to target specific elements within a complex structure, like a card layout, and apply custom styles.

What specific areas of your project would you like help with?

Any feedback is appreciated

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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