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.

Stephen Rauch
4,31412 gold badges24 silver badges36 bronze badges
asked Apr 25, 2020 at 2:15
\$\endgroup\$
3
  • \$\begingroup\$ Is this all of your CSS? \$\endgroup\$ Commented Apr 25, 2020 at 14:41
  • 2
    \$\begingroup\$ Yeah it's a small project \$\endgroup\$ Commented 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\$ Commented 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>

answered May 9, 2020 at 17:06
\$\endgroup\$

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.