-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (98 loc) · 3.92 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jungle</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,600;0,700;1,200&family=Prosto+One&display=swap"
rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Style Guide: Jungle</h1>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- COLORS SECTION -->
<div class="dividers">
<h2 class="section-heading">Colors</h2>
<div class="color-one pallet">
<p class="pallet-text-light">Dark Green
<br><br>
#264653
</p>
</div>
<div class="color-two pallet">
<p class="pallet-text-light">Teal Green
<br><br>
#2a9d8f
</p>
</div>
<div class="color-three pallet">
<p class="pallet-text-dark">Golden
<br><br>
#e9c46a
</p>
</div>
<div class="color-four pallet">
<p class="pallet-text-dark">Orange
<br><br>
#f4a261
</p>
</div>
<div class="color-five pallet">
<p class="pallet-text-light">Burnt Orange
<br><br>
#e76f51
</p>
</div>
</div>
<!-- FONTS SECTION -->
<div class="dividers">
<h2 class="section-heading">Fonts</h2>
<div class="font-one font">
<h3 class="prosto-header">Prosto One</h3>
<p>Whereas recognition of the inherent dignity</p>
<p><em>Whereas recognition of the inherent dignity</em></p>
<p><strong>Whereas recognition of the inherent dignity</strong></p>
</div>
<div class="font-two font">
<h3 class="montserrat-header">Montserrat</h3>
<p>Whereas recognition of the inherent dignity</p>
<p><em>Whereas recognition of the inherent dignity</em></p>
<p><strong>Whereas recognition of the inherent dignity</strong></p>
</div>
</div>
<!-- TEXT STYLES SECTION -->
<div class="dividers">
<h2 class="section-heading">Text Styles</h2>
<h2 class="text-h1">H1: Main page heading</h2>
<ul>
<li>Font-weight: normal (only font weght available)</li>
<li>Font-size: 32px</li>
<li>Font-family: Prosto One, cursive</li>
</ul>
<h3 class="text-h2">H2: Subheading</h3>
<ul>
<li>Font-weight: normal (only font weght available)</li>
<li>Font-size: 22px</li>
<li>Font-family: Prosto One, cursive</li>
</ul>
<h3 class="text-p">P: paragraph text</h3>
<ul>
<li>Font-weight: 400</li>
<li>Font-size: 16px</li>
<li>Font-family: 'Montserrat', sans-serif</li>
</ul>
</div>
</div>
</body>
</html>