This is Harish127's second project git project!

Assignment - Google homepage

I have created a clone of google homepage, applied all skills i have learned from freecodecamp courses and i have some past knowledge about CSS and HTML. First i created the center components the search bar and buttons. Then, i put image on top of it. Then, i created the footer section added

inside it divided it into two more div one for left and for right sides. Then, on each

i add name them according to page. Then, i move to top side i add inside i put

and divided it into two parts as

of left and right. Then, i added to both the

and on right side a button and a icon from material library.

After this process i saw page that itmems are not aligned both

and links were on left, also center components. Then i created a css file and added align items and change those

into applied it space between. Then the center component was not align properly i use

put all items inside adde marign left and right to 50%. Then i changed font of links and added color of black to

and remove the text decoration. Then, i saw footer was just below the section and there was no space between section and header, so i added padding and hardcoded i not found something that fit there. Then, i added underline effect on hover on links. Then, i give light gray color to footer background and change text color to bit darker gray. Then, i worked on top right side button first i remove outline of all button and border then i change background color to blue , make text bold and finally added border radius , also added padding and curser to pointer.

Now the focus goes to center components. I saw img was not centered so i make it block and put margin left and right auto. in search box on both ends icons were there so i added from icons material but i saw the icons were going bit down then search bar then i saw line height attribute to 0 then it was not aliging properly. First i decided that i put these three on same line stuck to each other then put border but it did not work properly so i put them into

then also textbox was going down i have no way to fix it so, i move on and give

border radius border of bit dark light gray color added padding , increase width of search box , added box shadow on hovering it is bit tricky to find shadow color. Then, i move below to button of search they were stuck left to section so increase margin of left side then it looked centerd, added padding and increase spacing between two buttons on hovering added border.

it took me over 8-9 hrs to design this page, main problems i faced on aliging the items to proper place and woring on external items like materials takes little time to understand how to apply on page.

One thing i used in this page that makes it worst is adding percentage to item attribute as on hovering buttons move items down as border of button gets added.

i have made the page and css then i read that while creating the page commit changes.

Im happy to complete this assignment which was my main goal.