DEV Community

Alaguselvan T
Alaguselvan T

Posted on

X.com Clone

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter</title>
    <script src="https://kit.fontawesome.com/6b9ade393d.js" crossorigin="anonymous"></script>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }
        .content{
            height: 95vh;
            display: grid;
            grid-template-columns: 1fr 1fr ;

        }
        .left{
            height: 95vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

        }
        .right{
            height: 95vh;
            display:flex;
            justify-content: center;
            align-items:center ;
        }
        .left1{
            height: 80%;
            width: 70%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

        }
       .button{
        border: 1px solid black;
        width: 80%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
       }
       .button button{
        border: 1px solid black;
        height: 90%;
        width: 50%;
        font-size: 26px; 
        border: none;
        background-color: white;
        cursor: pointer;
       }
       h4{
        width: 100%;
        font-size: 30px;
        text-align: center;
        color: rgb(175, 173, 173);
       }
    input{
        width: 80%;
        height: 10%;
        border-radius: 10px;
        font-size: 25px;
        padding-left: 10px;
    }
    p{
        color: rgb(87, 85, 85);
        width: 80%;
        height: 5%;
        text-align: center;
    }

    </style>
</head>
<body>
    <div class="content">
         <div class="left">
            <h1 style="font-size: 90px;">Happening now.</h1>
            <div class="left1">
            <div style="background-color: black;color:aliceblue" class="button">
               <i style=" font-size: 35px;" class="fa-solid fa-phone"></i>
               <button style="background-color: black;color:aliceblue">Continue with Phone</button>
            </div>
            <div class="button">
                <i style=" font-size: 35px;" class="fa-brands fa-google"></i>
              <button>Continue with Google</button>
            </div>
            <div class="button">
                <i style=" font-size: 35px;" class="fa-brands fa-apple"></i>
                <button>Continue with  Apple</button>
            </div>
            <h4>- - - - - - - - - - - - - - or - - - - - - - - - - - - - -</h4>
            <input type="text" placeholder="Enter email or number">
            <button style="width: 80%; height: 10%;background-color: rgb(114, 112, 112);color: white;font-size: 25px;border-radius: 25px;  cursor: pointer;">Continue</button>

            <p style="font-size: 17px;">By continuing, you agree to our <span style="color: black;">Terms of Service, Privacy Policy </span>and <br><span style="color: black;">Cookie use .</span></p>

         </div>
         </div>
         <div class="right">
         <img height="100%" width="100%" style="margin:auto;" src="x.png">
         </div>
    </div>
    <hr style="width: 100vw;color: bisque;">
    <footer style="padding-left: 20%;padding-top: 5px;">
<p style="font-size: 18px;">About
 ·
Get App
 ·
Grok
 ·
Help
 ·
Terms
 ·
Privacy
 ·
Cookies
 ·
Careers
 ·
Ads & Business
 ·
Developers
 ·
News
 ·
Accessibility
 ·
© 2026 X Corp.
</p>
    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

Top comments (0)