-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (101 loc) · 4.06 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Style Tiles with CSS</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="full-width header-wrapper">
<header>
<h1>Style Tile </h1>
<h2>Yoga Joy</h2>
<!-- <h3>Style tile</h3>-->
<h4>Alexandra's version</h4>
</header>
</div>
<main>
<div class="column">
<section class="swatches">
<h3 class="section-heading">Colour swatches</h3>
<ul class="swatchgrid">
<li class="color-swatch-1"></li>
<li class="color-swatch-2"></li>
<li class="color-swatch-3"></li>
<li class="color-swatch-4"></li>
<li class="color-swatch-5"></li>
</ul>
</section>
<section class="textures">
<h3 class="section-heading">Inspiration</h3>
<ul class="swatchgrid">
<li class="texture-swatch-1"></li>
<li class="texture-swatch-2"></li>
<li class="texture-swatch-3"></li>
</ul>
</section>
<section class="buttons">
<h3 class="section-heading">Buttons</h3>
<div>
<button type="button" class="primary-button">Button 1</button>
<button type="button" class="secondary-button">Button 2</button>
</div>
<h3 class="section-heading">Logo ideas</h3>
<section class=logos>
<div class="logo1"></div>
<div class="logo2"></div>
</section>
</section>
</div>
<!-- end .column -->
<div class="column">
<section class="typography-main">
<h3 class="section-heading">Typography</h3>
<h1 class="h1-sample">A sample header</h1>
<p class="font-details-h1">
<span class="font-name">'Gruppo'</span>,
<span class="font-color">#264931</span>
</p>
<h2 class="h2-sample">An example of a sub header</h2>
<p class="font-details-h2">
<span class="font-name">'Gruppo'</span>,
<span class="font-color">#E2B995</span>
</p>
<p class="typography-sample">
This sample paragraph has <strong>strong parts</strong> and
<em>emphasized parts</em>. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper. Aenean ultricies mi vitae est. Mauris placerat
eleifend leo. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
</p>
<p class="font-details-p">
<span class="font-name">'Montserrat'</span>,
<span class="font-color">#2D2D2D</span>
</p>
<a href="#" class="typography-sample">This is an example of a text link.</a>
<p class="font-details-a">
<span class="font-name">'Montserrat'</span>,
<span class="font-color">#9CB7A0/ #264931</span>
</p>
</section>
<section class="adjectives">
<h3 class="section-heading">Adjectives</h3>
<ul>
<li>Nature</li>
<li>Bright</li>
<li>Calm</li>
<li>Friendly</li>
</ul>
</section>
</div>
<!-- end .column -->
</main>
<div class="full-width">
<footer>
<p>Copyright - Alexandra Meszaros</p>
</footer>
</div>
</body></html>