Skip to content
Submitted about 2 years ago

Profile-Card-Component

Taiwo•40
@fawzab
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

please kindly comment and correct my work.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @fawzab, Congratulations on completing this challenge!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    1.You need to include the title of your PAGE. Do that inserting in the <head> the tag <title> → <title>Profile Card - Front End Mentor</title>

    2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

    2.First load to your repository the circle images.Note that to add the circles (bottom/top) in the background, the best way is by using background-image to manage it since adding them to the body you make sure it will be under everything, see the properties below and see that the comma inside each properties declare the single modification for each circle separated.

    body { background-color: hsl(185deg, 75%, 39%); background-image: url(bg-pattern-top.svg), url(bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: top -500px left -400px, bottom -700px right -250px; font-size: 18px; background-color: hsl(185, 75%, 39%); display: flex; min-height: 100vh; justify-content: center; align-items: center; }

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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