Hacker Themed Login Page Design with HTML & CSS

In the world of cyberspace, we embark on the creation of an eye-catching Hacker Themed Login Page Design with HTML & CSS. Users generate a staggering 2.5 quintillion bytes of data every day. Consequently, cybersecurity becomes a major concern for safeguarding this vast amount of sensitive data. With the abundance of information at risk, the need for cybersecurity experts is evident. So let’s start to create a Hacker Themed Login Page Design with HTML & CSS.

Key Features:

Completely responsive
Well optimized
Eye-catchy colors
Modern looks
Lightweight and quick loading.
Easily customizable

Let’s dive into the realm of modern portfolio design with our tutorial on Hacker Themed Login Page Design with HTML & CSS.

SOURCE CODE: Hacker Themed Login Page Design with HTML & CSS

HTML:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Hacker Login Page - Cyber Cript</title>
 <!-- coded by : cybercript.in --> 

</head>
<link rel="stylesheet" href="css/style.css">
 <!-- coded by : cybercript.in --> 

<body>
  <div class="wrapper">

    <div class="login-box">
      <form action="">
        <h2>Login</h2>

        <div class="input-box">
          <span class="icon">
            <ion-icon name="mail"></ion-icon>
          </span>
          <input type="email" required>
          <label>Email</label>
        </div>

        <div class="input-box">
          <span class="icon">
            <ion-icon name="lock-closed"></ion-icon>
          </span>
          <input type="password" required>
          <label>Password</label>
        </div>
 <!-- coded by : cybercript.in --> 
        <div class="remember-forgot">
          <label><input type="checkbox"> Remember me</label>
          <a href="#">Forgot Password?</a>
        </div>

        <button type="submit">Login</button>

        <div class="register-link">
          <p>Don't have an account? <a href="#">Register</a></p>
        </div>
      </form>
    </div>

  </div>
</body>
 <!-- coded by : cybercript.in --> 

</html>

CSS:

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/* <!-- coded by : cybercript.in -->  */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

:root {
  --black-color: #fff;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: url('https://i.pinimg.com/originals/09/05/a7/0905a74092fa43fce6218aa48f6a26a4.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #66fcf1;
  animation: animateBg 4s linear infinite;
}

@keyframes animateBg {
  100% {
    filter: hue-rotate(360deg);
  }
}
/* <!-- coded by : cybercript.in -->  */

.login-box {
  position: relative;
  width: 400px;
  height: 450px;
  background: transparent;
  border-radius: 15px;
  border: 2px solid rgba(255, 0, 0, 0.349);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(15px);
}

h2 {
  font-size: 2em;
  color: var(--black-color);
  text-align: center;
}

.input-box {
  position: relative;
  width: 310px;
  margin: 30px 0;
  border-bottom: 1px solid var(--black-color);
}
/* <!-- coded by : cybercript.in -->  */

.input-box label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 1em;
  color: var(--black-color);
  pointer-events: none;
  transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label {
  top: -5px;
}

.input-box input {
  width: 100%;
  height: 50px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  color: var(--black-color);
  padding: 0 35px 0 5px;
}
/* <!-- coded by : cybercript.in -->  */

.input-box .icon {
  position: absolute;
  right: 8px;
  top: 50%;
  color: var(--black-color);
  transform: translateY(-50%);
}

.remember-forgot {
  margin: -15px 0 15px;
  font-size: .9em;
  color: var(--black-color);
  display: flex;
  justify-content: space-between;
}

.remember-forgot label input {
  margin-right: 3px;
}
/* <!-- coded by : cybercript.in -->  */

.remember-forgot a {
  color: var(--black-color);
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

button {
  width: 100%;
  height: 40px;
  background-color: #000;
  border: 1px dashed aqua;
  border-radius: 40px;
  cursor: pointer;
  font-size: 1em;
  color: #66fcf1;
  font-weight: 500;
}

.register-link {
  font-size: .9em;
  color: var(--black-color);
  text-align: center;
  margin: 25px 0 10px;
}

.register-link p a {
  color: var(--black-color);
  text-decoration: none;
  font-weight: 600;
}
/* <!-- coded by : cybercript.in -->  */

.register-link p a:hover {
  text-decoration: underline;
}

@media (max-width:500px) {
  .login-box {
    width: 100%;
    height: 100vh;
    border: none;
    border-radius: 0;
  }

  .input-box {
    width: 290px;
  }
}
/* <!-- coded by : cybercript.in -->  */

Esports Team Profile Card Using HTML & CSS

In the dynamic world of esports, we create an eye-catching Esports Team Profile Card…

DOWNLOAD SOURCE CODE

2 KB

Conclusion:

And there you go – Hacker Themed Login Page Design with HTML and CSS. You can modify the styles, extend them with new features, or use them in your projects to provide stylish visuals for the users. With a blend of sleek aesthetics and technical prowess, your projects can make a lasting impression. Start your journey into the cyber realm today.

Post Views: 102

Finite number of lines code and infinite possibilities

Programmer, Arpan Bera