CINXE.COM
Maintenance page
<html> <head> <meta charset="utf-8"/> <title>Maintenance page</title> <style> html { height: 100vh; font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 16px; } body { height: 100%; margin: 0; background-color: #ece9e6; } .wrapper { display: flex; justify-content: center; } .main { display: inline-flex; flex-direction: column; align-items: center; margin-top: 100px; } .logo { width: 300px; } .text { margin-top: 50px; position: relative; text-align: center; color: #333; } .line { display: flex; align-items: center; justify-content: center; } .text-centered { text-align: center; } .images { width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: absolute; left: 0; top: 0; bottom: 0; transform: translate(-100%, 0); } .image { width: 75px; height: 75px; } .small-image { width: 24px; height: 24px; margin-right: 10px; } .bottom-image { position: fixed; bottom: 0; left: 0; right: 0; opacity: 0.4; } .bottom-image > img { width: 100%; } .text-purple { color: #8178ff; font-size: 20px; text-transform: capitalize; } .text-bold { font-weight: 600; } </style> </head> <body> <div class="wrapper"> <div class="main"> <div class="logo"> <img src="./imgs/av-logo.svg"/> </div> <div class="text"> <p class="text-centered text-purple text-bold">IT Scheduled Maintenance</p> <p class="line"><span class="text-bold"></span> We are performing our scheduled maintenance this weekend. Access will not be available to this site during the following times: <span class="text-bold"></span> </p> <p class="line"><img class="small-image" src="imgs/maint_clock.svg"/><span class="text-bold">• US Customers (EST)</span> - Friday, November 22, 10:00 PM - Monday, November 25, 12:00 AM <span class="text-bold"></span> </p> <p class="line"><img class="small-image" src="imgs/maint_clock.svg"/><span class="text-bold">• Europe/Global Customers (GMT)</span> - Saturday, November 23, 02:00 AM - Monday, November 25, 4:00 AM <span class="text-bold"></span> </p> <!--<p class="line"><img class="small-image" src="imgs/maint_clock.svg"/><span class="text-bold">GMT: From</span> Saturday, February 17, 3:00 am <span class="text-bold">Till</span> Monday, February 19, 5:00 am</p> <p class="line"><img class="small-image" src="imgs/maint_clock.svg"/><span class="text-bold">HKT: From</span> Saturday, February 17, 10:00 am <span class="text-bold">Till</span> Monday, February 19, 12:00 pm</p>--> <p class="text-centered text-purple text-bold">We apologize for the inconvenience</p> <div class="images"> <img class="image" src="./imgs/av_icon3.svg"/> <img class="image" src="./imgs/av_icon2.svg"/> <img class="image" src="./imgs/av_icon1.svg"/> </div> </div> </div> <div class="bottom-image"><img src="./imgs/grid_03.png"/></div> </div> </body> </html>