How to create Twitter Login Page using HTML CSS JavaScript ?

Last Updated : 15 Dec, 2023

In this article, we will see How To Make a Twitter Login Page Like Using HTML CSS JavaScript. The code produces an attractive login page with a design similar to the Twitter login interface. The JavaScript incorporates straightforward validation for the email input field upon submitting the form.

Preview

Preview

Approach

Create a div, button, input text, and form, and make the basic structure of the website using HTML. Link to an external stylesheet named style.css and an external JavaScript file named script.js.
The login form is wrapped in a main-signin div. Form elements have a heading, a Google sign-in button, an Apple sign-in button, horizontal lines, and an input field for email/username.
Add general stylings like margins, padding, and box-sizing. Sets the background color, and font family, and aligns content. Style input field, with default and focus states. Styles for hyperlinks, including color and hover effects.
For validation of input text for email, we have used a condition where the length must be above five characters, and spaces are not allowed. Select the email input field using document.querySelector. Event listener for form submission is used and prevents the default form behavior.

Example: This example illustrates the creation of a Twitter Login Page using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <link rel="stylesheet"
          href="style.css"> 
    <title>Twitter Login Page Like</title> 
</head> 
  
<body> 
    <div class="container"> 
  
        <div class="main-signin"> 
            <div class="close">X</div> 
            <h1 class="inner-container"> 
                GeeksforGeeks 
            </h1> 
            <div class="con_box"> 
  
                <div class="cont_one"> 
                    <div class="flexbottom_text"> 
                        <h1 class="sign-heading"> 
                            Sign in to 
                        </h1> 
                        <h1 class="logo-cancel sign-heading"> 
                            X 
                        </h1> 
                    </div> 
                </div> 
  
                <div class="cont_two"> 
                    <form action="" id="formid"> 
                        <div class="first-input"> 
  
                            <div class="btn1_forp sign_apple" 
                                 style="margin-bottom: 10px;"> 
                                Sign in with Google 
                            </div> 
                            <div class="btn1_forp sign_apple"> 
                                Sign in with Apple 
                            </div> 
                            <div class="flex_or"> 
                                <div class="horizontzl_line"></div> 
                                <div class="ortext">or</div> 
                                <div class="horizontzl_line"></div> 
                            </div> 
  
                            <label for="emailid"></label> 
                            <input type="email" 
                                   name="email" 
                                   placeholder="Phone, email, or username" 
                                   id="emailid"
                                   value="" required> 
  
                        </div> 
                        <div class="btn_cont"> 
                            <button class="btn1_nxt"> 
                                <a href="#" class="link_next"> 
                                    Next 
                                </a> 
                            </button> 
                            <button class="btn1_forp"> 
                                <a href="#" class="link_forp"> 
                                    Forget Password ? 
                                </a> 
                            </button> 
                        </div> 
                        <div class="flexbottom_text"> 
                            <div class="no_a_text"> 
                                Don't have an account ? 
                            </div> 
                            <div> 
                                <a href="#" class="link_su"> 
                                    Sign Up 
                                </a> 
                            </div> 
                        </div> 
                    </form> 
                </div> 
  
            </div> 
        </div> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
@import url( 
'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
  
  
    background: rgba(0, 0, 0, 0.40); 
    display: flex; 
    height: 100vh; 
    justify-content: center; 
    align-items: center; 
    font-family: 'Poppins', sans-serif; 
  
} 
  
.inner-container { 
    height: auto; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: darkgreen; 
} 
  
.main-signin { 
    height: 700px; 
    width: 600px; 
    padding: 32px 48px; 
    background-color: white; 
    border-radius: 15px; 
} 
  
input { 
    height: 50px; 
    width: 300px; 
    border-radius: 5px; 
    text-align: center; 
    cursor: context-menu; 
    border: 1px solid rgb(193, 186, 186); 
    font-size: 15px; 
    font-weight: 500; 
    color: rgb(193, 186, 186); 
    text-align: left; 
    padding: 10px; 
} 
  
input:focus { 
    color: black; 
} 
  
.link_forp { 
    text-decoration: none; 
    color: rgb(0, 0, 0) 
} 
  
/* .link_forp:hover{ 
    background-color: rgb(193, 186, 186); 
} */
.link_next { 
    text-decoration: none; 
    color: white; 
} 
  
.sign-heading { 
    text-align: center; 
  
} 
  
.horizontzl_line { 
    border: 1px solid rgb(193, 186, 186); 
    width: 130px; 
    height: 1px; 
    margin: 12px; 
} 
  
.flex_or { 
    display: flex; 
    gap: 6px; 
  
} 
  
.no_a_text { 
    color: rgb(119, 117, 117); 
    margin-left: 20px; 
} 
  
.first-input { 
    margin: 30px; 
    display: flex; 
    height: 140px; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
} 
  
.btn1_nxt { 
    width: 300px; 
    height: 36px; 
    color: white; 
    background-color: black; 
    font-weight: 700; 
    font: 15px; 
    border-radius: 50px; 
} 
  
.btn1_nxt:hover { 
    background-color: rgb(37, 35, 35); 
} 
  
.btn1_forp { 
    width: 300px; 
    height: 36px; 
    border-radius: 50px; 
    border: 1px solid rgb(193, 186, 186); 
    font-weight: 700; 
    font-size: 15px; 
    background-color: white; 
} 
  
.btn1_forp:hover { 
    background-color: rgb(240, 236, 236); 
} 
  
.link_su { 
    text-decoration: none; 
    color: rgb(49, 204, 255); 
} 
  
.link_su:hover { 
    text-decoration: underline; 
} 
  
.flexbottom_text { 
    display: flex; 
    gap: 2px; 
    margin: 20px; 
    text-align: center; 
    padding-left: 15px; 
} 
  
.sign_apple { 
    text-align: center; 
    padding: 8px; 
} 
  
.con_box { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 70px; 
} 
  
.cont_two { 
    display: flex; 
    height: 300px; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 
  
.btn_cont { 
    display: flex; 
    height: 100px; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
} 
  
.close { 
    font-size: 20px; 
    font-weight: 500; 
}

Javascript

// script.js 
let username =  
document.querySelector("#emailid") 
document.querySelector("#formid") 
    .addEventListener("submit", (e) => { 
        e.preventDefault(); 
        let valueinput = username.value 
        if (valueinput.length < 5 || 
            valueinput.includes(" ")) { 
            alert("please enter valid email") 
        } 
    } 
    )