-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
executable file
·117 lines (111 loc) · 7.59 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 class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Style Tile</title>
<meta name="description" content="A correctly-coded HTML5 template for your Style Tile(s).">
<meta name="author" content="Your name">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<!-- If you want to use the style switcher, add your CSS files below, with titles. See the Readme.md for more details.
<link rel="stylesheet" type="text/css" href="css/one.css" title="one">
<link rel="stylesheet" type="text/css" href="css/two.css" title="two">
<link rel="stylesheet" type="text/css" href="css/three.css" title="three">-->
</head>
<body>
<header>
<div id="logo">
<h1>Logo Here</h1>
</div>
<div id="project">
<h2>Project Name</h2>
<h4>Style Tile</h4>
<!-- If you only have one version, leave this uncommented. -->
<p>Version: 1</p>
<!-- If you have multiple versions, comment out the line above, and uncomment this one, changing the links to match your stylesheets:
<p>Version: <a href="#" rel="one" class="styleswitch">1</a> | <a href="#" rel="two" class="styleswitch">2</a> | <a href="#" rel="three" class="styleswitch">3</a></p>-->
</div>
</header>
<div role="main" id="wrapper">
<div id="elements" class="alignleft">
<div id="colors">
<h3>Possible Colors</h3>
<div class="square">
<div id="square-one"></div>
</div>
<div class="square">
<div id="square-two"></div>
</div>
<div class="square">
<div id="square-three"></div>
</div>
<div class="square">
<div id="square-four"></div>
</div>
<div class="square">
<div id="square-five"></div>
</div>
</div>
<div id="textures">
<h3>Textures</h3>
<div class="bigsquare">
<div id="texture-one"></div>
</div>
<div class="bigsquare">
<div id="texture-two"></div>
</div>
<div class="bigsquare">
<div id="texture-three"></div>
</div>
</div>
<div id="buttons">
<h3>Buttons</h3>
<a href="#" class="btn" title="">This is an example of a Button</a>
<a href="#" class="btn" title="">Submit Button Example Here</a>
</div>
</div>
<div id="words" class="alignright">
<div id="typography">
<h1>This is an Example of a Header</h1>
<p class="font">Font: Name #hexcode</p>
<h3>This is an Example of a Sub Head</h3>
<p class="font">Font: Name #hexcode</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel feugait nulla facilisi.</p>
<p class="font">Font: Name #hexcode</p>
<p><a href="#">This is an example of a Text link »</a></p>
</div>
<div id="adjectives">
<h3>Adjectives</h3>
<p><span>Lorem</span>
<span>Ipsum</span>
<span>Dolor</span>
<span>Sit</span>
<span>Amet</span>
<span>Magna</span></p>
</div>
</div>
</div>
<footer>
<div class="alignleft">
<p>http://www.styletil.es</p>
<p>Template by @Samanthatoy</p>
</div>
<div class="alignright">
<p>Be creative, don’t just use this template as-is!</p>
</div>
</footer>
<!-- If you want to make switchable tiles, uncomment all these scripts.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/switcher.js"></script>
<script type="text/javascript">
$(function() {
$.stylesheetInit();
$('.styleswitch').bind('click',function(e) {
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
});
});
</script>-->
</body>
</html>