DEV Community

Cover image for Twitter(project-5)
vishwa v
vishwa v

Posted on

Twitter(project-5)

Introduction
Login pages are one of the most common UI components in web development. They combine form elements, buttons, and layout styling to create a smooth user experience. In this project, I recreated the X.com (formerly Twitter) login page using HTML and CSS.

Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:0;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
            <script src="https://kit.fontawesome.com/f5e58ab8a1.js" crossorigin="anonymous"></script>
        }
        .container{
            /* border:1px solid; */
            height:110vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .left{
            /* border:1px solid; */
            padding: 20px;
        }
        .left h1{
            font-size: 60px;
            width: 45px;
            margin-bottom: 10px;
        }
        .bt{
            margin-top: 50px;  
            gap:20px;
            display: flex;
            flex-direction: column;
            width: 400px;
            margin-left: 25px;
        }
        .cl button{
            background-color: black;
            color:white;
            font-size: 20px;
            width: 400px;
            height: 8vh;
            border: 1px solid gray;
        }
        button{
            border:1px solid gray;
            font-size: 20px;
            height:8vh;
            border-radius: 50px;
            background-color: white;
        }
        .bb button{
            font-size: 30px;
            width: 400px;
            background-color:grey;
            border: 1px solid gray; 
        }
        button:hover{
            background-color: #555;
        }
        .ln{
            display:flex;
            justify-content: center;
        }
        .divider {
            width:425px;
                display: flex;
                align-items: center;
                text-align: center;
                margin: 10px 0;
            }

        .divider hr {
                flex: 1;
                border: none;
                height: 1px;
                background-color: #ccc; /* light gray line */
            }

            .divider span {
                    padding: 0 10px;
                    color: #555;
                    font-size: 14px;
            }

        .right{
            /* border:1px solid; */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .log{
            display: flex;
            flex-direction: column;
            width: 400px;
            margin-left: 25px;
            gap:15px;

        }
        input{
            font-size: 15px;
            height:8vh;
        } 
        p{
            font-size: smaller;
            width: 400px;
            text-align: center;
            color: gray;
            padding: 15px 0;
            margin-left: 15px;
        }
        footer{
            /* height:10vh; */
            text-align: center;
        }
        a{
            margin-bottom: 25px;
            font-size: smaller;
            color: gray;
            text-decoration: none;
        }
        a:hover{
            text-decoration: underline;
        }

        .mg{
            height: 750px;
            width: 650px;
            /* border: 1px solid; */
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-bottom: 200px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <h1>Happening now.</h1>
            <div class="bt">
                <div class="cl">

                    <button>Continue with phone</button>
                </div>

                <button>Continue with google</button>
                <button>Continue with apple</button>    
            </div>
            <div class="divider">
            <hr>
            <span>or</span>
            <hr>
            </div>
             <div class="log">
                <input type="text" placeholder="Email or username">
                <div class="bb">
                    <button>continue</button>
                </div>
            </div>
            <p>By continuing, you agree to our Terms of Service, Privacy Policy and Cookie Use.</p> 
        </div>

        <div class="right">
            <img class="mg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpevfm2P0BtgC9LbXH1n2Xp-oR-iLX8xQTBg&s" alt="x">
        </div>
    </div>
    <footer>
        <a href="">About</a>
        <a href="">Get App</a>
        <a href="">Help</a>
        <a href="">Terms</a>
        <a href="">Privacy</a>
        <a href="">news</a>
    </footer>


</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

Top comments (0)