このコミットが含まれているのは:
Manuel Dossinger 2019-02-06 22:55:40 +01:00
コミット 3f5622a54d
10個のファイルの変更287行の追加279行の削除

1
assets2/css/.gitignore vendored ノーマルファイル
ファイルの表示

@ -0,0 +1 @@
.sass-cache

バイナリファイルは表示されません。

23
assets2/css/_fonts.scss ノーマルファイル
ファイルの表示

@ -0,0 +1,23 @@
@font-face {
font-family: "repulsor";
src: url("/assets2/fonts/repulsore.ttf") format("truetype");
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url(/assets2/fonts/Muli-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 100;
src: local('Muli Light'), local('Muli-Light'), url(/assets2/fonts/Muli-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 800;
src: local('Muli ExtraBold'), local('Muli-ExtraBold'), url(/assets2/fonts/Muli-ExtraBold.ttf) format('truetype');
}

74
assets2/css/_glitch.scss ノーマルファイル
ファイルの表示

@ -0,0 +1,74 @@
/** glitch **/
$gap-horizontal: 10px;
header {
animation-name: glitch-anim-text;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes glitch-anim-text {
0% {
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
2% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
4% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
5% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
6% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
7% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
8% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
9% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
9.9% {
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
}
10%, 46% {
transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
47% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
48% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
49% {
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0) scale3d(-1,-1,1);
}
50%, 100% {
transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}

38
assets2/css/_previews.scss ノーマルファイル
ファイルの表示

@ -0,0 +1,38 @@
article.preview {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2*$gutter;
padding: $gutter;
border: 1px solid $blue;
background: transparentize($black, 0.6);
background-blend-mode: lighten;
div.episode-displacement {
position: relative;
}
div.episode-counter {
height: 0;
overflow: visible;
position: absolute;
left: -80px;
top: 1px;
font-weight: bold;
font-size: 50px;
color: $yellow;
opacity: .8;
z-index: -1;
}
h1 {
margin: 0;
font-weight: lighter;
color: $white;
}
p {
color: $white;
}
}

ファイルの表示

@ -1,3 +1,54 @@
/** glitch **/
header {
animation-name: glitch-anim-text;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite; }
@keyframes glitch-anim-text {
0% {
transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
2% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
4% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
5% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
6% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
7% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
8% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
9% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
9.9% {
transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
10%, 46% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
47% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
48% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
49% {
transform: translate3d(calc(-1 * 10px), 0, 0) scale3d(-1, -1, 1); }
50%, 100% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
@font-face {
font-family: "repulsor";
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
@ -6,6 +57,45 @@
font-style: normal;
font-weight: 400;
src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 100;
src: local("Muli Light"), local("Muli-Light"), url(/assets2/fonts/Muli-Light.ttf) format("truetype"); }
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 800;
src: local("Muli ExtraBold"), local("Muli-ExtraBold"), url(/assets2/fonts/Muli-ExtraBold.ttf) format("truetype"); }
article.preview {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
padding: 12px;
border: 1px solid #004e66;
background: rgba(14, 14, 14, 0.4);
background-blend-mode: lighten; }
article.preview div.episode-displacement {
position: relative; }
article.preview div.episode-counter {
height: 0;
overflow: visible;
position: absolute;
left: -80px;
top: 1px;
font-weight: bold;
font-size: 50px;
color: #ffb400;
opacity: .8;
z-index: -1; }
article.preview h1 {
margin: 0;
font-weight: lighter;
color: #fff7e5; }
article.preview p {
color: #fff7e5; }
html {
padding: 0;
margin: 0;
@ -40,96 +130,4 @@ header {
color: #ffb400;
font-size: 30px; }
/** glitch **/
header {
/* Hover flash animation on last image */ }
header .glitch {
position: absolute;
width: 800px;
max-width: 400px;
height: 100px;
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto; }
header .glitch:hover {
cursor: pointer; }
header .glitch__img {
position: absolute;
top: calc(-1 * 5px);
left: calc(-1 * 10px);
width: calc(100% + 10px * 2);
height: calc(100% + 5px * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: transparent;
background-size: cover;
background-blend-mode: none; }
header .glitch__img:nth-child(2) {
background-color: transparent;
background-blend-mode: none; }
header .glitch__img:nth-child(3) {
background-color: transparent;
background-blend-mode: none; }
header .glitch__img:nth-child(4) {
background-color: transparent;
background-blend-mode: none; }
header .glitch__img:nth-child(5) {
background-color: #af4949;
background-blend-mode: overlay; }
header .glitch__img:nth-child(n+2) {
opacity: 0; }
header .glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1; }
header .glitch:hover .glitch__img:nth-child(2) {
transform: translate3d(10px, 0, 0);
animation: glitch-anim-1-horizontal 4s infinite linear alternate; }
header .glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * 10px), 0, 0);
animation: glitch-anim-2-horizontal 4s infinite linear alternate; }
header .glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
animation: glitch-anim-3-horizontal 4s infinite linear alternate; }
header .glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1, end) infinite; }
@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d(10px, 5px, 0); }
33%, 100% {
opacity: 0;
transform: translate3d(0, 0, 0); } } }
/*# sourceMappingURL=main.css.map */

ファイルの表示

@ -1,7 +1,7 @@
{
"version": 3,
"mappings": "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",
"sources": ["main.scss"],
"mappings": "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",
"sources": ["_glitch.scss","_fonts.scss","_previews.scss","main.scss"],
"names": [],
"file": "main.css"
}

ファイルの表示

@ -2,17 +2,13 @@
$white: #fff7e5;
$yellow: #ffb400;
$blue: #004e66;
$black: #0e0e0e;
@font-face {
font-family: "repulsor";
src: url("/assets2/fonts/repulsore.ttf") format("truetype");
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url(/assets2/fonts/Muli-Regular.ttf) format('truetype');
}
$gutter: 12px;
@import 'glitch';
@import 'fonts';
@import 'previews';
// mixins
@mixin radial-background() {
@ -58,154 +54,3 @@ header {
}
}
/** glitch **/
$glitch-width: 800px;
$glitch-height: 100px;
$gap-horizontal: 10px;
$gap-vertical: 5px;
$time-anim: 4s;
$delay-anim: 2s;
$blend-mode-1: none;
$blend-mode-2: none;
$blend-mode-3: none;
$blend-mode-4: none;
$blend-mode-5: overlay;
$blend-color-1: transparent;
$blend-color-2: transparent;
$blend-color-3: transparent;
$blend-color-4: transparent;
$blend-color-5: #af4949;
header {
.glitch {
position: absolute;
width: $glitch-width;
max-width: 400px;
height: $glitch-height;
max-height: calc(400px * 1.25);
overflow: hidden;
margin: 0 auto;
}
.glitch:hover {
cursor: pointer;
}
.glitch__img {
position: absolute;
top: calc(-1 * #{$gap-vertical});
left: calc(-1 * #{$gap-horizontal});
width: calc(100% + #{$gap-horizontal} * 2);
height: calc(100% + #{$gap-vertical} * 2);
background: url(../img/1.jpg) no-repeat 50% 0;
background-color: $blend-color-1;
background-size: cover;
background-blend-mode: $blend-mode-1;
}
.glitch__img:nth-child(2) {
background-color: $blend-color-2;
background-blend-mode: $blend-mode-2;
}
.glitch__img:nth-child(3) {
background-color: $blend-color-3;
background-blend-mode: $blend-mode-3;
}
.glitch__img:nth-child(4) {
background-color: $blend-color-4;
background-blend-mode: $blend-mode-4;
}
.glitch__img:nth-child(5) {
background-color: $blend-color-5;
background-blend-mode: $blend-mode-5;
}
.glitch__img:nth-child(n+2) {
opacity: 0;
}
.glitch:hover .glitch__img:nth-child(n+2) {
opacity: 1;
}
.glitch:hover .glitch__img:nth-child(2) {
transform: translate3d($gap-horizontal,0,0);
animation: glitch-anim-1-horizontal $time-anim infinite linear alternate;
}
.glitch:hover > .glitch__img:nth-child(3) {
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0);
animation: glitch-anim-2-horizontal $time-anim infinite linear alternate;
}
.glitch:hover > .glitch__img:nth-child(4) {
transform: translate3d(0, calc(-1 * #{$gap-vertical}), 0) scale3d(-1,-1,1);
animation: glitch-anim-3-horizontal $time-anim infinite linear alternate;
}
/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}
@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d($gap-horizontal, $gap-vertical, 0);
}
33%, 100% {
opacity: 0;
transform: translate3d(0,0,0);
}
}
}
}

ファイルの表示

@ -19,20 +19,20 @@
}
.header-img:nth-child(2) {
transform: translate3d(10px,0,0);
animation: sideshift 1s infinite linear;
animation: sideshift 2s infinite linear;
background-blend-mode: screen;
}
@keyframes sideshift {
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); }
@keyframes sideshift {
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
/*35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); } */
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
}
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
}
.header-img:nth-child(3) {
opacity: 1;
transform: skew(10deg, 10deg);

ファイルの表示

@ -9,28 +9,57 @@
<header>
<h1>NoiseToSignal</h1>
<h2>Just the right ratio, &nbsp; ≥ 1</h2>
<div class="glitch">
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
<div class="glitch__img"></div>
</div>
</header>
<div class="episode-list">
<main>
<article class="preview">
<h1>E3: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
<div class="episode-displacement">
<div class="episode-counter">#E3</div>
</div>
<h1>
Nasenasenase
</h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
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>
</article>
<article class="preview">
<h1>E2: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
<div class="episode-displacement">
<div class="episode-counter">#E2</div>
</div>
<h1>
Nasenasenase
</h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
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>
</article>
<article class="preview">
<h1>E1: Nasenasenase<h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
<div class="episode-displacement">
<div class="episode-counter">#E1</div>
</div>
<h1>
Nasenasenase
</h1>
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba
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>
</article>
</main>
<footer id="left">Unne Links</footer>
<footer id="center">Unne Midde</footer>