Easy Steps In Building A Coming Soon Page Using, HTML, and CSS.
I guess you’re kind of wondering how this was done using, HTML and CSS right, well it’s very easy because all you need to do first is to create a folder on your desktop, and name it with any name of your choice. And open it with your text editor, and create a HTML file and a CSS file, then you do a linking, that is you link your CSS to your HTML.
So, this is it.
So, now I want to write my content, all in need to do is… write it inside the <body> content</body>.
So here is it, where I have my section inside the body that contains my contents and everything.
So, I had a div — which is a container where I gave it a class and a name for me to be able to style it in my CSS file.
And added my image which served as my logo.
And added my < p>tag where my paragraph content is.
And added my <a> — achor tag where I linked my explore offer.
And lastly icons which has… Facebook, Twitter and Instagram. And that was done using fonts awesome. Yeah it was linked to my HTML file too.
So this is what I have for my HTML. So let’s move over to our CSS, where the styling is done.
So this is what we have, first we remove the margin and padding for our content to look nice.
So here I if you look at the section#landing… you see where my background is added, I had my linear gradient and my image. So the linear gradient is a mixture of two colors, either you make is bright or you make is dark. So mine I made it dark a little bit to give it a nice look.
And then my section# > div.content-landing, where I gave it a box shadow.
Looking nice right, so let’s work on our logo.
So this is it.
And now we move over to our explore offers and our icons.
So this is for our explore offers, where we gave it a name in our HTML which is… btn to style it in our CSS, and our media that contains our Icons.
So this is actually how it looks like for the explore offers.
So this for the media…which is the icon.
And we are done here.
But we still have the @media query, so that it can fit into any device when logged in with.
For small device. This is how it will looks like.
So finally we have this.
So thanks to you all who took your time to go through this article, I guess it was really helpful. So stay tuned for more😉.
