thecoded.prof
CMU Coding Bootcamp
1.container {
2 padding: 30px;
3 max-width: 450px;
4 margin: 0 auto;
5 text-align: center;
6 background-color: #ffffff;
7 border-radius: 8px;
8 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
9 font-family: "Roboto", sans-serif;
10 position: absolute;
11 top: 50%;
12 left: 50%;
13 transform: translate(-50%, -50%);
14 width: 90%; /* Ensure the form fits within smaller screens */
15 box-sizing: border-box;
16 }
17
18 .title {
19 font-size: 1.8rem;
20 font-weight: bold;
21 color: #333333;
22 margin-bottom: 20px;
23 }
24
25 .form {
26 display: flex;
27 flex-direction: column;
28 gap: 15px;
29 }
30
31 .input {
32 padding: 12px;
33 font-size: 16px;
34 border: 1px solid #ddd;
35 border-radius: 4px;
36 outline: none;
37 transition: border-color 0.3s ease;
38 }
39
40 .input:focus {
41 border-color: #007bff;
42 box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
43 }
44
45 .button {
46 padding: 12px;
47 font-size: 16px;
48 background-color: #007bff;
49 color: white;
50 border: none;
51 border-radius: 4px;
52 cursor: pointer;
53 font-weight: bold;
54 transition: background-color 0.3s ease;
55 }
56
57 .button:hover {
58 background-color: #0056b3;
59 }
60
61 .text {
62 font-size: 14px;
63 color: #666666;
64 margin-top: 20px;
65 }
66
67 .link {
68 background: none;
69 border: none;
70 color: #007bff;
71 font-size: 0.9rem;
72 cursor: pointer;
73 text-decoration: underline;
74 transition: color 0.3s ease;
75 }
76
77 .error {
78 color: red;
79 font-size: 14px;
80 margin-bottom: 15px;
81 }
82
83 /* Responsive Design */
84 @media (max-width: 768px) {
85 .container {
86 padding: 20px;
87 width: 100%;
88 max-width: 95%; /* Reduce max-width for smaller devices */
89 top: 50%;
90 transform: translate(-50%, -50%);
91 }
92
93 .title {
94 font-size: 1.5rem; /* Reduce font size */
95 }
96
97 .input {
98 font-size: 14px; /* Adjust input font size */
99 padding: 10px; /* Adjust padding */
100 }
101
102 .button {
103 font-size: 14px; /* Adjust button font size */
104 padding: 10px; /* Adjust button padding */
105 }
106 }
107
108 @media (max-width: 480px) {
109 .container {
110 padding: 15px;
111 }
112
113 .title {
114 font-size: 1.3rem;
115 }
116
117 .input {
118 font-size: 13px;
119 }
120
121 .button {
122 font-size: 13px;
123 }
124
125 .text {
126 font-size: 12px;
127 }
128 }
129