65 lines
3.6 KiB
HTML
65 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { background: #0a0505; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; font-family: 'DM Sans', sans-serif; }
|
|
.card { background: #110808; border: 1px solid #2a1010; border-radius: 16px; padding: 2.5rem; width: 520px; position: relative; overflow: hidden; }
|
|
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #8B1A1A, #C0392B, #8B1A1A); }
|
|
.header { text-align: center; margin-bottom: 2rem; }
|
|
.eyebrow { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: #C0392B; margin-bottom: 0.5rem; }
|
|
.title { font-family: 'Playfair Display', serif; font-size: 2rem; color: #f0ece4; line-height: 1.1; }
|
|
.title em { font-style: italic; color: #C0392B; }
|
|
.divider { width: 40px; height: 1px; background: #2a1010; margin: 1rem auto; }
|
|
.subtitle { font-size: 0.8rem; color: #5a3333; font-weight: 300; letter-spacing: 0.05em; }
|
|
.dates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
|
|
.date-block { background: #160a0a; border: 1px solid #2a1010; border-radius: 10px; padding: 1.2rem; }
|
|
.date-label { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #f0ece4; margin-bottom: 0.4rem; }
|
|
.date-day { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: #C0392B; margin-bottom: 0.8rem; }
|
|
.slots { display: flex; flex-direction: column; gap: 0.3rem; }
|
|
.slot { font-size: 0.8rem; color: #8a6060; padding: 0.3rem 0.6rem; background: #1e0e0e; border-radius: 4px; border-left: 2px solid #3a1a1a; }
|
|
.footer { text-align: center; border-top: 1px solid #1e0e0e; padding-top: 1.2rem; }
|
|
.footer p { font-size: 0.75rem; color: #4a2a2a; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
|
|
.footer .cta { font-size: 0.8rem; color: #C0392B; letter-spacing: 0.1em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="header">
|
|
<p class="eyebrow">grimm tatts</p>
|
|
<h1 class="title">Book Your<br><em>Appointment</em></h1>
|
|
<div class="divider"></div>
|
|
<p class="subtitle">available dates · march 2025</p>
|
|
</div>
|
|
<div class="dates-grid">
|
|
<div class="date-block">
|
|
<div class="date-label">03.21</div>
|
|
<div class="date-day">friday · all day</div>
|
|
<div class="slots"><div class="slot">12:00 pm</div><div class="slot">3:00 pm</div><div class="slot">6:00 pm</div></div>
|
|
</div>
|
|
<div class="date-block">
|
|
<div class="date-label">03.24</div>
|
|
<div class="date-day">monday · all day</div>
|
|
<div class="slots"><div class="slot">12:00 pm</div><div class="slot">3:00 pm</div><div class="slot">6:00 pm</div></div>
|
|
</div>
|
|
<div class="date-block">
|
|
<div class="date-label">03.26</div>
|
|
<div class="date-day">wednesday · all day</div>
|
|
<div class="slots"><div class="slot">12:00 pm</div><div class="slot">3:00 pm</div><div class="slot">6:00 pm</div></div>
|
|
</div>
|
|
<div class="date-block">
|
|
<div class="date-label">03.31</div>
|
|
<div class="date-day">monday · all day</div>
|
|
<div class="slots"><div class="slot">12:00 pm</div><div class="slot">3:00 pm</div><div class="slot">6:00 pm</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<p>dm to book or visit</p>
|
|
<p class="cta">grimmtatts.glossgenius.com</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|