A Coming Soon page is essential when upgrading or launching a new website. Building or updating a website takes time, and working on it live may expose users to incomplete pages, which can leave a negative impression.
A better approach is to display a Coming Soon page while you work on the website in the background. Once your site is ready, simply replace the Coming Soon page with your live website.
I have created a fully responsive Coming Soon page with smooth animations in the background. Just copy the code below, save it as a .html file, and upload it to your server.
Code (HTML, CSS, Javascript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Coming Soon</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #1e3c72, #2a5298); /* Fallback background */
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
z-index: -1;
}
.container {
text-align: center;
max-width: 90%; /* Adjusted
for mobile */
padding: 20px;
background: rgba(130, 10, 15, 0.7); /* Semi-transparent overlay */
border-radius: 10px;
animation: fadeIn 2s ease-in-out;
z-index: 1;
}
h1 {
font-size: 2.5rem; /* Smaller
font for mobile */
margin-bottom: 20px;
animation: slideIn 1.5s ease-in-out;
}
p {
font-size: 1rem; /* Smaller
font for mobile */
margin-bottom: 30px;
animation: fadeIn 3s ease-in-out;
}
.subscribe-form {
display: flex;
flex-direction: column; /* Stack input
and button on mobile */
align-items: center;
animation: slideIn 2s ease-in-out;
}
.subscribe-form input {
padding: 10px;
border: none;
border-radius: 5px;
width: 100%; /* Full width
on mobile */
max-width: 300px; /* Limit width
on larger screens */
font-size: 1rem;
margin-bottom: 10px; /* Space
between input and button */
transition: transform 0.3s ease;
}
.subscribe-form input:focus {
transform: scale(1.05);
outline: none;
}
.subscribe-form button {
padding: 10px 20px;
border: none;
background: #ff6f61;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
width: 100%; /* Full width
on mobile */
max-width: 300px; /* Limit width
on larger screens */
transition: background 0.3s ease, transform 0.3s ease;
}
.subscribe-form button:hover {
background: #ff3b2f;
transform: scale(1.05);
}
.social-links {
margin-top: 20px;
animation: fadeIn 4s ease-in-out;
}
.social-link {
color: #fff;
text-decoration: none;
margin: 0 10px;
font-size: 0.9rem; /* Smaller
font for mobile */
transition: color 0.3s ease, transform 0.3s ease;
}
.social-link:hover {
color: #ff6f61;
transform: translateY(-5px);
}
/* Media Queries for Mobile
Responsiveness */
@media (max-width: 768px) {
h1 {
font-size: 2rem; /* Smaller
font for smaller screens */
}
p {
font-size: 0.9rem; /* Smaller
font for smaller screens */
}
.subscribe-form input,
.subscribe-form button {
max-width: 100%; /* Full width
on smaller screens */
}
.social-links {
flex-direction: column; /* Stack
social links vertically */
}
.social-link {
margin: 5px 0; /* Space between stacked links */
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<!--
Particle.js Container -->
<div id="particles-js"></div>
<div class="container">
<h1>Coming
Soon</h1>
<p>We're
building an exciting new platform to transform education. Stay tuned!</p>
<div class="social-links">
<a href="#" class="social-link">Facebook</a>
<a href="#" class="social-link">Twitter</a>
<a href="#" class="social-link">Instagram</a>
</div>
</div>
<!--
Particle.js Library -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// Particle.js
Configuration
particlesJS("particles-js", {
particles: {
number: {
value: 80, // Number of particles
density: {
enable: true,
value_area: 800,
},
},
color: {
value: "#ffffff", // Particle color
},
shape: {
type: "circle", // Particle shape
},
opacity: {
value: 0.7,
random: true,
anim: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 3,
random: true,
anim: {
enable: true,
speed: 2,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 3,
direction: "none",
random: true,
straight: false,
out_mode: "bounce",
bounce: true,
attract: {
enable: true,
rotateX: 600,
rotateY: 1200,
},
},
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "bubble",
},
onclick: {
enable: true,
mode: "push",
},
resize: true,
},
modes: {
bubble: {
distance: 200,
size: 6,
duration: 2,
opacity: 0.8,
speed: 3,
},
push: {
particles_nb: 4,
},
},
},
retina_detect: true,
});
// Handle form
submission
document.querySelector('.subscribe-form').addEventListener('submit', function (event) {
event.preventDefault();
const email = this.querySelector('input').value;
alert(`Thank you! We'll notify you at ${email} when we launch.`);
this.querySelector('input').value = ''; // Clear the input field
});
</script>
</body>
</html>
No comments:
Post a Comment