updated the noIE lightbox

This commit is contained in:
Bashar Jabbour 2014-10-07 14:47:06 -04:00
parent cad8af2c1f
commit e405cc5a5d
3 changed files with 85 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

View file

@ -1851,6 +1851,80 @@ float: left;
column-count: 2; column-count: 2;
} }
#noIE{
border-radius: 2px;
}
#noIE p {
text-align: center;
font-family: din-regular;
font-size: 18px;
line-height: 18px;
color: #424242;
padding: 0px;
width: 400px;
left:195px;
position: absolute;
}
#noIEsubheading{
top: 144px;
}
#noIEbody {
top:416px;
}
#noIEbody a {
color: #c04f4f;
text-decoration: underline;
}
#noIE h3 {
text-align: center;
text-transform: uppercase;
padding: 0px;
margin: 0px;
}
#chromeIcon, #fireFoxIcon, #safariIcon {
position: relative;
height: 105px;
width: 105px;
display: inline-block;
margin: 110px 32px 0px 32px;
font-family: din-medium;
font-size: 24px;
line-height: 24px;
text-align: center;
text-transform: uppercase;
padding: 115px 0px 0px 0px;
opacity: 0.7;
}
#chromeIcon {
background: url(/assets/browser_icons.png) no-repeat;
}
#fireFoxIcon {
background: url(/assets/browser_icons.png) no-repeat -105px 0;
}
#safariIcon {
background: url(/assets/browser_icons.png) no-repeat -220px 0;
}
#chromeIcon:hover{
opacity: 1;
}
#fireFoxIcon:hover{
opacity: 1;
}
#safariIcon:hover{
opacity: 1;
}
/* invite */ /* invite */
.joinCodes { .joinCodes {

View file

@ -147,6 +147,17 @@
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> </div>
<div class="lightboxContent" id="noIE">
<h3>OOPS! <br> YOUR BROWSER IS NOT SUPPORTED.</h3>
<p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
<div id="chromeIcon"><a href="https://www.google.com/chrome/browser/">Chrome</a></div>
<div id="fireFoxIcon"><a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></div>
<div id="safariIcon"><a href="http://support.apple.com/downloads/#safari">Safari</a></div>
<p id="noIEbody">While it's downloading, explore our <a href="http://blog.metamaps.cc/">blog</a>,<br> watch the <a href="http://vimeo.com/88334167">tutorials</a>, or visit our <a href="http://support.metamaps.cc/">knowledge base</a>!
</div>
<div class="lightboxContent" id="getInvolved"> <div class="lightboxContent" id="getInvolved">
<h3>GET INVOLVED!</h3> <h3>GET INVOLVED!</h3>
<div class="leaveSpace"></div> <div class="leaveSpace"></div>