Huddle landing page with single introductory section.

Hi Saurav, nice work...the site looks good on the laptop. If you want to go a bit further and get the page looking exactly like the design then you can add these few tweaks --

• Add a box-shadow and hover state for the Register button
• Currently on the laptop (1220px), the page shows a vertical scroll. To fix that you can resize the image and push the social media and footer sections up to fit everything in single screen frame similar to the design.

Great job on using flex to switch to mobile layout, however there are some scaling issues at the moment.

• The mobile design isn't scaled down properly. You'll probably have to go back in your media query and resize the elements to better fit the screen size.

• Also your current media query for min-width 320px and max-width 480px covers most of the smartphone devices. But I would add couple more breakpoints (as needed) for iPad/tablet devices as well to resize everything accordingly.

Few breakpoints to consider and test

min-width: 576px //Bootstrap small device breakpoint (landscape phones)

min-width: 768px //iPad devices

min-width: 992px //Bootstrap large device breakpoint (desktops)

min-width: 1024px //iPad Pro devices

You can also check out this extensive list of popular device screen sizes

If you are not using it already, Chrome Developer Tools is a quick and easy way to test and debug different screen breakpoints.

Good luck! :)

The background image is not showing up because you need to change the url location of the image. You have this:

background: url("/images/bg-desktop.svg");

Its trying to look for it in the css directory so you need to move up one directory.

Change it to this:

background: url("../images/bg-desktop.svg");