Skip to content
OverviewSolutions
6
Comments
213
Web Frog
@MasterDev333

All comments

  • Web Frog•1,840
    @MasterDev333

    Great work! fully responsive and close to design. Here're some suggestions.

    • It would be great if you add transitions to buttons. please add transition: all .3s ease-in-outfor example.
    • on mobile view, please remove min-width for hero image
    • and personally, I think it would be great if you put landing-page-container outside of header tag. Hope this helps. Happy coding ~ :)
  • Web Frog•1,840
    @MasterDev333

    Great work @Stelin. Everything is fully rsponsive and close to design. One suggstion, title should be h1 tag, not span. :) Happy coding~

  • Web Frog•1,840
    @MasterDev333

    Great work @Stuart Haw. It's a little tricky to draw background circles in this example. I suggest you use background-image or pseudo-elements. Here's my solution used pseudo elements. https://www.frontendmentor.io/solutions/profile-card-xRCu-QVRG Hope it helps. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Well done @Luca! Some suggestions here.

    • It would be great if you make everything fully responsive.
    • Font is not loaded correctly
    • background images are missing https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ These are great materials for studying CSS Grid and flex. Hope it helps. Happy coding~ :)
  • Web Frog•1,840
    @MasterDev333

    Great work @Daniel. Your solution is spot on. I suggest you to use background-image or pseudo-elements to draw background circles rather than real doms. And if you'd like to make your class names more readable, please study BEM. Hope it helps. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great solution @Denis. It would be better if you use pseudo-elements or background-image rather than real doms. Anyway, it was great. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work @tediko. I love your animations, especially header link hover animation. It would be better if you use anchor tags for footer phonenumber and mail. You may use tel and mailto attributes for direct call and message. Hope it helps. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work. Your solution is spot on. Needs some improvements while drawing background. To make background position responsive, you may use vw rather than px. so it should be background-position: top xvw left xvw, bottom xvw right xvw; Hope it helps. Happy coding~ :)

    Marked as helpful
  • Web Frog•1,840
    @MasterDev333

    Great work @Sajjad-al! I have some suggestions.

    1. Why did you set grid for text? I think it's useless.
    2. Font size and spacing are slightly different
    3. Background patterns are missing
    4. I suggest you use background-image and background-repeat to draw rating stars. It's hard to draw 4.5 or 4.2 base on your solution. Hope it helps. Happy coding~ :)
  • Web Frog•1,840
    @MasterDev333

    Great work @Mayank-Behl. Everything is responsive and close to design. Your code is also semantic. I have no words to say. "Perfect!" Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work @alvi0407. It would be better if you use Grid rather than flex. And when screen goes down 920px, style is broken. Please make it more responsive. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work. One suggestion, line is missing. You may add hr tag. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work. Everything is fully responsive and spot on. I've no words to say. "PERFECT". look forward to seeing other solutions from you. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great solution @Agata. One suggestion, please remove breakpoint max-width:1440px. On wide screens, it doesn't look good. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work @OluyemisiA. You used Bootstrap and I'm a big fan of Bootstrap also. :D Your solution is really crisp. One suggestion, it would be better if you add transitions on button. Hope it helps. Happy coding~ :)

  • Web Frog•1,840
    @MasterDev333

    Great work @emityiska. Some suggestions here.

    • I recommend you to use background-image or pseudo-elements for drawing background rather than real doms.
    • Remove border-radius on card-top. You already set border-radius to card. Add overflow: hidden; to card to make rounded border. Hope it helps. Happy coding~ :)
  • Web Frog•1,840
    @MasterDev333

    Great work @Jotasvec. Your solution is pretty cool. Some suggestions here.

    • It would be great if you add vertical scroll on card-accordion, now it's hard to see contents when it's all expanded.
    • Remove margin-top on attribute div, instead, you may set absolute position.
    • Make it more responsive Hope it helps. Overall great work!! Happy coding~ :)
  • Web Frog•1,840
    @MasterDev333

    Great work! Your solution is really crisp. Everything is fully responsive and has clean code. I've no words to say. "PERFECT!" Look forward to seeing other solutions from you. Happy coding~ :)