thecoded.prof
CMU Coding Bootcamp
1.loginPage {
2 display: flex;
3 flex-direction: column;
4 align-items: center;
5 justify-content: center;
6 min-height: 100vh;
7 background: linear-gradient(135deg, #f9f9f9, #e0e0e0);
8 font-family: Arial, sans-serif;
9 padding: 1rem;
10 box-sizing: border-box; /* Ensures padding doesn't affect width */
11}
12
13.formContainer {
14 background-color: #fff;
15 padding: 2rem;
16 border-radius: 8px;
17 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18 text-align: center;
19 max-width: 400px;
20 width: 100%;
21 box-sizing: border-box; /* Ensures content fits within the box */
22}
23
24h2 {
25 font-size: 2rem;
26 margin-bottom: 1rem;
27 color: #333;
28}
29
30.loginForm {
31 width: 100%;
32}
33
34.formGroup {
35 margin-bottom: 1.5rem;
36 text-align: left;
37}
38
39label {
40 display: block;
41 font-size: 0.9rem;
42 font-weight: bold;
43 margin-bottom: 0.5rem;
44}
45
46input {
47 width: 100%;
48 padding: 0.75rem;
49 border: 1px solid #ccc;
50 border-radius: 4px;
51 font-size: 1rem;
52 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
53}
54
55input:focus {
56 border-color: #007bff;
57 outline: none;
58 box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
59}
60
61.loginButton {
62 background-color: #007bff;
63 color: white;
64 border: none;
65 padding: 0.75rem 1.5rem;
66 font-size: 1rem;
67 border-radius: 4px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 width: 100%;
71}
72
73.loginButton:hover {
74 background-color: #0056b3;
75}
76
77.signupPrompt {
78 margin-top: 1rem;
79 font-size: 0.9rem;
80 color: #555;
81}
82
83.signupButton {
84 background: none;
85 border: none;
86 color: #007bff;
87 font-size: 0.9rem;
88 cursor: pointer;
89 text-decoration: underline;
90 transition: color 0.3s ease;
91}
92
93.signupButton:hover {
94 color: #0056b3;
95}
96
97.error {
98 color: red;
99 font-size: 0.9rem;
100 margin-bottom: 1rem;
101}
102
103/* Responsive Design */
104@media (max-width: 768px) {
105 .formContainer {
106 padding: 1.5rem;
107 max-width: 90%; /* Reduce max-width for smaller screens */
108 }
109
110 h2 {
111 font-size: 1.8rem;
112 }
113
114 input {
115 font-size: 0.9rem;
116 padding: 0.65rem;
117 }
118
119 .loginButton {
120 font-size: 0.9rem;
121 padding: 0.65rem 1.2rem;
122 }
123
124 .signupPrompt {
125 font-size: 0.85rem;
126 }
127}
128
129@media (max-width: 480px) {
130 .formContainer {
131 padding: 1rem;
132 max-width: 95%; /* Ensure it fits on very small screens */
133 }
134
135 h2 {
136 font-size: 1.5rem;
137 }
138
139 input {
140 font-size: 0.85rem;
141 padding: 0.6rem;
142 }
143
144 .loginButton {
145 font-size: 0.85rem;
146 padding: 0.6rem 1rem;
147 }
148
149 .signupPrompt {
150 font-size: 0.8rem;
151 }
152}