Nitya Gulati

Hi Madi, nice work. The site looks good on desktop and all the cards are where they should be. Some pointers to further refine the code --

• The card icons are not showing. You will have to update the src path for the images.

• Here's what you can do to cut down on the code repetition. You can add a separate class such as card to all the cards and add all the common attributes under that and keep the unique styling under the individual card classes such as karma etc.

<div class="card karma"> .card {...} .karma {...}

• Have you looked into CSS Flex/Gridbox? If not, I would suggest giving that a try. It's very easy and convenient to use to create such layouts without having to use position. This also helps with making the site responsive, instead of adding positions for each breakpoint.

• The next step would be to look into media queries to make it mobile-friendly. Also, you can look into the mobile-first approach as Ndoy3m4n suggested. You can code for the mobile breakpoint and then use min-width to scale it up. This helps cut down on the code and also has performance gains when loading the site on mobile.

Keep up the good work!

Looks good, Sol! Your code is clean and well structured. Great work coding mobile-first and using Grid.

• You don't need to add the space character inside the hero div. You can just have an empty div in the html and it will still take the background image and height/width settings from your css.

• Currently, if the email field is empty, it displays the error for a few seconds and then submits the form. You will need to prevent the form from submitting when the email does not validate in your js code.

• Mobile breakpoints 375px and below show a horizontal scrollbar, you probably need to adjust the margins slightly. You can test it out using Chrome Developer tools.

Keep up the good work!

Hi Stowman, nice work and welcome to the community!

Currently, the text is too big on desktop and too small on mobile. Just slight changes to font sizes and margins and padding would improve the design and make it closer to the design previews.

I noticed that you used Bootstrap. Although that's completely fine and Bootstrap is a good tool to know and use in many projects, I would suggest not to use it since you are just starting out, especially on the newbie challenges. That way you can get a good foundation of working with html/css and building layouts on your own using Flex/Grid, which can be very beneficial. Once you feel like you have a good understanding of it you can use Bootstrap or other tools as you see fit to enhance your skillset.

Keep up the good work! :)

Great work, Mihir. Nice touch with the ease-in transitions for the text!

Please note, that currently your JS code is not being applied and the form is using default browser validations because you linked script.js in your HTML file, however your code resides under js/min.js

Sijan, the site looks great! Some pointers that can help simplify the code further.

• button-details div -- Instead of using position: relative and multiple space characters in the html file, I would use Flex to space and align the elements.

• Cards -- Instead of adding <p> and <div class="line"> elements, you can simply use <ul> and then add borders to the <li> tags.

• As the HTML report suggests, unchecked = false isn't a valid attribute. When you want the checkbox to be checked, you can simply add the checked attribute to the input tag. And when that attribute is not present, it's false by default.

<input type="checkbox" id="test" name="test" checked>

<input type="checkbox" id="test" name="test">

You can also look up HTML5 semantic tags and try it out in the next challenge. Love the slide effect to move the card down when the viewport is small.

Keep up the good work! :)