Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
9

Gustavo de Camargo Campos

@themegazord200 points

Desenvolvedor Back-End Django

Latest solutions

  • Social proof section


    Gustavo de Camargo Campos•200
    Submitted almost 3 years ago

    0 comments
  • Accordion card


    Gustavo de Camargo Campos•200
    Submitted almost 3 years ago

    0 comments
  • Frontend Mentor - Profile card component


    Gustavo de Camargo Campos•200
    Submitted almost 3 years ago

    0 comments
  • Frontend Mentor - 3-column preview card component


    Gustavo de Camargo Campos•200
    Submitted almost 3 years ago

    1 comment
  • Responsiveness Stats preview card component


    Gustavo de Camargo Campos•200
    Submitted almost 3 years ago

    0 comments
  • Frontend Mentor - Order summary card


    Gustavo de Camargo Campos•200
    Submitted almost 3 years ago

    3 comments
View more solutions

Latest comments

  • MBAZIE LOFFOU Zacharie Arnold•10
    @Zachcopro
    Submitted almost 3 years ago

    flex box

    1
    Gustavo de Camargo Campos•200
    @themegazord
    Posted almost 3 years ago

    Hi, @Zachcopro.

    First, congratulations for your effort and for having managed to finish another exercise with us.

    I saw in your project, that the div was not fully centered in the middle. You can fix this by inserting a min-height: 100vh and a flex-direction: column in your body, as stated below.

    body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    

    I hope I have helped you for your next projects.

    Mark as helpful and give me an up vote if you think this was good for you. Thank you and see you next time.

    Marked as helpful
  • Marta Jo Telkamp•80
    @idlehands1969
    Submitted almost 3 years ago

    My Product Preview Card made with Bootstrap v5.0

    4
    Gustavo de Camargo Campos•200
    @themegazord
    Posted almost 3 years ago

    Hello my dear.

    First of all, congratulations for your effort in finishing your first project here with us :)

    Next, when he says 1440px Desktop and 375px Mobile, it's the size of the screen itself and not the card. The card will have to adapt to all dimensions between 1440px and 375px.

    So your card should follow the following logic:

    375px < your card < 1440px.

    Adaptations will be given responsively, using @media.

    Second, it's ok for you to use Bootstrap, being that it was the only way you could but the ideal was to try with CSS Flex or CSS Grid.

    A tip, for you to center everything in the center, you can use the following:

    body{ display: flex; flex-direction: row; justify-content: center; align-items: center; min height: 100vh; }

    This will make your card stop in the middle, the rest you will adjust according to what is necessary. If you want, I'll leave my repository of this exercise for you to see how it looks.

    Hope this helps.

    If possible, mark as helpful :-)

    It helps me a lot.

    Github: https://github.com/themegazord/Product-Preview-Card-Component Live Site: https://incandescent-phoenix-6d0d26.netlify.app

    Marked as helpful
  • Murilo Pita•60
    @murilopita
    Submitted almost 3 years ago

    Order summary component

    2
    Gustavo de Camargo Campos•200
    @themegazord
    Posted almost 3 years ago

    Boa Murilo, parabéns pela sua entrega :-)

    Marked as helpful
  • Amit Kumar•100
    @amit-kumar-18
    Submitted almost 3 years ago

    Interactive Rating Component

    2
    Gustavo de Camargo Campos•200
    @themegazord
    Posted almost 3 years ago

    Hi Amit Kumar, congratulations on the solution.

    Answering your question, the weird border, you would have to use the border: 1px solid transparent; to 'take off' any border that might be, since we set it to transparent.

    Corresponding to the delay when loading the image, try just creating it via HTML, and just set or not display: none, in the div to disappear and continue respecting display: flex the next time it stays.

    One last tip, the organization of your folders, you can create an assets folder and inside it create two more, with the name css and js and inside each, insert the responsible file for each folder.

    Don't forget to mark it as helpful :-)

  • Gustavo de Camargo Campos•200
    @themegazord
    Submitted almost 3 years ago

    Frontend Mentor - Order summary card

    3
    Gustavo de Camargo Campos•200
    @themegazord
    Posted almost 3 years ago

    Eu cheguei a colocar o media query, será que não funcionou no Netlify?

    @media screen and (max-width: 450px) {

    body {
        background-image: url('../../images/pattern-background-mobile.svg');
        background-repeat: no-repeat;
        background-size: 100vw;
    }
    
    .content {
        width: 350px;
    }
    

    }

  • P
    Haydn Kerr•555
    @haydnkerr
    Submitted almost 3 years ago

    Mobile first product card

    1
    Gustavo de Camargo Campos•200
    @themegazord
    Posted almost 3 years ago

    Hi Haydn Kerr, congratulations on the solution.

    I have some scores to make for you to improve more and more.

    1st Use classes and id in your HTML so that you can use them in CSS, this may not have been a problem, but imagine in a larger project, if you are guided only by HTML tags to assemble your CSS, you will become a monster kkkkk.

    2nd In your CSS, it might be easier if you use :root and declare the color variables for your project, so instead of writing the hsl every time you tell the browser that it will be called for example --primary -white or the color you want.

    Keep it up, you only tend to grow, congratulations.

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub