Skip to content
OverviewSolutions
20
Comments
10

Nenad Cosovic

@nenadmnePodgorica360 points

B.Sc Civil Engineer + Frontened web development by hobby (HTML, CSS & JS)

Latest solutions

View more solutions

Latest comments

  • Nenad Cosovic•360
    @nenadmne

    Good solution.

    Check adding number and backspace in the middle of the card number input.

  • Nenad Cosovic•360
    @nenadmne

    Your solution is looking great with consuming everything what was asked from this challenge.

    Only thing i would suggest is wrapping classes with same attributes under 1 line, like this:

    body, .img-overlay, .price-section, .author {
     display:flex;
}

    Alse same could be done for justify-content: center; or align-items: center;

    Great solution, keep up =)

    Marked as helpful
  • Nenad Cosovic•360
    @nenadmne

    Your solution is very elegant and simple. I loved it =)

    Here are few suggestions:

    * {
    margin:0;
}

    Consider putting bellow margin a global parameter of font-size, and then on rest of the classes use rem as font-size matter. Also putting font-family: 'Outfit', sans-serif; would work great here if its only 1 family for whole page.

    .text h1 {
    font-weight: bold;
}

    Here instead bold you could have used font-weight: 700 (or 600); so it would look same as challenge heading :)

    Great solution by the way =)

    Marked as helpful
  • Nenad Cosovic•360
    @nenadmne

    Hello, i look into code

    <button>
  <div class="button_text"><img class="cart_icon" src="./images/icon-cart.svg" alt="cart">  <span>Add to Cart</span> </div>             
</button>

    From this html part, remove div that is inside button, and put button class class="button_text" instead. Div in not supposed to be inside button.

    After that go in css and type .button_text { text-align:center}. This will center img and text in button.

    To make space between them just margin it in css.

    Keep up =)

  • Nenad Cosovic•360
    @nenadmne

    Looks like a nice and simple solution.

    Only thing i would add is that icon position (eye in the center of equilibrium photo).

     <div class="icon-img">
 <img src="images/icon-view.svg" alt="icon-view">
 </div>

    Try to either use z-index or pseudo ::before to fix its background color, as it should be white on hover.

    Happy coding =)

    Marked as helpful
  • Nenad Cosovic•360
    @nenadmne

    Nice solution there. I spent some spare time to look inside your code.

    1.I think when switching from mobile to desktop version you should quit using % and give strict width and height. Its recomended for most sites to not get width over 800px so our eyes dont get tired moving around screen. My screen is so 1500+ so your solution was very much streched.

    2.Instead writting font-wight:700; or transition: 0.5s; under every class, you could wrap them all under 1 place like this button, .price span, .attribution { font-wight:700;}. When have same style for more then few classes, its always best to wrap them under 1 line so you change them easier and your code looks less stacked.

    Nice work and happy coding =)

    Marked as helpful
View more comments