Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Profile card using Flex and CSS Positioning

accessibility
MeghaS4831•30
@MeghaS4831
A solution to the Profile card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hi!

This is my second challenge and I'm super excited to explore further :D In this challenge, I have aimed to use semantic elements wherever I felt it was needed. Hope it is correct.

I also wanted to understand if there is a way to change the svg images background using CSS? For instance, I used an svg file as <body> background but I wanted the colors to be different than ones currently in use.

Feel free to share your best practices to enhance the code efficiency! :)

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vanza Setia•27,715
    @vanzasetia
    Posted almost 2 years ago

    Hi, MeghaS4831! 👋

    For those circles, I recommend showing them as pseudo-elements. You can see Grace's solution for your reference.

    Frontend Mentor | Profile card with pseudo backgrounds and accessible list coding challenge solution

    This is another way to help you position those circles.

    If you want to change the colors of those circles, you need to change the value of the fill property in the SVG file. But, I think that can be tricky because the colors are gradient colors.

    Some suggestions:

    • Alternative text should be in a readable format: Alternative text for images should not be hyphenated.
    • Decorative images should not have alternative text: Not every image needs alternative text. This will tell the screen reader to skip over the decorative images. As a result, it saves screen reader users time navigating the page. For your information, decorative images are images that do not add any information and serve only aesthetic purposes.
    • No inline styling: Move all the styling to the external stylesheet—style="font-size: 18px; font-weight: 700". Separating the HTML and the CSS can make it easier to maintain the code.
    • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

    Avoid id selectors: Do not use id selectors for styling. There are two reasons for not using ID’s to style content:

    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.
    • Learn more — What the ID attribute is REALLY for

    I hope this helps. Happy coding! 👍

    Marked as helpful
  • Abhinav•240
    @IamAbhiDev
    Posted almost 2 years ago

    Hey there 👋. Congratulations on completing the challenge! 🎉

    You did a great job completing this challenge! 😃 Here are a few recommendations that I have to help you level up yourself and improve your code -

    GitHub 🧑‍💻:

    • It seems like you're new to using Git & GitHub as your version control and code hosting 🙋‍♂️ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎
    • I would recommend you watch this tutorial covering both Git and GitHub - Complete Git and GitHub Tutorial

    ‎Background 📸: ‎ ‎

    • To position the background the way you desire, you can use the background-position, and the background-repeat property, and then add the fill the color using the background-color property as follows:
    body{
    background: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    background-color: var(--dark-cyan);
    }
    

    Responsive Design 🎨:

    • You can use media queries to make your design responsive and adapt to different screen sizes. Define breakpoints and adjust styles accordingly to ensure a consistent and user-friendly experience across devices. Always go for the mobile-first approach while designing and developing a responsive website.

    I hope you find this helpful 😄 Above all, the solution submitted is good!

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub