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: #060a05; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; font-family: 'DM Sans', sans-serif; }
|
|
.card { background: #090e08; border: 1px solid #1a2518; 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, #4a5e2a, #7a9a3a, #4a5e2a); }
|
|
.header { text-align: center; margin-bottom: 2rem; }
|
|
.eyebrow { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: #7a9a3a; margin-bottom: 0.5rem; }
|
|
.title { font-family: 'Playfair Display', serif; font-size: 2rem; color: #e8ece0; line-height: 1.1; }
|
|
.title em { font-style: italic; color: #7a9a3a; }
|
|
.divider { width: 40px; height: 1px; background: #1a2518; margin: 1rem auto; }
|
|
.subtitle { font-size: 0.8rem; color: #3a4a30; 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: #0e1409; border: 1px solid #1a2518; border-radius: 10px; padding: 1.2rem; }
|
|
.date-label { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #e8ece0; margin-bottom: 0.4rem; }
|
|
.date-day { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7a9a3a; margin-bottom: 0.8rem; }
|
|
.slots { display: flex; flex-direction: column; gap: 0.3rem; }
|
|
.slot { font-size: 0.8rem; color: #5a7a4a; padding: 0.3rem 0.6rem; background: #111808; border-radius: 4px; border-left: 2px solid #2a3a20; }
|
|
.footer { text-align: center; border-top: 1px solid #111808; padding-top: 1.2rem; }
|
|
.footer p { font-size: 0.75rem; color: #2a3a20; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
|
|
.footer .cta { font-size: 0.8rem; color: #7a9a3a; 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>
|