DEV Community

Ebenezer Ametepeh
Ebenezer Ametepeh

Posted on

How to create a login page

image of the completed outpu of the login page

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,

  1. 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>
Enter fullscreen mode Exit fullscreen mode

`
You should have something like this,
output of HTML code without css

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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

Image of the output of code

thanks for staying to read to the end. for more tutorials follow my page let me know what you think in the comments

Top comments (1)

Collapse
 
desart profile image
EliDotco

thanks man