Hello readers, In this particular post we will discuss how to create a coming soon HTML page. We will discuss all the things related to the development of this template. In the last post, we developed a Landing page in CSS. Today our topic is to create a coming soon HTML page.
Coming soon HTML page:
As you can see in the image we have created a coming soon HTML page. On this page, we show the content related to upcoming things. When a website is in construction mode then we show a simple template and an announcement like this. It is very useful to show upcoming things and grab the attention of the users.
This coming soon page has a lot of content and it is created using Html and CSS Let us discuss how to create it and the content involved in this template.
You might like it:
Content:
We have the header hero section of this page. It has a logo on the top left side of the page. Then on the right side, it has to contact us information like number, email, or any link related to the contact details. Below this, we have the main heading of “We are coming soon”. It is created using the h1 tag of Html. Then it has a description and it is created using the paragraph tag of HTML.
Social icons are also present and necessary to attract the audience to other platforms. By clicking on these social icons one can redirect to social media platforms. These social icons are created from external resources (font awesome). In the background, we have a beautiful image related to the category of the website or business. If you want to learn how to create this beautiful coming soon page using Html and CSS then you are in right place. Follow this tutorial along with us.
How to create a “coming soon HTML page”?
It is very easy to create this type of template using HTML and CSS language. But we will create it in some simple steps.
Download a code editor:
A code editor helps you to write the code effectively without facing any syntax errors.
Html source code:
It is a markup language and we have used this language to create the skeleton of this page. Now create a file of HTML in your code editor and save it using the .html extension at the end of the file name. Then copy this given code and use it for this project in your code editor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Comingsoon Template - FantacyDesigns</title> <link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/bd-coming-soon.css"> </head> <body class="min-vh-100 d-flex flex-column"> <header> <div class="container"> <nav class="navbar navbar-dark bg-transparenet"> <a class="navbar-brand" href="#"> <img src="assets/images/logo.svg" alt="logo"> </a> <span class="navbar-text ml-auto d-none d-sm-inline-block">92-333-000000 </span> <span class="navbar-text d-none d-sm-inline-block">fantacydesignss@gmail.com</span> </nav> </div> </header> <main class="my-auto"> <div class="container"> <h1 class="page-title">We're Coming Soon</h1> <p class="page-description">Lorem ipsum dolor sit amet consectetur adipisicing elit sed eiu sit amet consectetur </p> <p>Stay connected</p> <nav class="footer-social-links"> <a href="#!" class="social-link"><i class="mdi mdi-facebook-box"></i></a> <a href="#!" class="social-link"><i class="mdi mdi-twitter"></i></a> <a href="#!" class="social-link"><i class="mdi mdi-google"></i></a> <a href="#!" class="social-link"><i class="mdi mdi-slack"></i></a> <a href="#!" class="social-link"><i class="mdi mdi-skype"></i></a> </nav> </div> </main> </body> </html> |
CSS source code:
It is also a markup language; we have used it to design our page and make it responsive across all devices. The code of CSS is provided below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap'); body { font-family: 'Karla', sans-serif; background-image: url("../images/bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center; color: #ffffff; padding-bottom: 75px; } @media (min-width: 768px) { body { padding-bottom: 110px; } } .navbar-brand { margin-right: 0; } .navbar-brand img { height: 21px; } .navbar-dark { padding-top: 35px; padding-bottom: 35px; } .navbar-dark .navbar-text { color: #ffffff; opacity: 1; padding: 0 20px; border-right: 1px solid #ffffff; font-size: 18px; font-weight: bold; text-align: center; } .navbar-dark .navbar-text:last-child { border-right: 0; } @media (max-width: 767px) { .navbar-dark { padding-bottom: 0; } } .page-title { font-size: 80px; font-weight: 900; margin-bottom: 6px; font-family: 'Righteous', cursive; } @media (max-width: 767px) { .page-title { font-size: 35px; margin-bottom: 14px; } } .page-description { max-width: 465px; font-size: 18px; margin-bottom: 59px; } @media (max-width: 767px) { .page-description { font-size: 14px; } } p { font-size: 14px; margin-bottom: 21px; } .footer-social-links .social-link { display: inline-block; text-align: center; line-height: 40px; width: 40px; height: 40px; border-radius: 50%; background-color: #ffffff; color: #000000; margin-right: 16px; transition: all 0.3s ease-in-out; } .footer-social-links .social-link:last-child { margin-right: 0; } .footer-social-links .social-link:hover { text-decoration: none; background-color: #000000; color: #ffffff; } /*# sourceMappingURL=bd-coming-soon.css.map */ |
Download source code:
If you are facing any errors while using the above code then don’t worry. We have created a file of source code and in this file all the necessary code files are present. Just download the source code from the below button and open the zip file.
If you are still facing any errors related to this page then comment below.
Conclusion and task:
The above landing page template is created using Html and CSS. I have mentioned all the necessary tags and properties of HTML and CSS used for the development of the landing page. Now I am assigning you a task and you have to complete it for proper learning.
Task: Create a landing page with a hero section. The hero section consists of an image and some text in and tags. Then create a footer and use the icons of contacts in the footer. For contact, social media icons can be used and you can import them from fontawesome as well.
Thanks for reading this article.
Download Source CodeClick to Download
