# 🚀 Creating a Twitter Login Page Using HTML & CSS and Pushing to GitLab

Today, I took a small but meaningful step in my front-end development journey. I built a Twitter-style login page using only HTML and CSS, and then published the project to GitLab. In this blog post, I’ll walk you through the process — from building the UI to version controlling the code with Git.

💡 Why I Chose This Project

Recreating popular UI designs is a great way to improve your front-end skills. I decided to build a Twitter login page because:

It has a clean, modern look.
It's a simple interface with real-world relevance.
It helped me practice layout techniques, form design, and styling.

🛠️ Tools & Technologies Used

HTML5
CSS3
Git for version control
GitLab for repository hosting

🧱 Step 1: Building the HTML Structure

I started by creating a basic HTML file with a login form. Here's a simplified version:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Login</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <h2>Log in to Twitter</h2>
    <form>
      <input type="text" placeholder="Phone, email, or username" required>
      <input type="password" placeholder="Password" required>
      <button type="submit">Log In</button>
    </form>
    <a href="#">Forgot password?</a>
  </div>
</body>
</html>

🎨 Step 2: Styling with CSS

Next, I styled the form to look like Twitter's login page:

body {
  font-family: Arial, sans-serif;
  background-color: #e6ecf0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  background: white;
  padding: 30px;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input, button {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}
button {
  background-color: #1da1f2;
  color: white;
  border: none;
  cursor: pointer;
}

🗃️ Step 3: Pushing to GitLab

Once I was happy with the design, I pushed the code to GitLab:

git init
git remote add origin https://gitlab.com/your-username/twitter-login-page.git
git add .
git commit -m "Initial commit: Twitter login page with HTML & CSS"
git push -u origin master

✅ Tip: Make sure to create your repository on GitLab first!

✅ Final Output

The login page looks clean and is responsive enough for basic usage. Here’s a quick snapshot of what I created (or include a screenshot or GitLab repo link if possible).