alina/alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start of flexbox based respolsivity

Browse Source
This commit is contained in:
Alina Marquardt
2025-05-13 16:23:57 +02:00
parent e3692bf536
commit 7deac63ba2
3 changed files with 234 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
public_html/index.html
View File

@@ -9,6 +9,7 @@
<meta name="author" content="▧" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preload" fetchpriority="high" as="image" href="img/bg.jpg" type="image/jpeg">
<link rel="preload" fetchpriority="high" as="image" href="img/bg_blur.jpg" type="image/jpeg">
<link rel="stylesheet" href="style.css" />
@@ -19,41 +20,49 @@
<body>
<div id="base" class="headlineshadow">
<div id="background_wrap"></div>
<header>
<div id="greeting">
<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>
<span class="line2 bigline"><em>UX/UI designer</em></span>
<span class="line3">&amp; electronic musician</span>
<span class="line4">based in germany</span>
</section>
</aside>
<aside>
<section class="findme">
<span class="line1">please also see</span>
<ul>
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
</ul>
</section>
</aside>
</div>
<div id="wrapper">
<div id="maincontent">
<div class="column column-sidebar headlineshadow">
<div class="column">
<header>
<div id="greeting">
<div id="icosahedron-container"></div>
<span class="line1">hello!</span>
<span class="line2">my name is</span>
<span class="line3">alina marquardt</span>
</div>
</header>
<aside>
<section id="iam">
<span class="line1">i am a senior</span>
<span class="line2 bigline"><em>UX/UI designer</em></span>
<span class="line3">&amp; electronic musician</span>
<span class="line4">based in germany</span>
</section>
</aside>
<aside>
<section id="findme">
<span class="line1">please also see</span>
<ul>
<li class="line2 bigline"><a href="https://git.broken.graphics/explore/repos" target="_blank">my <em>git repos</em></a></li>
<li class="line3 bigline"><a href="https://lastfuture.bandcamp.com/" target="_blank">my <em>bandcamp</em></a></li>
</ul>
</section>
</aside>
</div>
<div class="column column-content">
<section class="box maincontent" id="music">
<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1>
</header>
<section class="box" id="music">
<header class="blurgreen headlineshadow"><h1><em>music</em> releases<img class="icon" src="img/head-music.png" width="69" height="77" alt></h1></header>
<article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.jpg" />
@@ -61,6 +70,7 @@
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a>
</article>
<div class="clearfix"></div>
<article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
@@ -69,6 +79,7 @@
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a>
</article>
<div class="clearfix"></div>
<article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
@@ -77,6 +88,7 @@
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a>
</article>
<div class="clearfix"></div>
<article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
@@ -85,7 +97,9 @@
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a>
</article>
</section>
</div>
</div>