101 lines
No EOL
3.5 KiB
HTML
101 lines
No EOL
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>WA2000</title>
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link type="text/css" rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="banner">
|
|
<img src="banner.png" alt="banner"/>
|
|
|
|
</div>
|
|
|
|
<div class="nav-wrap">
|
|
|
|
<a href="https://www.youtube.com/@universebow"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<img src="./youtube.svg" target="_blank" alt="Icon description">
|
|
</a>
|
|
|
|
<div style="width: 2%;"></div>
|
|
|
|
<div class="nav-pill" id="nav-pill">
|
|
<div class="nav-pill-bar" id="nav-pill-bar">
|
|
<span class="nav-logo">WA2000</span>
|
|
<svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nav-dropdown" id="nav-dropdown">
|
|
<div class="nav-divider"></div>
|
|
<a href="" class="nav-link">------</a>
|
|
<a href="about.html" class="nav-link">About</a>
|
|
<a href="#" class="nav-link">Gallery</a>
|
|
<a href="#" class="nav-link">Contact</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div style="width: 2%;"></div>
|
|
|
|
<a href="https://www.youtube.com/@universebow"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<img src="./youtube.svg" target="_blank" alt="Icon description" width="43" height="43">
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="nav-placeholder" id="nav-placeholder"></div>
|
|
|
|
<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
|
|
<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
|
|
<defs>
|
|
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
|
<feImage id="nav-disp-img" result="disp_map" />
|
|
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
|
|
<feImage id="nav-spec-img" result="spec_map" />
|
|
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
|
|
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
|
|
</filter>
|
|
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
|
<feImage id="displacement-map-img" result="disp_map" />
|
|
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
|
|
<feImage id="specular-map-img" result="spec_map" />
|
|
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
|
|
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div class="card" id="card">
|
|
<h1>waff waff!</h1>
|
|
<div class="divider"></div>
|
|
<p>tiny text!!!</p>
|
|
<p>wuff</p>
|
|
</div>
|
|
<br>
|
|
<div class="card" id="card">
|
|
<h1>waff waff!</h1>
|
|
<div class="divider"></div>
|
|
<p>tiny text!!!</p>
|
|
<p>wuff</p>
|
|
</div>
|
|
<div class="card" id="card">
|
|
<h1>waff waff!</h1>
|
|
<div class="divider"></div>
|
|
<p>tiny text!!!</p>
|
|
<p>wuff</p>
|
|
</div>
|
|
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |