Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
33
Comments
5

Gabriel Crispim

@sirbiel100Recife, Brazil.520 points

Webdeveloper: - JS / ReactJs / Next Js - CSS / SASS | SCSS - HTML

Latest solutions

  • Recipe Page | HTML & SASS

    #sass/scss

    Gabriel Crispim•520
    Submitted about 3 hours ago

    0 comments
  • Rock Paper Scissor w/ PVP mode [local] | Next.js and SASS

    #next#react#sass/scss

    Gabriel Crispim•520
    Submitted 27 days ago

    I know there are better ways to write my code cleaner but I just don't know how, I would love you to help me in that =)


    0 comments
  • Ecommerce Product Page | Next.js and SCSS

    #react#sass/scss#next

    Gabriel Crispim•520
    Submitted 7 months ago

    0 comments
  • FAQ Accordion | Vanilla JS


    Gabriel Crispim•520
    Submitted 8 months ago

    0 comments
  • Todo Applcation | Nextjs, Supabase and SCSS

    #next#react#supabase#sass/scss

    Gabriel Crispim•520
    Submitted 8 months ago

    I would like for the most help on the good practices of folder organization.


    1 comment
  • Huddle Landing Page | Angular and SCSS

    #angular#sass/scss

    Gabriel Crispim•520
    Submitted 11 months ago

    I would like to have a better help with Angular, if someone could give me some advices of how to use it better it would be a great advance in my learning!


    1 comment
View more solutions

Latest comments

  • Vohnyk•10
    @vohnyk-vohnyk
    Submitted about 5 hours ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I built the entire project from scratch using only semantic HTML and pure CSS. I paid close attention to the style guide and replicated the design as closely as possible. It was a great way to practice layout, typography, and consistency.

    Next time, I’d spend more time planning the HTML structure before writing the CSS, and I’d like to explore using CSS variables and media queries earlier in the process.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges I faced was matching the design exactly without access to Figma - especially getting the correct spacing, font sizes, and colors just by eye. I had to rely on the style guide and make lots of small visual adjustments.

    Another difficulty was understanding font weights and how to load and apply them correctly with Google Fonts. At first, some text looked too bold or too light, but I figured out the correct weights (400, 600, 700) and used them consistently.

    Lastly, keeping the code clean and structured was a challenge, but I used semantic HTML and clear class names to stay organized.

    What specific areas of your project would you like help with?

    I'd really appreciate feedback on my spacing between sections and the responsiveness of the layout, especially on smaller screens. I'm also unsure if I used the best HTML structure for accessibility and semantics, so any suggestions in that area would be helpful.

    Additionally, I'm open to advice on organizing my CSS better or writing more reusable styles.

    Responsive Recipe Page | HTML + CSS (Outfit & Young Serif)

    1
    Gabriel Crispim•520
    @sirbiel100
    Posted about 3 hours ago

    Nicely done brother! One thing I would like to add: Pay attention to the background color, notice that on design it's white not light brown. All the rest is good, keep going! =)

  • Dylan Heslop•2,440
    @dylan-dot-c
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Glad I was able to make the background icons flexible and using the HTML template tag to help making the js code better.

    I would definitely upgrade the js code because it's not as efficient as I would like it to be.

    What specific areas of your project would you like help with?

    Making it more accessible and optimizing the js code.

    Responsive Time Tracking Dashboard | HTML CSS JS

    2
    Gabriel Crispim•520
    @sirbiel100
    Posted 8 months ago

    Perfect design bro, congrats!

  • lostsoul-akk•30
    @lostsoul-akk
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Having taken the chance to try and complete this challenge is something that I feel proud of.

    What challenges did you encounter, and how did you overcome them?

    I encountered a challenge in shading the card's background to get the black view as shown in the challenge that was presented.

    What specific areas of your project would you like help with?

    I'd like some help in doing the shade at the back of the card.

    A responsive web page of a blog card preview

    #bootstrap
    1
    Gabriel Crispim•520
    @sirbiel100
    Posted about 1 year ago

    Hello!

    I see you need help in the shades, so here it goes some advices.

    In the 'box-shadow' property you can add 4 values before the color: X position (horizontally), Y position (Vertically), blur and distance the shadow gonna have.

    If you see on the preview, the shadow is to the right and to the bottom so you have to change the first two axis (X, Y):

    It would be something like: box-shadow: 8px 9px 0 0 black;

    Since the box-shadow doesn't have a blur and don't have a huge distance from the box, the two last values are not necessary.

    I hope I could help! 😁

    Happy coding!

    Marked as helpful
  • syyedmuhammadabdullah•180
    @syyedmuhammadabdullah
    Submitted almost 2 years ago

    FAQ Accordion

    1
    Gabriel Crispim•520
    @sirbiel100
    Posted almost 2 years ago

    Hello Sayed!! Congrats for your solution, it looks really nice!

    I saw that you need help with your image position, so let me help you on that:

    • The best way I found to not overflow the illustration image was: 1 - You have to create a section for your images
    <section class="FaqSection>
    
      <section class= "imagesSection">
          <img src="./path/illustration-image.png">
          <img src="./path/background-image.png">
          <img src="./path/box-image.png">
      </section> 
    
      <section>
        //Rest of the code here
      </section>
    
    </section>
    
    • Now you create a DIV inside the image section to put the images that you dont want to overflow:
    <section class="FaqSection>
    
      <section class= "imagesSection">
          <div class="overflowHiddenDiv"
              <img src="./path/illustration-image.png">
              <img src="./path/background-image.png">
          </div>
          <img src="./path/box-image.png">
      </section> 
    
      <section>
        //Rest of the code here
      </section>
    
    </section>
    
    • And in your css you cand add on that div a overflow hidden to it:
    .overflowHiddenDiv{
        overflow: hidden;
        // Rest of the code
    }
    

    So in that way your both images won't be overflowing and your box image will be overflowing.

    I hope that was helpfull!

  • _nehal💎•6,710
    @NehalSahu8055
    Submitted over 2 years ago

    NFT Preview Card

    #sass/scss
    1
    Gabriel Crispim•520
    @sirbiel100
    Posted over 2 years ago

    Hello

    Congrats for your coding!

    I could see that you did not put hover effects and the 'eye' image when the hover is activated. If you have doubts or you don't know what 'hover' and '::after' is I want to recomend you this website: https://www.w3schools.com/css

    You gonna learn a lot!

    Good programming

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