candifloss_site/html/about.html
Candifloss 9ead073ba3 Slightly improve scroll behaviour
- Scrolling can snap the section to the screen
2025-11-29 22:25:55 +05:30

66 lines
1.7 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>About • candifloss.cc</title>
<link rel="stylesheet" href="../css/about.css">
<style>html { scroll-behavior: smooth; }</style>
</head>
<body>
<main class="sections" role="main">
<!-- section1 has no title-footer because nothing should peek above it -->
<section id="section1id" class="section section1">
<div class="content">
<h1>Section1 title</h1>
<p>This is section 1</p>
</div>
</section>
<!-- section2 starts with title-footer (this belongs to section2) -->
<section id="section2id" class="section section2">
<a class="title-footer" href="#section2id" aria-label="Section 2">
<h2>Section 2 title</h2>
</a>
<div class="content">
<p>Section 2 content</p>
</div>
</section>
<section id="section3id" class="section section3">
<a class="title-footer" href="#section3id" aria-label="Section 3">
<h2>Section 3 title</h2>
</a>
<div class="content">
<p>Section 3 content</p>
</div>
</section>
<section id="section4id" class="section section4">
<a class="title-footer" href="#section4id" aria-label="Section 4">
<h2>Section 4 title</h2>
</a>
<div class="content">
<p>Section 4 content</p>
</div>
</section>
<section id="section5id" class="section section5">
<a class="title-footer" href="#section5id" aria-label="Section 5">
<h2>Section 5 title</h2>
</a>
<div class="content">
<p>Section 5 content</p>
</div>
<footer>
<p>&copy; 2024 candifloss.cc. All rights reserved.</p>
</footer>
</section>
</main>
<script src="../js/snap.js"></script>
</body>
</html>