Skip to content
Submitted 10 months ago

CSS Flex, Bem

Hugo Sanchez•270
@HunigoleSan
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

What was difficult for you while building the project? I haven't had any problems. What areas of your code are you unsure about? all the code is very secure and adaptive. Do you have any questions about best practices? at the moment not yet.

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 10 months ago

    Hello @HunigoleSan!

    Your solution looks great!

    You don't need separate containers to create that background pattern. It's a bit tricky, but here's how you can do it:

    📌 Add this to the body:

      background-color: var(--Dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;

    I hope it helps!

    Other than that, you did an excelent job!

    1
  • Velin Dankov•160
    @IvelinDankovPosted 10 months ago

    Hi, Hugo Sanchez Valencia ! You should to use some semantic text. Maybe to wrap your hole content in one main tag. H1 you can use as well instead of one 'P'. But anyway good job. Continue to develop.

    1

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