Submitted about 3 years ago

Profile card component with HTML&CSS

Esther Guo•40

@Esther-Guo

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Can't let the image stretch to fill the entire div (also not knowing how the height of my div is calculated).

<div class="card-top">
      <img src="./images/bg-pattern-card.svg#svgView(preserveAspectRatio(none))" alt="card background"/>
    </div>

.card-top {
    width: 100%;
}

.card-top img {
    width: 100%;
    height: auto; 
    border-radius: 10px 10px 0 0;

    object-fit: contain;
}

Community feedback

CyrusKabir•1,885
@CyrusKabirPosted about 3 years ago
hello my dear friend ♥ actually your problems it's so easy to solve i don't want tell here you can easily find out your self by searching this term "display inline"

try to use more semantic elements like <main> , <section> , <footer > , etc

your font size in category it's tooo small it's very hard to read
Marked as helpful
0
Esther Guo•40
@Esther-GuoPosted about 3 years ago
@CyrusKabir Thank you! I've fixed the issue and learned new stuff! I'll try for more semantic elements for the next project :)
1

Please log in to post a comment

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