319 lines
8.7 KiB
HTML
319 lines
8.7 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>
|
|
|
|
<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 flow. Pilates with Fadia is a relaxed studio movement experience, right in your home.
|
|
</div>
|
|
|
|
<div class="social-links">
|
|
<a href="https://www.instagram.com/fadia.elgharib/" 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>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|