Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component using Sass

@sarrietav-dev

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I used clip-path and shape-outside! UPDATE: Fix accessibility issues. Thank @juuviera!

Community feedback

Juveria Dalvi 1,375

@Juveria-Dalvi

Posted

hey.. the accessibility issue says that you should have wrapped all divs in <main> which is the semantic tag ,except for the div with class attribution that should be wrapper in <footer> tag for more details refer w3school.com

0

@sarrietav-dev

Posted

@juuveria So is it okay to do <main class="card>...?

0
Juveria Dalvi 1,375

@Juveria-Dalvi

Posted

@sarrietav-dev that's all you have to do

      <main>
          <img src="assets/bg-pattern-top.svg" alt="Circle top" class="circle circle--top"/>
         <img src="assets/bg-pattern-bottom.svg" alt="Circle bg-pattern-bottom" class="circle circle--bottom"/>
        <div class="card">
       <img src="assets/bg-pattern-card.svg" alt="" class="card__pattern"/>
         <figure class="card__figure">
         <img src="assets/image-victor.jpg" alt="Picture on a man so called Victor" class="card__image" />
       </figure>
       <div class="card__details">
        <div class="user-info">
          <h1 class="user-info__name">Victor Crest</h1>
          <span class="user-info__age">26</span>
          <h2 class="user-info__location">London</h2>
       </div>
       <div class="user-stats">
         <div class="user-stats__stat">
           <div class="quantity">80K</div>
           <div class="label">Followers</div>
         </div>
         <div class="user-stats__stat">
           <div class="quantity">803K</div>
           <div class="label">Likes</div>
         </div>
         <div class="user-stats__stat">
           <div class="quantity">1.4K</div>
           <div class="label">Photos</div>
         </div>
       </div>
     </div>
   </div>
</main>
 </body>```

Marked as helpful

1
Juveria Dalvi 1,375

@Juveria-Dalvi

Posted

@sarrietav-dev welcome it's quite messy I hope you got it.

0

@pikapikamart

Posted

@juuveria Hey Juveria, really great for you giving feedbacks. Just some advise about pasting code, to make it pretty, you could put them in triple backticks. It would look like:

the code is in here

You nest the codes in the backticks. I can't do it here since it will make it code already. But you first: Put 3 backticks, then press enter, then make 3 backticks again. Then you put the code between those, in the middle.

2
Juveria Dalvi 1,375

@Juveria-Dalvi

Posted

@pikamart heyyy thanks

0

Please log in to post a comment

Log in with GitHub
Discord logo

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