Features Included:
Responsive Design:
- Works on mobile, tablet, and desktop
- Media queries for different screen sizes
Visual Elements:
- Gradient background
- Clean, centered layout
- Modern typography with Google Fonts (Poppins)
- Font Awesome icons for social media
Functional Components:
- Countdown timer to a specified launch date (Jan 1, 2024 - you can change this)
- Email subscription form with validation
- Success message on form submission
- Social media links
- Contact information
Animations:
- Fade-in effect for the entire page
- Optional typing animation for the heading
- Hover effects on buttons and icons
JavaScript:
- Countdown timer that updates every second
- Email validation
- Form submission handling
The code is ready to copy and paste into an HTML file and will work immediately with all the CDN links included. You can customize the launch date, colors, and text as needed.
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
padding: 40px 20px;
animation: fadeIn 1.5s ease-in-out;
}
/* Typography */
h1 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
}
.subheading {
font-size: 1.5rem;
margin-bottom: 40px;
font-weight: 300;
}
/* Countdown Timer */
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
flex-wrap: wrap;
}
.countdown-item {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 20px;
min-width: 100px;
backdrop-filter: blur(5px);
}
.countdown-number {
font-size: 2.5rem;
font-weight: 700;
display: block;
}
.countdown-label {
font-size: 0.9rem;
text-transform: uppercase;
opacity: 0.8;
}
/* Email Form */
.email-form {
margin: 40px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.email-input {
padding: 15px 20px;
border: none;
border-radius: 50px;
font-size: 1rem;
min-width: 300px;
outline: none;
transition: all 0.3s ease;
}
.email-input:focus {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.submit-btn {
padding: 15px 30px;
background: #fff;
color: #764ba2;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: #f0f0f0;
transform: translateY(-2px);
}
.form-message {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
display: none;
}
.success {
background: rgba(46, 213, 115, 0.2);
display: block;
}
.error {
background: rgba(255, 71, 87, 0.2);
display: block;
}
/* Social Icons */
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.social-icon {
color: #fff;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
opacity: 0.8;
}
/* Contact Info */
.contact-info {
margin-top: 30px;
font-size: 0.9rem;
opacity: 0.8;
}
.contact-link {
color: #fff;
text-decoration: none;
border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.contact-link:hover {
opacity: 1;
border-bottom-color: #fff;
}
/* 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.2rem;
}
.subheading {
font-size: 1.2rem;
}
.countdown-item {
min-width: 80px;
padding: 15px;
}
.countdown-number {
font-size: 2rem;
}
.email-input {
min-width: 100%;
}
.submit-btn {
width: 100%;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8rem;
}
.countdown {
gap: 10px;
}
.countdown-item {
min-width: 70px;
padding: 10px;
}
.countdown-number {
font-size: 1.5rem;
}
}
// Countdown Timer
function updateCountdown() {
const launchDate = new Date('2025-08-01T00:00:00').getTime();
const now = new Date().getTime();
const distance = launchDate - now;
// Time calculations
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display results
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
// If countdown is finished
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
}
}
// Initialize countdown
updateCountdown();
const countdownTimer = setInterval(updateCountdown, 1000);
// Email Form Submission
document.getElementById('subscriptionForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const formMessage = document.getElementById('formMessage');
// Simple email validation
if (!email || !email.includes('@') || !email.includes('.')) {
formMessage.textContent = 'Please enter a valid email address.';
formMessage.className = 'form-message error';
return;
}
// Simulate form submission
formMessage.textContent = 'Thank you! We\'ll notify you when we launch.';
formMessage.className = 'form-message success';
document.getElementById('email').value = '';
// In a real implementation, you would send the data to your server here
// For example using fetch() or XMLHttpRequest
});
// Typing Effect for Heading (optional)
function typeEffect(element, speed) {
const text = element.innerHTML;
element.innerHTML = '';
let i = 0;
function typing() {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(typing, speed);
}
}
typing();
}
// Apply typing effect if element exists
const typingElement = document.querySelector('.typing-effect');
if (typingElement) {
// Store original text
const originalText = typingElement.textContent;
// Reset and apply effect
typingElement.textContent = '';
setTimeout(() => {
typeEffect(typingElement, 100);
}, 1000);
}
إرسال تعليق
Thank you
Learning robo team