-
Notifications
You must be signed in to change notification settings - Fork 170
/
index.html
117 lines (99 loc) · 4.04 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Style Tiles with SCSS</title>
<link rel="stylesheet" href="stylesheets/style.css">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/style-tiles.js"></script>
</head>
<body>
<div class="header-wrapper">
<header class="group">
<h1>Style Tile<br>Template</h1>
<hgroup class="project-title">
<h2>Project name</h2>
<h3>Style tile</h3>
<h4>Version 1</h4>
</hgroup>
</header>
</div>
<div class="main grid">
<div class="graphic-samples col-1-2">
<section class="swatches group">
<h3 class="section-heading">Colour swatches</h3>
<ul class="swatchgrid group">
<li class="color-swatch-1 swatch-1-5"></li>
<li class="color-swatch-2 swatch-1-5"></li>
<li class="color-swatch-3 swatch-1-5"></li>
<li class="color-swatch-4 swatch-1-5"></li>
<li class="color-swatch-5 swatch-1-5"></li>
</ul>
</section>
<section class="textures">
<h3 class="section-heading">Textures</h3>
<ul class="swatchgrid group">
<li class="texture-swatch-1 swatch-1-3"></li>
<li class="texture-swatch-2 swatch-1-3"></li>
<li class="texture-swatch-3 swatch-1-3"></li>
</ul>
</section>
<section class="buttons">
<h3 class="section-heading">Buttons</h3>
<div>
<a href="#" class="button-1">Button 1</a>
<a href="#" class="button-2">Button 2</a>
</div>
</section>
</div>
<div class="typography-samples col-1-2">
<section class="typography-main">
<h3 class="typography-sample">A sample header</h3>
<p class="font-details-h3">
<span class="font-name">Font Name</span>,
<span class="font-color">#color value</span>
</p>
<h4 class="typography-sample">An example of a sub header</h4>
<p class="font-details-h4">
<span class="font-name">Font Name</span>,
<span class="font-color">#color value</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">Font Name</span>,
<span class="font-color">#color value</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">Font Name</span>,
<span class="font-color">#color value</span>
</p>
</section>
<section class="adjectives grid">
<h3 class="section-heading">Adjectives</h3>
<div class="grid group">
<p class="adjective-1 col-1-3">Lorem</p>
<p class="adjective-2 col-1-3">Ipsum</p>
<p class="adjective-3 col-1-3">Dolor</p>
</div>
<div class="grid group">
<p class="adjective-4 col-1-3">Magna</p>
<p class="adjective-5 col-1-3">Amet</p>
<p class="adjective-6 col-1-3">Sit</p>
</div>
</section>
</div>
</div>
<div class="footer-wrapper">
<footer class="group">
<small>
Style tile by Jerad Gallinger.<br>
<a href="http://jeradgallinger.ca">jeradgallinger.ca</a>
</small>
</footer>
</div>
</body>
</html>