DEV Community

kanaga vimala
kanaga vimala

Posted on

🚀 Creating a Simple Sign-Up Page and Pushing It to GitLab

✨ Introduction

Today, I worked on a simple but essential feature for many websites: a Sign-Up page. Using basic HTML and CSS, I designed a responsive form and then pushed the code to GitLab for version control and sharing.

In this blog post, I’ll walk you through my process — from building the form to using GitLab for version control.

🛠️ Step 1: Building the Sign-Up Page with HTML & CSS

I started by creating a basic structure with HTML. The form includes fields for name, email, password, and a sign-up button. Here's a sample of the code I used:

📄 index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sign Up</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="signup-container">
        <h2>Create an Account</h2>
        <form>
            <input type="text" placeholder="Full Name" required />
            <input type="email" placeholder="Email Address" required />
            <input type="password" placeholder="Password" required />
            <button type="submit">Sign Up</button>
        </form>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎨 style.css 

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

.signup-container {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 300px;
}

.signup-container h2 {
    margin-bottom: 1rem;
}

.signup-container input {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.signup-container button {
    width: 100%;
    padding: 0.7rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 Step 2: Pushing Code to GitLab

After finishing the design, I initialized a Git repository and pushed the project to GitLab.

🔧 Commands I used: 

git init
git add .
git commit -m "Initial commit - Sign Up page"
git remote add origin https://gitlab.com/your-username/your-repo-name.git
git push -u origin master
Enter fullscreen mode Exit fullscreen mode

Top comments (0)