Skip to main content

Create Login Page Like Twitter || Twitter login page clone || twitter clone html, css - Creation Code



Twitter:

Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets". Registered users can post, like, and retweet tweets, but unregistered users can only read those that are publicly available. Users interact with Twitter through browsers or mobile frontend software, or programmatically via its APIs. Prior to April 2020, services were accessible via SMS. The service is provided by Twitter, Inc., a corporation based in San Francisco, California, and has more than 25 offices around the world. Tweets were originally restricted to 140 characters, but the limit was doubled to 280 for non-CJK languages in November 2017. Audio and video tweets remain limited to 140 seconds for most accounts.


We are going to build the login clone with HTML and CSS

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>twitter</title>
</head>
<body>
  <div class="container">
    <div class="box box-one">
        <i class="fab fa-twitter"></i>
        <button>
            <img src="kisspng-google-logo-g-suite-google-5ab6f1f0b9e059.9680510615219389287614.jpg" width="19"/>
            <span>Sign in with Google</span>
        </button>
        <button>
            <img src="download.png" width="20"/>
            <span>Sign in with Apple</span>
        </button>
        <div>
            <h5>Or</h5>
            <div class="box box-two">
                <form>
                    <input type="text" placeholder="Phone,email,or username"/>
                </form>
                <button class="next-btn">Next</button>
                <button>Forgot password</button>
            </div>
                <p>Don't have an account? <a href="#">Sign up</a></p>
        </div>
    </div>
  </div>  
</body>
</html>

CSS:

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

body{
    background-color: rgb(219, 217, 217);
}

.container{
 position: absolute;   
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 background: #fff;
 width: 450px;
 height: 550px;
 border-radius: 10px;
 box-shadow: 0 10px 20px rgb(110, 110, 110,.2);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-family: 'Poppins', sans-serif;
}

.box , .box button{
    display: flex;
    align-items: center;
}

.box{
    width: 300px;
    height: 240px;
    flex-direction: column;
    justify-content: space-evenly;
}
    
    .box button{
    width: 300px;
    height: 40px;
    background-color: #fff;
    outline: none;
    font-weight: bold;
    border: 1px solid rgb(211, 210, 210);
    border-radius: 20px;
    justify-content: center;
    font-family: "Poppins", sans-serif;
}

.box-one button span{
    display:block;
    width: 130px;
    text-align: left;
}

.box-one button img{
    margin: 0 .5rem;
}

.box-one i{
    color: #00acee;
    font-size: 1.8rem;
}

.box-two input{
    position: relative;
    width: 300px;
    height: 55px;
    outline: none;
    border: 1px solid rgb(211, 210, 210);
    border-radius: 4px;
    padding-left: 10px;
}

.box-two input label{
    position: absolute;
    top: 0;
}

.box-two input::placeholder{
    font-size: 1rem;
}

.box-two input:focus{
    border: 2px solid #00acee;
}

.box-two .next-btn{
    background-color: #121212;
    color: #fff;
}

.container p{
    font-size: 1rem;
    color: rgb(138, 136, 136);
}

.container p a{
    text-decoration: none;
    color: #00aecc;
}


Output:



Follow my socials:

Youtube:https://www.youtube.com/channel/UCU1qNFntn7dCi9uqyvrGKOg

Instagram: https://www.instagram.com/python.math/

Twitter:https://twitter.com/Pritish369


For any question or coding discussion, you can join my discord or telegram:

Discord:https://discord.gg/be7MmSuV

Telegram:https://t.me/Python_Math_Community


Labels:

Comments

Post a Comment

Popular posts from this blog

Create Ping Pong Game in Python

  Ping Pong Game: Table tennis , also known as  ping-pong  and  whiff-whaff , is a sport in which two or four players hit a lightweight ball, also known as the ping-pong ball, back and forth across a table using small rackets. The game takes place on a hard table divided by a net. Except for the initial serve, the rules are generally as follows: players must allow a ball played toward them to bounce once on their side of the table and must return it so that it bounces on the opposite side at least once. A point is scored when a player fails to return the ball within the rules. Play is fast and demands quick reactions. Spinning the ball alters its trajectory and limits an opponent's options, giving the hitter a great advantage. We can make it using pygame but I keep it more simple we will create this game using only the turtle module so let's drive into the code without wasting any time Code: # Import required library import turtle # Create screen sc = turtle . Scre...
Post a Comment
Read more

How To Draw BMW Logo - In Python

 I know I don't need to introduce BMW as it is a very popular luxury car. Today we gonna draw the BMW logo in python. I know that you can draw it using a pencil and other tools like AutoCAD etc. But we are programmers we talk with computers so let's tell our computer to draw this logo for use with the help of python. Module The only module we will use is that turtle Code: import turtle as t t.begin_fill() t.fillcolor( '#008ac9' ) for i in range ( 50 ):     t.forward( 4 )     t.left( 2 ) t.right(- 80 ) t.forward( 116 ) t.right(- 90 ) t.forward( 132 ) t.end_fill() t.penup() t.pendown() t.right( 90 ) for i in range ( 50 ):     t.forward( 4 )     t.left(- 2 ) t.right( 80 ) t.forward( 116 ) t.forward(- 116 ) t.right( 90 ) t.begin_fill() t.fillcolor( '#008ac9' ) for j in range ( 45 ):     t.forward(- 4 )     t.left(- 2 ) t.right(- 90 ) t.forward( 116 ) t.end_fill() t.right( 180 ) t.forward( 116 ) t.right( 90 ) for i in ...
Post a Comment
Read more

Draw Minecraft Charater in Python

  Minecraft  is a  sandbox video game  developed by the Swedish video game developer  Mojang Studios . The game was created by  Markus "Notch" Persson  in the  Java programming language . Following several early private testing versions, it was first made public in May 2009 before fully releasing in November 2011, with  Jens Bergensten  then taking over development.  Minecraft  has since been ported to several other platforms and is the  best-selling video game of all time , with over 238 million copies sold and nearly 140 million  monthly active users  as of 2021 . We gonna build a character of Minecraft using our creativity and coding skills so let's drive into the code: Code: import turtle as t def eye ( r , a ):     t . fillcolor ( 'brown' )     t . begin_fill ()     t . circle ( r , a )     t . end_fill () t . begin_fill () t . fillcolor (...
Post a Comment
Read more