Hello developers, today in this blog, you will learn how to create an Animated Coming Soon Page using HTML & CSS with modern UI.
A Coming Soon Page is a temporary landing page that’s announcing a new product or service provided by the company. The Coming Soon Page creates an expectation and excitement among the visitors and makes them return to the website as soon as it is ready. The Coming Soon Page may contain the company name and there will be the information that their product or service will be launched soon.
In this blog (Animated Coming Soon Page), as you see on the webpage, there is a card at the center of the webpage with the text that "we are coming soon" and the subscription button. When you hover over the text and the button, the background color of the text and the button changes to the linear gradient. The background of the webpage is made to be animated with the background color. That is the background color of the webpage changes for a particular time.
The source code of this Animated Coming Soon Page using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Animated Coming Soon Page code with your creativity and can take this form to the next level.
Animated Coming Soon Page using HTML & CSS with modern UI [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
:root {
--gradient: linear-gradient(90deg, #7f7fd5, #86a8e7, #f64f59);
}
* {
box-sizing: border-box;
}
body {
font-family: "Bungee", cursive;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin: 0;
font-size: 1.125em;
line-height: 1.6;
background: #7f7fd5;
background-size: 300%;
background-image: var(--gradient);
animation: bg-animation 5s infinite alternate;
}
@keyframes bg-animation {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
.container {
background: #12192c;
width: 70vw;
padding: 9rem;
box-shadow: 0 0 3rem rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.title {
margin: 1rem;
padding: 1rem;
text-align: center;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
font-size: 3rem;
color: #7f7fd5;
line-height: 0.8;
background-image: var(--gradient);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
background-size: 300%;
transition: background-position 1s;
}
.title:hover {
background-position: right;
}
.btn {
color: #fff;
font: inherit;
border: 0;
cursor: pointer;
padding: 0.5rem 1.25rem;
background: var(--gradient);
background-size: 300%;
background-position: left;
transition: background-position 350ms;
border-radius: 4px;
}
.btn:hover {
background-position: right;
}
.credit a{
text-decoration: none;
color: #fff;
}
.credit {
color:#7f7fd5;
margin-top: 10px;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Animated Coming Soon Page using HTML and CSS with modern UI, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team