new design #66

[rocktimsaikia]

Hi in this pull request I made few changes in the overall home page design .All the designs specs is based on the issue #66 that I opened few days ago.

So again these are the things i worked on :

• Got rid of the heavy background image that was not optimized instead of went for a more simple flat design with a simple vector png which made the loading time for the page more faster.
• Used some simple basic css design principles to make the web page look more professional and standard( like neon gradients ,flat design color palettes ,standard google fonts).
• Made the footer stick to bottom and inside the footer added a contribution button linking to this repo.

here is the final result :

Please let me know what you guys think of these chnages .

[cdrani]

@rocktimsaikia: I really like this new design. The linear gradients are really striking. I have included some changes, with most of them just being cleanup.

A few changes I haven't included in the comments below as they could be their own issues:

1. back to search button text color is not easily readable against the gradient:
   .
   It should match the style of the Check them out buttons.
2. Hovering over the buttons shows the unrounded form of the rectangular button.
   

I am really impressed otherwise. I advise just making the changes requested, but if you feel up to it, then make the two changes above as well. If not, then a new issue could be created from them and offered to someone else.

Thanks for contributing! I am looking forward to seeing this merged in.

Can you also offer your opinion on this PR @JasonFritsche?

[rocktimsaikia]

@cdrani Thanks for the review i will make your requested changes asap 😊

[rocktimsaikia]

@cdrani hi I made the requested changes that you mentioned. So again here is the overview of the new changes i made :

• Removed the unused old google fonts that were taking time to load.
• Moved the body selector css part to index.css file .
• Used classes over ids [Except few specific ids as they are needed for the logos] and added newline between every css selector
• Replaced commonjs require with es6 modules.
• Fixed the gradient background issue that was making the go back button hard to read (I just changed the color from soft white to plain standard white on that button specifically for better readability ).
• Removed the unnecessary messy comments.

A few new changes I made :

• Changed the background color of search input field from gradient to plain white.Which looks more clean now.
• Added gradient background to cards and made the card buttons block level which looks much better now.

Here is the changed homepage with the white colored input field :

Search result page with new gradient cards :

[JasonFritsche]

@rocktimsaikia Thanks for your contributions to the project. This is an awesome addition.

[rocktimsaikia]

I am glad i could use this holiday season working on open source rather than my college stuff :)

[JasonFritsche]

Feel free to make more PR's. If you see a bug or feature that is not in the current set of issues then feel free to open a new issue. Thanks!