1
\$\begingroup\$

I made a simple signup form using this HTML. Am I separating my code properly here or is there some code that I could remove/change?

The form looks good visually, but when I styled it with CSS I noticed a lot of stuff I had to repeat.

<body>
    <form action="#" class="form">
      <div class="img-overlay"></div>
      <div class="icon"><i class="fas fa-times"></i></div>
      <h1>Join our community of developers from all over the world</h1>
      <div class="form-box">
        <div class="email">
          <label for="email">email</label>
          <input id="email" type="email" placeholder="email" />
        </div>
        <div class="password">
          <label for="password">password</label>
          <input id="password" type="password" placeholder="password" />
        </div>
        <div class="password2">
          <label for="password2">confirm password</label>
          <input
            id="password2"
            type="password"
            placeholder="confirm password"
          />
        </div>
      </div>
      <input type="submit" class="button" value="Sign Up" />
      <p>Already have an account</p>
    </form>
  </body>

Here is my CSS.
Is there a better way to style each form input and label without having to separately use display: flex each input like I did below?

.form {
  background-image: linear-gradient(#1391ff, #0145ff);
  width: 400px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 16px;
  padding: 120px 50px;
  box-shadow: 2px 2px 8px #0000008f;
}

.img-overlay::before {
  content: "";
  background-image: url("https://cdn.pixabay.com/photo/2017/09/06/13/18/mosaic-2721424_960_720.jpg");
  position: absolute;
  /* transform: translate(-50%, -20%); */
  left: 0;
  top: 0;
  opacity: 0.18;
  width: 400px;
  height: 600px;
  border-radius: 16px;
  z-index: -1;
}
.icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.589);
}

.form h1 {
  color: white;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 3rem;
}

.email {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
}

#email,
#email::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.password {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
}

#password,
#password::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.password2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 2.5rem;
  font-size: 0.7rem;
}

#password2,
#password2::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.button {
  width: 100%;
  background: white;
  border: none;
  border-radius: 30px;
  padding: 14px 14px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #0145ff;
  outline: none;
}

.button:hover {
  width: 100%;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 30px;
  padding: 14px 14px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  transition: 0.3s ease-in-out;
  outline: none;
  cursor: pointer;
}

p {
  color: rgba(255, 255, 255, 0.473);
  font-size: 0.8rem;
}

I feel like I'm repeating a lot of code in the CSS, but I'm not sure if I am doing it properly even though my code creates the sign up form and everything looks good aesthetically.

\$\endgroup\$
3
  • \$\begingroup\$ Is this all of your CSS? \$\endgroup\$
    – pacmaninbw
    Apr 25, 2020 at 14:41
  • 2
    \$\begingroup\$ Yeah it's a small project \$\endgroup\$
    – Brian
    Apr 25, 2020 at 15:45
  • \$\begingroup\$ To be honest with you, there isn't a lot of code repetition here. About the only thing that repeats is the width and height for .form and .image-overlay. While many fields are repeating, their values are different. You might want to look into inheritance but their won't be much code reduction. \$\endgroup\$
    – pacmaninbw
    Apr 25, 2020 at 17:02

1 Answer 1

1
\$\begingroup\$

There were few places where you could have optimized your CSS:

1) As all inputs were having the same style. Instead of declaring style for each input separately, you could have declared the global style on input only.

2) As all labels were having the same style. You can just make a common class (I made form-container ) and put it on all rows and put the style in that.

3) Button hover - only add that CSS which are getting change. Rest will be inherited from the parent button property

Below is the optimized code.

.form {
  background-image: linear-gradient(#1391ff, #0145ff);
  width: 400px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 16px;
  padding: 120px 50px;
  box-shadow: 2px 2px 8px #0000008f;
}

.img-overlay::before {
  content: "";
  background-image: url("https://cdn.pixabay.com/photo/2017/09/06/13/18/mosaic-2721424_960_720.jpg");
  position: absolute;
  /* transform: translate(-50%, -20%); */
  left: 0;
  top: 0;
  opacity: 0.18;
  width: 400px;
  height: 600px;
  border-radius: 16px;
  z-index: -1;
}
.icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.589);
}

.form h1 {
  color: white;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 3rem;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: white;
  margin-bottom: 1.5rem;
  font-size: 0.7rem;
}

input,
input::placeholder {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  color: rgba(255, 255, 255, 0.582);
  margin-top: 0.5rem;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(231, 231, 231, 0.8);
}

.button {
  width: 100%;
  background: white;
  border: none;
  border-radius: 30px;
  padding: 14px 14px;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #0145ff;
  outline: none;
}

.button:hover {
  background: transparent;
  border: 2px solid #fff;
  color: rgb(255, 255, 255);
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

p {
  color: rgba(255, 255, 255, 0.473);
  font-size: 0.8rem;
}
<body>
    <form action="#" class="form">
      <div class="img-overlay"></div>
      <div class="icon"><i class="fas fa-times"></i></div>
      <h1>Join our community of developers from all over the world</h1>
      <div class="form-box">
        <div class="form-container">
          <label for="email">email</label>
          <input id="email" type="email" placeholder="email" />
        </div>
        <div class="form-container">
          <label for="password">password</label>
          <input id="password" type="password" placeholder="password" />
        </div>
        <div class="form-container">
          <label for="password2">confirm password</label>
          <input
            id="password"
            type="password"
            placeholder="confirm password"
          />
        </div>
      </div>
      <input type="submit" class="button" value="Sign Up" />
      <p>Already have an account</p>
    </form>
  </body>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.