Sign-in Form by admin

0 Add to Favorites

HTML Code
CSS Code

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(160deg, #445e93, #7eb2dd);
  background-size: 400% 400%;

-webkit-animation: AnimationName 34s ease infinite;
  -moz-animation: AnimationName 34s ease infinite;
  animation: AnimationName 34s ease infinite;
}

.container {
  width: 100%;
  max-width: 30rem;
  background-color: #fff;
}

.heading {
  text-align: center;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 2rem;
}

.form {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  padding: 3rem 2.5rem;
}

.form-heading {
  font-size: 1.5rem;
}

.email {
  display: block;
  font-size: 1rem;
  margin: 1rem 0 0.5rem 0;
}

.input-box input {
  width: 100%;
  height: 3rem;
  margin-bottom: 2rem;
  padding: 0 0 0 1rem;
}

input[type="email"],
input[type="password"] {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

.input-box-forgot {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-box-forgot a {
  text-decoration: none;
  color: #445e93;
  font-weight: 600;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.checkbox p {
  font-size: 1rem;
}

.btn {
  width: 100%;
  padding: 0.8rem 0;
  color: #fff;
  font-weight: 600;
  background-color: #445e93;
  outline: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Poppins", sans-serif;
}

.btn:hover {
  background-color: #7eb2dd;
}

.google {
  text-align: center;
  margin-top: 2rem;
}

.google a {
  font-size: 1rem;
  text-decoration: none;
  color: #445e93;
  font-weight: 600;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 15%;
  }
  50% {
    background-position: 100% 86%;
  }
  100% {
    background-position: 0% 15%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 15%;
  }
  50% {
    background-position: 100% 86%;
  }
  100% {
    background-position: 0% 15%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 15%;
  }
  50% {
    background-position: 100% 86%;
  }
  100% {
    background-position: 0% 15%;
  }
}

Uploaded 13th July 2024 Views 264 #login #signin #form #google #password

CSSPortal @admin

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

Member since 25th June 2024

CSS Properties Used

There are 30 CSS properties used in the above example. Click to view and learn about each property.

HTML Tags Used

There are 9 HTML Tags used in the above example. Click to view and learn about each tag.

html body div p form label input a button