Skip to content

Instantly share code, notes, and snippets.

@davidjenner

davidjenner/coming-soon-page.markdown

Created February 8, 2025 19:21
Show Gist options
  • Save davidjenner/e67511dccd0a3ba05a5af2fed5880e44 to your computer and use it in GitHub Desktop.
Save davidjenner/e67511dccd0a3ba05a5af2fed5880e44 to your computer and use it in GitHub Desktop.
Download ZIP
Coming Soon Page
Raw
coming-soon-page.markdown
Raw
index.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 - Soon X</title>
<!-- Google Font -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap');
</style>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom Styles -->
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
</head>
<body class="bg-white">
<!-- Navbar -->
<nav class="flex justify-between items-center py-6 px-10">
<div class="text-2xl font-bold flex items-center">
<img src="logo.png" alt="Logo" class="h-8 mr-2"> Soon
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 hover:text-black">Home</a>
<a href="#" class="text-gray-600 hover:text-black">Pages</a>
</div>
</nav>
<!-- Hero Section -->
<section class="flex flex-col-reverse md:flex-row items-center px-10 md:px-20 py-16">
<div class="md:w-1/2 text-center md:text-left">
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight text-gray-900">
Our new app <br> is coming soon...
</h1>
<p class="text-gray-500 mt-4 text-lg">
Interested in trying out our new mobile app for iPhone or Android as soon as it comes out? Subscribe to our email newsletter below to receive an update as soon as we launch.
</p>
<!-- Subscribe Form -->
<div class="relative mt-6 w-full md:w-3/4">
<input type="email" placeholder="Your email address" class="w-full py-4 px-6 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-400">
<button class="absolute inset-y-0 right-0 px-6 bg-red-500 text-white rounded-lg text-sm font-semibold shadow-lg hover:bg-red-600 transition flex items-center justify-center">
Subscribe
</button>
</div>
</div>
<!-- App Mockup -->
<div class="md:w-1/2 flex justify-center">
<img src="https://www.builder.ai/images/directory-app-home-screen.png" alt="App Mockup" class="w-3/4">
</div>
</section>
<!-- Features Section -->
<section class="px-10 md:px-20 py-16 bg-white flex flex-col items-center text-center">
<h2 class="text-4xl font-extrabold text-gray-900 mb-6">App Features</h2>
<p class="text-gray-500 max-w-2xl">Explore the cutting-edge features that make our app stand out.</p>
<div class="grid md:grid-cols-3 gap-8 mt-10 w-full max-w-6xl">
<div class="p-6 border-2 border-red-500 shadow-md rounded-lg">
<h3 class="text-xl font-semibold">User-Friendly Interface</h3>
<p class="text-gray-700 mt-2">Experience seamless navigation and intuitive design.</p>
</div>
<div class="p-6 border-2 border-blue-500 shadow-md rounded-lg">
<h3 class="text-xl font-semibold">Real-Time Notifications</h3>
<p class="text-gray-700 mt-2">Stay updated with instant alerts and messages.</p>
</div>
<div class="p-6 border-2 border-green-500 shadow-md rounded-lg">
<h3 class="text-xl font-semibold">Secure Payments</h3>
<p class="text-gray-700 mt-2">Make transactions safely with end-to-end encryption.</p>
</div>
<div class="p-6 border-2 border-yellow-500 shadow-md rounded-lg">
<h3 class="text-xl font-semibold">Cloud Sync</h3>
<p class="text-gray-700 mt-2">Access your data from anywhere seamlessly.</p>
</div>
<div class="p-6 border-2 border-purple-500 shadow-md rounded-lg">
<h3 class="text-xl font-semibold">AI Assistance</h3>
<p class="text-gray-700 mt-2">Get smart recommendations based on your usage.</p>
</div>
<div class="p-6 border-2 border-pink-500 shadow-md rounded-lg">
<h3 class="text-xl font-semibold">Dark Mode</h3>
<p class="text-gray-700 mt-2">Enjoy a comfortable viewing experience at night.</p>
</div>
</div>
</section>
<!-- Second Subscribe Section -->
<section class="flex flex-col items-center text-center px-10 md:px-20 py-16">
<h2 class="text-4xl font-extrabold text-gray-900 mb-6">Stay Updated</h2>
<p class="text-gray-500 max-w-2xl">Sign up now to be the first to know about our launch and exclusive updates.</p>
<div class="relative mt-6 w-full md:w-1/2">
<input type="email" placeholder="Your email address" class="w-full py-4 px-6 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-400">
<button class="absolute inset-y-0 right-0 px-6 bg-red-500 text-white rounded-lg text-sm font-semibold shadow-lg hover:bg-red-600 transition flex items-center justify-center">
Subscribe
</button>
</div>
</section>
<!-- Social Media -->
<div class="flex justify-center items-center space-x-4 mt-10">
<a href="#"><img src="facebook.png" class="h-8"></a>
<a href="#"><img src="twitter.png" class="h-8"></a>
<a href="#"><img src="instagram.png" class="h-8"></a>
<a href="#"><img src="linkedin.png" class="h-8"></a>
<a href="#"><img src="youtube.png" class="h-8"></a>
<a href="#"><img src="whatsapp.png" class="h-8"></a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment