232 lines
7.8 KiB
HTML
232 lines
7.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Hands of the River | Amy Coates</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--river-blue: #4A90E2;
|
|||
|
|
--oak-brown: #8B4513;
|
|||
|
|
--sunlight-gold: #FFD700;
|
|||
|
|
--soft-cream: #F5F5DC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'Georgia', serif;
|
|||
|
|
background-color: var(--soft-cream);
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
header {
|
|||
|
|
background: linear-gradient(to right, var(--river-blue), var(--oak-brown));
|
|||
|
|
color: white;
|
|||
|
|
padding: 3rem 2rem;
|
|||
|
|
text-align: center;
|
|||
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1 {
|
|||
|
|
font-size: 3.5rem;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
letter-spacing: 2px;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
font-size: 1.4rem;
|
|||
|
|
font-style: italic;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 900px;
|
|||
|
|
margin: 4rem auto;
|
|||
|
|
padding: 0 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.story-section {
|
|||
|
|
margin-bottom: 4rem;
|
|||
|
|
border-left: 4px solid var(--river-blue);
|
|||
|
|
padding-left: 2rem;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.story-section::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: -10px;
|
|||
|
|
top: 2rem;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
background-color: var(--sunlight-gold);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: 0 0 15px var(--sunlight-gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h2 {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
color: var(--oak-brown);
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
text-align: justify;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quote {
|
|||
|
|
background-color: rgba(74, 144, 226, 0.1);
|
|||
|
|
padding: 2rem;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
margin: 3rem 0;
|
|||
|
|
font-style: italic;
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
border-left: 6px solid var(--sunlight-gold);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
margin: 4rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
|||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item:hover {
|
|||
|
|
transform: translateY(-8px);
|
|||
|
|
box-shadow: 0 12px 30px rgba(0,0，0，0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-bottom: 4px solid var(--river-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-caption {
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
background-color: var(--soft-cream);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-caption h3 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 1.4rem;
|
|||
|
|
color: var(--oak-brown);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-caption p {
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer {
|
|||
|
|
background-color: var(--oak-brown);
|
|||
|
|
color: white;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 3rem 2rem;
|
|||
|
|
margin-top: 6rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
footer p {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
h1 { font-size: 2.5rem; }
|
|||
|
|
.container { padding: 0 1rem; }
|
|||
|
|
.gallery-grid { grid-template-columns: 1fr; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<header>
|
|||
|
|
<h1>Hands of the River</h1>
|
|||
|
|
<div class="subtitle">Where Old Tools Meet New Canvases</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
|
|||
|
|
<div class="story-section">
|
|||
|
|
<h2>The First Boat</h2>
|
|||
|
|
<p>Before the first brick was laid in New Braunfels, before the first cobbler was baked in our ovens, there was the river. The Comal, winding and wild, was the lifeblood of our town. And the hands that shaped our history were the hands that built the first wooden boats on its banks.</p>
|
|||
|
|
|
|||
|
|
<p>Old Man Heinrich, who passed last winter at the age of 98, told me once how he learned to carve a paddle from the oldest oak tree in the valley. His father before him had done the same. Those tools, those hands, they carried us through floods, through droughts, through the long, hard winters when the river froze solid.</p>
|
|||
|
|
|
|||
|
|
<p>And now, those same hands are gone. But their spirit lives on in every young artist who picks up a brush, a chisel, a camera. Their work is the new boat, and we are all rowing together.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="story-section">
|
|||
|
|
<h2>The New Generation</h2>
|
|||
|
|
<p>Just last week, I sat in the studio of 17-year-old Maria Santos. She was painting a mural of the river, but not as it was. As it could be. With every stroke, she captured the light that dances on the water at dawn, the laughter of children who play along its banks, the quiet dignity of the elders who still walk its shores.</p>
|
|||
|
|
|
|||
|
|
<p>Maria told me, "I want people to remember that this river is more than water. It’s a story. And I want to tell it in color."</p>
|
|||
|
|
|
|||
|
|
<p>That’s what this page is about. Every piece of art you see here is a bridge between the past and the future. A reminder that our roots run deep, and our branches reach high.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="quote">
|
|||
|
|
“Art is not just a reflection of life—it is the hand that guides us forward.”<br>
|
|||
|
|
— Maria Santos, age 17
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gallery-grid">
|
|||
|
|
<div class="gallery-item">
|
|||
|
|
<img src="https://images.unsplash.com/photo-1543833081-44720235275d?w=800&auto=format&fit=crop&q=80" alt="Old wooden paddle from the river">
|
|||
|
|
<div class="gallery-caption">
|
|||
|
|
<h3>Heinrich’s Paddle</h3>
|
|||
|
|
<p>Carved by hand in 1952, this paddle still floats in the town museum.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gallery-item">
|
|||
|
|
<img src="https://images.unsplash.com/photo-1560179020-03e9052506c8?w=800&auto=format&fit=crop&q=80" alt="Maria’s river mural">
|
|||
|
|
<div class="gallery-caption">
|
|||
|
|
<h3>The River at Dawn</h3>
|
|||
|
|
<p>Painted by Maria Santos, this mural now hangs in the town hall.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gallery-item">
|
|||
|
|
<img src="https://images.unsplash.com/photo-1519225524837-7422d966521a?w=800&auto=format&fit=crop&q=80" alt="Young artist carving wood">
|
|||
|
|
<div class="gallery-caption">
|
|||
|
|
<h3>The Next Generation</h3>
|
|||
|
|
<p>Every year, we teach the children how to carve their own paddle.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="story-section">
|
|||
|
|
<h2>Join Us</h2>
|
|||
|
|
<p>This is more than a website. It’s an invitation. Come walk with us along the Comal. Come listen to the stories of the elders. Come watch the young artists paint their dreams onto the walls of our town.</p>
|
|||
|
|
|
|||
|
|
<p>Because when we hold hands, from the first boat to the latest canvas, we are stronger. And that is the true spirit of New Braunfels.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<p>“Every story begins with a single step. And every step begins with a hand that holds yours.”</p>
|
|||
|
|
<p>© 2026 Amy Coates | New Braunfels, Texas</p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|