<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#b9e2ed">
<title>Walk on Water</title>
<meta name="description" content="Dare to imagine. Believe in the impossible. Something is taking shape.">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
min-height: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
min-height: 100svh;
font-family: Georgia, "Times New Roman", serif;
color: white;
background: #8bc8db;
}
.hero {
position: relative;
isolation: isolate;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
padding: 38px 24px 25px;
text-align: center;
}
/* Ocean photograph fallback */
.ocean-image {
position: absolute;
inset: 0;
z-index: -3;
background:
url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=2400&q=85")
center center / cover no-repeat;
animation: gentleZoom 35s ease-in-out infinite alternate;
}
/* Optional video background.
Upload a video named ocean.mp4 beside index.html
when you are ready to use moving footage. */
.ocean-video {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.5s ease;
}
.hero.video-ready .ocean-video {
opacity: 1;
}
/* Soft overlay keeps the white lettering readable */
.overlay {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
180deg,
rgba(13, 66, 91, 0.12) 0%,
rgba(12, 62, 82, 0.18) 48%,
rgba(7, 45, 62, 0.43) 100%
);
}
header {
width: 100%;
padding-top: 12px;
}
.brand {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(20px, 3vw, 28px);
font-weight: 300;
letter-spacing: 0.25em;
text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
main {
width: 100%;
max-width: 900px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.opening {
margin-top: clamp(65px, 14vh, 135px);
text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.opening p {
font-size: clamp(28px, 5vw, 48px);
font-weight: normal;
line-height: 1.4;
letter-spacing: 0.015em;
}
.opening p + p {
margin-top: 9px;
}
.coming {
margin-top: auto;
margin-bottom: clamp(38px, 9vh, 85px);
padding-top: 55px;
text-shadow: 0 3px 18px rgba(0,0,0,0.4);
}
.coming h1 {
font-size: clamp(34px, 6.5vw, 62px);
font-weight: normal;
line-height: 1.2;
letter-spacing: 0.01em;
}
.coming p {
margin-top: 18px;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(15px, 2vw, 19px);
letter-spacing: 0.22em;
text-transform: uppercase;
}
footer {
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
letter-spacing: 0.06em;
line-height: 2;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
footer a {
color: white;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.65);
padding-bottom: 3px;
}
footer a:hover {
border-bottom-color: white;
}
.copyright {
margin-top: 10px;
font-size: 11px;
opacity: 0.8;
}
@keyframes gentleZoom {
from { transform: scale(1); }
to { transform: scale(1.07); }
}
@media (max-width: 600px) {
.hero {
padding: 28px 20px 20px;
}
.opening {
margin-top: 17vh;
}
.coming {
margin-bottom: 9vh;
}
.brand {
letter-spacing: 0.19em;
}
}
@media (prefers-reduced-motion: reduce) {
.ocean-image {
animation: none;
}
.ocean-video {
display: none;
}
}
</style>
</head>
<body>
<div class="hero" id="hero">
<div class="ocean-image" aria-hidden="true"></div>
<video
class="ocean-video"
id="oceanVideo"
autoplay
muted
loop
playsinline
preload="none"
poster="https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=2400&q=85"
aria-hidden="true">
<source src="ocean.mp4" type="video/mp4">
</video>
<div class="overlay" aria-hidden="true"></div>
<header>
<div class="brand">WALK ON WATER</div>
</header>
<main>
<section class="opening">
<p>Dare to imagine.</p>
<p>Believe in the impossible.</p>
</section>
<section class="coming">
<h1>Something is taking shape.</h1>
<p>Stay tuned.</p>
</section>
</main>
<footer>
<div>
<a href="mailto:elizabeth@walkonwater.coach">
elizabeth@walkonwater.coach
</a>
</div>
<div class="copyright">
© 2026 Walk on Water
</div>
</footer>
</div>
<script>
const video = document.getElementById("oceanVideo");
const hero = document.getElementById("hero");
video.addEventListener("canplay", () => {
hero.classList.add("video-ready");
});
video.addEventListener("error", () => {
hero.classList.remove("video-ready");
});
video.play().catch(() => {
// The background photograph remains visible
// if autoplay is unavailable.
});
</script>
</body>
</html>