352 lines
11 KiB
HTML
352 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Coming Soon - Online Pilates Classes</title>
|
|
<style>
|
|
/* Global Styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8f5f2;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Main Container */
|
|
.container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Background Elements */
|
|
.bg-shape {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.shape1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background-color: #e8d1c5;
|
|
top: -100px;
|
|
right: -100px;
|
|
}
|
|
|
|
.shape2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background-color: #c8d6ca;
|
|
bottom: -50px;
|
|
left: -80px;
|
|
}
|
|
|
|
.shape3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: #f2d0a9;
|
|
top: 50%;
|
|
right: 20%;
|
|
}
|
|
|
|
/* Content Styling */
|
|
.content {
|
|
text-align: center;
|
|
max-width: 800px;
|
|
padding: 2rem;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
backdrop-filter: blur(5px);
|
|
animation: fadeIn 1.5s ease-in-out;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 1rem;
|
|
color: #444;
|
|
font-weight: 200;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
h1 strong {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 2rem;
|
|
color: #666;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.details {
|
|
margin: 2rem 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* Countdown Timer */
|
|
.countdown {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 2rem 0;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.countdown-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.countdown-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.countdown-label {
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #666;
|
|
}
|
|
|
|
/* Email Form */
|
|
.email-form {
|
|
margin: 2rem 0;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.form-control {
|
|
display: flex;
|
|
border-radius: 50px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
input[type="email"] {
|
|
flex: 1;
|
|
padding: 1rem 1.5rem;
|
|
border: none;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
}
|
|
|
|
button {
|
|
padding: 1rem 1.5rem;
|
|
background-color: #6b9080;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #5a7a6d;
|
|
}
|
|
|
|
/* Social Links */
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.social-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.social-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #6b9080;
|
|
}
|
|
|
|
/* Silhouette Image */
|
|
.pilates-image {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 5%;
|
|
height: 70vh;
|
|
max-height: 600px;
|
|
opacity: 0.2;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.countdown {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.countdown-number {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.pilates-image {
|
|
height: 50vh;
|
|
right: 0;
|
|
}
|
|
|
|
.shape1, .shape2, .shape3 {
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.countdown {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.countdown-item {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.pilates-image {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Background Shapes -->
|
|
<div class="bg-shape shape1"></div>
|
|
<div class="bg-shape shape2"></div>
|
|
<div class="bg-shape shape3"></div>
|
|
|
|
<!-- Pilates Silhouette -->
|
|
<div class="pilates-image">
|
|
<svg viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M100,50 C120,50 140,70 140,90 C140,110 130,130 120,150 C110,170 100,190 100,210 C100,230 110,250 120,270 C130,290 140,310 140,330 C140,350 120,370 100,370 C80,370 60,350 60,330 C60,310 70,290 80,270 C90,250 100,230 100,210 C100,190 90,170 80,150 C70,130 60,110 60,90 C60,70 80,50 100,50 Z" fill="#6b9080" />
|
|
</svg>
|
|
</div>
|
|
|
|
Jeff Emmett, Mycopunk 🍄 ✌️, [2025-04-08 7:06 PM]
|
|
<div class="content">
|
|
<h1><strong>Pilates</strong> with Fadia</h1>
|
|
<p class="tagline">Online Pilates Classes Coming Soon</p>
|
|
|
|
<div class="details">
|
|
Join Fadia on a journey to strengthen your body, calm your mind, and find your balance. Fadia's online Pilates classes are designed for all levels, bringing the studio experience to your home.
|
|
</div>
|
|
|
|
<!-- Countdown timer removed as requested -->
|
|
|
|
<div class="email-form">
|
|
<form class="form-control">
|
|
<input type="email" placeholder="Enter your email for updates" required>
|
|
<button type="submit">Notify Me</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="social-links">
|
|
<a href="#" class="social-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M18.48 2H5.52A3.52 3.52 0 0 0 2 5.52v12.96A3.52 3.52 0 0 0 5.52 22h12.96A3.52 3.52 0 0 0 22 18.48V5.52A3.52 3.52 0 0 0 18.48 2zm1.06 16.48a1.06 1.06 0 0 1-1.06 1.06H5.52a1.06 1.06 0 0 1-1.06-1.06V5.52a1.06 1.06 0 0 1 1.06-1.06h12.96a1.06 1.06 0 0 1 1.06 1.06v12.96z"/>
|
|
<path d="M12 7.76A4.24 4.24 0 1 0 16.24 12 4.24 4.24 0 0 0 12 7.76zm0 7A2.76 2.76 0 1 1 14.76 12 2.77 2.77 0 0 1 12 14.76z"/>
|
|
<circle cx="16.5" cy="7.5" r="1"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="social-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M14 12.24A2 2 0 1 0 12 14.24 2 2 0 0 0 14 12.24z"/>
|
|
<path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2zm7 12.5a3.5 3.5 0 0 1-3.5 3.5h-7A3.5 3.5 0 0 1 5 14.5v-5A3.5 3.5 0 0 1 8.5 6h7A3.5 3.5 0 0 1 19 9.5z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="social-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M22,5.8a8.49,8.49,0,0,1-2.36.64,4.13,4.13,0,0,0,1.81-2.27,8.21,8.21,0,0,1-2.61,1,4.1,4.1,0,0,0-7,3.74A11.64,11.64,0,0,1,3.39,4.62a4.16,4.16,0,0,0-.55,2.07A4.09,4.09,0,0,0,4.66,10.1,4.05,4.05,0,0,1,2.8,9.59v.05a4.1,4.1,0,0,0,3.3,4A3.93,3.93,0,0,1,5,13.81a4.9,4.9,0,0,1-.77-.07,4.11,4.11,0,0,0,3.83,2.84A8.22,8.22,0,0,1,3,18.34a7.93,7.93,0,0,1-1-.06,11.57,11.57,0,0,0,6.29,1.85A11.59,11.59,0,0,0,20,8.45c0-.17,0-.35,0-.53A8.43,8.43,0,0,0,22,5.8Z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Countdown timer code removed as requested
|
|
|
|
// Handle form submission (prevent default for demo purposes)
|
|
document.querySelector('.email-form form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const email = this.querySelector('input[type="email"]').value;
|
|
alert("Thank you! " + email + " has been added to our notification list.");
|
|
this.reset();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|