v1
This commit is contained in:
143
index.html
143
index.html
@@ -0,0 +1,143 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<title>24mg</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #000000;
|
||||||
|
--card: #f0f0f0;
|
||||||
|
--card-hover: #ffffff;
|
||||||
|
--text: #000000;
|
||||||
|
--muted: #6f6f6f;
|
||||||
|
--border: #fff;
|
||||||
|
--border-hover: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 390px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px rgba(15,5,5,0.05);
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 35px;
|
||||||
|
padding: 0 13px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: background 0.25s ease, border-color 0.18s ease, transform 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
background: var(--card-hover);
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:focus-visible {
|
||||||
|
outline: 2px solid #ffffff;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="handle" style="padding-left:0px;">24mg</div>
|
||||||
|
|
||||||
|
<a class="link" href="https://www.instagram.com/24mggg" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="M13 10a3 3 0 1 1-6 0q.001-.257.049-.5H6v3.997c0 .278.225.503.503.503h6.995a.503.503 0 0 0 .502-.503V9.5h-1.049q.048.243.049.5m-3 2a2 2 0 1 0-.001-4.001A2 2 0 0 0 10 12m2.4-4.1h1.199a.3.3 0 0 0 .301-.3V6.401a.3.3 0 0 0-.301-.301H12.4a.3.3 0 0 0-.301.301V7.6c.001.165.136.3.301.3M10 .4A9.6 9.6 0 0 0 .4 10a9.6 9.6 0 0 0 9.6 9.6a9.6 9.6 0 0 0 9.6-9.6A9.6 9.6 0 0 0 10 .4m5 13.489C15 14.5 14.5 15 13.889 15H6.111C5.5 15 5 14.5 5 13.889V6.111C5 5.5 5.5 5 6.111 5h7.778C14.5 5 15 5.5 15 6.111z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="label">Instagram</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="link" href="https://open.spotify.com/artist/2T6QEpNBlRcMDZtvoplip3" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="M17.9 10.9C14.7 9 9.35 8.8 6.3 9.75c-.5.15-1-.15-1.15-.6c-.15-.5.15-1 .6-1.15c3.55-1.05 9.4-.85 13.1 1.35c.45.25.6.85.35 1.3c-.25.35-.85.5-1.3.25m-.1 2.8c-.25.35-.7.5-1.05.25c-2.7-1.65-6.8-2.15-9.95-1.15c-.4.1-.85-.1-.95-.5s.1-.85.5-.95c3.65-1.1 8.15-.55 11.25 1.35c.3.15.45.65.2 1m-1.2 2.75c-.2.3-.55.4-.85.2c-2.35-1.45-5.3-1.75-8.8-.95c-.35.1-.65-.15-.75-.45c-.1-.35.15-.65.45-.75c3.8-.85 7.1-.5 9.7 1.1c.35.15.4.55.25.85M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"/>
|
||||||
|
</svg>
|
||||||
|
<span class="label">Spotify</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="link" href="https://music.apple.com/artist/24mg/1551473415" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="m10.995 0l.573.001q.241 0 .483.007c.35.01.705.03 1.051.093c.352.063.68.166.999.329a3.36 3.36 0 0 1 1.47 1.468c.162.32.265.648.328 1c.063.347.084.7.093 1.051q.007.241.007.483l.001.573v5.99l-.001.573q0 .241-.008.483c-.01.35-.03.704-.092 1.05a3.5 3.5 0 0 1-.33 1a3.36 3.36 0 0 1-1.468 1.468a3.5 3.5 0 0 1-1 .33a7 7 0 0 1-1.05.092q-.241.007-.483.008l-.573.001h-5.99l-.573-.001q-.241 0-.483-.008a7 7 0 0 1-1.052-.092a3.6 3.6 0 0 1-.998-.33a3.36 3.36 0 0 1-1.47-1.468a3.6 3.6 0 0 1-.328-1a7 7 0 0 1-.093-1.05Q.002 11.81 0 11.568V5.005l.001-.573q0-.241.007-.483c.01-.35.03-.704.093-1.05a3.6 3.6 0 0 1 .329-1A3.36 3.36 0 0 1 1.9.431A3.5 3.5 0 0 1 2.896.1A7 7 0 0 1 3.95.008Q4.19.002 4.432 0h.573zm-.107 2.518l-4.756.959H6.13a.66.66 0 0 0-.296.133a.5.5 0 0 0-.16.31c-.004.027-.01.08-.01.16v5.952c0 .14-.012.275-.106.39c-.095.115-.21.15-.347.177l-.31.063c-.393.08-.65.133-.881.223a1.4 1.4 0 0 0-.519.333a1.25 1.25 0 0 0-.332.995c.031.297.166.582.395.792c.156.142.35.25.578.296c.236.047.49.031.858-.043c.196-.04.38-.102.555-.205a1.4 1.4 0 0 0 .438-.405a1.5 1.5 0 0 0 .233-.55c.042-.202.052-.386.052-.588V6.347c0-.276.08-.35.302-.404c.024-.005 3.954-.797 4.138-.833c.257-.049.378.025.378.294v3.524c0 .14-.001.28-.096.396c-.094.115-.211.15-.348.178l-.31.062c-.393.08-.649.133-.88.223a1.4 1.4 0 0 0-.52.334a1.26 1.26 0 0 0-.34.994c.03.297.174.582.404.792a1.2 1.2 0 0 0 .577.294c.237.048.49.03.858-.044c.197-.04.381-.098.556-.202a1.4 1.4 0 0 0 .438-.405q.173-.252.233-.549a2.7 2.7 0 0 0 .044-.589V2.865c0-.273-.143-.443-.4-.42c-.04.003-.383.064-.424.073"/>
|
||||||
|
</svg>
|
||||||
|
<span class="label">Music</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="link" href="https://24mg.bandcamp.com" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="M2 17L10 3h12l-8 14H2z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="label">Bandcamp</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="link" href="https://soundcloud.com/24mg" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="M20.66 10.71a4 4 0 0 0-.68.07a5.47 5.47 0 0 0-5.39-4.4a5.6 5.6 0 0 0-2 .37a.84.84 0 0 0-.6.8v9a.84.84 0 0 0 .8.83h7.85a3.33 3.33 0 0 0 0-6.66ZM9.74 7.11a.75.75 0 0 0-.74.75v9a.75.75 0 0 0 1.5 0v-9a.76.76 0 0 0-.76-.75m-2.99 1.5a.75.75 0 0 0-.75.75v7.51a.75.75 0 0 0 1.5 0V9.36a.76.76 0 0 0-.75-.75m-3 2a.76.76 0 0 0-.75.75v5.51a.75.75 0 0 0 1.5 0v-5.51a.75.75 0 0 0-.75-.75m-2.99 1a.76.76 0 0 0-.75.75v4a.75.75 0 0 0 .75.75a.74.74 0 0 0 .75-.75v-4a.75.75 0 0 0-.75-.75"/>
|
||||||
|
</svg>
|
||||||
|
<span class="label">Soundcloud</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="link" href="mailto:paeglekarlis@gmail.com">
|
||||||
|
<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||||
|
<path d="M2 6l10 7 10-7v12H2V6zm10 5L2 6h20l-10 5z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="label">Email</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user