-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (158 loc) · 6.29 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
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
<!DOCTYPE html>
<html>
<head>
<title>House Store</title>
<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Creepster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div class="image-container logo-small">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/logo-sm.png">
</div>
<div class="image-container logo-big">
<img src="https://content.codecademy.com/courses/freelance-1/unit-6/logo-lg.png">
</div>
<nav>
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Lumber</a></li>
<li><a href="#">Paint</a></li>
<li><a href="#">Garden</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<div id="banner">
<h1>PAINTING IS SCARY</h1>
<p>But it doesn't have to be! Let our handy Virtual Paint Department help guide you through the process of choosing a color. Know the hue? You know what to do. Click the order button and we'll get the paint to you.</p>
</div>
<!-- Color Guide -->
<div id="color-guide">
<div class="introduction">
<h2>Color Guide</h2>
<p>Here at HouseStore, we take color seriously. In each of the following sections, well explore our base colors in swatches that incrementally change three values: <strong>Hue</strong>, <strong>Saturation</strong> and <strong>Lightness</strong>. You'll be able to pick from a wide variety of colors that all work well with each other because they <strong>stem from the same value.</strong></p>
</div>
<!-- Red Swatches -->
<div class="color reds">
<div class="information">
<h3>Reds</h3>
<p>Firetrucks, lipstick, fresh berries — red is a color with power, emotion, intensity. For this reason we recommend using reds as accent colors. Red is particularly suited to kitchens, as it is said to evoke hunger!</p><p>Our base red is <span class="base-color">HSL (350, 100, 50)</span></p>
<div class="image-container">
<img src=" https://content.codecademy.com/courses/freelance-1/unit-6/reds.png">
</div>
</div>
<div class="swatches">
<h4>Lightness</h4>
<div class="swatch lightness">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Saturation</h4>
<div class="swatch saturation">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Hue</h4>
<div class="swatch hue">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
</div>
</div>
<!-- Green Swatches -->
<div class="color greens">
<div class="information">
<h3>Greens</h3>
<p>They say that geniuses choose green — we think any of these verdant colors will look smart! Deck your halls like a lush outdoor space, adorn your rooms with emerald, or just make your houseguests green with envy!</p>
<p>Our base green is <span class="base-color">HSL (130, 100, 50)</span></p>
<div class="image-container">
<img src=" https://content.codecademy.com/courses/freelance-1/unit-6/greens.png">
</div>
</div>
<div class="swatches">
<h4>Lightness</h4>
<div class="swatch lightness">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Saturation</h4>
<div class="swatch saturation">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Hue</h4>
<div class="swatch hue">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
</div>
</div>
<!-- Blue Swatches -->
<div class="color blues">
<div class="information">
<h3>Blues</h3>
<p>Blues dont give us the blues — in fact, blue is one of the most popular colors in home interiors, and for good reason! Energizing like a summer sky, calming like a lakeshore, light as mist or deep as indigo, blue can do it all.</p>
<p>Our base blue is <span class="base-color">HSL (220, 100, 50)</span></p>
<div class="image-container">
<img src=" https://content.codecademy.com/courses/freelance-1/unit-6/blues.png">
</div>
</div>
<div class="swatches">
<h4>Lightness</h4>
<div class="swatch lightness">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Saturation</h4>
<div class="swatch saturation">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
<h4>Hue</h4>
<div class="swatch hue">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
<div class="color-5"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<strong>All set? Click below to order.</strong>
<p>Most colors can be delivered to your door within 48 hours. We'll reach out if your color needs some extra attention, which could delay shipment.</p>
<a href="#" class="button">Order My Paint</a>
</footer>
</body>
</html>