DEV Community

A Ramesh
A Ramesh

Posted on

Day-9 : Project Completed: Login Page for X.com (Using HTML & CSS)...

✅ Project Completed: Login Page for X.com (Using HTML & CSS)

Today, I completed a fully responsive and stylish Login Page for X.com using just HTML and CSS. This project allowed me to practice layout building, form design, and footer structure — all without using JavaScript or backend logic.

💻 Technologies Used:

  • HTML5 – for the structure and content
  • CSS3 – for styling, layout design, and responsive alignment

🔍 Key Features:

  • Logo section with an image
  • Clean layout with Google and Apple sign-up options
  • Simple “Create Account” and “Sign In” buttons
  • Agreement note for Terms & Privacy
  • A footer with helpful links and information

🧾 Source Code

📄 index.html (with internal CSS) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>X. It's what's happening / X</title>
  <link rel="icon" type="image/png" href="/asset/X_title_logo.png" />
  <style>
    *,
    a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
    }

    .containar {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo img {
      width: 600px;
    }

    .sign_page {
      padding: 70px;
    }

    .sign_page h1 {
      margin-top: 150px;
      font-size: 4rem;
      font-weight: 900;
    }

    .sign_page h2 {
      font-size: 2rem;
      font-weight: bold;
      margin: 20px 0;
    }

    .Google_logo,
    .Apple_logo,
    .create_account,
    .old_account {
      border: 1px solid rgb(185, 184, 184);
      border-radius: 30px;
      background-color: rgb(253, 255, 253);
      width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    }

    .create_account {
      background-color: rgb(29, 155, 240);
    }

    .new_account {
      color: white;
    }

    .Google,
    .Apple,
    .new_account {
      color: black;
      font-size: 1rem;
      padding: 10px;
    }

    .previus_account {
      color: rgb(29, 155, 240);
      padding: 10px;
      font-size: 1rem;
    }

    .Google_icon {
      width: 30px;
      margin-right: 7px;
      border-radius: 50%;
    }

    .Apple_icon {
      width: 20px;
      margin-right: 10px;
      border-radius: 50%;
    }

    .or {
      display: flex;
      align-items: center;
      width: 300px;
      margin: 20px 0;
    }

    .or hr {
      width: 120px;
      color: rgb(228, 230, 230);
    }

    .bio {
      width: 300px;
      font-size: 0.7rem;
    }

    .bio span {
      color: rgb(29, 155, 240);
    }

    .old_id {
      margin-top: 70px;
      font-size: 1.1rem;
    }

    .X_com_footer {
      margin: 20px 350px 0px 300px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .X_com_footer a {
      color: rgb(172, 169, 169);
      font-size: 0.6rem;
      border-right: 1px solid;
      padding-right: 10px;
    }
  </style>
</head>
<body>
  <div class="containar">
    <div class="logo">
      <img src="/asset/X_logo.png" alt="X Logo" />
    </div>
    <div class="sign_page">
      <h1>Happening now</h1>
      <h2>Join today.</h2>

      <button class="Google_logo">
        <img class="Google_icon" src="/asset/Google_logo.png" alt="Google" />
        <a class="Google" href="">Sign up with Google</a>
      </button>

      <button class="Apple_logo">
        <img class="Apple_icon" src="/asset/Apple_logo.png" alt="Apple" />
        <a class="Apple" href="">Sign up with Apple</a>
      </button>

      <div class="or">
        <hr />
        <p>OR</p>
        <hr />
      </div>

      <button class="create_account">
        <a class="new_account" href="">Create Account</a>
      </button>

      <p class="bio">
        By signing up, you agree to the
        <a href=""><span>Terms of Service</span></a> and
        <a href=""><span>Privacy Policy</span></a>, including
        <a href=""><span>Cookie use.</span></a>
      </p>

      <h2 class="old_id">Already have an account?</h2>

      <button class="old_account">
        <a class="previus_account" href="">Sign in</a>
      </button>
    </div>
  </div>

  <div class="X_com_footer">
    <a href="">About</a>
    <a href="">Download the X app</a>
    <a href="">Grok</a>
    <a href="">Help Center</a>
    <a href="">Terms of Service</a>
    <a href="">Privacy Policy</a>
    <a href="">Cookie Policy</a>
    <a href="">Accessibility</a>
    <a href="">Ads info</a>
    <a href="">Blog</a>
    <a href="">Careers</a>
    <a href="">Brand Resources</a>
    <a href="">Advertising</a>
    <a href="">Marketing</a>
    <a href="">X for Business</a>
    <a href="">Developers</a>
    <a href="">Directory</a>
    <a href="">Settings</a>
    <a href="">© 2025 X Corp.</a>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

📘 What I Learned:

  • How to structure a modern login page using HTML
  • Layout design using CSS Grid and Flexbox
  • Styling buttons and input areas for clean UI
  • Creating a functional and well-organized footer

🛠️ What’s Next:

  • Add form validation using JavaScript
  • Connect it to a backend (maybe with Java + MySQL)
  • Add animations and transitions for better UX

Top comments (0)