login.css (3310B) download
1body {
2 background-color: #BCCFB0;
3 color: #333333;
4 font-family: Roboto, sans-serif;
5 margin: 0;
6 padding: 0;
7}
8
9/*NAVBAR*/
10nav {
11 background-color: #333333;
12 width: 100%;
13 height: 15vw;
14 display: flex;
15 align-items: center;
16}
17
18nav ul {
19 margin: 0;
20 padding: 0;
21 width: 100%;
22 height: 15vw;
23 display: flex;
24 list-style-type: none;
25 align-items: center;
26}
27
28nav li {
29 font-weight: bold;
30 font-size: 4vw;
31 margin-right: 3vw;
32}
33
34nav ul li a {
35 color: #fff;
36 text-decoration: none;
37 padding: 0;
38}
39
40nav ul li a.active {
41 pointer-events: none;
42 color: gray;
43}
44
45nav ul li:first-child {
46 margin-right: auto;
47}
48
49.img-big-logo {
50 display: none;
51}
52
53.img-small-logo,
54.img-big-logo {
55 height: 15vw;
56 width: auto;
57 vertical-align: middle;
58}
59
60.container {
61 margin: 20px auto;
62 max-width: 90vw;
63 text-align: center;
64}
65
66.col-md-6{
67 width: 90vw;
68}
69
70.title {
71 margin-bottom: 30px;
72}
73
74.title h1 {
75 font-size: 8vw;
76 margin: 20px;
77}
78
79.title h4 {
80 font-size: 4vw;
81 margin: 10px;
82}
83
84.card {
85 border: none;
86 box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
87 border-radius: 4px;
88 margin-bottom: 20px;
89}
90
91.card-header {
92 background-color: #333333;
93 color: white;
94 font-weight: bold;
95 font-size: 4vw;
96 padding: 10px;
97}
98
99.card-body {
100 padding: 20px;
101}
102
103.form-group {
104 margin-bottom: 20px;
105}
106
107label {
108 font-weight: bold;
109 font-size: 4vw;
110}
111
112input{
113 width: 85%;
114 padding: 10px;
115 font-size: 4vw;
116 border-radius: 4px;
117 border: 1px solid #ccc;
118}
119
120button[type="submit"] {
121 font-size: 4vw;
122 padding: 10px 20px;
123 background-color: #333333;
124 color: white;
125 border: none;
126 border-radius: 4px;
127 cursor: pointer;
128}
129
130button[type="submit"]:hover {
131 background-color: #222222;
132}
133
134.row.justify-content-center {
135 text-align: center;
136}
137
138.row.justify-content-center > div {
139 display: inline-block;
140}
141
142.row.justify-content-center > div:not(:first-child) {
143 margin-left: 10px;
144}
145
146@media (min-width: 400px) {
147 /*NAVBAR*/
148 nav {
149 height: 60px;
150 }
151
152 nav ul {
153 height: 60px;
154 }
155
156 nav li {
157 font-size: 16px;
158 margin-right: 12px;
159 }
160 .img-small-logo,
161 .img-big-logo {
162 height: 60px;
163 }
164 .title h1 {
165 font-size: 32px;
166 margin: 20px;
167 }
168
169 .title h4 {
170 font-size: 16px;
171 margin: 10px;
172 }
173
174 .card-header {
175 font-size: 16px;
176 padding: 10px;
177 }
178
179 input {
180 font-size: 16px;
181 }
182
183 button[type="submit"] {
184 font-size: 16px;
185 padding: 10px 20px;
186 }
187}
188
189@media (min-width: 700px) {
190 .img-big-logo {
191 display: block;
192 }
193
194 .img-small-logo {
195 display: none;
196 }
197
198 nav ul li:first-child {
199 margin-right: 0;
200 }
201
202 nav ul li:nth-child(2) {
203 margin-right: auto;
204 }
205 .container {
206 max-width: 90vw;
207 }
208
209 .title h1 {
210 font-size: 50px;
211 }
212
213 .title h4 {
214 font-size: 20px;
215 }
216
217 .card-header {
218 font-size: 20px;
219 }
220
221 input {
222 font-size: 20px;
223 }
224
225 button[type="submit"] {
226 font-size: 20px;
227 padding: 10px 20px;
228 }
229 label{
230 font-size: 1.5vw;
231 }
232 .col-md-6{
233 width: 40vw;
234 }
235}