mycelia-front-app
Version:
Visualisation de graph sociaux
93 lines (92 loc) • 4.38 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Deprecated browser</title>
<style type="text/css">
body, html {font-size: 13px;color: #333;background-color: #f8f8f8;font-family: sans-serif;text-align: center;line-height: 1.5;margin: 0;padding: 0;}
#co {width: 755px;margin: auto;text-align: left;position: relative;clear: both;}
@media only screen and (max-width: 800px) {
body #co {width: auto;margin-left: 10px;margin-right: 10px;min-width: 200px;padding-top: 0;}
body .logos, body .logos td, body .logos tr {display: block;width: auto;margin: 0;text-align: center;}
body .logos tbody {display: inline-block;}
body .logos td {width: 48%;display: inline-block;padding: 0;}
.advantages li div {margin-left: -36px;margin-top: 8px;}
body {position: relative;padding-bottom: 60px;}
}
a {color: #e25600;}
ul h3 {margin: 0;color: #333;}
.advantages {font-size: 13px;list-style: none;margin-left: 5px;padding-left: 0;}
.advantages li {margin-bottom: 1.5em;padding-left: 40px;color: #777;}
.advantages li h3 {font-size: 20px;line-height: 30px;}
h2, h3, a.l {font-family: 'Open Sans', sans-serif;font-weight: 300;}
.logos {width: 100%;border: none;}
.logos td {vertical-align: top;padding: 10px;border: none;background: none;width: 25%;}
.bf a {background-image: url('ff.png');}
.bi a {background-image: url('ie.png');}
.bo a {background-image: url('op.png');}
.bc a {background-image: url('ch.png');}
a.l {display: block;padding: 4px;padding-top: 110px;background-repeat: no-repeat;background-position: center top;text-decoration: none;text-align: center;}
a.l:hover {padding: 3px;padding-top: 109px;border: 1px dashed rgb(170, 170, 170);}
a.l .bro {white-space: nowrap;text-decoration: underline;font-size: 19px;}
a .vendor {color: #aaa;text-align: center;font-size: 10px;display: block;}
.whatnow {text-align: center;margin: 13px 25px;}
.noti {margin: 35px 0;border: 1px solid #777;box-shadow: 0 0 8px #888;background: #FFF4F4;}
</style>
</head>
<body>
<div id="co">
<div class="noti">
<h2 class="whatnow">
<b>Your browser is too old for this website. Please download one of these up-to-date, free and excellent browsers:</b>
</h2>
<table class="logos">
<tr>
<td class="b bf"><a class="l" href="https://www.mozilla.com/firefox/" target="_blank"
title="update to Firefox web browser"><span class="bro">Firefox</span><span class="vendor">Mozilla Foundation</span>
</a>
</td>
<td class="b bo"><a class="l" href="https://www.opera.com/" target="_blank" title="update to Opera web browser"><span
class="bro">Opera</span><span class="vendor">Opera Software</span>
</a>
</td>
<td class="b bc"><a class="l" href="https://www.google.com/chrome/browser/desktop/" target="_blank"
title="update to Chrome web browser"><span class="bro">Chrome</span><span class="vendor">Google</span>
</a>
</td>
<td class="b bi"><a class="l" href="https://www.microsoft.com/fr-FR/windows/microsoft-edge" target="_blank"
title="update to Edge web browser"><span class="bro">Edge</span><span class="vendor">Microsoft</span>
</a>
</td>
</tr>
</table>
<h2 class="whatnow">
For more <a href="#security">security</a>, <a href="#speed">speed</a>, <a href="#comfort">comfort</a> and <a href="#fun">fun</a>.</h2>
</div>
<div>
<h2>Why do I need an up-to-date browser?</h2>
<div id="advc">
<ul class="advantages">
<li class="security" id="security">
<h3>Security</h3>
<div>Newer browsers protect you better against viruses, scams and other threats. Outdated browsers have security holes which are fixed in updates.</div>
</li>
<li class="speed" id="speed">
<h3>Speed</h3>
<div>Every new browser generation improves speed</div>
</li>
<li class="compatibility" id="fun">
<h3>Compatibility & new Technology</h3>
<div>You can view sites that are using the latest technology</div>
</li>
<li class="comfort" id="comfort">
<h3>Comfort & better experience</h3>
<div>Have a more comfortable experience with new features, extensions and better customisability.</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>