-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (74 loc) · 3.15 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
<!DOCTYPE html>
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Responsive SPIL template</title>
<link rel="stylesheet" href="assets/styles/site.css">
<script src="assets/scripts/libs/respond.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="assets/scripts/config.js"></script>
<meta name="viewport" content="initial-scale=1,width=device-width,maximum-scale=1">
<script src="assets/scripts/libs/modernizr-latest.js"></script>
</head>
<body>
<nav class="primary clearfix">
<button class="smallNavigation">
<div class="icon bar">-</div>
<div class="icon bar">-</div>
<div class="icon bar">-</div>
</button>
<ul class="wrapper" id="primary-navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">And another one</a></li>
</ul>
</nav>
<div class="wrapper">
<header class="headerSection row">
<h1 class="headerLogo">Responsive SPIL template</h1>
</header>
<!--
To create a new row in the grid:
<div class="row">
<div class="span8 units"> ... </div>
<div class="span4 units"> ... </div>
</div>
You can have up to 12 units in a row. All unit spans must add up
to 12 for this to work properly. You can also nest rows within
rows.
-->
<div class="contentSection row">
<div class="span8 units">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu eros nisl, in ullamcorper eros. Praesent in dapibus mauris. Ut et nulla turpis, eu dignissim lacus. Duis ac est in quam pulvinar porttitor. Phasellus tempor cursus ornare. Morbi pharetra elementum dui. Duis ac elit eget arcu lobortis rhoncus. Vestibulum ornare mauris at dui viverra tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor vulputate urna, non consectetur orci bibendum in.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu eros nisl, in ullamcorper eros. Praesent in dapibus mauris. Ut et nulla turpis, eu dignissim lacus. Duis ac est in quam pulvinar porttitor.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
<p><img src="assets/images/greenwich-park.jpg" alt="Greenwich Park"></p>
<div class="row">
<div class="span6 units">
<p>Nested grid</p>
</div>
<div class="span6 units">
<p>Nested grid: 50%</p>
</div>
</div>
</div>
<div class="span4 units">
<h3>Heading 3</h3>
<p class="smallText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu eros nisl, in ullamcorper eros. Praesent in dapibus mauris. Ut et nulla turpis, eu dignissim lacus. Duis ac est in quam pulvinar porttitor.</p>
</div>
</div>
<footer class="footerSection row">
<p>This is the footer</p>
</footer>
</div>
</body>
</html>