Files
cycle-atlas/beingone/index.html
T
Claude 8aac3f10e4 Redesign BeingOne front page to the cream, navy and terracotta reference
New custom look from the user's reference screenshot: DM Serif Display and
Figtree, split hero with the photo bleeding off the right edge, a floating
quick search bar (looking for, age, location) that drives the finder, a
mobile menu, and added motion (line-by-line headline, photo curtain, map pins
dropping in, count-up scores, hover lifts, progress on the checks).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01829HyWt1ur24ovhzCVeBx4
2026-10-25 23:29:40 +00:00

347 lines
24 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 lang="en-AU">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BeingOne: marriage profiles for Australians, every one checked</title>
<meta name="description" content="BeingOne is a marriage website for Australians and their families where every profile is checked to be a real person.">
<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=DM+Serif+Display:ital@0;1&family=Figtree:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script>document.documentElement.classList.add('js');</script>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<symbol id="i-check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
<symbol id="i-lock" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></symbol>
<symbol id="i-camera" viewBox="0 0 24 24"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></symbol>
<symbol id="i-id" viewBox="0 0 24 24"><rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M5.5 16c.5-1.5 2-2.5 3.5-2.5s3 1 3.5 2.5M15 10h4M15 14h3"/></symbol>
<symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
<symbol id="i-ban" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></symbol>
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><path d="M4 22v-7"/></symbol>
<symbol id="i-send" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></symbol>
</svg>
<a class="skip" href="#main">Skip to content</a>
<header class="nav">
<div class="container nav__bar">
<a class="wordmark" href="#top" aria-label="BeingOne, back to the top">
<svg class="mark" viewBox="0 0 32 32" aria-hidden="true"><circle cx="12" cy="16" r="8"/><circle cx="20" cy="16" r="8"/></svg>
<span>Being<b>One</b></span>
</a>
<nav class="nav__links" id="nav-links" aria-label="Main">
<a href="#find">Discover</a>
<a href="#results">Curated matches</a>
<a href="#talk">Messages</a>
<a href="#safety">Safety centre</a>
<a href="#help">Help</a>
<a class="only-sm" href="#join" data-open-tab="login">Sign in</a>
</nav>
<div class="nav__actions">
<a class="nav__signin" href="#join" data-open-tab="login">Sign in</a>
<a class="btn btn--sm" href="#join" data-open-tab="join">Join</a>
<button class="nav__menu btn btn--sm" type="button" aria-expanded="false" aria-controls="nav-links">Menu</button>
</div>
</div>
</header>
<main id="main">
<section class="hero" id="top" aria-labelledby="hero-title">
<figure class="hero__photo" data-slot="hero" data-alt="A bride and groom holding hands outdoors as guests throw petals">
<img src="images/hero.jpg" width="998" height="770" alt="A bride and groom holding hands outdoors as guests throw petals" fetchpriority="high">
</figure>
<div class="container hero__inner">
<div class="hero__text">
<h1 id="hero-title">
<span class="line" style="--i:0"><span>Real people.</span></span>
<span class="line" style="--i:1"><span>Real profiles.</span></span>
<span class="line line--it" style="--i:2"><span>Real marriage.</span></span>
</h1>
<p class="lead hero__lead">Every profile is checked, so you meet real people across Australia.</p>
<a class="btn btn--primary hero__cta" href="#join" data-open-tab="join">Create your profile<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
</div>
<div class="container quick__wrap">
<form class="quick" id="quick" onsubmit="return false" aria-label="Quick search">
<div class="quick__field">
<label for="q-for">I’m looking for</label>
<select id="q-for"><option value="any">Anyone</option><option value="w">A woman</option><option value="m">A man</option></select>
</div>
<div class="quick__field">
<label for="q-age">Age</label>
<select id="q-age"><option value="21-60">Any age</option><option value="21-29">21 to 29</option><option value="30-39">30 to 39</option><option value="40-49">40 to 49</option><option value="50-60">50 to 60</option></select>
</div>
<div class="quick__field">
<label for="q-city">Location</label>
<select id="q-city"><option>Anywhere</option><option>Adelaide</option><option>Brisbane</option><option>Canberra</option><option>Darwin</option><option>Hobart</option><option>Melbourne</option><option>Perth</option><option>Sydney</option></select>
</div>
<button class="btn btn--primary quick__go" type="submit"><svg class="icon" aria-hidden="true"><use href="#i-search"/></svg>Search</button>
</form>
</div>
</section>
<section class="band band--path" id="path" aria-label="How it goes">
<div class="container">
<ol class="path">
<li data-reveal style="--i:0"><a href="#join">Join</a></li>
<li data-reveal style="--i:1"><a href="#verified">Get checked</a></li>
<li data-reveal style="--i:2"><a href="#find">Find</a></li>
<li data-reveal style="--i:3"><a href="#talk">Say yes</a></li>
<li data-reveal style="--i:4"><a href="#talk">Chat</a></li>
</ol>
</div>
</section>
<section class="sec finder" id="find" aria-labelledby="find-title">
<div class="container">
<div class="grid finder__top">
<h2 id="find-title" data-reveal>Find your match across Australia</h2>
<p class="lead" data-reveal style="--i:1">Pick a city, ages and what you love.</p>
</div>
<div class="grid finder__body">
<div class="map" data-reveal role="group" aria-label="Map of Australia. Tap a city to search there.">
<svg class="map__svg" viewBox="-40 -20 605 516" role="img" aria-label="Outline of Australia">
<path d="M381.3 9.8L393.8 56.0L416.3 70.0L422.5 96.6L435.0 130.2L458.7 144.2L465.0 155.4L485.0 187.6L505.0 208.6L513.7 224.0L512.5 245.0L520.0 260.4L512.5 284.2L506.3 308.0L490.0 334.6L485.0 348.6L476.2 366.8L473.8 385.0L450.0 392.0L430.0 407.4L412.5 397.6L393.8 403.2L362.5 393.4L350.0 385.0L343.8 358.4L326.2 359.1L331.3 347.2L321.2 336.0L300.0 347.2L277.5 322.0L237.5 301.0L212.5 303.8L175.0 312.2L143.8 333.2L123.8 334.6L87.5 348.6L73.8 350.0L38.7 341.6L46.3 326.2L47.5 308.0L32.5 263.2L17.5 224.0L18.8 196.0L26.2 165.2L58.8 149.8L82.5 144.2L118.8 126.0L127.5 112.0L147.5 91.0L168.8 77.0L186.3 54.6L212.5 70.0L221.2 68.6L225.0 46.2L235.0 35.0L256.3 21.0L275.0 28.0L310.0 30.8L306.3 49.0L297.5 72.8L322.5 91.0L343.8 105.0L360.0 103.6L370.0 77.0L368.8 49.0L376.2 30.8ZM408.7 429.8L453.8 432.6L453.8 450.8L441.3 469.0L425.0 470.4L415.0 450.8Z"/>
</svg>
<button class="pin" type="button" data-city="Perth" aria-pressed="false" aria-label="Perth" title="Perth" style="--x:14.6%;--y:63.4%;--i:0"></button>
<button class="pin" type="button" data-city="Adelaide" aria-pressed="false" aria-label="Adelaide" title="Adelaide" style="--x:61.6%;--y:71.5%;--i:1"></button>
<button class="pin" type="button" data-city="Darwin" aria-pressed="false" aria-label="Darwin" title="Darwin" style="--x:45.5%;--y:10.5%;--i:2"></button>
<button class="pin" type="button" data-city="Brisbane" aria-pressed="false" aria-label="Brisbane" title="Brisbane" style="--x:91.4%;--y:51.3%;--i:3"></button>
<button class="pin" type="button" data-city="Sydney" aria-pressed="false" aria-label="Sydney" title="Sydney" style="--x:87.6%;--y:68.6%;--i:4"></button>
<button class="pin" type="button" data-city="Canberra" aria-pressed="false" aria-label="Canberra" title="Canberra" style="--x:83.3%;--y:72.5%;--i:5"></button>
<button class="pin" type="button" data-city="Melbourne" aria-pressed="false" aria-label="Melbourne" title="Melbourne" style="--x:74.7%;--y:79.3%;--i:6"></button>
<button class="pin" type="button" data-city="Hobart" aria-pressed="false" aria-label="Hobart" title="Hobart" style="--x:79.6%;--y:93.1%;--i:7"></button>
<p class="map__city" id="map-city">All of Australia</p>
</div>
<form class="controls" id="finder-form" data-reveal style="--i:1" onsubmit="return false" aria-label="Match finder">
<div class="controls__ages">
<div class="field">
<div class="field__row"><label for="f-from">From</label><output id="o-from" for="f-from">25</output></div>
<input id="f-from" type="range" min="21" max="60" value="25">
</div>
<div class="field">
<div class="field__row"><label for="f-to">To</label><output id="o-to" for="f-to">40</output></div>
<input id="f-to" type="range" min="21" max="60" value="40">
</div>
</div>
<fieldset class="choices" id="f-likes">
<legend>You love</legend>
<input type="checkbox" id="l-beach" value="beach"><label for="l-beach">Beach</label>
<input type="checkbox" id="l-footy" value="footy"><label for="l-footy">Footy</label>
<input type="checkbox" id="l-coffee" value="coffee"><label for="l-coffee">Coffee</label>
<input type="checkbox" id="l-hiking" value="hiking"><label for="l-hiking">Hiking</label>
<input type="checkbox" id="l-cooking" value="cooking"><label for="l-cooking">Cooking</label>
<input type="checkbox" id="l-travel" value="travel"><label for="l-travel">Travel</label>
<input type="checkbox" id="l-music" value="music"><label for="l-music">Music</label>
<input type="checkbox" id="l-pets" value="pets"><label for="l-pets">Pets</label>
</fieldset>
</form>
</div>
<div class="results" id="results" aria-live="polite"></div>
<p class="visually-hidden" id="finder-status" role="status"></p>
<p class="finder__note">Sample people, made up for this demo.</p>
</div>
</section>
<section class="sec band--navy on-dark checks" id="verified" aria-labelledby="verified-title">
<div class="container grid">
<div class="head">
<h2 id="verified-title" data-reveal>Every profile is checked</h2>
<p class="lead" data-reveal style="--i:1">Try the four checks.</p>
</div>
<div class="checks__panel" data-reveal style="--i:2">
<div class="checks__who">
<span class="avatar" style="--tone:var(--tone-a)" aria-hidden="true">M</span>
<div><h3>Mia, 28</h3><p class="label">Sydney</p></div>
<span class="status" id="v-status" data-state="idle" role="status"><svg class="icon icon--sm" aria-hidden="true"><use href="#i-shield"/></svg><span id="v-status-text">Not verified yet</span></span>
</div>
<div class="progress" aria-hidden="true"><i id="v-progress" style="--p:0"></i></div>
<ul class="rows" id="v-rows">
<li data-check>
<svg class="icon idle" aria-hidden="true"><use href="#i-phone"/></svg><svg class="icon tick" aria-hidden="true"><use href="#i-check"/></svg>
<div><h3>Phone check</h3><p>A code arrives by text.</p></div>
<button class="btn btn--sm" type="button" data-run>Run</button><span class="passed" hidden>Passed</span>
</li>
<li data-check>
<svg class="icon idle" aria-hidden="true"><use href="#i-camera"/></svg><svg class="icon tick" aria-hidden="true"><use href="#i-check"/></svg>
<div><h3>Photo check</h3><p>Checked as real.</p></div>
<button class="btn btn--sm" type="button" data-run>Run</button><span class="passed" hidden>Passed</span>
</li>
<li data-check>
<svg class="icon idle" aria-hidden="true"><use href="#i-id"/></svg><svg class="icon tick" aria-hidden="true"><use href="#i-check"/></svg>
<div><h3>ID check</h3><p>Matched to your photo.</p></div>
<button class="btn btn--sm" type="button" data-run>Run</button><span class="passed" hidden>Passed</span>
</li>
<li data-check>
<svg class="icon idle" aria-hidden="true"><use href="#i-users"/></svg><svg class="icon tick" aria-hidden="true"><use href="#i-check"/></svg>
<div><h3>Team look</h3><p>A quick look by our team.</p></div>
<button class="btn btn--sm" type="button" data-run>Run</button><span class="passed" hidden>Passed</span>
</li>
</ul>
<div class="checks__foot">
<button class="btn btn--sm" type="button" id="v-all">Run all four</button>
<button class="btn btn--sm" type="button" id="v-reset">Start again</button>
</div>
</div>
</div>
</section>
<section class="sec sec--tall" id="privacy" aria-labelledby="privacy-title">
<div class="container grid">
<figure class="privacy__photo" id="photo" data-reveal>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg/1280px-Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg/960px-Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg 960w, https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg/1280px-Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg 1280w, https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg/1920px-Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg 1920w" sizes="(min-width: 60rem) 58vw, 100vw" width="6718" height="4479" alt="A beach below orange sandstone cliffs, standing in for a profile photo" loading="lazy">
<img class="blur" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg/960px-Peterborough_%28AU%29%2C_Port_Campbell_National_Park%2C_Worm_Bay_--_2019_--_0863.jpg" width="6718" height="4479" alt="" aria-hidden="true" loading="lazy">
<span class="privacy__lock" aria-hidden="true"><span class="privacy__disc"><svg class="icon"><use href="#i-lock"/></svg></span></span>
<span class="privacy__badge" role="status"><svg class="icon icon--sm icon-open" aria-hidden="true"><use href="#i-eye"/></svg><svg class="icon icon--sm icon-shut" aria-hidden="true"><use href="#i-lock"/></svg><span id="photo-state">Hidden from this visitor</span></span>
</figure>
<form class="privacy__panel" onsubmit="return false" aria-label="Photo privacy">
<h2 id="privacy-title" data-reveal>You choose who sees your photos</h2>
<fieldset class="choices choices--stack" id="p-setting">
<legend>Photos are visible to</legend>
<input type="radio" name="setting" id="s-everyone" value="everyone"><label for="s-everyone">Everyone</label>
<input type="radio" name="setting" id="s-verified" value="verified" checked><label for="s-verified">Verified members</label>
<input type="radio" name="setting" id="s-accepted" value="accepted"><label for="s-accepted">People I accept</label>
<input type="radio" name="setting" id="s-me" value="me"><label for="s-me">Only me</label>
</fieldset>
<fieldset class="choices" id="p-viewer">
<legend>Right now, a visitor is</legend>
<input type="radio" name="viewer" id="v-stranger" value="stranger" checked><label for="v-stranger">A stranger</label>
<input type="radio" name="viewer" id="v-member" value="verified"><label for="v-member">A verified member</label>
<input type="radio" name="viewer" id="v-accepted" value="accepted"><label for="v-accepted">Someone I accepted</label>
</fieldset>
</form>
</div>
</section>
<section class="band talk" id="talk" aria-labelledby="talk-title">
<div class="container">
<div class="talk__top"><h2 id="talk-title" data-reveal>Chat opens when both say yes</h2></div>
<div class="grid talk__body">
<div class="invite" data-reveal>
<div class="invite__who">
<span class="avatar" style="--tone:var(--tone-c)" aria-hidden="true">P</span>
<div><h3>Priya sent you an interest</h3><p class="label">26, Sydney</p></div>
</div>
<div class="invite__actions" id="invite-actions">
<button class="btn" type="button" id="t-accept">Accept</button>
<button class="btn" type="button" id="t-decline">No thanks</button>
<button class="btn btn--sm" type="button" id="t-reset" hidden>Start again</button>
</div>
<p class="invite__result" id="t-result" role="status"></p>
</div>
<div class="chat on-dark is-locked" id="chat" data-reveal style="--i:1">
<ul class="chat__log" id="chat-log" role="log" aria-label="Chat with Priya"></ul>
<form class="chat__form" id="chat-form" autocomplete="off">
<label class="visually-hidden" for="chat-input">Message</label>
<input id="chat-input" name="message" type="text" maxlength="300" enterkeyhint="send">
<button class="btn btn--sm btn--primary" type="submit"><svg class="icon" aria-hidden="true"><use href="#i-send"/></svg>Send</button>
</form>
<div class="chat__lock"><svg class="icon" aria-hidden="true"><use href="#i-lock"/></svg><span>Chat opens when you both say yes.</span></div>
</div>
</div>
</div>
</section>
<section class="sec sec--tall" id="family" aria-label="Family view and safety tools">
<div class="container grid together">
<div class="tile tile--wide" data-reveal>
<h2>Family view</h2>
<p class="lead">A parent or sibling can look at profiles with you.</p>
<fieldset class="choices" id="fam">
<legend>Who helps you look</legend>
<input type="checkbox" id="h-mum" value="Mum"><label for="h-mum">Mum</label>
<input type="checkbox" id="h-dad" value="Dad"><label for="h-dad">Dad</label>
<input type="checkbox" id="h-sister" value="Sister"><label for="h-sister">Sister</label>
<input type="checkbox" id="h-brother" value="Brother"><label for="h-brother">Brother</label>
</fieldset>
<p class="live" id="fam-status" role="status">Just you for now.</p>
</div>
<div class="tile tile--narrow on-dark" id="safety" data-reveal style="--i:1">
<h2>Safety tools</h2>
<div class="safety__who">
<span class="avatar" style="--tone:var(--tone-d)" aria-hidden="true">J</span>
<div><h3>Jack, 35</h3><p class="label">Melbourne</p></div>
</div>
<div class="safety__actions">
<button class="btn btn--sm" type="button" id="s-block"><svg class="icon" aria-hidden="true"><use href="#i-ban"/></svg><span>Block</span></button>
<button class="btn btn--sm" type="button" id="s-report"><svg class="icon" aria-hidden="true"><use href="#i-flag"/></svg><span>Report</span></button>
<button class="btn btn--sm" type="button" id="s-hide" aria-pressed="false"><svg class="icon" aria-hidden="true"><use href="#i-lock"/></svg><span>Hide my profile</span></button>
</div>
<p class="live" id="safe-status" role="status"></p>
</div>
</div>
</section>
<section class="band join" id="join" aria-labelledby="join-title">
<div class="container grid">
<div class="head">
<h2 id="join-title" data-reveal>Make your profile</h2>
<dl class="qa" id="help" data-reveal style="--i:1">
<div><dt>What does it cost?</dt><dd>A free plan and a paid plan. Paid price: <span class="fill" data-fill="paid-price">to be announced</span></dd></div>
<div><dt>Will I get alerts?</dt><dd>Email and phone alerts for matches, interests and messages.</dd></div>
<div><dt>Who runs the site?</dt><dd>Our team reviews profiles and reports.</dd></div>
</dl>
</div>
<div class="card" id="join-card" data-reveal style="--i:2">
<div class="tabs" role="tablist" aria-label="Join or log in">
<button type="button" role="tab" id="tab-join" aria-selected="true" aria-controls="panel-join">Join</button>
<button type="button" role="tab" id="tab-login" aria-selected="false" aria-controls="panel-login" tabindex="-1">Log in</button>
</div>
<div class="panel" role="tabpanel" id="panel-join" aria-labelledby="tab-join">
<form data-endpoint="" novalidate class="panel">
<div class="field"><label for="j-name">First name</label><input id="j-name" name="name" type="text" autocomplete="given-name" required></div>
<div class="field"><label for="j-email">Email address</label><input id="j-email" name="email" type="email" autocomplete="email" inputmode="email" required></div>
<div class="field"><label for="j-for">Joining for</label>
<select id="j-for" name="for"><option>Myself</option><option>My son</option><option>My daughter</option><option>My brother or sister</option></select>
</div>
<button class="btn btn--primary" type="submit">Create your profile<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></button>
<p class="form-help" aria-live="polite"></p>
</form>
</div>
<div class="panel" role="tabpanel" id="panel-login" aria-labelledby="tab-login">
<form data-endpoint="" novalidate class="panel">
<div class="field"><label for="l-email">Email address</label><input id="l-email" name="email" type="email" autocomplete="email" inputmode="email" required></div>
<button class="btn btn--primary" type="submit">Log in<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></button>
<p class="form-help" aria-live="polite"></p>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="foot on-dark">
<div class="container">
<p class="foot__sign">Warmly, the BeingOne team.</p>
<div class="foot__row">
<p>For Australians and their families. <time datetime="2026-10">October 2026</time></p>
<ul class="foot__links">
<li><a href="#find">Discover</a></li>
<li><a href="#verified">Checks</a></li>
<li><a href="#privacy">Photos</a></li>
<li><a href="#talk">Messages</a></li>
<li><a href="#join">Join</a></li>
</ul>
</div>
<p data-credits>Photographs: beach by <a href="https://commons.wikimedia.org/wiki/File:Peterborough_(AU),_Port_Campbell_National_Park,_Worm_Bay_--_2019_--_0863.jpg">Dietmar Rabich</a> (CC BY-SA 4.0, Wikimedia Commons)</p>
</div>
</footer>
<script>document.querySelectorAll('[data-slot] img').forEach((i) => { if (i.complete && !i.naturalWidth) i.remove(); else i.addEventListener('error', () => i.remove(), { once: true }); });</script>
<script src="app.js"></script>
</body>
</html>