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.
Similar Code Snippets:
Full Screen Video Background with Text Overlay- Feedback Form With Star Rating in HTML
- Contact Us Page Design in HTML Code
- Simple Landing Page HTML CSS Code
- 3x3 Image Grid In HTML and CSS
- HTML Code For Discussion Forum
- Horizontal News Scroller HTML Code
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.