CMU Coding Bootcamp
thecoded.prof
1.container {
2 display: flex;
3 flex-direction: column;
4 align-items: center;
5 justify-content: center;
6}
7
8form {
9 display: flex;
10 flex-direction: column;
11 align-items: center;
12 justify-content: center;
13 gap: 0.5rem;
14 width: 80%;
15}
16
17form > * {
18 width: 100%;
19}
20
21form :nth-child(even) {
22 margin-bottom: 1rem;
23}
24
25form > button {
26 width: 100%;
27 padding: 0.25rem;
28 margin: 0.5rem;
29}
30
31@media (min-width: 769px) {
32 form {
33 gap: 1rem;
34 width: 100%;
35 max-width: 48rem;
36 display: grid;
37 column-gap: 1rem;
38 grid-template-columns: repeat(2, minmax(0, 1fr));
39 }
40
41 form > button {
42 width: 100%;
43 grid-column: span 2;
44 padding: 0.25rem;
45 margin: 0.5rem;
46 }
47}
48
49nav {
50 display: flex;
51 padding: 0.5rem 0rem;
52 background-color: #8aacdf;
53 position: sticky;
54 top: 0;
55 left: 0;
56 right: 0;
57 margin-left: -0.5rem;
58 margin-top: -0.5rem;
59 justify-content: space-around;
60 align-items: center;
61 width: 100vw;
62 margin-bottom: 4rem;
63}
64
65.navitem {
66 padding: 0.5rem 4rem;
67 border: 1px solid #000;
68 border-radius: 0.5rem;
69}
70
71#footer {
72 width: 100vw;
73 height: 6rem;
74 position: absolute;
75 bottom: 0;
76 left: 0;
77 justify-content: space-around;
78 align-items: center;
79 background-color: #000;
80 color: #fff;
81 text-align: center;
82 display: flex;
83 vertical-align: center;
84 font-size: 2rem;
85}