Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
IntroductionToday, 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>
? 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;
}
?? 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
git push -u origin master