Skip to content
Submitted over 2 years ago

profile-card-component-main

Abdelrahman Khaled•280
@Abdelrahman0Khaled
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

how can i remove the space between personal img and border (border-radius ..right side..) . and how can i put the background images (svg) with best practice because its takes a lot of time with me . please feel free in feed back , thank you

Community feedback

  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @Abdelrahman0Khaled you did a great job, it looks awesome but i would suggest to look after accessibility. There are some points to remember:- • There should be one heading tag in a web page for screen reader users, if its unused then set its font size to 0. • There should be one main landmark, wrap all the contents inside it like this <body><main></main></body> Hope it adds to you learning:)

    Marked as helpful
    0
  • Mohammed Lahboub•570
    @mohammedlahboubPosted over 2 years ago

    Hi @Abdelrahman0Khaled your solution look fantastic , for the svg background patterns i used them as background-image in the body like this :

    body {

    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);

    background-repeat: no-repeat, no-repeat;

    background-position: right 60vw bottom 39vh, left 60vw top 39vh; }

    You could check my solution for more details . I hope this saves you some time .

    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