forked from Tech-at-DU/CSS-Challenges
-
Notifications
You must be signed in to change notification settings - Fork 0
/
challenge-4.html
171 lines (148 loc) · 4.64 KB
/
challenge-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<title>Challenge 4</title>
<style>
/* In this example you will need to write the selectors yourself! */
/* Style the list use the selector: ul { ... your styles here... } */
/* Remove the bullet list-style none */
body {
background-color: rgb(245, 245, 232);
}
h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 3em;
font-weight: lighter;
text-decoration: underline;
color: #555;
}
ul {
list-style: none;
}
/* Style the blockquote: blockquote { ... } */
/* make the font large 2em */
/* Set the font to a serif use Gerogia */
/* Needs some line height 1.5 */
blockquote {
font-size: 2em;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
}
/* Here are some new selectors */
/* Even numbered list items */
li:nth-child(even) {
/* Set the color #775 */
color: rgb(179, 179, 167);
background-color: rgb(90, 63, 90);
/* Align the text to the right */
text-align: right;
}
/* These style will use some advanced selectors. */
/* You in this case you need to select only the */
/* odd numbered list items */
li:nth-child(odd) {
/* Set the color #757 */
color: rgb(90, 63, 90);
/* Align the text to the left */
text-align: left;
}
li:nth-child(odd) footer {
/* Set the color #757 */
color: rgb(90, 63, 90);
/* Align the text to the left */
text-align: left;
}
/* Style the first letter */
blockquote p::first-letter {
/* Set the color #000 */
color: #555;
/* Try changing the font size */
font-size: 2em;
}
li:nth-child(even) blockquote p::first-letter {
color: rgb(196, 196, 189);
}
/* Here you need to style the authors name. */
/* The name is in a footer tag that is inside a blockquote. */
/* If you use footer as the selector it would also affect the */
/* the footer at the top of the page. To solve this use */
/* blockqoute footer { ... } This selector will only target */
/* footer tags that exist inside a blockquote */
/* Style the author */
blockquote footer {
/* Make the font smaller 0.5em */
font-size: 00.5em;
/* Make the font weight bold */
font-weight: bold;
/* Change the color #666 */
color: #666;
font-style: oblique;
}
li:nth-child(even) blockquote footer {
color: rgb(179, 179, 167);
}
/* Now style the footer at the bottom of the page */
/* This footer is a child of main. Use this selector: */
/* main > footer */
main > footer {
/* text align center */
text-align: center;
}
/* Stretch Challenges
- Adjust the colors.
- Swap the alignment. Currently the even list items are on the
left and the odd numbered items are on the right. Swap these.
- Choose some different fonts. The example currently uses Georgia.
- Adjust the style of the author's name. Your goal is to make the
legible but have a style that makes it clear that it's associated
with the quote but not part of quoted text itself.
*/
</style>
</head>
<body>
<main>
<header>
<h1>Famous Quotes</h1>
</header>
<ul>
<li>
<blockquote>
<p>
“The first step toward success is taken when you refuse to
be a captive of the environment in which you first find
yourself.”
</p>
<footer>
<p>— Mark Caine</p>
</footer>
</blockquote>
</li>
<li>
<blockquote>
<p>
“Twenty years from now you will be more disappointed by the
things that you didn't do than by the ones you did do.”
</p>
<footer>
<p>— Mark Twain</p>
</footer>
</blockquote>
</li>
<li>
<blockquote>
<p>
“Those who dare to fail miserably can achieve
greatly.”
</p>
<footer>
<p>— John F. Kennedy</p>
</footer>
</blockquote>
</li>
</ul>
<footer>
<small>Copyright 2020 FamousQuotes.com</small>
</footer>
</main>
</body>
</html>