fricklerhandwerk/Fediversity
1
0
Fork 0
forked from Fediversity/Fediversity
Code Pull requests Activity
Fediversity/public/elements/index.html
Laurens 41f23751ab image placeholders
2024-04-02 10:29:00 +02:00

2915 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html
itemscope
class=""
lang="en-us"
itemtype="http://schema.org/WebPage"
>
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=5"
/>
<meta name="theme-name" content="hugoplate" />
<link rel="shortcut icon" href="/images/favicon_hudf4905de8b22f1b316f0f9113e9f1079_22623_96x0_resize_lanczos_3.png" type="image/x-icon">
<link rel="icon" href="/images/favicon_hudf4905de8b22f1b316f0f9113e9f1079_22623_96x0_resize_lanczos_3.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="48x48" href="/images/favicon_hudf4905de8b22f1b316f0f9113e9f1079_22623_48x0_resize_lanczos_3.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon_hudf4905de8b22f1b316f0f9113e9f1079_22623_96x0_resize_lanczos_3.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon_hudf4905de8b22f1b316f0f9113e9f1079_22623_144x0_resize_lanczos_3.png">
<link rel="manifest" href="/manifest.webmanifest" />
<meta
name="msapplication-TileColor"
content="#ddd" />
<meta
name="theme-color"
content="#ffffff" />
<base href="//localhost:1313/elements/" />
<title>Elements</title>
<meta
name="keywords"
content="Boilerplate, Hugo" />
<meta
name="description"
content="This is meta description" />
<meta name="author" content="zeon.studio" />
<meta property="og:image" content="//localhost:1313/images/og-image.png" />
<meta name="twitter:image" content="//localhost:1313/images/og-image.png" />
<meta
name="twitter:card"
content="summary
_large_image
" />
<meta property="og:image:width" content="900" />
<meta property="og:image:height" content="600" />
<meta
property="og:image:type"
content="image/
.png
" />
<meta property="og:title" content="Elements" />
<meta property="og:description" content="This is meta description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="//localhost:1313/elements/" />
<meta name="twitter:title" content="Elements" />
<meta name="twitter:description" content="This is meta description" />
<script>
let indexURL = "//localhost:1313/searchindex.json";
let includeSectionsInSearch = ["blog"];
let no_results_for = "No results for";
let empty_search_results_placeholder = "Type something to search..";
</script>
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="preconnect" href="https://use.fontawesome.com" crossorigin />
<link rel="preconnect" href="//cdnjs.cloudflare.com" />
<link rel="preconnect" href="//www.googletagmanager.com" />
<link rel="preconnect" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="https://use.fontawesome.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
<link rel="dns-prefetch" href="//www.googletagmanager.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
<link rel="dns-prefetch" href="//platform.linkedin.com" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<script>
(function () {
const googleFont = document.createElement("link");
googleFont.href =
"https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&family=Signika:wght@500;700&display=swap";
googleFont.type = "text/css";
googleFont.rel = "stylesheet";
document.head.appendChild(googleFont);
})();
</script>
<link
href="/css/style.css"
integrity=""
rel="stylesheet"
/>
<link
defer
async
rel="stylesheet"
href="/css/style-lazy.css"
integrity=""
media="print"
onload="this.media='all'; this.onload=null;"
/>
</head>
<body>
<div
class="fixed left-0 top-0 z-50 flex w-[30px] items-center justify-center bg-gray-200 py-[2.5px] text-[12px] uppercase text-black sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200 2xl:bg-pink-200"
>
<span class="block sm:hidden">all</span>
<span class="hidden sm:block md:hidden">sm</span>
<span class="hidden md:block lg:hidden">md</span>
<span class="hidden lg:block xl:hidden">lg</span>
<span class="hidden xl:block 2xl:hidden">xl</span>
<span class="hidden 2xl:block">2xl</span>
</div>
<header
class="header sticky top-0 z-30"
>
<nav class="navbar container">
<div class="order-0">
<a class="navbar-brand block" href="/">
<img
fetchpriority="high"
decoding="async"
class="img logo-light"
width="160"
height="32"
src="/images/logo_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_q80_h2_lanczos_3.webp"
alt="Hugoplate"
onerror="this.onerror=null;this.src='\/images\/logo_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_lanczos_3.png';" />
<img
fetchpriority="high"
decoding="async"
class="img logo-dark"
width="160"
height="32"
src="/images/logo-darkmode_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_q80_h2_lanczos_3.webp"
alt="Hugoplate"
onerror="this.onerror=null;this.src='\/images\/logo-darkmode_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_lanczos_3.png';" />
</a>
</div>
<input id="nav-toggle" type="checkbox" class="hidden" />
<label
for="nav-toggle"
class="order-3 cursor-pointer flex items-center lg:hidden text-dark lg:order-1"
>
<svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
<title>Menu Open</title>
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
</svg>
<svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
<title>Menu Close</title>
<polygon
points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
transform="rotate(45 10 10)"
></polygon>
</svg>
</label>
<ul
id="nav-menu"
class="navbar-nav order-3 hidden lg:flex w-full pb-6 lg:order-1 lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8"
>
<li class="nav-item nav-dropdown group relative">
<span
class="nav-link
inline-flex items-center"
>
For You
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</span>
<ul
class="nav-dropdown-list lg:group-hover:visible lg:group-hover:opacity-100"
>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/developers/"
>
Developers
</a>
</li>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/ec/"
>
European Commission
</a>
</li>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/individuals/"
>
Individuals
</a>
</li>
</ul>
</li>
<li class="nav-item nav-dropdown group relative">
<span
class="nav-link
inline-flex items-center"
>
Consortium
<svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</span>
<ul
class="nav-dropdown-list lg:group-hover:visible lg:group-hover:opacity-100"
>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/nlnet/"
>
NLnet
</a>
</li>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/nordunet/"
>
NORDUnet
</a>
</li>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/oid/"
>
Open Internet Discourse
</a>
</li>
<li class="nav-dropdown-item">
<a
class="nav-dropdown-link "
href="/tweag/"
>
Tweag
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link "
href="/fediversity/"
>Fediversity</a
>
</li>
<li class="nav-item">
<a
class="nav-link "
href="/grants/"
>Grants</a
>
</li>
<li class="nav-item">
<a
class="nav-link "
href="/"
>Events</a
>
</li>
<li class="nav-item">
<a
class="nav-link "
href="/"
>News</a
>
</li>
<li class="mt-4 inline-block lg:hidden">
<a
class="btn btn-outline-primary btn-sm"
href="/contact"
>
Contact
</a>
</li>
</ul>
<div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
<button
aria-label="search"
class="border-border text-dark hover:text-primary mr-5 inline-block border-r pr-5 text-xl"
data-target="search-modal"
>
<i class="fa-solid fa-search"></i>
</button>
<div class="theme-switcher mr-5">
<input id="theme-switcher" data-theme-switcher type="checkbox" />
<label for="theme-switcher">
<span class="sr-only">theme switcher</span>
<span>
<svg
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 opacity-100"
viewBox="0 0 56 56"
fill="#fff"
height="16"
width="16"
>
<path
d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z"
/>
</svg>
<svg
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 opacity-0"
viewBox="0 0 24 24"
fill="none"
height="16"
width="16"
>
<path
fill="#000"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
/>
</svg>
</span>
</label>
</div>
<script>
var darkMode = false;
if (window.matchMedia("(prefers-color-scheme: dark)").matches){darkMode = true}
if (localStorage.getItem("theme") === "dark"){darkMode = true}
else if (localStorage.getItem("theme") === "light"){darkMode = false}
if (darkMode){document.documentElement.classList.toggle("dark")}
var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
document.addEventListener("DOMContentLoaded", () => {
[].forEach.call(themeSwitch, function (ts) {
ts.checked = darkMode ? true : false;
ts.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
localStorage.setItem(
"theme",
document.documentElement.classList.contains("dark") ? "dark" : "light"
);
});
});
});
</script>
<a
href="/contact"
class="btn btn-outline-primary btn-sm hidden lg:inline-block"
>
Contact
</a>
</div>
</nav>
</header>
<div
class="search-modal "
aria-hidden="true"
style="--color-primary: #121212">
<div data-target="close-search-modal" class="search-modal-overlay"></div>
<div
class="search-wrapper"
data-image="true"
data-description="true"
data-tags="true"
data-categories="true">
<div class="search-wrapper-header">
<label for="search-modal-input" style="margin-top:-1px">
<span class="sr-only">search icon</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
height="18"
width="18"
class="search-icon"
data-type="search">
<path
fill="currentColor"
d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
height="18"
width="18"
class="search-reset"
data-type="reset">
<path
fill="currentColor"
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
</svg>
</label>
<input
id="search-modal-input"
type="text"
data-search-input
autocomplete="off"
aria-label="Search"
placeholder="Search Post ..." />
</div>
<div class="search-wrapper-body">
<div class="search-result" data-search-result></div>
<span class="search-result-empty">
Type something to search..
</span>
</div>
<div class="search-wrapper-footer">
<span>
<kbd>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
viewBox="0 0 16 16">
<path
d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z" />
</svg>
</kbd>
<kbd>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
style="margin-top:1px;"
viewBox="0 0 16 16">
<path
d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
</svg>
</kbd>
to navigate
</span>
<span>
<kbd>
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
fill="currentColor"
style="display:inline-block;"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
</svg>
</kbd>
to select
</span>
<span class="search-result-info"></span>
<span data-target="close-search-modal">
<kbd>ESC</kbd> to close
</span>
</div>
</div>
</div>
<main> <section>
<div class="container text-center">
<div
class="from-body to-theme-light rounded-2xl bg-gradient-to-b px-8 py-14"
>
<h1>Elements</h1>
<ul class="mt-6 inline-flex space-x-1 capitalize">
<li>
<a class="text-primary" href="//localhost:1313/">
Home
</a>
<span class="inlin-block mr-1">/</span>
</li>
<li>
<span class="text-primary">
Elements
</span>
</li>
</ul>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="row justify-center">
<div class="lg:col-10">
<div class="content">
<details class="table-of-content ">
<summary>
Table of Contents
</summary>
<nav id="TableOfContents">
<ol>
<li><a href="#heading-2">Heading 2</a>
<ol>
<li><a href="#heading-3">Heading 3</a>
<ol>
<li><a href="#heading-4">Heading 4</a>
<ol>
<li><a href="#heading-5">Heading 5</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#emphasis">Emphasis</a></li>
<li><a href="#button">Button</a></li>
<li><a href="#link">Link</a></li>
<li><a href="#paragraph">Paragraph</a></li>
<li><a href="#ordered-list">Ordered List</a></li>
<li><a href="#unordered-list">Unordered List</a></li>
<li><a href="#notice">Notice</a></li>
<li><a href="#tab">Tab</a></li>
<li><a href="#accordions">Accordions</a></li>
<li><a href="#code-and-syntax-highlighting">Code and Syntax Highlighting</a></li>
<li><a href="#blockquote">Blockquote</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#image">Image</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#slider">Slider</a></li>
<li><a href="#youtube-video">Youtube video</a></li>
<li><a href="#custom-video">Custom video</a></li>
</ol>
</li>
</ol>
</nav>
</details>
<p>Here is an example of headings. You can use this heading by the following markdown rules. For example: use <code>#</code> for heading 1 and use <code>######</code> for heading 6.</p>
<h1 id="heading-1">Heading 1</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
<h4 id="heading-4">Heading 4</h4>
<h5 id="heading-5">Heading 5</h5>
<h6 id="heading-6">Heading 6</h6>
<hr>
<h3 id="emphasis">Emphasis</h3>
<p>The emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p>
<p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p>
<p>The combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p>
<p>Strike through uses two tildes. <del>Scratch this.</del></p>
<hr>
<h3 id="button">Button</h3>
<a href="//localhost:1313/" class="btn btn-primary " >Button</a>
<hr>
<h3 id="link">Link</h3>
<p><a href="https://www.google.com"
target="_blank"
>I&rsquo;m an inline-style link</a>
</p>
<p><a href="https://www.google.com"
title="Google&#39;s Homepage"
target="_blank"
>I&rsquo;m an inline-style link with title</a>
</p>
<p><a href="https://www.themefisher.com"
target="_blank"
>I&rsquo;m a reference-style link</a>
</p>
<p><a href="../blob/master/LICENSE"
>I&rsquo;m a relative reference to a repository file</a>
</p>
<p><a href="https://gethugothemes.com"
target="_blank"
>You can use numbers for reference-style link definitions</a>
</p>
<p>Or leave it empty and use the <a href="https://www.getjekyllthemes.com"
target="_blank"
>link text itself</a>
.</p>
<p>URLs and URLs in angle brackets will automatically get turned into links.
<a href="http://www.example.com"
target="_blank"
>http://www.example.com</a>
or <a href="http://www.example.com"
target="_blank"
>http://www.example.com</a>
and sometimes
example.com (but not on Github, for example).</p>
<p>Some text to show that the reference links can follow later.</p>
<hr>
<h3 id="paragraph">Paragraph</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nihil enim maxime corporis cumque totam aliquid nam sint inventore optio modi neque laborum officiis necessitatibus, facilis placeat pariatur! Voluptatem, sed harum pariatur adipisci voluptates voluptatum cumque, porro sint minima similique magni perferendis fuga! Optio vel ipsum excepturi tempore reiciendis id quidem? Vel in, doloribus debitis nesciunt fugit sequi magnam accusantium modi neque quis, vitae velit, pariatur harum autem a! Velit impedit atque maiores animi possimus asperiores natus repellendus excepturi sint architecto eligendi non, omnis nihil. Facilis, doloremque illum. Fugit optio laborum minus debitis natus illo perspiciatis corporis voluptatum rerum laboriosam.</p>
<hr>
<h3 id="ordered-list">Ordered List</h3>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<hr>
<h3 id="unordered-list">Unordered List</h3>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<hr>
<h3 id="notice">Notice</h3>
<div class="notice note">
<div class="notice-head"><svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 9V14M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19ZM10.0498 6V6.1L9.9502 6.1002V6H10.0498Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"></path>
</svg><p>Note</p>
</div>
<div class="notice-body"><p>This is a simple note.</p></div>
</div>
<div class="notice tip">
<div class="notice-head"><svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM12 2.4C6.69807 2.4 2.4 6.69807 2.4 12C2.4 17.3019 6.69807 21.6 12 21.6C17.3019 21.6 21.6 17.3019 21.6 12C21.6 6.69807 17.3019 2.4 12 2.4ZM15.9515 7.55147L9.6 13.9029L8.04853 12.3515C7.5799 11.8828 6.8201 11.8828 6.35147 12.3515C5.88284 12.8201 5.88284 13.5799 6.35147 14.0485L8.75147 16.4485C9.2201 16.9172 9.9799 16.9172 10.4485 16.4485L17.6485 9.24853C18.1172 8.7799 18.1172 8.0201 17.6485 7.55147C17.1799 7.08284 16.4201 7.08284 15.9515 7.55147Z"
fill="currentColor" />
</svg><p>Tip</p>
</div>
<div class="notice-body"><p>This is a simple tip.</p></div>
</div>
<div class="notice info">
<div class="notice-head"><svg
width="20"
height="20"
viewBox="0 0 18 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.16109 0.993016C9.97971 1.03952 10.6611 1.42989 11.0721 2.22339L17.7981 15.8014C18.4502 17.1739 17.4403 19.0208 15.7832 19.0474H2.23859C0.730337 19.0234 -0.507163 17.3108 0.231587 15.7864L7.08321 2.20877C7.21146 1.96502 7.26996 1.89452 7.38059 1.76664C7.82534 1.25102 8.31171 0.975016 9.16109 0.993016ZM9.05046 2.49189C8.79284 2.50464 8.55696 2.64902 8.42834 2.87327C6.06134 7.36539 3.77946 11.9036 1.56546 16.4734C1.36071 16.9328 1.71209 17.5223 2.22621 17.547C6.74871 17.6201 11.2731 17.6201 15.7956 17.547C16.2925 17.523 16.666 16.953 16.459 16.4783C14.2866 11.9093 12.0471 7.37102 9.72171 2.87814C9.58446 2.63402 9.38309 2.48739 9.05046 2.49189Z"
fill="currentColor" />
<path
d="M9.61323 13.2153H8.35773L8.21973 7.04688H9.75723L9.61323 13.2153ZM8.17773 15.1015C8.17773 14.8731 8.25161 14.6841 8.39973 14.5338C8.54823 14.3838 8.75036 14.3084 9.00648 14.3084C9.26298 14.3084 9.46511 14.3838 9.61323 14.5338C9.76136 14.6841 9.83561 14.8731 9.83561 15.1015C9.83561 15.3216 9.76323 15.5057 9.61923 15.6539C9.47486 15.802 9.27086 15.8762 9.00648 15.8762C8.74211 15.8762 8.53811 15.802 8.39373 15.6539C8.24973 15.5057 8.17773 15.3216 8.17773 15.1015Z"
fill="currentColor" />
</svg><p>Info</p>
</div>
<div class="notice-body"><p>This is a simple info.</p></div>
</div>
<div class="notice warning">
<div class="notice-head"><svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 0C15.522 0 20 4.478 20 10C20 15.522 15.522 20 10 20C4.478 20 0 15.522 0 10C0 4.478 4.478 0 10 0ZM10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18C14.411 18 18 14.411 18 10C18 5.589 14.411 2 10 2ZM12.293 6.293L13.707 7.707L11.414 10L13.707 12.293L12.293 13.707L10 11.414L7.707 13.707L6.293 12.293L8.586 10L6.293 7.707L7.707 6.293L10 8.586L12.293 6.293Z"
fill="currentColor" />
</svg><p>Warning</p>
</div>
<div class="notice-body"><p>This is a simple warning.</p></div>
</div>
<hr>
<h3 id="tab">Tab</h3>
<div class="tab" data-tab-group="default">
<ul class="tab-nav" data-tab-nav>
<li
class="tab-nav-item active"
data-tab="tab-1" tabindex="0">
Tab 1
</li>
<li
class="tab-nav-item "
data-tab="tab-2" tabindex="-1">
Tab 2
</li>
<li
class="tab-nav-item "
data-tab="tab-3" tabindex="-1">
Tab 3
</li>
</ul>
<div class="tab-content" data-tab-content>
<div
class="tab-content-panel active"
data-tab-panel="tab-1">
<h4 id="hey-there-i-am-a-tab">Hey There, I am a tab</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div
class="tab-content-panel "
data-tab-panel="tab-2">
<h4 id="i-wanna-talk-about-the-assassination-attempt">I wanna talk about the assassination attempt</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div
class="tab-content-panel "
data-tab-panel="tab-3">
<h4 id="we-know-youre-dealing-in-stolen-ore">We know you’re dealing in stolen ore</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo</p>
</div>
</div>
</div>
<hr>
<h3 id="accordions">Accordions</h3>
<div class="accordion ">
<button class="accordion-header " data-accordion>
Why should you need to do this?
<svg
class="accordion-icon"
x="0px"
y="0px"
viewBox="0 0 512 512"
xmlspace="preserve">
<path
fill="currentColor"
d="M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z"></path>
</svg>
</button>
<div class="accordion-content ">
<p><ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ul>
</p>
</div>
</div>
<div class="accordion ">
<button class="accordion-header " data-accordion>
How can I adjust Horizontal centering
<svg
class="accordion-icon"
x="0px"
y="0px"
viewBox="0 0 512 512"
xmlspace="preserve">
<path
fill="currentColor"
d="M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z"></path>
</svg>
</button>
<div class="accordion-content ">
<p><ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ul>
</p>
</div>
</div>
<div class="accordion ">
<button class="accordion-header " data-accordion>
Should you use Negative margin?
<svg
class="accordion-icon"
x="0px"
y="0px"
viewBox="0 0 512 512"
xmlspace="preserve">
<path
fill="currentColor"
d="M505.755,123.592c-8.341-8.341-21.824-8.341-30.165,0L256.005,343.176L36.421,123.592c-8.341-8.341-21.824-8.341-30.165,0 s-8.341,21.824,0,30.165l234.667,234.667c4.16,4.16,9.621,6.251,15.083,6.251c5.462,0,10.923-2.091,15.083-6.251l234.667-234.667 C514.096,145.416,514.096,131.933,505.755,123.592z"></path>
</svg>
</button>
<div class="accordion-content ">
<p><ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ul>
</p>
</div>
</div>
<hr>
<h3 id="code-and-syntax-highlighting">Code and Syntax Highlighting</h3>
<p>This is an <code>Inline code</code> sample.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">s</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;JavaScript syntax highlighting&#34;</span>;
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">alert</span>(<span style="color:#a6e22e">s</span>);
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span>s <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;Python syntax highlighting&#34;</span>
</span></span><span style="display:flex;"><span>print s
</span></span></code></pre></div><hr>
<h3 id="blockquote">Blockquote</h3>
<blockquote>
<p>Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once.</p>
</blockquote>
<hr>
<h3 id="tables">Tables</h3>
<table>
<thead>
<tr>
<th>Tables</th>
<th style="text-align:center">Are</th>
<th style="text-align:right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td style="text-align:center">right-aligned</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td style="text-align:center">centered</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td style="text-align:center">are neat</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<hr>
<h3 id="image">Image</h3>
<img
title="image title"
loading="lazy"
decoding="async"
class="img img-fluid img-center"
width="1096"
height="480"
src="/images/image-placeholder_huf5f2d24635a285cfc2259aa9741acb2a_4881_1096x480_fill_q100_lanczos_smart1_3.png"
alt="alter-text"
onerror="this.onerror='null';this.src='\/images\/image-placeholder_huf5f2d24635a285cfc2259aa9741acb2a_4881_1096x480_fill_q100_lanczos_smart1_3.png'" />
<script>
window.addEventListener("load", (e) => {
const lightbox = GLightbox();
});
</script>
<hr>
<h3 id="gallery">Gallery</h3>
<div
class=" gallery
zoomable
">
<div class="gallery-item">
<a
href="/images/gallery/01.jpg"
style="display: block;"
class="glightbox">
<img
loading="lazy"
src="/images/gallery/01_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0;"
alt="/images/gallery/01.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/01_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div class="gallery-item">
<a
href="/images/gallery/02.jpg"
style="display: block;"
class="glightbox">
<img
loading="lazy"
src="/images/gallery/02_hu9f5ce1c569e2ab213865609500b54bff_713428_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0;"
alt="/images/gallery/02.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/02_hu9f5ce1c569e2ab213865609500b54bff_713428_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div class="gallery-item">
<a
href="/images/gallery/03.jpg"
style="display: block;"
class="glightbox">
<img
loading="lazy"
src="/images/gallery/03_huf5c9dfe5645852846ce99ad77e61d20e_259550_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0;"
alt="/images/gallery/03.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/03_huf5c9dfe5645852846ce99ad77e61d20e_259550_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div class="gallery-item">
<a
href="/images/gallery/04.jpg"
style="display: block;"
class="glightbox">
<img
loading="lazy"
src="/images/gallery/04_hua47f595a8863664e9d354ca6db7dfd57_59892_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0;"
alt="/images/gallery/04.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/04_hua47f595a8863664e9d354ca6db7dfd57_59892_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div class="gallery-item">
<a
href="/images/gallery/05.jpg"
style="display: block;"
class="glightbox">
<img
loading="lazy"
src="/images/gallery/05_hue3c47dbec81aa52cd05166231080af9a_215325_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0;"
alt="/images/gallery/05.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/05_hue3c47dbec81aa52cd05166231080af9a_215325_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div class="gallery-item">
<a
href="/images/gallery/06.jpg"
style="display: block;"
class="glightbox">
<img
loading="lazy"
src="/images/gallery/06_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0;"
alt="/images/gallery/06.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/06_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
</div>
<hr>
<h3 id="slider">Slider</h3>
<div class="swiper gallery-slider max-w-[600px] ml-0">
<div class="swiper-wrapper">
<div
class="swiper-slide zoomable">
<a
href="/images/gallery/01.jpg"
class="glightbox"
style="display: block;">
<img
loading="lazy"
src="/images/gallery/01_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0"
alt="/images/gallery/01.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/01_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div
class="swiper-slide zoomable">
<a
href="/images/gallery/02.jpg"
class="glightbox"
style="display: block;">
<img
loading="lazy"
src="/images/gallery/02_hu9f5ce1c569e2ab213865609500b54bff_713428_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0"
alt="/images/gallery/02.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/02_hu9f5ce1c569e2ab213865609500b54bff_713428_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div
class="swiper-slide zoomable">
<a
href="/images/gallery/03.jpg"
class="glightbox"
style="display: block;">
<img
loading="lazy"
src="/images/gallery/03_huf5c9dfe5645852846ce99ad77e61d20e_259550_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0"
alt="/images/gallery/03.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/03_huf5c9dfe5645852846ce99ad77e61d20e_259550_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div
class="swiper-slide zoomable">
<a
href="/images/gallery/04.jpg"
class="glightbox"
style="display: block;">
<img
loading="lazy"
src="/images/gallery/04_hua47f595a8863664e9d354ca6db7dfd57_59892_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0"
alt="/images/gallery/04.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/04_hua47f595a8863664e9d354ca6db7dfd57_59892_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div
class="swiper-slide zoomable">
<a
href="/images/gallery/05.jpg"
class="glightbox"
style="display: block;">
<img
loading="lazy"
src="/images/gallery/05_hue3c47dbec81aa52cd05166231080af9a_215325_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0"
alt="/images/gallery/05.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/05_hue3c47dbec81aa52cd05166231080af9a_215325_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
<div
class="swiper-slide zoomable">
<a
href="/images/gallery/06.jpg"
class="glightbox"
style="display: block;">
<img
loading="lazy"
src="/images/gallery/06_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg"
class="img"
style="margin: 0"
alt="/images/gallery/06.jpg"
onerror="this.onerror='null';this.src='\/images\/gallery\/06_hu3cc0698070fd18165717cc5d118ae043_76179_400x400_fit_q80_lanczos.jpg'" />
</a>
</div>
</div>
<span class="swiper-button-prev"></span>
<span class="swiper-button-next"></span>
</div>
<hr>
<h3 id="youtube-video">Youtube video</h3>
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="https://www.youtube.com/embed/ResipmZmpDU" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>
<hr>
<h3 id="custom-video">Custom video</h3>
<video
width="100%"
height="auto"
controls
class="rounded-lg"
style="max-width:100%">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-theme-light">
<div class="container">
<div class="row items-center py-10">
<div class="lg:col-3 mb-8 text-center lg:mb-0 lg:text-left">
<a
class="navbar-brand inline-block"
href="/"
>
<img
fetchpriority="high"
decoding="async"
class="img logo-light"
width="160"
height="32"
src="/images/logo_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_q80_h2_lanczos_3.webp"
alt="Hugoplate"
onerror="this.onerror=null;this.src='\/images\/logo_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_lanczos_3.png';" />
<img
fetchpriority="high"
decoding="async"
class="img logo-dark"
width="160"
height="32"
src="/images/logo-darkmode_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_q80_h2_lanczos_3.webp"
alt="Hugoplate"
onerror="this.onerror=null;this.src='\/images\/logo-darkmode_hu3e1f0f6bc04cc0e54cd69f08cd041995_19726_320x0_resize_lanczos_3.png';" />
</a>
</div>
<div class="lg:col-6 mb-8 text-center lg:mb-0">
<ul>
<li class="m-3 inline-block">
<a
href="
/about/
"
>About</a
>
</li>
<li class="m-3 inline-block">
<a
href="
/elements/
"
>Elements</a
>
</li>
<li class="m-3 inline-block">
<a
href="
/privacy-policy/
"
>Privacy Policy</a
>
</li>
</ul>
</div>
<div class="lg:col-3 mb-8 text-center lg:mb-0 lg:mt-0 lg:text-right">
<ul class="social-icons">
<li>
<a
target="_blank"
aria-label="facebook"
rel="nofollow noopener"
href="https://www.facebook.com/"
>
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a
target="_blank"
aria-label="twitter"
rel="nofollow noopener"
href="https://twitter.com/"
>
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a
target="_blank"
aria-label="github"
rel="nofollow noopener"
href="https://www.github.com/"
>
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a
target="_blank"
aria-label="linkedin"
rel="nofollow noopener"
href="https://www.linkedin.com/"
>
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="border-border border-t py-7">
<div class="text-light container text-center">
<p>Designed &amp; Developed by <a href="https://zeon.studio"
target="_blank"
>Zeon Studio</a></p>
</div>
</div>
</footer>
<script
crossorigin="anonymous"
integrity=""
src="/js/script.js"
></script>
<script
defer
async
crossorigin="anonymous"
integrity=""
src="/js/script-lazy.js"
></script>
<script>
if ('serviceWorker' in navigator){navigator.serviceWorker.register("/service-worker.js");}
</script>
</body>
</html>
View git blame Copy permalink