-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample.html
187 lines (152 loc) · 18.4 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<!--
+++++++++++++
+++++++++++++++++
+++++++++++++++++++++
+++++++ ---------- ++++ ____ ____ _
++++++++| ______ |+++++ | _ \ | _ \ (_)
++++++__| |______| |+++++ | |_) |_ __ __ _ _ __ __ _ ___ _ __ | |_) |_ __ _ ____
+++++| _________ |+++++ | _ <| '__/ _` | '_ \ / _` |/ _ \ '__| | _ <| '__| |_ /
+++++| |_________| |+++++ | |_) | | | (_| | | | | (_| | __/ | | |_) | | | |/ /
++++|_____________|++++ |____/|_| \__,_|_| |_|\__, |\___|_| _______ |____/|_| |_/___|
+++++++++++++++++++++ __ | | |_______|
+++++++++++++++++ \___/
+++++++++++++
-->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Branger_Briz </title>
<link rel="icon" type="image/png" href="images/bb.svg">
<meta name="description" content="we are a fullservice digital agency+lab made up of artists, strategists, educators && programmers bent on articulating contemporary culture. we produce award winning work for brands, agencies, and cultural institutions around the world.">
<!-- for Google+ -->
<meta itemprop="name" content="Branger_Briz">
<meta itemprop="description" content="we are a fullservice digital agency+lab made up of artists, strategists, educators && programmers bent on articulating contemporary culture">
<meta itemprop="image" content="images/bb.svg">
<!-- for Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@branger_briz">
<meta name="twitter:title" content="Branger_Briz">
<meta name="twitter:description" content="we are a fullservice digital agency+lab made up of artists, strategists, educators && programmers bent on articulating contemporary culture.">
<meta name="twitter:creator" content="@branger_briz">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="images/bb.svg">
<!-- for Facebook -->
<meta property="og:title" content="Branger_Briz">
<meta property="og:type" content="article">
<meta property="og:url" content="http://brangerbriz.com/">
<meta property="og:image" content="images/bb.svg">
<meta property="og:description" content="we are a fullservice digital agency+lab made up of artists, strategists, educators && programmers bent on articulating contemporary culture.">
<meta property="og:site_name" content="Branger_Briz">
<!-- CSS -->
<!-- consider including normalize.css -->
<link rel="stylesheet" href="css/bb-fonts.css">
<link rel="stylesheet" href="css/bb-styles.css">
<link rel="stylesheet" href="css/bb-responsive.css"><!-- optional media-queries -->
<link rel="stylesheet" href="css/bb-code-colors.css"><!-- optional syntax highlighting -->
<link rel="stylesheet" href="css/bb-animations.css"><!-- optional intro animations -->
</head>
<body>
<section id="logo" data-mark-only="mobile-right">
<!-- optional temp image b/c custom SVG takes a sec to load -->
<!-- <img src="images/bb_full_logo.svg"> -->
</section>
<h1>This is the title for an example blog post</h1>
<h3>By Nick Briz</h3>
<div class="date">June 1, 2018</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="quote">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem dignissimos ut fugiat nulla beatae enim suscipit eum tempore, eius magnam, earum sint ipsum provident atque cumque quia aspernatur ea delectus odit consectetur aliquid molestias vero ipsam. Nihil tempore incidunt laudantium autem modi iusto molestias architecto impedit laboriosam. Aliquid molestiae error sapiente dicta itaque qui tempora debitis asperiores, excepturi quia, culpa tempore cum quas fuga facilis aperiam consectetur ipsa repellendus perferendis eaque explicabo, ut necessitatibus. Quisquam fuga modi illum dignissimos sit, asperiores! Ducimus voluptatibus vero, exercitationem reprehenderit possimus cupiditate recusandae eum magni blanditiis error eius rem incidunt impedit dolorem illum ipsam?
<span class="marginal-note" data-info='[Lorem ipsum](https://www.wikipedia.org/) dolor sit amet, [consectetur](https://www.wikipedia.org/) adipisicing elit. Nisi, corporis.'></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum reprehenderit dignissimos aperiam, dolor exercitationem eos reiciendis. Voluptatibus sit officiis aut quam et qui tenetur amet corporis ex. Deserunt<span class="marginal-note" data-info='Lorem ipsum dolor sit amet, [consectetur](https://www.wikipedia.org/) adipisicing elit. Cum numquam, optio odio delectus unde asperiores dolorem ab praesentium possimus itaque esse alias quas commodi blanditiis doloremque, error porro, debitis placeat!'></span> quos ullam ex perspiciatis nulla! Fuga blanditiis quis at, excepturi dolor, ipsum, laudantium, delectus nulla repellat similique temporibus assumenda. Repellendus, animi, at.
</p>
<section class="media" data-fullwidth="true">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Panorama_puy_de_dome_sud.jpg/1920px-Panorama_puy_de_dome_sud.jpg" alt="Panorama of the [Chaîne des Puys](https://en.wikipedia.org/wiki/Cha%C3%AEne_des_Puys) from [Puy de Dôme](https://en.wikipedia.org/wiki/Puy_de_D%C3%B4me) in winter. [Massif Central](https://en.wikipedia.org/wiki/Massif_Central), France. An example of how past volcanic activity shaped a landscape">
</section>
<!-- if you need to use a general container that behaves like a general -->
<!-- BB formated element you can use a div with the 'bbe' class -->
<div class="bbe">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem excepturi, atque. Doloremque minima optio facilis nostrum at consectetur architecto commodi ea dolore quam necessitatibus eius minus unde dolorum assumenda, impedit aut fugit provident amet sunt recusandae! Doloremque ullam provident necessitatibus modi perspiciatis repudiandae nostrum dignissimos quasi iure distinctio tenetur officiis, dolorem, consequuntur optio officia ut dicta sunt ratione quibusdam ex repellat. Incidunt laboriosam consectetur cupiditate.
</div>
<span class="quote">Incidunt laboriosam consectetur cupiditate. Magnam dolore debitis architecto nihil odio ipsam dolores non, dicta eius voluptate ullam</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam nihil voluptate, placeat totam. Nobis quo quibusdam placeat laborum dolores omnis fugit commodi aut qui voluptatibus iste delectus totam optio minus sed molestias, fuga nihil sapiente? Deserunt, corporis sit molestiae fuga maxime nemo temporibus neque at possimus, quibusdam asperiores? Minima dolorem quae fuga, aliquam ipsam dolorum deserunt et voluptatum <span class="marginal-note" data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident delectus adipisci, fugiat fugit repellat! Corrupti aliquid earum odio delectus blanditiis ullam quia, ipsum distinctio!"></span> expedita nam officia ratione rem accusamus, soluta, est asperiores. Optio esse, voluptatibus debitis earum alias incidunt quas dolor labore, suscipit quibusdam repudiandae itaque excepturi dicta expedita accusamus fugit sed temporibus iusto, corporis fuga laudantium sunt nisi repellat neque quisquam. Culpa <span class="marginal-note" data-info="Lorem ipsum dolor sit amet, [consectetur](https://www.wikipedia.org) adipisicing elit. Nobis, non."></span> tenetur, in praesentium voluptatem neque voluptatibus laborum voluptate consequuntur consequatur rerum ipsum ad quasi commodi consectetur soluta animi ipsam perspiciatis, cum. Nulla, tempora, itaque! Iure, ducimus accusamus vel! Neque adipisci sapiente atque nulla at est alias non, eos obcaecati nesciunt quos? Ad voluptatibus illum odio cupiditate facere. Natus, at possimus et aliquam.
</p>
<section class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Inside_the_Batad_rice_terraces.jpg/1920px-Inside_the_Batad_rice_terraces.jpg" alt="The Batad rice terraces, The [Rice Terraces of the Philippine Cordilleras](https://en.wikipedia.org/wiki/Rice_Terraces_of_the_Philippine_Cordilleras), the first site to be included in the [UNESCO World Heritage](https://en.wikipedia.org/wiki/World_Heritage_Site) List cultural landscape category in 1995">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nesciunt voluptate nulla et magni facilis quia beatae nam deserunt earum minus excepturi ipsa sint cumque, rerum in pariatur, debitis. Suscipit velit architecto dolorem atque culpa incidunt impedit ratione et modi quod fuga aliquid natus molestias tempore officia hic minus, eligendi neque amet vitae dolorum eum rerum reiciendis dicta recusandae. Quis, suscipit ullam ea amet accusamus molestias libero reprehenderit. Quod eligendi harum nisi quisquam totam error quaerat ipsum, impedit dolor. Quaerat, harum rerum nisi perspiciatis illo velit illum. Fugiat laborum fuga sapiente, et velit aut tenetur neque tempore architecto consequuntur ea nobis corrupti esse perspiciatis veritatis quam, iure, aliquam, modi voluptatibus saepe corporis impedit molestiae possimus dolorum molestias! Veniam aspernatur, cum facere nam? A recusandae, nam omnis velit possimus sapiente ipsam quia accusamus explicabo sed natus dolor temporibus, eveniet voluptatem voluptates hic suscipit excepturi aliquam iure et quibusdam fugit quod ad provident beatae. Aliquam odit, eum alias. Sapiente fugiat delectus quibusdam quas nemo rem dignissimos, alias quidem dolor impedit non repellendus repellat cupiditate necessitatibus possimus explicabo illo. Quam maxime dolores, blanditiis soluta vitae ad dolore vero neque beatae obcaecati consectetur, odit consequatur, incidunt quas tempore iure magni ut. Numquam, ratione, aperiam!
</p>
<span class="quote" data-credit="Dr. Ipsum (of [wikipedia](https://www.wikipedia.org))">Quod eligendi harum nisi quisquam totam error quaerat ipsum, impedit dolor. Quaerat, harum rerum nisi perspiciatis illo velit illum.</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore nulla saepe labore. Iure id fuga vitae sint iusto inventore quibusdam animi illum quidem dolorum minima voluptatibus reiciendis velit, qui soluta quasi, repellat<span class="marginal-note" data-info='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, ab?'></span>. quisquam unde. Corrupti incidunt repudiandae aspernatur, iure libero quasi voluptate soluta odit accusantium quisquam dignissimos sequi fugit aliquam!
</p>
<ol>
<li>first thing</li>
<li>second thing</li>
<li>third <a href="#">linked</a> thing</li>
<li>fourth <code>code</code> thing</li>
</ol>
<ul>
<li>first thing</li>
<li>second <a href="#">linked</a> thing</li>
<li>third thing</li>
<li>fourth <a href="#"><code>linked code</code></a> thing</li>
</ul>
<section class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Stourhead_garden.jpg" alt="[Stourhead](https://en.wikipedia.org/wiki/Stourhead) garden, Wiltshire, England">
</section>
<br><br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis earum repellendus ut consectetur maxime iusto alias doloribus, provident soluta sit! Impedit amet, distinctio sit sint perspiciatis architecto culpa odit nulla, nostrum reiciendis modi rerum quae vero mollitia magnam obcaecati ea tenetur voluptatum necessitatibus quos nesciunt quod nam voluptatibus! Adipisci dolores magni optio<span class="marginal-note" data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod laborum, enim necessitatibus dolorum id, soluta recusandae sit illo reiciendis blanditiis assumenda delectus aspernatur ratione eum, adipisci tempore nobis alias? Sed!"></span> accusamus aliquam autem velit tenetur eos facere omnis nihil dolor ullam, fugit quo consequuntur numquam in culpa ut sed voluptate! Quidem quibusdam nesciunt neque nostrum iste, doloribus, eos ipsa esse modi non dolores veritatis, ullam tempora incidunt fugiat reiciendis. Quam minus facilis autem porro, eum, obcaecati earum ea quod dolorum sit doloremque at labore, id rerum <span class="marginal-note" data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi a alias adipisci molestias odit totam beatae maiores magni perferendis odio minus laborum dolore saepe voluptas non laudantium quaerat harum ut officiis, ex assumenda. Obcaecati a provident aliquid rerum magni, nesciunt aperiam ullam, corrupti quas libero officia ratione ab, nihil repellat."></span> quos odio quia assumenda aspernatur sapiente quibusdam cumque voluptas quas impedit et! Et sunt sapiente odit sequi aliquid ex laborum nam, eligendi fugit alias magnam iste vero itaque perferendis magni tenetur neque nobis illo, esse minus necessitatibus qui soluta? Harum asperiores nostrum fugiat nemo <code>praesentium()</code> ea, aliquam aut quis cupiditate voluptatem cum tempora unde nisi suscipit assumenda eligendi nam consequuntur vitae debitis mollitia at <code>blanditiis()</code> magnam iste sit? Sapiente, culpa quis pariatur.
</p>
<h2>exercitation ullamcod</h2>
<pre class="code">
<code class="js" data-wrap="true">
var x = 100;
var y = 100;
// Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit itaque nobis nesciunt? Eligendi porro nesciunt in, molestias maxime, non eum! Quisquam a voluptates hic natus incidunt, facilis dicta est nisi.
for(var i=0; i<100; i++){
z = Math.random() * 100;
drawStuff(x,y,z);
}
</code>
</pre>
<p>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Claude_Lorrain_014.jpg/800px-Claude_Lorrain_014.jpg'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eos accusantium quod, fugiat rerum, recusandae pariatur sit qui harum illum ea natus dignissimos! Esse quo ipsum, a similique fuga voluptatem quas iusto tempora, reprehenderit est fugiat quis! Similique sapiente, dicta, mollitia quod repellat amet possimus assumenda. Facere harum dolores deleniti, fugit ipsum vero explicabo accusamus repellendus eveniet cumque ut maiores repudiandae libero rerum, sit voluptatum corporis dolor. Unde, et suscipit possimus sunt culpa! Expedita, a! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum aut hic dolor amet accusamus architecto sunt temporibus quisquam ad, totam non ea laudantium praesentium doloribus maxime similique officia quis consequuntur corporis eveniet? Optio aliquid quia, provident temporibus asperiores corporis magni esse ex quidem, vero odit. Quod, deleniti? Temporibus dolor excepturi, cum totam a ab architecto error vero ipsum voluptates nisi, quae voluptatem. Voluptates deserunt, rerum tempora harum fuga odit adipisci ipsam consequuntur, laudantium illum veritatis ducimus quidem in assumenda facilis nesciunt, impedit libero enim! Dicta nisi, provident quia ad molestiae obcaecati assumenda, odit explicabo sit. Excepturi aspernatur omnis facere deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti possimus vel natus, assumenda ut consectetur, unde maxime! Maiores consectetur atque modi eius neque numquam ducimus, sunt, quas quibusdam qui libero.
</p>
<span class="tags">
<a href="#">Featured</a>
<a href="#">Generative</a>
<a href="#">Installation</a>
<a href="#">Digital Literacy</a>
<a href="#">Information Security</a>
<a href="#">Public-Health</a>
<a href="#">Open-Source</a>
<a href="#">Digital Community</a>
</span>
<script src="js/highlightJS/highlight.pack.js"></script><!-- optional syntax highlighting -->
<script src="js/BBElements.js"></script>
<script>
(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-6098550-23', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>