Day - 17 (Twitter)

Coloning Twitter
html code

 <div class="left">
            <p>Happening now.</p>
            <nav>
            <button class="one"><i class="fa-solid fa-phone"></i> Continue With phone</button>

            <button class="two"><img src="./PHOTO/google-logo.webp" alt="" style="width: 30px; height:20px;background-color: rgb(255, 255, 255);">Continue with Google</button>

            <button class="three"><i class="fa-brands fa-apple"></i>Continue with Apple</button>
            <div class="or">
                <hr>
                <span>or</span>
                <hr>
            </div>


            <input placeholder="Email or Username"></input>
            <button class="four">Continue</button>
            <p id="term">By continuing, you agree to our <a href="Terms of Service, ">Terms of Service,</a><a href="">Privacy Policy </a>and <a href="">Cookie Use.</a> </p>
            </nav>
        </div>
        <div class="right">
            <div class="img1">

             <img src="./PHOTO/twitter-new-2023-x-logo-white-background-vector_1017-45422.avif" alt="Twitter logo" style="width: 100%;height: 668px;">
             </div>
             <div class="img2" >
             <img src="./PHOTO/Screenshot 2026-06-23 151932.png" alt="" style="width: 150px;height: 150px;border-radius: 25px;">
             </div>
        </div>

css code

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    main{

        /* border: 1px solid red; */
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 90vh;
    }
    .left{

        /* border: 1px solid black; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .left p{

        /* border: 1px solid palevioletred; */
        width: 200px;
        font-weight: bold;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 40px;
        margin-right: 70px;
        margin-bottom: 40px;
    }
    .left nav{

        /* border: 1px solid; */
        display: flex;
        flex-direction: column;
        width: 300px;
        gap: 20px;



    }
    button {
        height: 40px;
        border-radius: 25px;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        background-color: white;
        cursor: pointer;
    }
    input{
          height: 40px;

        border: none;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        background-color: white;
        cursor: pointer;

    }
    .or{
        /* border: 1px solid blue; */
        display: flex;
        align-items: center;
        gap: 10px;


    }
    .or hr{
        flex: 1;
        /* border: none; */
        border-top: 1px solid;
    }
    .one{
        background-color: black;
        color: white;
    }
    i{
        color: white;
    }
    .two:hover{
        background-color: rgb(219, 226, 238);
    }
    .four{
        background-color: gray;
        color:rgba(241, 238, 238, 0.703);
        font-weight: 600;
    }


    .right{
        /* border: 1px solid blue; */
        height: 90vh;
    }

    #term {
        font-size: small;
        font-weight: 100;
        font-family:'Times New Roman', Times, serif;
        width: 100%;
    }
    a{
        text-decoration: none;
        color: black;
    }

    .img1{
        position: relative;
    }
    .img2{

       border-radius: 25px;
        position: relative;
        bottom: 200px;
        left: 570px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        width: 150px;





    }
   a:hover{
    color: blue;

   }

output

akilan46-project-bce2db.gitlab.io