Skip to content
OverviewSolutions
8
Comments
15

Patryk Besler

@beslerpatryk355 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Patryk Besler•355
    @beslerpatryk

    Hi there @Alessandro 👋

    As @Teegamtee said background-repeat: no-repeat property should take care of your issue with repeating background. Other things that you can look into:

    • add proper cursor for the button
    • the color of the links in the footer is very similar to the background so it's very hard to read, try changing the color to something with better contrast
    • try to style the button on the hover state similar way to the one in active-state design
    • add hover states for icons just like in the brief for the project: See hover states for all interactive elements on the page

    Hope this will help you find things you should focus on. Keep up the good work and good luck with coding 👩‍💻

    Marked as helpful
  • Patryk Besler•355
    @beslerpatryk

    Hello @Dusan Lukic 👋

    Truly amazing job on this challenge! Your solution is spot on. I looked up a bit in your code and it looks very solid. I would however try to be more consistent with the naming of your classes. It looks like you try using BEM convention but I feel like that dashes are not always correctly used.

    Have a good one and good luck with your future projects!

    Marked as helpful
  • Patryk Besler•355
    @beslerpatryk

    Hey Kristiana👋

    You did an amazing job, I could learn a thing or two from you! If you want to make your background on the desktop version look just like the one from the design files try setting the background-size property to contain instead of cover. The background position: center is also not necessary. After those adjustments, it's just a matter of positioning your content. 😉 Pay attention to the width and margins of your container and I am sure you can get the desired outcome.

    Hope that some of it were helpful. Keep up the good work and good luck on your future projects!

  • Patryk Besler•355
    @beslerpatryk

    Good stuff Hassan!

    I think you should check the classes in your <i> elements. It seems that some cars are in the wrong place. Also, I would recommend cleaning up unnecessary comments in the index file. Other than that your code looks good.

    Tip for the future: for form elements such as <button>, you can use font-family: inherit property so in case you need to change the font you won't have to change the font in each element.

    Have a good one and happy coding 🙌

    Marked as helpful
  • Patryk Besler•355
    @beslerpatryk

    How about using the js slice() method with a negative index?

    Marked as helpful
  • Patryk Besler•355
    @beslerpatryk

    Hey Suraj 👋

    I was coding this challenge a while ago so I know exactly what you mean. @Ted Dino is right, line-height property will help you define the spacing between lines in the element containing text. You can read more about it here: https://developer.mozilla.org/ru/docs/Web/CSS/line-height

    Another property that is quite useful and somehow related to line-height is letter-spacing. It allows you to define how much gap should be between letters. I believe that header in this project actually has some non-default spacing. Here is the documentation about this property: https://developer.mozilla.org/ru/docs/Web/CSS/letter-spacing

    Hope that this will help you with a better understanding of text formatting in CSS. Happy Coding! 👩‍💻

    Marked as helpful
View more comments