120 lines
3.8 KiB
HTML
120 lines
3.8 KiB
HTML
<!doctype html>
|
||
|
||
<head id="www-lastfuture-de">
|
||
<meta charset="utf-8">
|
||
|
||
<title>lastfuture</title>
|
||
|
||
<meta name="description" content="personal website" />
|
||
<meta name="author" content="▧" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<link rel="stylesheet" href="style.css" />
|
||
|
||
<script src="js/three.min.js"></script>
|
||
<script src="functions.js" defer></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="base" class="headlineshadow">
|
||
|
||
<header>
|
||
<div id="greeting">
|
||
<!-- <img class="avatar" src="img/avatar.png" width="90" height="73" alt="alina marquardt" /> -->
|
||
<div id="icosahedron-container" class="avatar"></div>
|
||
<span class="line1">hello!</span>
|
||
<span class="line2">my name is</span>
|
||
<span class="line3">alina marquardt</span>
|
||
</div>
|
||
</header>
|
||
<aside>
|
||
<section class="iam">
|
||
<span class="line1">i am a senior</span>
|
||
<a class="line2" href=""><em>UX/UI designer</em></a>
|
||
<span class="line3">& electronic musician</span>
|
||
<span class="line4">based in germany</span>
|
||
</section>
|
||
</aside>
|
||
<!--
|
||
<nav>
|
||
<ul>
|
||
<li class="music line1"><a href="#music">i make <em>music</em><img class="icon" src="img/nav-music.png" width="17" height="19" alt></a></li>
|
||
<li class="design line2"><a href="#design">i <em>design</em> things<img class="icon" src="img/nav-design.png" width="12" height="20" alt></a><div class="icon"></div></li>
|
||
<li class="experiment line3"><a href="#experiment">i <em>experiment<img class="icon" src="img/nav-experiment.png" width="15" height="26" alt></em></a><div class="icon"></div></li>
|
||
</ul>
|
||
</nav>
|
||
-->
|
||
<aside>
|
||
<section class="findme">
|
||
<span class="line1">find me</span>
|
||
<ul>
|
||
<li class="line2"><a href="">on <em>bandcamp</em></a></li>
|
||
<li class="line3"><a href="">on <em>lorem ipsum</em></a></li>
|
||
</ul>
|
||
<span class="line4"><a href="">more places »</a></span>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
|
||
<div id="maincontent">
|
||
|
||
<div class="column">
|
||
|
||
<section class="box" id="music">
|
||
<header class="blurgreen headlineshadow"><h1>electronic <em>music</em><img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
|
||
<div class="opaque whitebg">
|
||
<h2><span class="halfbubble blurgreen"></span>albums</h2>
|
||
<!--<article>
|
||
<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - dreamshifter" /></a>
|
||
lastfuture –
|
||
<h1>dreamshifter</h1>
|
||
</article>
|
||
<article>
|
||
<a href=""><img src="http://dummyimage.com/162/ccc/fff.png" alt="lastfuture - reverse kill" /></a>
|
||
lastfuture –
|
||
<h1>reverse kill</h1>
|
||
</article>
|
||
-->
|
||
<div style="height: 200px;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="box" id="experiment">
|
||
<header class="blurgreen headlineshadow"><h1><em>experiments</em> box<img class="icon" src="img/head-experiment.png" width="63" height="103" alt></h1></header>
|
||
<div class="opaque whitebg">
|
||
<h2><span class="halfbubble blurgreen"></span>video experiments</h2>
|
||
<h2><span class="halfbubble blurgreen"></span>lorem ipsum</h2>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="column">
|
||
|
||
<section class="box invertedbox" id="recent">
|
||
<header class="headlineshadow whitebg"><h1>most recent <em>albums</em></h1></header>
|
||
<div class="opaque blurgreen">
|
||
<h2 class="headlineshadow"><em>track</em></h2>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="box" id="design">
|
||
<header class="blurgreen headlineshadow"><h1><em>design</em> work<img class="icon" src="img/head-design.png" width="46" height="75" alt></h1></header>
|
||
<div class="opaque whitebg">
|
||
<h2><span class="halfbubble blurgreen"></span>web</h2>
|
||
<div style="height: 300px;"></div>
|
||
<h2><span class="halfbubble blurgreen"></span>apps</h2>
|
||
<div style="height: 400px;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|