11* {
2- margin : 0 ;
3- padding : 0 ;
4- box-sizing : border-box;
5- text-decoration : none;
6- font-family : Arial, sans-serif;
7- }
8-
9- html {
10- font-size : 72.5% ;
11- }
12-
13- .container {
14- width : 100% ;
15- height : 100vh ;
16- background : linear-gradient (rgba (31 , 7 , 7 , 0.7 ), rgba (0 , 0 , 0 , 0.7 )),
17- url (images/bg.png) center no-repeat;
18- background-size : cover;
19- perspective : 100rem ;
20- }
21-
22- .forms-wrapper {
23- transform-style : preserve-3d;
24- position : absolute;
25- top : calc (50% - 17.5rem );
26- left : calc (50% - 25rem );
27- transform : rotateY (10deg );
28- transition : transform 0.5s , left 0.5s ;
29- }
30-
31- .forms-wrapper .change {
32- transform : rotateY (70deg );
33- left : calc (50% + 25rem );
34- }
35-
36- .forms-wrapper form {
37- width : 50rem ;
38- height : 35rem ;
39- background-color : rgba (40 , 114 , 108 , 0.925 );
40- display : flex;
41- flex-direction : column;
42- justify-content : space-around;
43- align-items : center;
44- box-shadow : 0.1rem 0.1rem 0.1rem # ccc inset, -0.1rem -0.1rem 0.1rem # ccc inset;
45- position : absolute;
46- }
47-
48- .signup-form {
49- transform : rotateY (270deg ) translateZ (25rem ) translateX (-25rem );
50- }
51-
52- form a {
53- position : absolute;
54- top : 2rem ;
55- background-color : # fff ;
56- font-weight : 600 ;
57- text-transform : uppercase;
58- color : rgba (40 , 114 , 108 );
59- letter-spacing : 0.2rem ;
60- }
61-
62- .signup-btn {
63- left : 2rem ;
64- padding : 0.5rem 1rem 0.5rem 3rem ;
65- border-radius : 100% 0.5rem 0.5rem 100% ;
66- }
67-
68- .signin-btn {
69- right : 2rem ;
70- padding : 0.5rem 3rem 0.5rem 1rem ;
71- border-radius : 0.5rem 100% 100% 0.5rem ;
72- }
73-
74- form h2 {
75- font-size : 2.3rem ;
76- text-transform : uppercase;
77- letter-spacing : 0.2rem ;
78- color : # fff ;
79- }
80-
81- .inputs-wrapper {
82- display : flex;
83- flex-direction : column;
84- }
85-
86- .inputs-wrapper input {
87- width : 25rem ;
88- height : 3rem ;
89- padding : 0.5rem 1rem ;
90- margin : 0.5rem 0 ;
91- background-color : transparent;
92- border : 0.1rem solid # fff ;
93- border-radius : 5rem ;
94- color : # fff ;
95- letter-spacing : 0.1rem ;
96- outline : none;
97- }
98-
99- .inputs-wrapper input ::placeholder {
100- color : # fff ;
101- font-weight : 300 ;
102- }
103-
104- .inputs-wrapper input [type = "submit" ] {
105- background-color : # fff ;
106- color : rgba (40 , 114 , 108 );
107- font-weight : 900 ;
108- text-transform : uppercase;
109- cursor : pointer;
110- }
111-
2+ margin : 0 ;
3+ padding : 0 ;
4+ box-sizing : border-box;
5+ text-decoration : none;
6+ font-family : Arial, sans-serif;
7+ }
8+
9+ html {
10+ font-size : 72.5% ;
11+ }
12+
13+ .container {
14+ width : 100% ;
15+ height : 100vh ;
16+ background : linear-gradient (rgba (31 , 7 , 7 , 0.7 ), rgba (0 , 0 , 0 , 0.7 )),
17+ url (images/bg.png) center no-repeat;
18+ background-size : cover;
19+ perspective : 100rem ;
20+ }
21+
22+ .forms-wrapper {
23+ transform-style : preserve-3d;
24+ position : absolute;
25+ top : calc (50% - 17.5rem );
26+ left : calc (50% - 25rem );
27+ transform : rotateY (10deg );
28+ transition : transform 0.5s , left 0.5s ;
29+ }
30+
31+ .forms-wrapper .change {
32+ transform : rotateY (70deg );
33+ left : calc (50% + 25rem );
34+ }
35+
36+ .forms-wrapper form {
37+ width : 50rem ;
38+ height : 35rem ;
39+ background-color : rgba (40 , 114 , 108 , 0.925 );
40+ display : flex;
41+ flex-direction : column;
42+ justify-content : space-around;
43+ align-items : center;
44+ box-shadow : 0.1rem 0.1rem 0.1rem # ccc inset, -0.1rem -0.1rem 0.1rem # ccc inset;
45+ position : absolute;
46+ }
47+
48+ .signup-form {
49+ transform : rotateY (270deg ) translateZ (25rem ) translateX (-25rem );
50+ }
51+
52+ form a {
53+ position : absolute;
54+ top : 2rem ;
55+ background-color : # fff ;
56+ font-weight : 600 ;
57+ text-transform : uppercase;
58+ color : rgba (40 , 114 , 108 );
59+ letter-spacing : 0.2rem ;
60+ }
61+
62+ .signup-btn {
63+ left : 2rem ;
64+ padding : 0.5rem 1rem 0.5rem 3rem ;
65+ border-radius : 100% 0.5rem 0.5rem 100% ;
66+ transition : background-color 0.3s ;
67+ }
68+
69+ .signup-btn : hover {
70+ background-color : rgba (255 , 255 , 255 , 0.8 );
71+ }
72+
73+ .signin-btn {
74+ right : 2rem ;
75+ padding : 0.5rem 3rem 0.5rem 1rem ;
76+ border-radius : 0.5rem 100% 100% 0.5rem ;
77+ transition : background-color 0.3s ;
78+ }
79+
80+ .signin-btn : hover {
81+ background-color : rgba (255 , 255 , 255 , 0.8 );
82+ }
83+
84+ form h2 {
85+ font-size : 2.3rem ;
86+ text-transform : uppercase;
87+ letter-spacing : 0.2rem ;
88+ color : # fff ;
89+ }
90+
91+ .inputs-wrapper {
92+ display : flex;
93+ flex-direction : column;
94+ }
95+
96+ .inputs-wrapper input {
97+ width : 25rem ;
98+ height : 3rem ;
99+ padding : 0.5rem 1rem ;
100+ margin : 0.5rem 0 ;
101+ background-color : transparent;
102+ border : 0.1rem solid # fff ;
103+ border-radius : 5rem ;
104+ color : # fff ;
105+ letter-spacing : 0.1rem ;
106+ outline : none;
107+ }
108+
109+ .inputs-wrapper input ::placeholder {
110+ color : # fff ;
111+ font-weight : 300 ;
112+ }
113+
114+ .inputs-wrapper input [type = "submit" ] {
115+ background-color : # fff ;
116+ color : rgba (40 , 114 , 108 );
117+ font-weight : 900 ;
118+ text-transform : uppercase;
119+ cursor : pointer;
120+ transition : background-color 0.3s ;
121+ }
122+
123+ .inputs-wrapper input [type = "submit" ]: hover {
124+ background-color : rgba (255 , 255 , 255 , 0.8 );
125+ }
126+
127+
0 commit comments