Under Construction UI Template
Under Construction UI Template without any CSS framework(bootstrap).
Preview
HTML
CSS
JavaScript
Resources
<div class="main">
<div class="item">
<h1>UNDER CONSTRUCTION</h1>
<div class="coming-soon-box">
<h2>
Coming
Soon
</h2>
</div>
</div>
<div class="item">
<div class="icon-wrapper">
<div class="button"><div class="icon"> <i class="fab fa-facebook-f"></i> </div> </div>
<div class="button"> <div class="icon"> <i class="fab fa-twitter"></i></div> </div>
<div class="button"> <div class="icon"> <i class="fab fa-instagram"></i></div> </div>
<div class="button"> <div class="icon"> <i class="fab fa-youtube"></i></div> </div>
</div>
</div>
<div class="item">
<footer>
© 2022 by Your Site Name.
</footer>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');
html, body{ height: 100%;}
body { font-family: 'Sen', sans-serif;
background: linear-gradient(180deg,#2196f3 0%,#091554 100%);
margin: 0;
}
.main{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex-wrap: wrap;
padding: 0 20px;
text-align: center;
}
.item{
width: 100%;
}
h1{
font-size: 3em;
}
.icon-wrapper{ margin: 100px; display: flex; align-items: center; justify-content: center;}
.icon-wrapper .button{ background: #fff; height: 50px; width: 50px; text-align: center; border-radius: 50px; box-sizing: border-box; transition: all 500ms ease-out; line-height: 50px; cursor: pointer; margin-right: 10px; }
.icon-wrapper .button:hover{ background: #ddd;}
.icon-wrapper .icon{ height: 50px; width: 50px; text-align: center; border-radius: 100%; box-sizing: border-box; transition: all 500ms ease-out; line-height: 50px; cursor: pointer; margin-right: 10px; display:inline-block; }
.coming-soon-box{
animation: sway 2.4s infinite;
animation-timing-function: ease-in-out;
width: 200px;
background: #fff;
margin: 0;
padding: 10px;
border-radius: 10px;
margin: auto;
box-sizing: border-box;
}
.coming-soon-box h2 {
margin: 0;
padding:;
}
footer{
color: #ddd;
font-size: 0.85em;
}
@keyframes sway {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
FontAwesome = 5.15.4
Download Under Construction UI Template snippet code.
This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project.
You can modify the above editor code and see the live update. You can also download the modify code.
Feel free to play with Under Construction UI Template snippet code.
If you like it then don't forget to share this code with your friends.
Download Snippet
Free code snippet playground
Let's share the example by using HTML, CSS, JavaScript and Bootstrap.
Add New Snippet