Create links page
This commit is contained in:
commit
aea3cb2011
3 changed files with 163 additions and 0 deletions
60
index.html
Normal file
60
index.html
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Nettika</title>
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<figure id="pfp">
|
||||||
|
<picture>
|
||||||
|
<img src="pfp.jpg" alt="Nettika">
|
||||||
|
</picture>
|
||||||
|
<figcaption>Nettika</figcaption>
|
||||||
|
</figure>
|
||||||
|
<div id="bio">
|
||||||
|
<p>📍 Seattle, US</p>
|
||||||
|
<p>🏳️‍🌈🏳️‍⚧️ any pronouns</p>
|
||||||
|
<p>👩💻🐆 computer cat</p>
|
||||||
|
<p>jan pi toki pona</p>
|
||||||
|
</div>
|
||||||
|
<menu id="socials">
|
||||||
|
<li>
|
||||||
|
<a href="https://bsky.app/profile/nettika.cat" title="Bluesky">
|
||||||
|
<svg class="icon" viewBox="0 0 600 530">
|
||||||
|
<path
|
||||||
|
d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://t.me/nettika_cat" title="Telegram">
|
||||||
|
<svg class="icon" viewBox="0 0 542.158 452.518">
|
||||||
|
<path
|
||||||
|
d="M36.068 193.791c145.761-63.505 242.957-105.372 291.589-125.6C466.513 10.436 495.365.404 514.171.073c4.137-.073 13.385.952 19.375 5.813 5.059 4.104 6.451 9.649 7.117 13.54.666 3.892 1.495 12.757.836 19.684-7.525 79.061-40.084 270.924-56.648 359.474-7.009 37.469-20.81 50.033-34.17 51.262-29.036 2.672-51.085-19.189-79.208-37.624-44.006-28.847-68.867-46.804-111.583-74.953-49.366-32.531-17.364-50.411 10.769-79.631 7.363-7.648 135.296-124.013 137.772-134.569.31-1.32.597-6.241-2.326-8.84-2.924-2.598-7.239-1.71-10.353-1.003-4.413 1.002-74.714 47.468-210.902 139.399-19.955 13.703-38.029 20.379-54.223 20.029-17.853-.386-52.194-10.094-77.723-18.393-31.313-10.178-56.2-15.559-54.032-32.846C0 212.412 12.399 203.204 36.068 193.791Z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
|
<menu id="links">
|
||||||
|
<li>
|
||||||
|
<a href="https://git.leaf.ninja/nettika">My Git projects</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://nettikadesigns.etsy.com">My Etsy shop</a>
|
||||||
|
</li>
|
||||||
|
<li class="wolfmetrotransit">
|
||||||
|
<a href="https://linktr.ee/wolfmetrotransit">🐺 My partner's Linktree</a>
|
||||||
|
</li>
|
||||||
|
</menu>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
103
main.css
Normal file
103
main.css
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
:root {
|
||||||
|
--foreground-color: #090809;
|
||||||
|
--background-color: #977fbb;
|
||||||
|
--accent-color: #8ebb78;
|
||||||
|
--wolf-color: #4296ba;
|
||||||
|
--icon-color: #fffdec;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Oxanium", cursive;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 1rem auto;
|
||||||
|
max-width: 40rem;
|
||||||
|
padding: 1.2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pfp {
|
||||||
|
picture img {
|
||||||
|
width: 8rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0.25rem 0.25rem 0.25rem #00000040
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#bio {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#socials {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
gap: 0.4rem;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
height: 2rem;
|
||||||
|
fill: var(--icon-color);
|
||||||
|
filter: drop-shadow(0.25rem 0.25rem 0.25rem #00000040);
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(80%) drop-shadow(0.25rem 0.25rem 0.25rem #00000060);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
list-style: none;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 0 0.5rem 0.25rem rgba(0, 0, 0, 0.125);
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.wolfmetrotransit {
|
||||||
|
background-color: var(--wolf-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
pfp.jpg
Normal file
BIN
pfp.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Loading…
Add table
Add a link
Reference in a new issue