Skip to content

Commit 24aab5f

Browse files
SamiurRahmanMukulSamiurRahmanMukul
committed
registration form frontend style build
1 parent cb9f355 commit 24aab5f

File tree

5 files changed

+620
-3
lines changed

5 files changed

+620
-3
lines changed

‎index.html

+98-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,104 @@
1616
<body>
1717
<section id="form-section">
1818
<div class="form-container">
19-
<!-- @TODO: wait next time code generate here... -->
19+
<!-- form header -->
20+
<div class="form-header">
21+
<!-- form title -->
22+
<h2 class="form-title">Create Account</h2>
23+
24+
<!-- form server side validation error message -->
25+
<div class="show-error">
26+
<p class="error-message">Something went wrong. You can't Registration successfully. Try to again. Thanks</p>
27+
</div>
28+
</div>
29+
30+
<!-- form field -->
31+
<form action="" method="post" id="input-form">
32+
<!-- input group / full name -->
33+
<div class="form-control">
34+
<label for="fullName">*Full Name</label>
35+
<input type="text" name="fullName" placeholder="Type here your full name" id="fullName" />
36+
<i class="uil uil-check-circle"></i>
37+
<i class="uil uil-exclamation-circle"></i>
38+
<small>This field is required. Please input this form.</small>
39+
</div>
40+
41+
<!-- input group / username -->
42+
<div class="form-control">
43+
<label for="username">*Define Username</label>
44+
<input type="text" name="username" placeholder="Type here a unique username" id="username" />
45+
<i class="uil uil-check-circle"></i>
46+
<i class="uil uil-exclamation-circle"></i>
47+
<small>This field is required. Please input this form.</small>
48+
</div>
49+
50+
<!-- input group / email -->
51+
<div class="form-control">
52+
<label for="email">*Your Email</label>
53+
<input type="email" name="email" placeholder="Type here your email address" id="email" />
54+
<i class="uil uil-check-circle"></i>
55+
<i class="uil uil-exclamation-circle"></i>
56+
<small>This field is required. Please input this form.</small>
57+
</div>
58+
59+
<!-- input group / phone number -->
60+
<div class="form-control">
61+
<label for="phoneNumber">*Phone Number</label>
62+
<input type="text" name="phoneNumber" placeholder="Type here your phone number" id="phoneNumber" />
63+
<i class="uil uil-check-circle"></i>
64+
<i class="uil uil-exclamation-circle"></i>
65+
<small>This field is required. Please input this form.</small>
66+
</div>
67+
68+
<!-- input group / date of birth -->
69+
<div class="form-control">
70+
<label for="dataOfBirth">Date Of Birth</label>
71+
<input type="date" name="dataOfBirth" id="dataOfBirth" />
72+
</div>
73+
74+
<!-- input group / gender -->
75+
<div class="form-control">
76+
<label for="gender">Your Gender</label>
77+
<select name="gender" id="gender">
78+
<option disabled selected value>-- select an option --</option>
79+
<option value="male">Male</option>
80+
<option value="female">Female</option>
81+
</select>
82+
</div>
83+
84+
<!-- input group / user bio -->
85+
<div class="form-control">
86+
<label for="userBio">Write Yourself</label>
87+
<textarea name="userBio" id="userBio" cols="30" rows="5" placeholder="Write here something about yourself"></textarea>
88+
</div>
89+
90+
<!-- input group / password -->
91+
<div class="form-control">
92+
<label for="password">*Define Password</label>
93+
<input type="password" name="password" placeholder="Type here a unique and strong password" id="password" />
94+
<i class="uil uil-check-circle"></i>
95+
<i class="uil uil-exclamation-circle"></i>
96+
<small>This field is required. Please input this form.</small>
97+
</div>
98+
99+
<!-- input group / check password -->
100+
<div class="form-control">
101+
<label for="checkPassword">*Retype Password</label>
102+
<input type="password" name="checkPassword" placeholder="Retype here your define unique and strong password" id="checkPassword" />
103+
<i class="uil uil-check-circle"></i>
104+
<i class="uil uil-exclamation-circle"></i>
105+
<small>This field is required. Please input this form.</small>
106+
</div>
107+
108+
<!-- input group / TAC -->
109+
<div class="form-control">
110+
<input type="checkbox" name="agree-tac" id="agree-tac" />
111+
<p class="message-tac">*I agree to the Terms and Conditions (TAC).</p>
112+
</div>
113+
114+
<!-- submit button -->
115+
<button type="submit" name="submit" id="submit" class="submit">Submit Now</button>
116+
</form>
20117
</div>
21118
</section>
22119

‎src/styles/sass/include/_registration-form.scss

+260
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
section#form-section {
2+
.form-container {
3+
width: 480px;
4+
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
5+
border-radius: 5px;
6+
-webkit-border-radius: 5px;
7+
-moz-border-radius: 5px;
8+
-ms-border-radius: 5px;
9+
-o-border-radius: 5px;
10+
margin-top: 30px;
11+
margin-bottom: 30px;
12+
13+
// form header
14+
.form-header {
15+
// form title
16+
.form-title {
17+
font-size: 2.5rem;
18+
font-weight: bold;
19+
text-align: center;
20+
text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(255, 255, 255, 0.3);
21+
}
22+
23+
// server side validation error message
24+
.show-error {
25+
background-color: $danger-color;
26+
margin: 10px 10px;
27+
border-radius: 5px;
28+
-webkit-border-radius: 5px;
29+
-moz-border-radius: 5px;
30+
-ms-border-radius: 5px;
31+
-o-border-radius: 5px;
32+
display: none;
33+
34+
// error message
35+
.error-message {
36+
font-size: 1rem;
37+
text-align: center;
38+
color: $white-color;
39+
}
40+
}
41+
}
42+
43+
// form field
44+
form#input-form {
45+
justify-content: center;
46+
align-items: center;
47+
48+
.form-control {
49+
padding: 0 10px;
50+
position: relative;
51+
52+
// input label
53+
label {
54+
display: block;
55+
font-size: 1.4rem;
56+
font-weight: bold;
57+
text-transform: capitalize;
58+
}
59+
60+
// input field
61+
input {
62+
width: 100%;
63+
padding: 10px;
64+
border: 2px solid $inverse-color;
65+
font-size: 1rem;
66+
border-radius: 5px;
67+
-webkit-border-radius: 5px;
68+
-moz-border-radius: 5px;
69+
-ms-border-radius: 5px;
70+
-o-border-radius: 5px;
71+
transition: $main-transition;
72+
-webkit-transition: $main-transition;
73+
-moz-transition: $main-transition;
74+
-ms-transition: $main-transition;
75+
-o-transition: $main-transition;
76+
}
77+
input:focus {
78+
outline: none;
79+
border: 2px solid $primary-color;
80+
border-radius: 5px;
81+
-webkit-border-radius: 5px;
82+
-moz-border-radius: 5px;
83+
-ms-border-radius: 5px;
84+
-o-border-radius: 5px;
85+
}
86+
87+
// validation sing
88+
i {
89+
position: absolute;
90+
top: 42px;
91+
right: 20px;
92+
visibility: hidden;
93+
}
94+
95+
// client side validation error message
96+
small {
97+
font-size: 0.8rem;
98+
font-family: cursive;
99+
color: $danger-color;
100+
visibility: hidden;
101+
}
102+
103+
// input option / select
104+
select {
105+
width: 100%;
106+
padding: 10px;
107+
border: 2px solid $inverse-color;
108+
font-size: 1rem;
109+
border-radius: 5px;
110+
-webkit-border-radius: 5px;
111+
-moz-border-radius: 5px;
112+
-ms-border-radius: 5px;
113+
-o-border-radius: 5px;
114+
transition: $main-transition;
115+
-webkit-transition: $main-transition;
116+
-moz-transition: $main-transition;
117+
-ms-transition: $main-transition;
118+
-o-transition: $main-transition;
119+
}
120+
select:focus {
121+
outline: none;
122+
border: 2px solid $primary-color;
123+
border-radius: 5px;
124+
-webkit-border-radius: 5px;
125+
-moz-border-radius: 5px;
126+
-ms-border-radius: 5px;
127+
-o-border-radius: 5px;
128+
}
129+
130+
// input option / textarea
131+
textarea {
132+
width: 100%;
133+
padding: 10px;
134+
border: 2px solid $inverse-color;
135+
font-size: 1rem;
136+
border-radius: 5px;
137+
-webkit-border-radius: 5px;
138+
-moz-border-radius: 5px;
139+
-ms-border-radius: 5px;
140+
-o-border-radius: 5px;
141+
transition: $main-transition;
142+
-webkit-transition: $main-transition;
143+
-moz-transition: $main-transition;
144+
-ms-transition: $main-transition;
145+
-o-transition: $main-transition;
146+
}
147+
textarea:focus {
148+
outline: none;
149+
border: 2px solid $primary-color;
150+
border-radius: 5px;
151+
-webkit-border-radius: 5px;
152+
-moz-border-radius: 5px;
153+
-ms-border-radius: 5px;
154+
-o-border-radius: 5px;
155+
}
156+
157+
// agree TAC
158+
#agree-tac {
159+
position: absolute;
160+
right: 222px;
161+
margin-top: 5px;
162+
}
163+
.message-tac {
164+
font-size: 1.1rem;
165+
margin-left: 20px;
166+
margin-bottom: 10px;
167+
}
168+
}
169+
170+
// client side validation style
171+
// validation success
172+
.form-control.success {
173+
label {
174+
color: $success-color;
175+
}
176+
input {
177+
border: 2px solid $success-color;
178+
}
179+
i.uil-check-circle {
180+
visibility: visible;
181+
color: $success-color;
182+
}
183+
.uil-exclamation-circle {
184+
visibility: hidden;
185+
}
186+
}
187+
188+
// validation error
189+
.form-control.error {
190+
label {
191+
color: $danger-color;
192+
}
193+
input {
194+
border: 2px solid $danger-color;
195+
}
196+
i.uil-check-circle {
197+
visibility: hidden;
198+
}
199+
.uil-exclamation-circle {
200+
visibility: visible;
201+
color: $danger-color;
202+
}
203+
small {
204+
visibility: visible;
205+
}
206+
}
207+
208+
// submit button
209+
button.submit {
210+
width: 80%;
211+
padding: 10px;
212+
margin: 10px 20px;
213+
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
214+
margin-left: 50px;
215+
background-color: $white-color;
216+
border: 2px solid $inverse-color;
217+
border-radius: 5px;
218+
-webkit-border-radius: 5px;
219+
-moz-border-radius: 5px;
220+
-ms-border-radius: 5px;
221+
-o-border-radius: 5px;
222+
font-size: 1rem;
223+
font-weight: bold;
224+
color: $black-color;
225+
transition: $main-transition;
226+
-webkit-transition: $main-transition;
227+
-moz-transition: $main-transition;
228+
-ms-transition: $main-transition;
229+
-o-transition: $main-transition;
230+
cursor: pointer;
231+
}
232+
button.submit:hover {
233+
color: $white-color;
234+
background-color: $primary-color;
235+
border: 2px solid $primary-color;
236+
border-radius: 50px;
237+
-webkit-border-radius: 50px;
238+
-moz-border-radius: 50px;
239+
-ms-border-radius: 50px;
240+
-o-border-radius: 50px;
241+
}
242+
243+
// submit button disabled
244+
button.disabled {
245+
color: $gray-color;
246+
border: 2px solid $gray-color;
247+
}
248+
button.disabled:hover {
249+
color: $inverse-color;
250+
background-color: $white-color;
251+
border: 2px solid $inverse-color;
252+
border-radius: 5px;
253+
-webkit-border-radius: 5px;
254+
-moz-border-radius: 5px;
255+
-ms-border-radius: 5px;
256+
-o-border-radius: 5px;
257+
}
258+
}
259+
}
260+
}

0 commit comments

Comments
 (0)