-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
131 lines (119 loc) · 5.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<title>{Title}</title>
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1><span>Title</span> SubTitle</h1>
</header>
<main>
<section id="one">
<figure></figure>
<article>
<img alt="{altcontent}" src="images/accent-a.jpg">
<h2>{Title}</h2>
<h3>{Subtitle}</h3>
<p><em>{Short Description}</em></p>
<h4>{List}</h4>
<ul>
<li>{Item One}</li>
<li>{Item Two}</li>
<li>{Item Three}</li>
<li>{Item Four}</li>
<li>{Item Five}</li>
</ul>
<h4>{Optional Subtitle}</h4>
<p>{Long Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium aliquam leo, ac ultrices sem sollicitudin quis. Curabitur aliquam nisi leo, vel tincidunt orci lacinia et. Quisque pretium bibendum cursus. Integer feugiat molestie ante ut consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut sem ultrices, tempus velit eu, scelerisque augue.}</p>
<p>
<a href="#" target="_blank">{Link}</a><br>
<a href="#" target="_blank">{Link}</a>
</p>
</article>
</section>
<section id="two">
<figure></figure>
<article>
<img alt="{altcontent}" src="images/accent-b.jpg">
<h2>{Title}</h2>
<h3>{Subtitle}</h3>
<p><em>{Short Description}</em></p>
<h4>{Subtitle}</h4>
<p>{Long Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium aliquam leo, ac ultrices sem sollicitudin quis. Curabitur aliquam nisi leo, vel tincidunt orci lacinia et. Quisque pretium bibendum cursus. Integer feugiat molestie ante ut consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut sem ultrices, tempus velit eu, scelerisque augue.}</p>
<p>
</article>
</section>
<section id="three">
<figure></figure>
<article>
<img alt="{altcontent}" src="images/accent-c.jpg">
<h2>{Title}</h2>
<h3>{Subtitle}</h3>
<p><em>{Short Description}</em></p>
<h4>{List}</h4>
<ul>
<li>{Item One}</li>
<li>{Item Two}</li>
<li>{Item Three}</li>
<li>{Item Four}</li>
<li>{Item Five}</li>
</ul>
<p>{Long Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium aliquam leo, ac ultrices sem sollicitudin quis. Curabitur aliquam nisi leo, vel tincidunt orci lacinia et. Quisque pretium bibendum cursus. Integer feugiat molestie ante ut consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut sem ultrices, tempus velit eu, scelerisque augue.}</p>
<p>
<p><a href="#" target="_blank">{Link}</a></p>
</article>
</section>
<section id="four">
<figure></figure>
<article>
<img alt="{altcontent}" src="images/accent-d.jpg">
<h2>{Title}</h2>
<h3>{Subtitle}</h3>
<p><em>{Short Description}</em></p>
<h4>{List}</h4>
<ul>
<li>{Item One}</li>
<li>{Item Two}</li>
<li>{Item Three}</li>
<li>{Item Four}</li>
<li>{Item Five}</li>
</ul>
<p>{Long Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium aliquam leo, ac ultrices sem sollicitudin quis. Curabitur aliquam nisi leo, vel tincidunt orci lacinia et. Quisque pretium bibendum cursus. Integer feugiat molestie ante ut consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut sem ultrices, tempus velit eu, scelerisque augue.}</p>
<p>
</article>
</section>
<section id="five">
<figure></figure>
<article>
<img alt="Lost Toys Icon" src="images/accent-e.jpg">
<h2>{Title}</h2>
<h3>{Subtitle}</h3>
<p>{Long Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium aliquam leo, ac ultrices sem sollicitudin quis. Curabitur aliquam nisi leo, vel tincidunt orci lacinia et. Quisque pretium bibendum cursus. Integer feugiat molestie ante ut consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut sem ultrices, tempus velit eu, scelerisque augue.}</p>
</article>
</section>
</main>
<footer>
<p>MIT License. Template by <a href="//danielleswank.com">Danielle Swank</a>. <a href="//github.com/danielleswank/css-parallax-template" target="_blank">GitHub</a>.</p>
</footer>
<script>
(function () {
// adds CSS styles for non-mobile devices
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windowsce|palm/i.test(navigator.userAgent.toLowerCase()));
if (!mobile) {
var figures = document.getElementsByTagName("figure");
for (var i = 0; i < figures.length; i++) {
figures[i].style.backgroundAttachment = "fixed";
}
}
}());
</script>
</body>
</html>