Under Construction UI Template

Submit By webmaster 5 months ago in html category
Tags: htmltheme
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:[email protected];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.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet