forked from Tech-at-DU/CSS-Challenges
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchallenge-2.html
107 lines (96 loc) · 3.11 KB
/
challenge-2.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Challenge 2</title>
<style>
/* Your styles here */
/* Style the text in this example */
/* Everything should use the same font apply the font-family to the body tag */
body {
/* Set the font-family to 'Helvetica Neue' */
font-family: "Helvetica Neue";
/* Set the font-size to 20px */
font-size: 20px;
font-weight: lighter;
/* Change the line-height: 1.5; */
line-height: 1.6;
/* Set the (foreground) color: #eee; */
color: #d5def5;
/* Set the background-color: rgb(36, 36, 48); */
background-color: #3c104d;
}
/* The link is hard to read change the color */
/* Set the color of the anchor tag */
a {
/* Set the (foreground) color: #f0f; */
color: rgb(232, 224, 119);
/* Set the text-decoration: none; */
text-decoration: none;
}
/* make the abbr stand out */
abbr {
/* Set the color: cyan; */
color: rgb(66, 172, 172);
/* Set the text-decoration: underline; */
text-decoration: underline;
/* Set the text-decoration-style: dotted; */
text-decoration-style: dotted;
}
/* Style the header */
h1 {
/* color rgb(232, 224, 119) */
color: #8e98d0;
/*background-color: #6643b5;
/* font-weight lighter */
font-weight: bolder;
/* font-size 3em */
font-size: 3em;
}
/* maybe the small should not be so small */
small {
/* color #ccc */
color: rgb(232, 224, 119);
/* font-weight lighter */
font-weight: lighter;
/* font-size 1em */
font-size: 1em;
}
/*
Stretch Challenges:
1. Adjust the font size to a value that you think looks best
2. Adjust the line height to a value you think looks best
3. Change the colors to colors that looks good and work well.
- Keep in mind that the text should easy to read for everyone.
*/
</style>
</head>
<body>
<article>
<header>
<h1>Hypertext Markup Language</h1>
<small>From wikimedia</small>
</header>
<p>
Hypertext Markup Language (<abbr title="Hyper Text Markup Language"
>HTML</abbr
>) is the standard markup language for creating web pages and web
applications. With Cascading Style Sheets (<abbr
title="Cascading Style Sheets"
>CSS</abbr
>) and JavaScript, it forms a triad of cornerstone technologies for the
World Wide Web.<sup>[4]</sup>
</p>
<p>
Web browsers receive
<abbr title="Hyper Text Markup Language">HTML</abbr> documents from a
web server or from local storage and render the documents into
multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the
document.
</p>
<footer>
<p><a href="">From: https://en.wikipedia.org/wiki/HTML</a></p>
</footer>
</article>
</body>
</html>