-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (169 loc) · 7.82 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="google-site-verification" content="... google site verification ...">
<meta name="p:domain_verify" content="... pinterest site verification ...">
<meta property="og:title" content="Lorem Ipsum Page Title">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:image:alt" content="">
<meta property="og:site_name" content="">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:url" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:image" content="">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:site" content="@site_account">
<link rel="canonical" href="">
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml">
<link rel="apple-touch-icon" href="/images/favicons/favicon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/favicon.png">
<link rel="shortcut icon" href="/images/favicons/favicon.ico">
<link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg" color="#BADA55">
<link rel="manifest" href="/images/favicons/manifest.json">
<meta name="msapplication-TileImage" content="/images/favicons/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#C0FFEE">
<meta name="theme-color" content="#FFFFFF">
<title>Lorem Ipsum Page Title | Example Site</title>
<script type='application/ld+json'>{
"@context": "https:\/\/schema.org",
"@type": "Website",
"url": "https://www.example.com",
"name": "Example Site",
"description": "",
"logo": "https://www.example.com/images/logo.svg",
"sameAs": [
"https://www.facebook.com/example/",
"https://www.instagram.com/example/",
"https://twitter.com/example",
"https://www.pinterest.com/example/"
]
}</script>
<script>
(function(html) {
html.className = html.className.replace('no-js','js');
document.documentMode && html.classList.add('msie');
}(document.documentElement));
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700|PT+Serif:400,700">
<link rel="stylesheet" href="/build.css">
<style>
.article {
max-width: 840px;
margin-left: auto;
margin-right: auto;
}
.articles {
display: grid;
grid-gap: 20px;
}
@media (min-width: 800px) {
.articles {
grid-template-columns: repeat(2, 1fr);
}
}
.article-item--featured {
grid-column: 1 / -1;
}
.article-item {
border-radius: 5px;
background: #CCC;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="site">
<header class="site-header py-2">
<div class="container">
<div class="logo">
<a href="#">Example Site</a>
</div>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#">Home</a></li>
<li class="nav__item"><a href="#">About</a></li>
<li class="nav__item"><a href="#">Projects</a></li>
<li class="nav__item"><a href="#">Contact</a></li>
</ul>
</nav>
<button class="nav-toggle js-toggle-nav">Menu</button>
</div>
</header>
<main class="site-main py-5">
<article class="container article">
<header class="page-header">
<h1 class="text-lg">Lorem Ipsum Page Title</h1>
</header>
<div class="content clearfix">
<div class="flex-row justify-start items-center mb-2 px-2 relative" style="height:160px;background:#F1f1f1;">
<span class="bg-black color-white">flex-row flex-x:start</span>
<span class="absolute pos-left pos-bottom fill-x text-center color-white bg-red py-1">centered</span>
</div>
<div class="color-red border rounded border-red flex-row justify-end items-end" style="height:120px;background:#F1f1f1;padding:1em;">
this is a tester
</div>
<div class="columns my-5">
<div class="col-6 lg:col-2 border border-blue">col</div>
<div class="col-3 lg:col-5 border border-red uppercase font-bold">col</div>
<div class="col-3 lg:col-5 border border-red lg:text-right font-italic">col</div>
</div>
<p class="lead">Sed autem necessitatibus quibusdam rerum suscipit aspernatur. Aut voluptatem animi rerum vero et et. Explicabo vel pariatur dolorem voluptas blanditiis quia magni eos. Ab temporibus nam tempora.</p>
<h2>Lorem Ipsum Heading</h2>
<p>Pariatur consequatur blanditiis voluptatem. Error in esse temporibus quia. Perferendis molestiae velit deleniti deserunt. Provident qui ullam adipisci optio. Molestias similique et deserunt sint molestias autem non autem. Nemo itaque repellat assumenda nostrum qui eos porro dolorum.</p>
<p>Ea a assumenda rerum. Omnis ut voluptatem asperiores eius omnis laborum et. Pariatur et eos expedita eos sint modi est ut. Rerum molestiae magni quasi dolorum consequatur harum molestiae. Aut sunomnis atque deserunt molestiae. Repellendus aut unde impedit fugiat quia qui.</p>
<p><a href="#" class="cta-link">Call to Action</a></p>
<p>Saepe voluptas officia corporis sed. Consequatur nam aperiam enim necessitatibus non doloribus quis ullam. Qui aut quisquam voluptatem neque quidem harum.</p>
<h3>Third Level Heading</h3>
<p>Error in esse temporibus quia. Perferendis molestiae velit deleniti deserunt. Provident qui ullam adipisci. Rerum molestiae magni quasi dolorum consequatur harum molestiae. Aut sunomnis atque deserunt molestiae.</p>
<p class="footnote">Pariatur et eos expedita eos sint modi est ut. Rerum molestiae magni quasi dolorum consequatur harum molestiae. Aut sunomnis atque deserunt molestiae. Molestias similique et deserunt sint molestias autem non autem. Nemo itaque repellat assumenda nostrum qui eos porro dolorum.</p>
</div>
<div class="articles py-5">
<div class="article-item article-item--featured">
Lorem ipsum dolor featured item <a href="#" class="btn">Button</a>
</div>
<div class="article-item">1</div>
<div class="article-item">2</div>
<div class="article-item">3</div>
<div class="article-item">4</div>
<div class="article-item">5</div>
<div class="article-item">6</div>
</div>
</article>
</main>
<footer class="site-footer">
<div class="footer-primary py-3">
<div class="container">
footer
</div>
</div>
<div class="footer-secondary py-2">
© 2018 Example Site
</div>
</footer>
</div>
<script>
(function(doc) {
if (!doc.documentMode) return;
var div = document.createElement('div');
div.className = 'msie-warning';
div.innerHTML = 'You are using an outdated and unsupported browser. Please consider <a href="https://browsehappy.com/?locale=en" target="_blank">upgrading</a> for a better experience.';
document.body.appendChild(div);
}(document));
</script>
</body>
</html>