Skip to content
This repository was archived by the owner on Oct 5, 2022. It is now read-only.

Commit 8b2c271

Browse files
Jarvis1337Jarvis1337
authored
Add files via upload
1 parent d3f754c commit 8b2c271

23 files changed

+2707
-0
lines changed

‎Your's Jarvis/Css/Login.css‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
/* Google Font Link */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins" , sans-serif;
8+
}
9+
body{
10+
min-height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
background-image: url("../image/image.jpg");
15+
background-size: cover;
16+
padding: 30px;
17+
}
18+
.container{
19+
position: relative;
20+
max-width: 100%;
21+
border-radius: 8%;
22+
width: 400px;
23+
background-color: rgba(0, 0, 0, 0.22);
24+
padding: 40px 30px;
25+
box-shadow: 0 5px 10px rgba(0,0,0,0.22);
26+
perspective: 700px;
27+
}
28+
.container .cover{
29+
position: absolute;
30+
top: 0;
31+
left: 100%;
32+
height: 100%;
33+
width: 40%;
34+
z-index: 98;
35+
transition: all 1s ease;
36+
transform-origin: left;
37+
transform-style: preserve-3d;
38+
}
39+
40+
.container .cover .front,
41+
.container .cover .back{
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
height: 100%;
46+
width: 100%;
47+
}
48+
.cover .back{
49+
transform: rotateY(180deg);
50+
backface-visibility: hidden;
51+
}
52+
.container .cover::before,
53+
.container .cover::after{
54+
content: '';
55+
position: absolute;
56+
height: 100%;
57+
width: 100%;
58+
background: aqua;
59+
opacity: 0.3;
60+
z-index: 12;
61+
}
62+
.container .cover::after{
63+
opacity: 0.3;
64+
transform: rotateY(180deg);
65+
backface-visibility: hidden;
66+
}
67+
.container .cover img{
68+
position: absolute;
69+
height: 100%;
70+
width: 100%;
71+
object-fit: cover;
72+
z-index: 10;
73+
}
74+
.container .cover .text{
75+
position: absolute;
76+
z-index: 130;
77+
height: 100%;
78+
width: 100%;
79+
display: flex;
80+
flex-direction: column;
81+
align-items: center;
82+
justify-content: center;
83+
}
84+
.cover .text .text-1,
85+
.cover .text .text-2{
86+
font-size: 26px;
87+
font-style: italic;
88+
font-weight: 600;
89+
color: #fff;
90+
text-align: center;
91+
}
92+
.cover .text .text-2{
93+
font-size: 15px;
94+
font-weight: 500;
95+
}
96+
.container .forms{
97+
height: 100%;
98+
width: 100%;
99+
background-color: rgba(255, 255, 255,0.0);
100+
}
101+
.container .form-content{
102+
display: flex;
103+
align-items: center;
104+
justify-content: space-between;
105+
}
106+
.form-content .login-form,
107+
.form-content{
108+
width: 100%;
109+
}
110+
111+
.forms .form-content .title span{
112+
font-size: 30px;
113+
padding-left: -12px;
114+
}
115+
116+
.forms .form-content .title span:hover{
117+
color: aqua;
118+
}
119+
120+
.forms .form-content .title{
121+
position: relative;
122+
font-size: 24px;
123+
font-style: italic;
124+
font-weight: 500;
125+
color: rgb(255, 255, 255);
126+
}
127+
.forms .form-content .title:before{
128+
content: '';
129+
position: absolute;
130+
left: 0;
131+
bottom: 0;
132+
height: 3px;
133+
width: 25px;
134+
background: aqua;
135+
}
136+
.forms .title:before{
137+
width: 20px;
138+
}
139+
.forms .form-content .input-boxes{
140+
margin-top: 30px;
141+
}
142+
143+
144+
145+
.forms .form-content .input-box{
146+
display: flex;
147+
align-items: center;
148+
height: 50px;
149+
width: 100%;
150+
margin: 10px 0;
151+
position: relative;
152+
}
153+
.form-content .input-box input{
154+
height: 100%;
155+
width: 100%;
156+
background-color: rgba(0,0,0,0.20);
157+
color: #fff;
158+
font-style: italic;
159+
outline: none;
160+
border: none;
161+
padding: 0 30px;
162+
font-size: 16px;
163+
font-weight: 500;
164+
border-bottom: 2px solid rgba(0,0,0,0.01);
165+
transition: all 0.3s ease;
166+
}
167+
168+
::-webkit-input-placeholder{
169+
color: rgba(255, 255, 255, 0.40)
170+
}
171+
172+
.form-content .input-box input:focus,
173+
.form-content .input-box:valid{
174+
border-color: aqua
175+
}
176+
177+
.form-content .input-box input:valid{
178+
border-color: white;
179+
}
180+
181+
.form-content .input-box i{
182+
position: absolute;
183+
color: aqua;
184+
font-size: 24px;
185+
}
186+
.forms .form-content .text{
187+
font-size: 14px;
188+
font-weight: 500;
189+
font-style: italic;
190+
color: #333;
191+
}
192+
.forms .form-content .text a{
193+
text-decoration: none;
194+
font-style: italic;
195+
color: rgb(255, 255, 255);
196+
}
197+
.forms .form-content .text a:hover{
198+
color: aqua;
199+
/*text-decoration: underline;*/
200+
}
201+
.forms .form-content .button{
202+
color: #fff;
203+
margin-top: 40px;
204+
}
205+
.forms .form-content .button input{
206+
color: #fff;
207+
background-color: rgba(255,255,255,0.1);
208+
border-radius: 6px;
209+
padding: 0;
210+
cursor: pointer;
211+
transition: all 0.4s ease;
212+
}
213+
.forms .form-content .button input:hover{
214+
color: aqua;
215+
background-color: rgba(255, 255, 255, 0.2)
216+
}
217+
.forms .form-content label{
218+
color: #ffffff;
219+
cursor: pointer;
220+
}
221+
.forms .form-content label:hover{
222+
text-decoration: underline;
223+
}
224+
.forms .form-content .login-text,
225+
.forms .form-content .sign-up-text{
226+
text-align: center;
227+
margin-top: 25px;
228+
}
229+
.container #flip{
230+
display: none;
231+
}
232+
@media (max-width: 730px) {
233+
.container .cover{
234+
display: none;
235+
}
236+
.form-content .login-form,
237+
.form-content{
238+
width: 100%;
239+
}
240+
.form-content{
241+
display: none;
242+
}
243+
.container ~ .forms{
244+
display: block;
245+
}
246+
.container ~ .forms .login-form{
247+
display: none;
248+
}
249+
}

0 commit comments

Comments
 (0)