Maintenance page

This bootstrap snippet called "Maintenance page" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: maintenance,page

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab



<div class="full-size layout-column layout-align-center-vertical bootstrap snippets">
	<div class="size-7 horizontal-align">
		<div class="panel panel-default">
			<div class="panel-body text-center">
				<div class="logo-box logo-box-primary padding-top-4">
					<div class="logo">
						<b>B</b>
					</div>
				</div>
				<h2>Under Maintenance</h2>
				<p>We will be down for a short time.<br>Please check back later.</p>
			</div>
		</div>	
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview



body {
    overflow: hidden;
    background: transparent url("http://bemat-admin.cerocreativo.cl/v1.0.1/dark/img/bgs/bg3.png") left 40%;
    background-size: cover;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
.layout-align-center-vertical {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    max-height: 100%;
}
.horizontal-align {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.width-7, .size-7 {
    width: 392px !important;
    margin-top:100px;
}
.height-7, .size-7 {
    height: 392px !important;
}
.logo-box-primary .logo {
    color: #fff;
    background-color: #009688 !important;
}
.logo-box, .logo-box .logo {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-align-content: center;
    align-content: center;
}
.logo-box .logo {
    width: 96px;
    height: 96px;
    font-size: 72px;
    font-weight: 500;
    color: #fff;
    background-color: #777e7d;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    align-content: center;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Feb 1st 2016, 21:24

Views: 497