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 TailwindCss

Abdou 20

@AbdoB3

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 found difficulties when adding the background images. If you have any suggestions

Community feedback

Bryan Li 3,550

@Zy8712

Posted

Hi there! Your site looks pretty good. To add in the circles using Tailwind CSS and position them, you would need to do something like this:

<div class="bg-theme-dark-cyan bg-no-repeat bg-[url('./images/bg-pattern-top.svg'), url('./images/bg-pattern-bottom.svg')] bg-[right 52vw bottom 35vh, left 48vw top 52vh]"></div>

One other thing I'd suggest you to do is to extend the colors in your tailwind config file so you get the correct cyan colour which should be: hsl(185, 75%, 39%).

Hope you find this feedback useful 👍

0

Abdou 20

@AbdoB3

Posted

@Zy8712 Thank you so much that is very helpful!!

0

@lisztomania23

Posted

Could you please provide a walkthrough on how to run this locally?

0

Abdou 20

@AbdoB3

Posted

@lisztomania23 Yes sure I will add it to the README file

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