-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (119 loc) · 6.29 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
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Progressive CSS</title>
<link rel="stylesheet" href="css/initial.css">
<script>
SCRIPTS = ['js/jquery.min.js'];
loadScript = function(script) {
for(var i=0; i < SCRIPTS.length; i++) if(SCRIPTS[i] === script) return false;
SCRIPTS.push(script);
};
</script>
</head>
<body>
<div class="page-loading">
<h2>Display Content "Above the Fold" as early as possible.</h2>
</div>
<link rel="stylesheet" href="css/article.css"><script> </script>
<article class="article" hill-layout="space-bottom">
<h1>Article Module</h1>
<p>
Consectetur adipiscing elit. Proin a facilisis mauris, vitae malesuada ligula. Cras congue commodo hendrerit. In iaculis sem vel sem facilisis, non aliquet lectus vestibulum. Donec dignissim scelerisque nisi non ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar leo vel erat pharetra, vitae molestie leo ultricies. Sed cursus, sapien sed efficitur consectetur, neque orci aliquam turpis, nec consectetur erat nisl at ipsum. Fusce vehicula justo eget erat vestibulum, a aliquam lorem tristique. Aliquam congue ac justo porta congue. Vestibulum consectetur ante in lectus consequat, quis tempus massa vulputate. In aliquam nisi purus, ut lobortis erat vehicula a. Maecenas aliquet elementum risus quis facilisis. Aenean eros erat, vehicula vitae vulputate vitae, feugiat ac nunc. Nulla dui diam, egestas id placerat non, porttitor quis arcu. <a href="#">⟶ Read more</a>
</p>
</article>
<main hill-layout="row space-bottom">
<div hill-layout="box-1/4 device-small-1/2 device-medium-1/4">
<link rel="stylesheet" href="css/teaser.css">
<script>loadScript('js/teaser.js');</script>
<div class="teaser" data-js-teaser>
<h2>Teaser Module</h2>
<p>
Consectetur adipiscing elit. Proin a facilisis mauris, vitae malesuada ligula. Cras congue commodo hendrerit. In iaculis sem vel sem facilisis, non aliquet lectus vestibulum. Donec dignissim scelerisque nisi non ullamcorper.
</p>
<p><a href="#">⟶ Read more about Teaser module</a></p>
</div>
</div>
<div hill-layout="box-1/4 device-small-1/2 device-medium-1/4">
<link rel="stylesheet" href="css/teaser.css">
<script>loadScript('js/teaser.js');</script>
<div class="teaser" data-js-teaser>
<h2>Teaser Module</h2>
<p>
Consectetur adipiscing elit. Proin a facilisis mauris, vitae malesuada ligula. Cras congue commodo hendrerit. In iaculis sem vel sem facilisis, non aliquet lectus vestibulum. Donec dignissim scelerisque nisi non ullamcorper.
</p>
<p><a href="#">⟶ Read more about Teaser module</a></p>
</div>
</div>
<div hill-layout="box-1/4 device-small-1/2 device-medium-1/4">
<link rel="stylesheet" href="css/teaser.css">
<script>loadScript('js/teaser.js');</script>
<div class="teaser">
<h2>Teaser Module</h2>
<p>
Consectetur adipiscing elit. Proin a facilisis mauris, vitae malesuada ligula. Cras congue commodo hendrerit. In iaculis sem vel sem facilisis, non aliquet lectus vestibulum. Donec dignissim scelerisque nisi non ullamcorper.
</p>
<p><a href="#">⟶ Read more about Teaser module</a></p>
</div>
</div>
<div hill-layout="box-1/4 device-small-1/2 device-medium-1/4">
<link rel="stylesheet" href="css/teaser.css">
<script>loadScript('js/teaser.js');</script>
<div class="teaser">
<h2>Teaser Module</h2>
<p>
Consectetur adipiscing elit. Proin a facilisis mauris, vitae malesuada ligula. Cras congue commodo hendrerit. In iaculis sem vel sem facilisis, non aliquet lectus vestibulum. Donec dignissim scelerisque nisi non ullamcorper.
</p>
<p><a href="#">⟶ Read more about Teaser module</a></p>
</div>
</div>
</main>
<link rel="stylesheet" href="css/footer.css"><script> </script>
<footer class="footer">
<h1>Footer Module</h1>
<div hill-layout="row">
<div hill-layout="box-1/4 device-small-1/2">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div hill-layout="box-1/4 device-small-1/2">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div hill-layout="box-1/4 device-small-1/2">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div hill-layout="box-1/4 device-small-1/2">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</footer>
<!-- Load Scripts Async and in Order -->
<script>
!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script", SCRIPTS);
</script>
</body>
</html>