In this post, I explained how to use HTML and CSS to create an eye-catching Coming Soon page design. You may develop a Coming Soon page that will generate excitement and anticipation for your future launch by following the steps indicated in this article. You may also use the included source code to develop your own custom Coming Soon page designs and experiment with different colors, fonts, and styles to give your site a distinctive appearance.
A Coming Soon page is an excellent method for creating suspense and interest in your upcoming website or product launch. In this tutorial, I’ll look at how to use HTML and CSS to build an eye-catching Coming Soon page design. A subscription form and a call-to-action button are included in the design. The design is entirely responsive and may be tailored to your specific needs.
Designing the Coming Soon Page:
We will begin by developing the layout for an eye-catching Coming Soon page design. The framework of the Coming Soon page will be built with HTML, and the styling will be done with CSS. We will also incorporate a responsive design to guarantee that the page appears well on all screen screens.
Adding the Subscription Form:
We will add a subscribe form to the Coming Soon page to increase interest and leads. The form will be created in HTML and styled with CSS.
Adding the Call-to-Action Button:
A call-to-action (CTA) button is an excellent approach to entice visitors to act and learn more about your impending launch. I’ll construct the CTA button with HTML and CSS and teach you how to personalise it to match your logo.
Making the Design Responsive:
Finally, we will make the Coming Soon page design fully responsive. We will use media queries to adjust the styles of the page for different screen sizes. We will also show how to test the design on different devices and ensure that it looks great on all of them.
Source Code For Coming Soon Page Design using HTML and CSS:
You have to create two files, one is html file and other is css file. You can download the images which i used in these cards from last section of this blog.
First: Create an HTML file name as index.html with the extension .html in the root folder.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coming Soon Page Design | Hassanrao.com</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<section class="left">
<div class="inner">
<img src="images/logo.png" alt="logo" class="logo" />
<img src="images/hero-mobile.jpg" alt="hero-mobile" class="mobile-hero">
<h1><span>We're</span> coming soon</h1>
<p>
Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our
launch deals.
</p>
<form>
<input type="email" name="email" placeholder="Email Address" />
<button>Submit</button>
</form>
</div>
</section>
<section class="right desktop-hero"></section>
</main>
</body>
</html>
Second: Create a CSS name as a style.css file with the extension .css
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
}
/* main style */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.left {
width: 60%;
}
/* right */
.desktop-hero {
background: url("./images/hero-desktop.jpg") center no-repeat;
background-size: cover;
width: 40%;
height: 100vh;
}
/* left inner styles */
.inner {
width: 70%;
margin: 0 auto;
}
.logo {
width: 200px;
}
.mobile-hero {
display: none;
}
h1 {
font-size: 4.5rem;
text-transform: uppercase;
letter-spacing: 5px;
color: #222222;
margin-bottom: 0;
}
h1 span {
font-weight: 300;
color: #0077ff;
}
p {
line-height: 1.8;
color: #0077ff;
}
form {
position: relative;
}
input {
width: 100%;
padding: 1rem 1.5rem;
outline: none;
border: 2px solid #777777;
border-radius: 2px;
font-size: .9rem;
}
input::placeholder {
color: #555555;
}
button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: .5rem 2rem;
border-radius: 2px;
border: 2px solid #0077ff;
background: #0077ff;
color: #fff;
font-size: 18px;
cursor: pointer;
}
@media screen and (max-width:900px) {
.container {
height: auto;
margin: auto;
}
.left {
width: 100%;
}
.inner {
width: 100%;
margin: auto;
}
h1 {
font-size: 3.5rem;
text-align: center;
}
p, form {
margin: 20px 40px;
text-align: center;
}
.logo {
margin: 20px;
text-align: left;
}
.desktop-hero {
display: none;
}
.mobile-hero {
display: block;
width: 100%;
}
}
Image Download
That’s All; We have successfully created a good and attractive-looking Coming soon page design with simple HTML and CSS. I am a Website Developer. I build Simple Projects Using HTML CSS JS and PHP to help beginners for a quick start. Please Support!
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)