create-hokage-js-app

Version:
🔥 Best CLI tool to create a MERN stack template. Quick, clean, and customizable.
github.com/hassaammgl/create-hokage-js-app
149 lines (127 loc) • 2.65 kB
CSS
.right-container, .left-container {
  flex: 1;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .right-container, .left-container {
    flex: 1 0 auto;
  }
}

.left-container {
  background-image: url(https://images.unsplash.com/photo-1686706763783-1378f598d8c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.right-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
}

.right-container__h2 {
  font-size: 30px;
}

.right-container__p {
  opacity: 0.5;
  margin: 5px 0 10px;
}

.right-container__input {
  width: 350px;
  padding: 15px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
}

.right-container__input:focus {
  outline: none;
}

.right-container__label {
  margin-top: 20px;
  font-size: 14px;
}

.right-container__bottom-text {
  text-align: center;
  margin-top: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.right-container__bottom-text > strong {
  color: #fff;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.toggle-container {
  margin: 24px 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-box {
  appearance: none;
  width: 32px;
  height: 16px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  position: relative;
}

.toggle-box:checked {
  background-color: #30A2FF;
}

.toggle-box:checked::after {
  transform: translateX(16px);
  transition: 0.4s ease-in-out;
}

.toggle-box::after {
  position: absolute;
  content: "";
  top: 3px;
  left: 3px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.btn {
  background-color: #30A2FF;
  border: 1px solid #30A2FF;
  width: 350px;
  border-radius: 20px;
  padding: 10px 0;
  color: #fff;
}

.error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.right-container__input.error {
    border-color: #ff4d4f;
    background-color: rgba(255, 77, 79, 0.05);
}

.form-message {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
}

.form-message.success {
    background-color: rgba(82, 196, 26, 0.1);
    color: #52c41a;
    border: 1px solid rgba(82, 196, 26, 0.3);
}

.form-message.error {
    background-color: rgba(255, 77, 79, 0.1);
    color: #ff4d4f;
    border: 1px solid rgba(255, 77, 79, 0.3);
}