465 lines
21 KiB
HTML
465 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" id="top">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="theme-color" content="#3d2163">
|
|
|
|
|
|
|
|
<meta property="og:title" content="Responsive Disability Pride Flag CSS Background">
|
|
|
|
<link rel="canonical" href="https://leilukin.com/projects/snippets/disability-pride-flag-background/">
|
|
<meta name="generator" content="Eleventy v3.0.0">
|
|
<meta name="author" content="Leilukin">
|
|
<meta name="description" content="CSS code snippet of Disability Pride Flag background that can adapt to different widths and screen sizes.">
|
|
<meta name="fediverse:creator" content="@Leilukin@dragonscave.space">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:description" content="CSS code snippet of Disability Pride Flag background that can adapt to different widths and screen sizes.">
|
|
<meta property="og:url" content="https://leilukin.com/projects/snippets/disability-pride-flag-background/">
|
|
<meta property="og:locale" content="en_MY">
|
|
|
|
|
|
<link rel="alternate" type="application/rss+xml" title="Leilukin's Hub" href="/feed.xml">
|
|
|
|
|
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin="">
|
|
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin="">
|
|
<style>
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Lexend';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/fonts/fonts.css">
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-dark.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
|
|
|
|
<style>.disability-pride-flag {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E");
|
|
background-color: #595959;
|
|
background-repeat: no-repeat;
|
|
background-size: auto 100%;
|
|
background-position: center;
|
|
}
|
|
|
|
.disability-pride-flag.demo {
|
|
width: 100%;
|
|
height: 20rem;
|
|
}
|
|
.breadcrumbs {
|
|
list-style-type: "";
|
|
padding: 0;
|
|
margin: 0 0 0.7em 0;
|
|
display: flex;
|
|
gap: 0.5em;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.breadcrumbs li::after {
|
|
content: '➔';
|
|
padding-left: 0.3em;
|
|
}
|
|
|
|
.article__info--desc { margin-bottom: 1em; }
|
|
|
|
.blog__post--pagination {
|
|
padding-top: 1em;
|
|
margin-block-start: 2.5em;
|
|
border-top: 0.1em solid var(--clr-title-border);
|
|
}
|
|
|
|
.blog__post--nextprev {
|
|
list-style-type: "";
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 0.7em;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-areas: 'prev next';
|
|
}
|
|
|
|
.blog__post--prev { grid-area: prev; }
|
|
.blog__post--next { grid-area: next; }
|
|
.hero img { filter:
|
|
drop-shadow(0.1rem 0.1rem 0.2rem black)
|
|
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
|
; }
|
|
.hero {
|
|
width: 100%;
|
|
background-color: var(--clr-hero-bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero__top-bar {
|
|
background: var(--clr-navbar-bg);
|
|
width: 100%;
|
|
padding: 0.5em 0.7em;
|
|
}
|
|
|
|
.hero__img {
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
.hero img {
|
|
object-fit: contain;
|
|
overflow: hidden;
|
|
max-height: 16rem;
|
|
}
|
|
.navbar {
|
|
background: var(--clr-navbar-bg);
|
|
width: 100%;
|
|
z-index: 998;
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 0.6em;
|
|
}
|
|
|
|
.navbar__menu {
|
|
list-style-type: "";
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 1em;
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.navbar__menu a {
|
|
color: var(--clr-navbar-link);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
.navbar__menu a:hover { color: var(--clr-link-hover); }
|
|
.navbar__menu a:focus { outline-offset: 0.2em; }
|
|
|
|
.navbar__links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.navbar__toggle {
|
|
background-color: inherit;
|
|
color: var(--clr-navbar-link);
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
display: none;
|
|
align-items: center;
|
|
gap: 0.3em;
|
|
}
|
|
|
|
.navbar__toggle svg { fill: currentColor; }
|
|
|
|
.navbar__toggle:focus,
|
|
.navbar__menu a:focus { outline-offset: 0.1em; }
|
|
.navbar__toggle:focus,
|
|
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
|
|
|
|
.navbar__popover {
|
|
background: var(--clr-navbar-bg);
|
|
border: 0.15em solid var(--clr-navbar-link);
|
|
padding: 1.5em;
|
|
max-width: 85%;
|
|
}
|
|
|
|
.navbar__popover::backdrop {
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@supports selector([popover]) {
|
|
.navbar__toggle { display: flex; }
|
|
.navbar__links { display: none; }
|
|
}
|
|
|
|
/* Tablet screen size */
|
|
@media only screen and (min-width: 43.75rem) {
|
|
.navbar { padding: 1em 0.6em; }
|
|
.navbar__toggle, .navbar__popover { display: none; }
|
|
.navbar__links { display: flex; }
|
|
}
|
|
.top-btn,
|
|
.top-btn:hover {
|
|
color: var(--clr-top-btn-txt);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.top-btn {
|
|
position: fixed;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 999;
|
|
|
|
background-color: var(--clr-top-btn-bg);
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50em;
|
|
padding: 0.3em 0.5em;
|
|
gap: 0.2em;
|
|
}
|
|
|
|
.top-btn:focus {
|
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
|
outline-offset: 0.15em;
|
|
}
|
|
|
|
.top-btn__arrow {
|
|
display: inline-block;
|
|
width: 1em;
|
|
aspect-ratio: 1 / 1;
|
|
stroke-width: 0;
|
|
stroke: currentColor;
|
|
fill: currentColor;
|
|
}
|
|
:root { --footer-gap: 0.5em; }
|
|
|
|
.footer {
|
|
margin-top: auto;
|
|
width: 100%;
|
|
background: var(--clr-main-footer-bg);
|
|
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
|
|
text-align: center;
|
|
display: grid;
|
|
gap: var(--footer-gap);
|
|
}
|
|
|
|
.footer__links,
|
|
.footer__shrines {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
column-gap: var(--footer-gap);
|
|
}
|
|
|
|
.footer__links { justify-self: center; }
|
|
.footer__shrines { align-self: center; }</style>
|
|
|
|
|
|
<link rel="icon" sizes="32x32" href="/favicon.ico">
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon/leilukin-bee-favicon.svg">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
|
|
|
|
|
<link rel="me" href="mailto:contact@leilukin.com">
|
|
<link rel="me" href="https://dragonscave.space/@Leilukin">
|
|
<link rel="me" href="https://github.com/Leilukin">
|
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
|
|
|
|
|
<script src="/assets/js/D968lGk6J8.js" defer=""></script>
|
|
|
|
|
|
|
|
<title>
|
|
Responsive Disability Pride Flag CSS Background | Leilukin's Hub
|
|
</title>
|
|
</head>
|
|
<body>
|
|
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
|
<header class="hero">
|
|
<div class="hero__top-bar hidden"></div>
|
|
<div class="hero__img">
|
|
|
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
|
|
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<nav class="navbar" aria-labelledby="top-level-nav-title">
|
|
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
|
|
<ul class="navbar__menu navbar__links">
|
|
|
|
|
|
<li>
|
|
<a href="/">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/about/">About</a>
|
|
</li>
|
|
<li>
|
|
<a href="/now/">Now</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/articles/">Articles</a>
|
|
</li>
|
|
<li>
|
|
<a href="/projects/">Projects</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/">Shrines</a>
|
|
</li>
|
|
<li>
|
|
<a href="/adoptables/">Adoptables</a>
|
|
</li>
|
|
<li>
|
|
<a href="/links/">Links</a>
|
|
</li>
|
|
<li>
|
|
<a href="/guestbook/">Guestbook</a>
|
|
</li>
|
|
</ul>
|
|
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
|
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"></path></svg>
|
|
Navigation
|
|
</button>
|
|
</nav>
|
|
<div popover="" id="nav-menu" class="navbar__popover">
|
|
<ul class="navbar__menu">
|
|
|
|
|
|
<li>
|
|
<a href="/">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/about/">About</a>
|
|
</li>
|
|
<li>
|
|
<a href="/now/">Now</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/articles/">Articles</a>
|
|
</li>
|
|
<li>
|
|
<a href="/projects/">Projects</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/">Shrines</a>
|
|
</li>
|
|
<li>
|
|
<a href="/adoptables/">Adoptables</a>
|
|
</li>
|
|
<li>
|
|
<a href="/links/">Links</a>
|
|
</li>
|
|
<li>
|
|
<a href="/guestbook/">Guestbook</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<main id="content">
|
|
<header class="main__header">
|
|
|
|
<nav aria-labelledby="breadcrumbs-title">
|
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
|
<ol class="breadcrumbs">
|
|
|
|
<li>
|
|
<a href="/projects/">Projects</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
|
|
<h1>Responsive Disability Pride Flag CSS Background</h1>
|
|
|
|
|
|
|
|
<p>CSS code snippet of Disability Pride Flag background that can adapt to different widths and screen sizes.</p>
|
|
|
|
|
|
</header>
|
|
|
|
<content-wrapper>
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
<p>There have been CSS code snippets of LGBTQ+ pride flag backgrounds out there, but I could not find one for the <a href="https://www.womansday.com/life/a43964487/disability-pride-flag/">Disability Pride Flag</a>, which was created by <a href="https://capri0mni.dreamwidth.org/837596.html">Ann Magill</a> and released in 2021.</p>
|
|
<p>Therefore, at the start of <a href="https://en.wikipedia.org/wiki/Disability_Pride_Month">Disability Pride Month</a> in July 2024, I decided to code a Disability Pride Flag background in CSS, and now I am releasing my code snippet for public use.</p>
|
|
<p>My Disability Pride Flag CSS background is done with a combination of CSS background properties and inline SVG URL, and designed to be responsive, so it can adapt to different screen sizes and devices.</p>
|
|
<p>I have used JavaScript to set up the header of the main part of this website, so it will display the Disability Pride Flag as its background during July.</p>
|
|
<p>To code the Disability Pride Flag in CSS and make it responsive, I first downloaded an <a href="https://commons.wikimedia.org/wiki/File:Visually_Safe_Disability_Pride_Flag.svg">SVG file of the Disability Pride Flag</a> from Wikimedia Commons, then modified the stripes in Adobe Illustrator CS5 (the only version of Adobe Illustrator I actually own) to allow the entire stripes to be shown in wide backgrounds, instead of appearing to be cut off mid-way. After finishing the edit in Illustrator, I saved the SVG file, opened it in Visual Studio Code to obtain the SVG code, used Jake Archibald's <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> to optimise the SVG code, then encode it into CSS-ready code by using <a href="https://yoksel.github.io/url-encoder/">Yoksel's URL-encoder for SVG</a>.</p>
|
|
<p>Since Ann Magill released the Disability Pride Flag to the public domain under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0 Universal</a>, I am doing the same to my responsive Disability Pride Flag CSS background. Therefore, you are free to use my code and do what you want with it without asking for permission or crediting me.</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="demo">Demo</h2>
|
|
<a class="heading-anchor" href="#demo" aria-labelledby="demo"><span hidden="">#</span></a></div>
|
|
<div class="disability-pride-flag demo" role="img" aria-label="Demo of the Disability Pride flag coded in CSS"></div>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="code">Code</h2>
|
|
<a class="heading-anchor" href="#code" aria-labelledby="code"><span hidden="">#</span></a></div>
|
|
<p>CSS:</p>
|
|
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.disability-pride-flag</span> <span class="token punctuation">{</span>
|
|
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='651.83' height='300' viewBox='-90.33 0 651.83 300'%3E%3Cpath fill='%233BB07D' stroke='%233BB07D' stroke-miterlimit='10' stroke-width='.351' d='M561.5 300 162.902.664h-50.634L510.867 300z'/%3E%3Cpath fill='%237BC2E0' stroke='%237BC2E0' stroke-miterlimit='10' stroke-width='.351' d='M510.711 300 112.113.664H61.478L460.078 300z'/%3E%3Cpath fill='%23E8E8E8' stroke='%23E8E8E8' stroke-miterlimit='10' stroke-width='.351' d='M460.077 300 61.478.664H8.094L406.693 300z'/%3E%3Cpath fill='%23EEDE77' stroke='%23EEDE77' stroke-miterlimit='10' stroke-width='.351' d='M406.692 300 8.095.664h-49.111L357.584 300z'/%3E%3Cpath fill='%23CF7280' stroke='%23CF7280' stroke-miterlimit='10' stroke-width='.351' d='M357.378 300-41.22.664h-49.11L308.27 300z'/%3E%3C/svg%3E"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
|
<span class="token property">background-color</span><span class="token punctuation">:</span> #595959<span class="token punctuation">;</span>
|
|
<span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
|
|
<span class="token property">background-size</span><span class="token punctuation">:</span> auto 100%<span class="token punctuation">;</span>
|
|
<span class="token property">background-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span></code></pre>
|
|
<p>After copying the above snippet in a CSS stylesheet or the HTML <code><style></code> tags, to apply the background to an HTML element, simply add the CSS class name <code>disability-pride-flag</code> (you can rename the class name if you want) to the HTML element's <code>class</code> attribute.</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</content-wrapper>
|
|
</main>
|
|
<footer class="footer">
|
|
<p>
|
|
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
|
|
<a href="mailto:contact@leilukin.com">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
|
|
</p>
|
|
<h2 class="visually-hidden">Footer Navigation:</h2>
|
|
|
|
<ul class="inline-nav footer__links">
|
|
<li>
|
|
<a href="/feed.xml"><svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>RSS Feed</a>
|
|
</li>
|
|
<li><a href="/sitemap/
|
|
">Site Map</a></li><li><a href="/changelogs/">Changelogs</a></li><li><a href="/accessibility/">Accessibility</a></li><li><a href="/colophon/">Colophon</a></li></ul>
|
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
|
<p>
|
|
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 64c0-17.7 14.3-32 32-32l320 0 64 0c70.7 0 128 57.3 128 128s-57.3 128-128 128l-32 0c0 53-43 96-96 96l-192 0c-53 0-96-43-96-96L96 64zM480 224l32 0c35.3 0 64-28.7 64-64s-28.7-64-64-64l-32 0 0 128zM32 416l512 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>
|
|
<a href="https://ko-fi.com/leilukin">Support me on Ko-Fi</a>
|
|
</p><div class="h-card hidden">
|
|
<span class="p-name p-nickname">Leilukin</span>
|
|
<a href="/" class="u-url">Home page</a>
|
|
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
|
|
<span class="p-country-name">Malaysia</span>
|
|
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
|
|
</div><a href="#top" class="top-btn">
|
|
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
|
|
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
|
|
</svg>
|
|
Back to Top
|
|
</a>
|
|
</footer>
|
|
</body>
|
|
</html> |