Start doing website to learn HTML CSS. To build let us build a website like Google.
First try to understand how many sections are there in the site and try to segregate all the contents inside a box like modules so that we can build it.
First let us take header, body section then footer part which has language and about us section.
First add a <header>, body <div> part, <footer>.
Now add About & Store links inside a <div>. Now Gmail, Images, Menu dots, UserProfilePic inside a separate <div>. Using <style>tag we can align them in both side of the page using Flex with help of justify content - Space Between attribute. So this has an expected result like google page.
No coming to body part the website it have image of Google Logo, A search bar which has integrated Magnifier glass , <input> box for getting text from user followed by + icon image, Microphone icon image, Scanner icon image and then AI mode. Add all the thing inside a separate <div> tag so that we can make it look like a single input search box. Now using CSS modify the Logo image as expected size and then using flex align the image and <div> tag for search box one below the other.We have the give the size of the search box appropriate to the Google Logo size and give its width, Now we can add style to Searchbox like setting the icon size to same with same padding and gap between them. Now we can give the outline of the text input box as none and align them to centre of the searchbox with edges rounded.
We have to add two button below them for Google Search & Im Feeling Lucky, add styling them for lighter colour grey, no border, give exact space between them inside a separate<div>block.
Now we can add the contents in the <footer> section like India with <hr> tag for a line then followed by links for Advertising, Business, How search works on the left side also Privacy, Terms, Setting in the right side. Add CSS property to style them respectively.
Top comments (0)