How to create a login page

#webdev #programming #tutorial #css

Hello guys today we are going to learn how to create a Glass effect on a login page using just html and css.

This exercise is aimed at improving your understanding of CSS and how to use it for visually appealing UI.

So let's begin,

Create a folder and name it glass-effect-login(you can name it whatever you want) Create two files index.html and style.css.

Now in the html file add,
`

<div class="container">
  <div class="login">
    <h2>Login</h2>
    <div class="input">
      <p>Name</p>
      <input type="text" placeholder="name...." />
    </div>
    <div class="input">
      <p>Password</p>
      <input type="password" placeholder="enter your password..." />
    </div>
    <button>Sign in</button>
    <p>or contiune with</p>

    <div class="icons">
      <div class="img">
        <img src="images/flat-color-icons_google.png" alt="google" />
      </div>
      <div class="img">
        <img src="images/Group.png" alt="github" />
      </div>
      <div class="img">
        <img src="images/Group (1).png" alt="Facebook" />
      </div>
    </div>
    <p>Dont have an account yet? <span>Register Here</span></p>
  </div>
</div>

`
You should have something like this,

You can find all the images on my GitHub. link is added below

now onto the css
first we add some resets to Style.css

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

body {
  background: black
    url("images/Glass\ Effect\ Login\ Page\ -\ Original\ \(2\).png") no-repeat;
  background-size: cover;
  color: white;
}

now add the followinng to it

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 10px;
}
.login {
  width: 30%;
  display: flex;
  padding: 30px 40px;
  flex-direction: column;
  gap: 30px;

  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.input > input,
button {
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  border-radius: 10px;
  outline: none;
  border: none;
}
button {
  background-color: #bd0c47;
  height: 40px;
  padding: 10px;
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.input > p {
  font-weight: 300;
}

.login > p {
  text-align: center;
}

.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icons > .img {
  width: 30%;
  padding: 5px 10px;
  background: white;
  justify-content: center;
  display: inherit;
  border-radius: 10px;
  cursor: pointer;
}

you finally have a glass effect on a login page like this