Day-7 : How to Create a Login Page with HTML and CSS & Host Your Project on GitLab...

How to Create a Login Page with HTML and CSS & Host Your Project on GitLab

Introduction

In this tutorial, we'll go through the steps to create a simple login page using HTML and CSS. Afterward, we will walk through the process of hosting the project on GitLab.

Step 1: Create the Login Page Using HTML

Let's begin by creating the structure of our login page using HTML.

Open your code editor (like Visual Studio Code, Sublime Text, etc.).
Create a new file and name it index.html.
Add the following HTML code to your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="#">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>
</body>
</html>

Step 2: Style the Login Page with CSS

Next, we’ll style the login form to make it look clean and modern.

Create a new file and name it styles.css.
Add the following CSS code to your styles.css file:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

.login-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

Step 3: Test the Login Page Locally

Save the index.html and styles.css files in the same directory.
Open the index.html file in your browser to see the login page in action.

Step 4: Set Up GitLab and Host Your Project

Now that your login page is ready, it's time to host the project on GitLab.

4.1 Create a GitLab Account

If you don't already have a GitLab account, go to GitLab's official website and sign up for free.

4.2 Create a New Project on GitLab

Once logged in, click on the "New Project" button.
Select "Create Blank Project."
Give your project a name (e.g., "Login-Page").
Set the visibility level (Public or Private).
Click the "Create Project" button.

4.3 Initialize Git and Push Your Code

Now we will initialize Git on your local machine and push the code to GitLab.

Open your terminal (Command Prompt, PowerShell, or terminal in your code editor).
Navigate to the directory where you saved your index.html and styles.css files using the cd command.
Run the following commands:

git Status
git add .
git commit -m "Initial commit"
git push

Make sure to replace yourusername and yourprojectname with your GitLab username and the project name you created earlier.

4.4 Set Up GitLab Pages (Optional)

To host the page on GitLab Pages, follow these steps:

In your GitLab repository, create a new file named .gitlab-ci.yml.
Add the following content to the .gitlab-ci.yml file:

pages:
  script:
    - mkdir .public
    - cp -r * .public
  artifacts:
    paths:
    - .public
  only:
    - master

Commit the file and push the changes.

GitLab will now deploy your site and you’ll get a URL to access your live login page.

DEV Community