Skip to content
OverviewSolutions
5
Comments
11
Vinci Taylaran
@vincitaylaran

All comments

  • Vinci Taylaran•185
    @vincitaylaran

    Great work on completing your second challenge 🎉

    A suggestion I would make is to make your cursor into a pointer when you hover over the sign up button. Lastly, I would give the <h2> elements under the subscription and why sections a font weight of 700.

    These are my personal thoughts. Other than that, your solution is very well done 😁

  • Vinci Taylaran•185
    @vincitaylaran

    Good eye for detail, Raymart. Your solution looks very close to the original design 😁

    Filtering for jobs also works correctly. The only thing you're missing is the "Clear" button which should appear at the right side of the stack. Adding it shouldn't be much of an issue for you 😆

    Congrats on completing another challenge!! 😀

  • Vinci Taylaran•185
    @vincitaylaran

    Congrats on completing your first challenge 🎉

    The only thing I would add is to change the color of the bookmark when you hover over it. It's only a small nitpick but other than that there's nothing wrong with your solution.

    Looking forward to seeing your progress 👏

  • Vinci Taylaran•185
    @vincitaylaran

    Good eye for detail, Nick.

    Only adjustment I would make would be for the .card__social-list class. Instead of a solid grey color for the border-top property, I would replace with it rgba(211,211,211,0.5). It's still grey but is less strong on the eyes as it has 0.5 opacity.

    Looking forward to seeing your progress and congrats on completing your first challange 🎉

  • Vinci Taylaran•185
    @vincitaylaran

    Great look solution, Nishant!

    In regards to the solution to your problem with the stars, I went with giving your .star-rating-item class a flexbox and then aligned them using align-items: center. I removed all of the styles for your .stars class and replaced them a grid, gave it a grid-auto-flow: column property, and then gave them a gap of 3px.

    .star-rating-item {
    position: relative;
    width: 450px;
    height: 25%;

    display: flex; // <-- Gives this class flexbox.
    align-items: center; // <-- Aligns your elements vertically. Must have flexbox in order to use this property.
}

.stars {
    display: grid;
    grid-auto-flow: column;
    gap: 3px;
}

    Other than that, your solution is great. Looking forward to seeing your progress and congrats on completing your second challenge 🎉

  • Vinci Taylaran•185
    @vincitaylaran

    This is a great looking solution. Good work!

    Some adjustments I would make would be on the font color of the .text-section class. I would probably give it a color of #4d4d4d, as it would be less strong on the eyes than a purely black color. One final adjustment I would make would be to slightly increase the font size of the heading elements (h1, h2, etc...). These are nitpicks, but other than that your solution is very well done 😁

    Looking forward to seeing you progress and congrats on finishing your 2nd challenge 🎉

  • Vinci Taylaran•185
    @vincitaylaran

    Hey there 👋

    Your solution looks really good on mobile!!

    In regards to your device size problem for the desktop version, would you happen to be using Google Chrome as your browser? You probably know this already, but Chrome has some awesome developer tools that can help you view your app on desktop.

    Anyways, good work and I look forward to your progress 😁

  • Vinci Taylaran•185
    @vincitaylaran

    Hi Erick, your solution looks very good for desktop.

    For responsive design, I would look into media queries and flexbox. Learning these two tools are essential to responsive to design, in my opinion.

  • Vinci Taylaran•185
    @vincitaylaran

    Fantastic work! For the bug you mentioned, one way I fixed it was by giving the .testimonials a margin-top: -260px and height: 1100px.

    @media screen and (max-width: 1100px) {
  .testimonials {
      height: 1100px;
      margin-top: -260px;
    
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
  }
}

    It's not a clean fix but it should do the trick. If you or anyone else finds a cleaner fix, please do share!

    Looking forward to your progress!!

  • Vinci Taylaran•185
    @vincitaylaran

    Great looking solution, Xhoni! The only thing I would have to knit pick is that the hero isn't dimmed. Making it dim will make the white text on it pop out more and appear more readable.

    .hero {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../assets/image-hero.jpg) no-repeat center center/cover
}

    Otherwise, this looks really good! Looking forward to your progress :)

  • Vinci Taylaran•185
    @vincitaylaran

    I love the work you've put into the animations. The animations don't ruin the user experience for me. They're also quite satisfying with the sound they make and the way they animate in and out of view. I tried doing that myself when I attempted this challenge but kinda failed.

    Fantastic work!!!