Coming soon page HTML free template

Comming Soon Page

Hello, today we will learn how to build a coming soon page using HTML and CSS. This coming soon template is for the website. In the last post, we created a contact form for Responsive web design. Lets, ‘s start building a coming soon page in HTML and CSS.

Coming soon page:

Comming Soon Page

As you can see in the image we have created a coming soon page in HTML and CSS. It has content that shows that website is not active yet. It needs some time to get ready. When a website is in construction mode then we create this page. Then we place it on the front page. Users get the idea that the website is not ready to serve the services to the users. For the development of this page, we have used Html and CSS languages. Let’s take a look that why we have used Html and CSS.

Html:

It is a markup language and we have used it in our project. We have used it to create the skeleton and basic structure of this page. Heading and text are added using Html tags. Then notify button is also created using the button tag of HTML. So, we have covered the basic functions of this page inside this HTML code. For designing this page lets, use CSS.

CSS:

It is a markup language and it is used to style this coming soon page. As you can see in the image we have designed this page beautifully. For designing this page we have taken the help of CSS properties. We have divided the page into two sections. On the left side, we have added a dark background and it can change with the color of the website. In the left portion, we have the written content of the page. We have a heading and a paragraph which is created in HTML but designed in CSS.

Below this, we have an email newsletter. This email newsletter is used to subscribe to the website’s upcoming events and posts. If users will submit their email in this section then they will get a notification every time when new content will be uploaded. If you want to learn how to create an email newsletter then click here.

On the right side, we have the section on images or video. For image, we will use an image tag and for video, we will use a video tag to import images or videos into the code.

Social icons:

Then above this video, we have used the social icons. Social icons have a link to social media platforms. These icons are imported from a font awesome website. It provides us with a code of lines and then it converts these code lines into icons. Links are also attached to these icons. The hover effect can also be applied to these icons.

You might like it:

How to create a coming soon page?

If you want to learn how to create it then follow the below steps. We will show you how to create this type of template for free.

Download a code editor for the Coming soon page:

A code editor provides an environment for the developers to write the code without syntax errors. It also has a lot of code recommendations. There are a lot of Code editors but we will use vs code for this project.

Html source code:

Create an HTML file and save this file using the extension of .html at the end of the file name. Then use this Html code which is given below for this page.

CSS source code:

Again open your code editor and create a new file. Save this new file using the .css extension at the end of the file name. Copy this code and paste it into a CSS file, then connect these files with each other to use the properties of CSS in HTML.

Download source code:

If you are unable to use the above code or facing some error in the above code. The source code files are given below and you can download the file from the below button. All the necessary files of HTML and CSS are present in this file with pictures and icons files.

Task:

As you have seen the landing page above and the detail related to it. Now it’s time to add some extra features to this landing page. This landing page has social icons and images on the right side and a search bar along with headings is present on the left side. You have to flip their positions and change their positions. Also, change the color of social media icons using Hexa color format.

If you have any type of question-related to this particular post then comment below and ask your problems in the comment section.

Thanks for reading this article.

Download Source CodeClick to Download
Latest Post
Categories
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x