source: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css@ dbd4834

Last change on this file since dbd4834 was dbd4834, checked in by Marko <Marko@…>, 2 years ago

Homepage, login and register components added

  • Property mode set to 100644
File size: 2.8 KB
Line 
1.registerform-main-div {
2 text-align: center;
3 justify-content: center;
4 display: flex;
5 padding-top: 40px;
6 padding-bottom: 90px;
7 background-color: #e1e3eb;
8 height: 100%;
9 }
10 body{height: 100%;}
11
12 .registerform-sub-main-div{
13 display: flex;
14 justify-content: center;
15 height: fit-content;
16 width: fit-content;
17 box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
18 padding-top: 30px;
19 border-radius: 60px;
20 background-color: white;
21 width: 65%;
22
23 }
24 .registerform-imgs-div {
25 padding-top: 20px;
26 justify-content: center;
27 display: flex;
28 }
29 .registerform-image-container {
30 background-color: rgb(223, 221, 221);
31 border-radius: 150px;
32 align-items: center;
33 display: flex;
34 justify-content: center;
35 height: 115px;
36 width: 115px;
37 }
38 .registerform-profile-img {
39 height: 100px;
40 width: 100px;
41 border-radius: 130px;
42 }
43
44 .registerform-sub-main-div > div{
45 margin-bottom: 50px;
46 margin-left: 80px;
47 margin-right: 80px;
48 }
49
50 .validation-inputs{
51 width: 300px;
52 height: 50px;
53 border-radius: 60px;
54 box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
55 border: none;
56 outline: none;
57 background-color: #fff;
58 }
59
60
61 .registerform-name-lastname div{
62 width: 50%;
63 margin-left: 10px;
64 margin-right: 10px;
65 }
66
67 .registerform-name-lastname{
68 display: flex;
69 }
70
71 .registerform-name-lastname input{
72 width: 90%;
73 }
74
75 .registerform-confirm-password-input{
76 padding-top: 20px;
77 width: 100%;
78 }
79
80 .inputform-validation-container{
81 width: 100%;
82 }
83
84
85 .validation-inputs{
86 padding-left: 20px;
87 font-size: 22px;
88 width: 100%;
89 }
90
91 .registerform-password-input > .inputform-validation-container > .validation-inputs{
92 width: 50%;
93 }
94
95 .registerform-password-input{
96 margin-top: 20px;
97 width: 100%;
98}
99
100.registerform-email-input{
101 padding-top: 20px;
102 width: 100%;
103}
104
105.lastname-input{
106 padding-top: 20px;
107}
108
109.registerform-confirm-password-input input{
110 width: 50%;
111}
112
113.password-input input{
114width: 50%;
115}
116
117.registerform-email-input input{
118 width: 50%;
119}
120
121
122 .registerform-button{
123 width: 80%;
124 height: 50px;
125 border-radius: 60px;
126 background-color: #91AD7E ;
127 color: white;
128 font-size: 25px;
129 border: none;
130 margin-top: 30px;
131 }
132
133 .registerform-button:hover{
134 background-color: #5c6b52 ;
135 cursor:pointer;
136 }
137
138 .form-error-span{
139 font-size: 12px;
140 padding: 3px;
141 color:red;
142 display: block;
143 justify-content: center;
144 display: none;
145 }
146
147 .inputform-validation-container input:invalid[focused="true"] ~ span{
148 display: block;
149 }
150
151 .inputform-validation-container input:invalid[focused="true"]{
152 border: 1px solid red;
153 }
154
155
156 .form-error-span{
157 width: 100%;
158 }
159
160
161
Note: See TracBrowser for help on using the repository browser.