Skip to content
Submitted almost 3 years ago

Profile card component challenge hub using flex

Roshan K.C•150
@roshankcpkr
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

Hoping for suggestions.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted almost 3 years ago

    Hello @roshankcpkr,

    I have few suggestions regarding your solution:

    • There should be two landmark components as children of the body element - a main (which will be the component ) and a footer (which will be the attribution).<Footer> should be in the <main >read more about A simplified web page, might look something like this:

    • Alt text for the profile image shouldn't be profile. Read more how to write an alt text

    • Use an ordered list <ul> to wrap class="social-count".

    • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like Followers should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

    • To center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body>(no need for another container .card)like this:

    body{
display:flex;
align-items: center;
justify-content: center;
width: 100%; /*If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars. */
min-height: 100vh;

    Overall , your solution looks good .Hopefully this feedback helps.

    Marked as helpful
    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! Roshan K.C Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

    0
  • Dev Rathore•2,600
    @GitHub-dev12345Posted almost 3 years ago

    Use this code to increase the size of card : 😊 used this CSS Property in your card to increase and decrease the size of card:

    1.In Card design CSS Code Used this:

    transform : scale(0.8); this property decrease the size of card. 😉

    large size for increase the number of scale & small size for decrease the number of scale

    I hope you find this 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