Skip to content

Commit 4714c85

Browse files
vaguebunnyvaguebunny
committed
actually uploading the 5 result css files?
1 parent a481d14 commit 4714c85

File tree

5 files changed

+969
-0
lines changed

5 files changed

+969
-0
lines changed

‎result1.css

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
/* ### triple hash comments are irrelevant to functionality ### */
2+
3+
/* universal selector */
4+
* {
5+
font: 1rem/1.5 var(--bs-font-sans-serif);
6+
margin: 0; /* removes margins automatically assigned by browser */
7+
}
8+
9+
:root {
10+
--lightest: var(--bs-gray-100 );
11+
--light: var(--bs-primary-bg-subtle);
12+
--dark: var(--bs-primary-text-emphasis);
13+
--darkest:var(--bs-dark);
14+
--border01: 2px solid var(--bs-primary-text-emphasis);
15+
--border02: 2px solid var(--bs-dark);
16+
--border03: 5px solid var(--bs-dark);
17+
}
18+
19+
20+
body {
21+
background-color: var(--light);
22+
height: 100vh;
23+
width: 100vw;
24+
margin: auto 0; /* fixes body not reaching 100% of page */
25+
padding: 0;
26+
27+
}
28+
29+
header, footer {
30+
background-color: var(--dark);
31+
width: 100vw;
32+
margin: 0;
33+
padding: 0;
34+
}
35+
36+
header{
37+
border-bottom: var(--border03);
38+
height: 80px;
39+
}
40+
41+
main{
42+
padding-top: 20px;
43+
padding-bottom: 20px;
44+
}
45+
/* "Mood Quiz" in header */
46+
h1 {
47+
color: var(--light);
48+
text-shadow: 2px 2px black, 2px -2px black, -2px 2px black, -2px -2px black, 0 2px black, 2px 0 black, 0 -2px black, -2px 0 black; /* black border around characters */
49+
font-size: 4rem/8;
50+
text-align: center;
51+
}
52+
53+
/* main question */
54+
h2 {
55+
color: var(--darkest);
56+
font-weight: normal;
57+
font-size: 20px;
58+
text-align: center;
59+
margin: 0 auto ;
60+
padding-left: 2%;
61+
padding-bottom: 2%;
62+
}
63+
64+
/*individual questions*/
65+
h3{
66+
color: var(--darkest);
67+
font-size: 16px;
68+
}
69+
70+
div {
71+
padding-top: 30px;
72+
}
73+
74+
/* all questions and answers collectively */
75+
.questions {
76+
border: var(--border01);
77+
background-color: var(--lightest);
78+
width: 80%;
79+
padding-top: 30px; /* set equal to .questions div padding-bottom */
80+
margin: auto; /* centers to body */
81+
}
82+
83+
/* each question with respective answers */
84+
.questions div {
85+
width: 75%;
86+
padding-bottom: 30px; /* set equal to .questions padding-top */
87+
margin: auto; /* centers to .questions div */
88+
}
89+
90+
91+
/* answers and submit buttons */
92+
form {
93+
margin-left: 25px;
94+
}
95+
96+
/* all submit buttons */
97+
input[type=submit] {
98+
border-radius: 20px; /* makes element rounded */
99+
padding: 2.5%;
100+
background-color: var(--light);
101+
}
102+
103+
button {
104+
background-color: var(--dark);
105+
color: var(--light);
106+
border-radius: 12px; /* makes element rounded */
107+
padding: 3%;
108+
109+
}
110+
111+
button:hover {
112+
background-color: rgb(255, 223, 162);
113+
color: var(--bs-primary-text-emphasis);
114+
}
115+
116+
/* "reset quiz" button */
117+
.reset {
118+
width: 20%; /* ### shows where element is, remove later ### */
119+
padding: 0;
120+
margin: auto; /* centers to body */
121+
text-align: center;
122+
}
123+
124+
/* "prev" and "next" buttons */
125+
.carousel {
126+
width: 20%; /* ### shows where element is, remove later ### */
127+
margin: auto; /* centers to body */
128+
text-align: center;
129+
}
130+
131+
.share{
132+
width: 20%; /* ### shows where element is, remove later ### */
133+
margin: auto; /* centers to body */
134+
text-align: center;
135+
}
136+
137+
.result{
138+
border: var(--border01);
139+
background-color: var(--lightest);
140+
width: 80%;
141+
padding-top: 30px; /* set equal to .questions div padding-bottom */
142+
margin: auto; /* centers to body */
143+
}
144+
145+
.result p{
146+
width: 75%;
147+
padding-bottom: 30px;
148+
margin: auto;
149+
}
150+
151+
table, th, td {
152+
border:var(--border02);
153+
text-align: center;
154+
margin: auto;
155+
margin-bottom: 20px;
156+
width: 50%;
157+
}
158+
159+
th{
160+
background-color: var(--dark);
161+
color: var(--lightest);
162+
}
163+
164+
td{
165+
background-color: var(--light);
166+
color: var(--darkest);
167+
}
168+
169+
footer{
170+
border-top: var(--border03);
171+
padding-bottom: 100vh; /* pushes footer to bottom of page */
172+
}
173+
footer p {
174+
padding: 2%;
175+
color: var(--light);
176+
font-family: 'Times New Roman', Times, serif;
177+
text-align: center;
178+
line-height: 5vh; /* vertically aligns text in center of footer, by making equal to height of footer */
179+
}
180+
181+
/*make media queries for mobile responsiveness*/
182+
@media only screen and (max-width: 600px) {
183+
h1 {
184+
font-size: 2rem;
185+
}
186+
h2 {
187+
font-size: 16px;
188+
}
189+
h3 {
190+
font-size: 12px;
191+
}
192+
.questions {
193+
width: 90%;
194+
}
195+
.questions div {
196+
width: 85%;
197+
}
198+
form {
199+
margin-left: 10px;
200+
}
201+
input[type=submit] {
202+
padding: 1%;
203+
}
204+
button {
205+
padding: 2%;
206+
}
207+
.reset {
208+
width: 30%;
209+
}
210+
.carousel {
211+
width: 30%;
212+
}
213+
.share {
214+
width: 30%;
215+
}
216+
.result {
217+
width: 90%;
218+
}
219+
.result p {
220+
width: 85%;
221+
}
222+
table, th, td {
223+
width: 90%;
224+
}
225+
footer p {
226+
font-size: 12px;
227+
}
228+
}
229+
230+
/*make media queries for mobile responsiveness*/
231+
@media only screen and (max-width: 600px) {
232+
233+
}

0 commit comments

Comments
 (0)