Offline Page HTML Template

Offline Page HTML Template
Code Snippet:Offline page
Author: Serhan Adalıoğlu
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 861
License: MIT
Edit Code online: View on CodePen
Read More

This HTML template helps you to create a simple offline page to show when a user’s internet connection is down. It comes with a message and a retry button to connect to the internet.

This code is helpful for anyone who wants to create a simple offline page for their website. An offline page can help to improve the user experience by providing a helpful message and a way for the user to retry connecting to the internet. Basically, this code snippet is a design template only. You need to attach additional functionality to make it fully functional.

How to Create an Offline Page Template in HTML

1. First, copy the following HTML code and paste it into the desired location in your project. This code establishes the basic structure of the offline page, including the “OFFLINE” heading, a helpful message, and a retry button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Offline Page</title>
</head>
<body>
  <div class="wrapper">
    <h1>OFFLINE</h1>
    <h4>Please check your internet connection</h4>

    <a href="." class="button">RETRY</a>
  </div>
</body>
</html>

2. Similarly, copy the following CSS code and paste it into your project’s stylesheet or within a <style> tag in the HTML file. This CSS code is responsible for styling the offline page, ensuring a centered layout, stylish typography, and an attractive color scheme.

body {
    width: 100%;
    min-height: 100vh;
    display: relative;
    margin: 0;
    padding: 0;
    background: -webkit-linear-gradient(-45deg, #183850 0, #183850 25%, #192C46 50%, #22254C 75%, #22254C 100%) !important;
  }
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    align-items: center;
    justify-content: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
   line-height: 4;
  }
  h1 {
    color: white;
    font-family: arial;
    font-weight: bold;
    font-size: 50px;
    letter-spacing: 5px;
    line-height: 1rem;
    text-shadow: 0 0 3px white;
  }
  h4 {
    color: #f1f1f1;
    font-family: arial;
    font-weight: 300;
    font-size: 16px;
  }
  .button {
    display: block;
    margin: 20px 0 0;
    padding: 15px 30px;
    background: #22254C;
    color: white;
    font-family: arial;
    letter-spacing: 5px;
    border-radius: .4rem;
    text-decoration: none;
    box-shadow: 0 0 15px #22254C;
  }

That’s all! hopefully, you have successfully created an Offline Page using this template. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X