Skip to content

Instantly share code, notes, and snippets.

@tzhbami7
Created Apr 1, 2019
Embed
What would you like to do?
Unsupported Browser Page
<html>
<body class="unsupported">
<div class="grid-tools FullSite">
<div class="container">
<div class="container-wrapper">
<div class="container-full-column">
<div class="unsupported-browser">
<h1>Please upgrade your browser in order to use DSSI</h1>
<p>We built DSSI using the latest technology which improves the look of the site, increases the speed of the site, and gives you a better experience with new features and functions. Unfortunately, your browser does not support these technologies.</p>
<h2>Please download one of these free and up-to-date browsers:</h2>
<ul>
<li><a href="https://www.mozilla.com/firefox/" target="_blank">Firefox</a></li>
<li><a href="https://www.google.com/chrome/browser/desktop/" target="_blank">Chrome</a></li>
<li><a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">Microsoft Edge</a></li>
<li><a href="https://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank">Internet Explorer</a></li>
</ul>
<hr>
<div class="unsupported-message">
<h3>I can't update my browser</h3>
<ul>
<li>Ask your system administrator to update your browser if you cannot install updates yourself.</li>
<li>If you can't change your browser because of compatibility issues, think about installing a second browser for utilization of this site and keep the old one for compatibility.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
body.unsupported {
background: #f2f2f3;
width: 100%;
}
.unsupported .container {
width: 100%;
min-width: 300px;
}
.unsupported-browser {
background: #fff;
margin: 35px auto;
width: 100%;
box-shadow: 0 0 5px #cacace;
position: relative;
padding: 20px 30px;
text-align: left;
}
.unsupported-browser h1 {
font-size: 2em;
font-weight: 0;
}
.unsupported-browser h2 {
border: 0;
}
.unsupported-browser li {
margin-bottom: 5px;
}
.unsupported-browser li a {
color: inherit;
}
.unsupported-browser li a:hover {
color: #007bc3;
}
.unsupported hr{
margin-top: 50px;
}
.unsupported-message {
font-size: 0.9em;
margin-top: 40px;
margin-bottom: 30px;
}
.unsupported-message li {
margin-bottom: 5px;
}
<link href="https://duel.directsupplycdn.com/v2016.09.27.164615/styles/duel.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment