Skip to content

Commit b6ae0a1

Browse files
MDJAminMDJAmin
committed
Clean code's
1 parent 2ac0e48 commit b6ae0a1

File tree

4 files changed

+237
-219
lines changed

4 files changed

+237
-219
lines changed

‎css/style.css‎

Lines changed: 152 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,224 +1,231 @@
11
:root {
2-
/* COLORS */
3-
--white: #e9e9e9;
4-
--gray: #333;
5-
--blue: #0367a6;
6-
--lightblue: #008997;
2+
/* COLORS */
3+
--white: #e9e9e9;
4+
--gray: #333;
5+
--blue: #0367a6;
6+
--lightblue: #008997;
77

8-
/* RADII */
9-
--button-radius: 0.7rem;
8+
/* RADII */
9+
--button-radius: 0.7rem;
1010

11-
/* SIZES */
12-
--max-width: 758px;
13-
--max-height: 420px;
11+
/* SIZES */
12+
--max-width: 758px;
13+
--max-height: 420px;
1414

15-
font-size: 16px;
16-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
17-
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
15+
font-size: 16px;
16+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
17+
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1818
}
1919

20-
2120
body {
22-
align-items: center;
23-
background-color: var(--white);
24-
background: url("../assets/img.jpg");
25-
background-attachment: fixed;
26-
background-position: center;
27-
background-repeat: no-repeat;
28-
background-size: cover;
29-
display: grid;
30-
height: 100vh;
31-
place-items: center;
32-
overflow: hidden;
21+
align-items: center;
22+
background-color: var(--white);
23+
background: url("../assets/img.jpg");
24+
background-attachment: fixed;
25+
background-position: center;
26+
background-repeat: no-repeat;
27+
background-size: cover;
28+
display: grid;
29+
height: 100vh;
30+
place-items: center;
31+
overflow: hidden;
3332
}
3433

3534
.form__title {
36-
font-weight: 300;
37-
margin: 0;
38-
margin-bottom: 1.25rem;
35+
font-weight: 300;
36+
margin: 0;
37+
margin-bottom: 1.25rem;
3938
}
4039

4140
.link {
42-
color: var(--gray);
43-
font-size: 0.9rem;
44-
margin: 1.5rem 0;
45-
text-decoration: none;
41+
color: var(--gray);
42+
font-size: 0.9rem;
43+
margin: 1.5rem 0;
44+
text-decoration: none;
4645
}
4746

4847
.container {
49-
background-color: var(--white);
50-
border-radius: var(--button-radius);
51-
box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
52-
0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
53-
height: var(--max-height);
54-
max-width: var(--max-width);
55-
overflow: hidden;
56-
position: relative;
57-
width: 100%;
48+
background-color: var(--white);
49+
border-radius: var(--button-radius);
50+
box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
51+
0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
52+
height: var(--max-height);
53+
max-width: var(--max-width);
54+
overflow: hidden;
55+
position: relative;
56+
width: 100%;
5857
}
5958

6059
.container__form {
61-
height: 100%;
62-
position: absolute;
63-
top: 0;
64-
transition: all 0.6s ease-in-out;
60+
height: 100%;
61+
position: absolute;
62+
top: 0;
63+
transition: all 0.6s ease-in-out;
6564
}
6665

6766
.container--signin {
68-
left: 0;
69-
width: 50%;
70-
z-index: 2;
67+
left: 0;
68+
width: 50%;
69+
z-index: 2;
7170
}
7271

7372
.container.right-panel-active .container--signin {
74-
transform: translateX(100%);
73+
transform: translateX(100%);
7574
}
7675

7776
.container--signup {
78-
left: 0;
79-
opacity: 0;
80-
width: 50%;
81-
z-index: 1;
77+
left: 0;
78+
opacity: 0;
79+
width: 50%;
80+
z-index: 1;
8281
}
8382

8483
.container.right-panel-active .container--signup {
85-
animation: show 0.6s;
86-
opacity: 1;
87-
transform: translateX(100%);
88-
z-index: 5;
84+
animation: show 0.6s;
85+
opacity: 1;
86+
transform: translateX(100%);
87+
z-index: 5;
8988
}
9089

9190
.container__overlay {
92-
height: 100%;
93-
left: 50%;
94-
overflow: hidden;
95-
position: absolute;
96-
top: 0;
97-
transition: transform 0.6s ease-in-out;
98-
width: 50%;
99-
z-index: 100;
91+
height: 100%;
92+
left: 50%;
93+
overflow: hidden;
94+
position: absolute;
95+
top: 0;
96+
transition: transform 0.6s ease-in-out;
97+
width: 50%;
98+
z-index: 100;
10099
}
101100

102101
.container.right-panel-active .container__overlay {
103-
transform: translateX(-100%);
102+
transform: translateX(-100%);
104103
}
105104

106105
.overlay {
107-
background-color: var(--lightblue);
108-
background: url("../assets/img.jpg");
109-
background-attachment: fixed;
110-
background-position: center;
111-
background-repeat: no-repeat;
112-
background-size: cover;
113-
height: 100%;
114-
left: -100%;
115-
position: relative;
116-
transform: translateX(0);
117-
transition: transform 0.6s ease-in-out;
118-
width: 200%;
106+
background-color: var(--lightblue);
107+
background: url("../assets/img.jpg");
108+
background-attachment: fixed;
109+
background-position: center;
110+
background-repeat: no-repeat;
111+
background-size: cover;
112+
height: 100%;
113+
left: -100%;
114+
position: relative;
115+
transform: translateX(0);
116+
transition: transform 0.6s ease-in-out;
117+
width: 200%;
119118
}
120119

121120
.container.right-panel-active .overlay {
122-
transform: translateX(50%);
121+
transform: translateX(50%);
123122
}
124123

125124
.overlay__panel {
126-
align-items: center;
127-
display: flex;
128-
flex-direction: column;
129-
height: 100%;
130-
justify-content: center;
131-
position: absolute;
132-
text-align: center;
133-
top: 0;
134-
transform: translateX(0);
135-
transition: transform 0.6s ease-in-out;
136-
width: 50%;
125+
align-items: center;
126+
display: flex;
127+
flex-direction: column;
128+
height: 100%;
129+
justify-content: center;
130+
position: absolute;
131+
text-align: center;
132+
top: 0;
133+
transform: translateX(0);
134+
transition: transform 0.6s ease-in-out;
135+
width: 50%;
137136
}
138137

139-
140138
.overlay--left {
141-
transform: translateX(-20%);
139+
transform: translateX(-20%);
142140
}
143141

144142
.container.right-panel-active .overlay--left {
145-
transform: translateX(0);
143+
transform: translateX(0);
146144
}
147145

148146
.overlay--right {
149-
right: 0;
150-
transform: translateX(0);
147+
right: 0;
148+
transform: translateX(0);
151149
}
152150

153151
.container.right-panel-active .overlay--right {
154-
transform: translateX(20%);
152+
transform: translateX(20%);
155153
}
156154

157155
.btn {
158-
background-color: var(--blue);
159-
background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
160-
border-radius: 20px;
161-
border: 1px solid var(--blue);
162-
color: var(--white);
163-
cursor: pointer;
164-
font-size: 0.8rem;
165-
font-weight: bold;
166-
letter-spacing: 0.1rem;
167-
padding: 0.9rem 4rem;
168-
text-transform: uppercase;
169-
transition: transform 80ms ease-in;
156+
background-color: var(--blue);
157+
background-image: linear-gradient(
158+
90deg,
159+
var(--blue) 0%,
160+
var(--lightblue) 74%
161+
);
162+
border-radius: 20px;
163+
border: 1px solid var(--blue);
164+
color: var(--white);
165+
cursor: pointer;
166+
font-size: 0.8rem;
167+
font-weight: bold;
168+
letter-spacing: 0.1rem;
169+
padding: 0.9rem 4rem;
170+
text-transform: uppercase;
171+
transition: transform 80ms ease-in;
170172
}
171173

172174
.form > .btn {
173-
margin-top: 1.5rem;
175+
margin-top: 1.5rem;
174176
}
175177

176178
.btn:active {
177-
transform: scale(0.95);
179+
transform: scale(0.95);
178180
}
179181

180182
.btn:focus {
181-
outline: none;
183+
outline: none;
182184
}
183185

184186
.form {
185-
background-color: var(--white);
186-
display: flex;
187-
align-items: center;
188-
justify-content: center;
189-
flex-direction: column;
190-
padding: 0 3rem;
191-
height: 100%;
192-
text-align: center;
187+
background-color: var(--white);
188+
display: flex;
189+
align-items: center;
190+
justify-content: center;
191+
flex-direction: column;
192+
padding: 0 3rem;
193+
height: 100%;
194+
text-align: center;
193195
}
194196

195197
.input {
196-
background-color: #fff;
197-
border: none;
198-
padding: 0.9rem 0.9rem;
199-
margin: 0.5rem 0;
200-
width: 100%;
198+
background-color: #fff;
199+
border: none;
200+
padding: 0.9rem 0.9rem;
201+
margin: 0.5rem 0;
202+
width: 100%;
201203
}
202204

203205
@keyframes show {
204-
0%,
205-
49.99% {
206-
opacity: 0;
207-
z-index: 1;
208-
}
209-
210-
50%,
211-
100% {
212-
opacity: 1;
213-
z-index: 5;
214-
}
215-
}
216-
.welcome{
217-
font-size: 4em;
218-
font-size: 4em;
219-
background:linear-gradient(90deg, rgb(130, 169, 223) 30%, rgb(232, 238, 176) 120%);
220-
-webkit-background-clip: text;
221-
-webkit-text-fill-color: transparent;
222-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
223-
opacity: 90%;
224-
}
206+
0%,
207+
49.99% {
208+
opacity: 0;
209+
z-index: 1;
210+
}
211+
212+
50%,
213+
100% {
214+
opacity: 1;
215+
z-index: 5;
216+
}
217+
}
218+
.welcome {
219+
font-size: 4em;
220+
font-size: 4em;
221+
background: linear-gradient(
222+
90deg,
223+
rgb(130, 169, 223) 30%,
224+
rgb(232, 238, 176) 120%
225+
);
226+
-webkit-background-clip: text;
227+
-webkit-text-fill-color: transparent;
228+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
229+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
230+
opacity: 90%;
231+
}

0 commit comments

Comments
 (0)