code: added fluid design, improved HTML and styles

[nj2237]

The following are the changes made in this PR:

1. added bootstrap fixed navbar which collapses menu for smaller screen resolutions
2. added container-fluid classes to scale with viewport and made some color and CSS changes
3. cleaned up code and alignment for HTML tags
4. added comments for HTML tags, replaced huge share URL links with Google shortened URLs for better readability

Signed-off-by: nj2237 [email protected]

Fixes issue:

#87

[nj2237]

I have made the top navbar fixed through scroll, and the navbar items collapse into a menu icon according to the viewport size. Here is a GIF illustrating the behavior and also making sure behavior of all other elements remain the same as before.

I also have made some style changes and fixed the alignment issues in HTML (in case in future we use linters as code becomes bigger, these errors should be clean).

@AdiChat do review and tell if the changes are OK, thank you!

[nj2237]

This GIF is on browser normal resolution:

[AasthaGupta]

@nj2237 This is a welcome change :) Here are a few things I'd like to suggest:

• Remove the light yellow background colour
• Include More Apps in the top navbar.

[AdiChat]

Great work :+1:

You may move the "More apps" dropdown to the fixed navigation bar. This will make it more accessible.

Kindly take a look into this. :+1:

[nj2237]

Hi @AasthaGupta @AdiChat thanks for taking a look at this!

Yes, I did initially put the More Apps dropdown to the fixed nav bar, but the calculator didn't work - I guess I have to make some changes to the js files there too. I will look at this.

Also, I thought the background color looked good, but if it does not look appealing, I will remove it. What do you think?

[AdiChat]

In my opinion, the yellow background looks good. :+1:

[nj2237]

Okay! I will do the changes, resolve conflicts and update the commits on my PR