Skip to content
OverviewSolutions
7
Comments
8
Caleb Abuul
@Caleb-Abuul

All comments

  • Caleb Abuul•150
    @Caleb-AbuulPosted 11 days ago

    Hi, you did an awesome job on this challenge. However, I would like to point out a few things that could be improved on. First, the border-radius is two small. Try 2rem or 32px. Also the background color for each of the summary children div's has much opacity, so it's a bit hard to see the text on it. Reduce the opacity a bit. Other than these I'd rate you 9/10. The remaining 1 is for your computer 💻👍.

    0
  • Haaji-git•80
    @Haaji-gitSubmitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    I hope I done this challenge 80% match so any feedback is open

    This is results summary component

    1
    Caleb Abuul•150
    @Caleb-AbuulPosted 11 days ago

    You did a great job. I love the custom properties and classes you created. However, I think you should make the #wrapper width 100% of its container or 100vw for mobile. Also, only apply border-radius to the bottom left and bottom-right of the score card. This will ensure the design looks like the mobile preview in the design file. Here's how to apply border radius to only the bottom corners of the score card.

    CSS
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
    0
  • yagnik0•420
    @yagnik0Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I've completed this project as much as I can come close to design, Well for the next time maybe I'll try to write less minimal CSS.🚀

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

    It was a bit challenging for me to make it responsive but somehow I manage to do it with a googling particularly for hamburger menu.🤔

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

    Any feedbacks are welcome!😌

    Happy Coding!🫡

    Loopstudios-Landing-Page

    1
    Caleb Abuul•150
    @Caleb-AbuulPosted 4 months ago

    You did an incredible job, and the solution does not differ considerably from the design. It is responsive and the code is structured and readable.

    Marked as helpful
    0
  • Caleb Abuul•150
    @Caleb-AbuulPosted 11 months ago

    Nice one! You did an amazing job I must say. However, I'd suggest you correct a few things here and there. Remove the spread value for the box-shadow so that you would have a solid box-shadow. And the box-shadow should become wider on hover i.e double it's size on hover. Plus increase the border-radius a bit; to maybe 15px or 20px.

    0
  • Caleb Abuul•150
    @Caleb-AbuulPosted 11 months ago

    Your solution is simply amazing. I like the time and effort you put into the email validation. Well, all that is left for you to do now is to include a README.md file at the root of the repo.

    0
  • Caleb Abuul•150
    @Caleb-AbuulPosted 11 months ago

    This is amazing. Great work you got there... I like the fact that your validation is automatic. That is as the input box is in focus the validation kicks in. However, the social media icons you included are overflowing. Please find a way of fixing that. Plus you may have some accessibility issues, given that your html is not properly marked. I'd suggest you wrap all the <body > content in a <main> tag to fix that.

    0
  • Caleb Abuul•150
    @Caleb-AbuulPosted 11 months ago

    Nice work you got there. However, there are no hover states for the biggest heading h1 and the card. The h1 does not turn yellow on hover and there is no box-shadow increase for the card. Also you didn't include landmarks in your code. Simply wrap the whole preview card in a <main> tag, and then the attribution div in a footer tag in your HTML file.

    Marked as helpful
    1
  • shubham kumar•160
    @Shub1970Submitted 11 months ago

    What did you find difficult while building the project? -> what i find difficult is adding svg pils image in background, because it was overlapping over two section, so i have put image(svg) as content of ::befor psedo element

    use vite

    1
    Caleb Abuul•150
    @Caleb-AbuulPosted 11 months ago

    You did an awesome job. You only have a few hover errors on texts here and there, like the nav links should turn gray when hovering. And also the border of the input text-box should be that primary orange color when in active.

    0