In today my class,I learn about how to create a X.com home page.so I'll share the steps to create a X.com home page in this blog.
The X.com contains a X logo in left side and the create accont and aignup details on right side of the page.this is the simple layout out of X.com.
STEPS TO CREATE A X.COM HOME PAGE:
1.Write a simple html program to give a title of X.
2.Next the X is not having any heading,so target the body tag to create a div tag inside of body tag and give class name of container.div tag is used for split the code divison by division.
3.Then create div tag add two class for container named left and right.because the logo appears in left and the signup details in right.
4.Next open the style tag to call the parent of left and right class.Container is the parent of both left and right.so, target the container to style.split the page two side,so, using the display grid.this tag used split the page row and columns.In the home the splitted in columns.so,using grid template columns to split the page.
5.Then the page have been split take the X.com.logo to insert the left side.the logo appears top of the page have to make it center.Using display flex logo moving on the default flex direction row and give justify content in center.now it's top of the center.next give align items center it's work on opposite direction of flex.the left part is over.
6.Next right part of the page,this part contains some buttons like signup,create account,signup with Google and signup with apple
7.Next some texts HAPPENING NOW and JOIN TODAY are in the top of the buttons give that text to h1 and h2 tags
8.Then open the button tags to enter SIGN UP WITH GOOGLE and SIGN UP WITH APPLE and CREATE ACCOUNT.
9.Then achieve the OR target a span tag to enter the OR ang enter the hr tag both of start and end of span tag.
10.Next SIGN IN and GET THE APP,do the same like what to done in above for signup with google.
11.Some texts are here in the center of the create account and sign in that text contains some letters to blue colour and some black.the blue ones are links and black ones are normal text.So enter the text to p tag but enter the blue ones are a tag because they are links.a tags are specic tag to create links.
Top comments (0)