127 lines
4.1 KiB
HTML
127 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Carmelina Rubio | Housekeeping with Heart</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--gold: #d4af37;
|
||
|
|
--midnight: #0a0a1a;
|
||
|
|
--teal: #4ecdc4;
|
||
|
|
--mist: #f0f0f0;
|
||
|
|
--accent: #4ade80;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
background: linear-gradient(135deg, var(--midnight), #16213e);
|
||
|
|
color: var(--mist);
|
||
|
|
line-height: 1.6;
|
||
|
|
margin: 0;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 20px;
|
||
|
|
background: rgba(255, 255, 255, 0.05);
|
||
|
|
border-radius: 15px;
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 3em;
|
||
|
|
color: var(--gold);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
.welcome {
|
||
|
|
font-size: 1.3em;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
color: var(--teal);
|
||
|
|
}
|
||
|
|
.story {
|
||
|
|
background: rgba(78, 205, 196, 0.1);
|
||
|
|
padding: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
border-left: 4px solid var(--teal);
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
.story:hover {
|
||
|
|
transform: scale(1.02);
|
||
|
|
}
|
||
|
|
.story h2 {
|
||
|
|
color: var(--gold);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.story p {
|
||
|
|
color: #ddd;
|
||
|
|
}
|
||
|
|
.story.tool-story {
|
||
|
|
border-left-color: var(--accent);
|
||
|
|
background: rgba(74, 222, 128, 0.1);
|
||
|
|
}
|
||
|
|
.story.tool-story h2 {
|
||
|
|
color: var(--accent);
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: var(--teal);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
color: var(--gold);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.golden-seam {
|
||
|
|
border-left: 6px solid var(--gold);
|
||
|
|
background: linear-gradient(180deg, rgba(212, 175, 55, 0.1), transparent);
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 40px;
|
||
|
|
font-size: 0.9em;
|
||
|
|
color: #aaa;
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
h1 {
|
||
|
|
font-size: 2.5em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Carmelina Rubio</h1>
|
||
|
|
<div class="welcome">
|
||
|
|
<p>¡Hola, neighbors! Welcome to my corner of the galaxy. Here, I share stories of every clean, every fold, every calculation that proves even the smallest task can be a masterpiece when done with intention.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story">
|
||
|
|
<h2><a href="first-clean.html">The First Clean</a></h2>
|
||
|
|
<p>My very first morning on the Seaside boardwalk, learning that every mop stroke and folded towel is a lesson in <em>con amor</em>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story">
|
||
|
|
<h2><a href="perfect-fold.html">The Perfect Fold</a></h2>
|
||
|
|
<p>How Doña Rosa taught me that every crease tells a story, and how a perfectly folded towel can make someone feel like royalty.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story golden-seam">
|
||
|
|
<h2><a href="golden-seam.html">The Golden Seam</a></h2>
|
||
|
|
<p>Where I did not sweep the shavings, but poured the vein. Mi primer desliz: el comino que se derramó al filo de la medianoche.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="story tool-story">
|
||
|
|
<h2><a href="surfactant-calculator.html">Critical Micelle Concentration Calculator</a></h2>
|
||
|
|
<p>No metaphors. Just math. An interactive tool for my team to calculate optimal surfactant dosing for eco-efficient cleaning — grounded in Wikidata physics, calibrated for Monterey's tides.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
Made with love in Monterey County | 🌊✨
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|