Created
August 21, 2013 17:00
-
-
Save jefffis/6297098 to your computer and use it in GitHub Desktop.
HTML with media queries for mobile devices
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>180 Days: A language learning challenge | Rosetta Stone</title> | |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <style type="text/css"> | |
| * { -webkit-text-size-adjust:none; } | |
| #ForceOutlook2010BrowserLink span { padding:0px; } | |
| img { display:block !important; margin:0 !important; padding:0 !important; border:0 !important; } | |
| /* Yahoo Funky Link Fix */ | |
| #main .yshortcuts { } | |
| #main .yshortcuts a span { } | |
| #footer .yshortcuts { } | |
| #footer .yshortcuts a span { } | |
| img:active { | |
| opacity: .75; | |
| position: relative; | |
| top: 1px; | |
| } | |
| #break { | |
| width: 700px; | |
| } | |
| #break2 { | |
| width: 610px; | |
| margin: -50px 0; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| #content td { | |
| padding: 50px 40px 50px 50px; | |
| } | |
| #content1 td { | |
| padding: 0 50px 30px; | |
| } | |
| #content1 .no-pad td, #content1 td.no-pad { | |
| padding: 0; | |
| } | |
| .color { | |
| background: #ffe300; | |
| } | |
| h1, h2, h3 { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| h1 { | |
| color: #313131; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 22px !important; | |
| font-weight: bold !important; | |
| line-height: 27px !important; | |
| } | |
| h1 span { | |
| font-weight: 300 !important; | |
| display: block !important; | |
| } | |
| h2 { | |
| color: #313131; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 18px !important; | |
| font-weight: 300 !important; | |
| line-height: 27px !important; | |
| } | |
| h3.for-yahoo { | |
| color: #313131; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 28px !important; | |
| font-weight: 300 !important; | |
| line-height: 27px !important; | |
| } | |
| b { | |
| font-weight: bold; | |
| } | |
| a { | |
| color: #2497ed; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| a:active { | |
| color: #0a568f; | |
| } | |
| #button a { | |
| color: white; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 22px; | |
| font-weight: 300; | |
| } | |
| #button a:hover { | |
| text-decoration: none; | |
| } | |
| #button img { | |
| display: inline !important; | |
| position: relative; | |
| top: 4px; | |
| } | |
| img#center { | |
| margin: 0 auto !important; | |
| } | |
| .center { | |
| text-align: center; | |
| } | |
| .line { | |
| height: 1px; | |
| background: #dddddd; | |
| width: 100px; | |
| } | |
| #footer, h6 { | |
| color: #979797; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 13px; | |
| } | |
| h6 { | |
| font-weight: 400; | |
| font-size: 11px; | |
| margin: 0; | |
| padding: 0 30px; | |
| } | |
| h6 span.floatr { | |
| float: right; | |
| display: inline; | |
| padding: 0; | |
| } | |
| #footer h5 { | |
| margin: 0; | |
| font-weight: 400; | |
| } | |
| #banner { | |
| width: 700px; | |
| height: 429px; | |
| position: relative; | |
| z-index: 1; | |
| color: #2497ed; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-size: 20px; | |
| font-weight: bold; | |
| } | |
| td.pad-left { | |
| padding-left: 20px; | |
| } | |
| /*h3.mobile { | |
| display: none; | |
| padding: 30px 30px 30px 10px !important; | |
| font-size: 22px !important; | |
| color: #313131; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-weight: 300 !important; | |
| line-height: 23px !important; | |
| }*/ | |
| #dont-show { | |
| display: none; | |
| } | |
| @media screen and (max-width:480px) { | |
| table[id="break"] { | |
| width: 100% !important; | |
| margin: 0 !important; | |
| } | |
| table[id="break2"] { | |
| width: 100% !important; | |
| -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.5), 0 0 25px rgba(0,0,0,0.25); | |
| -moz-box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.5), 0 0 25px rgba(0,0,0,0.25); | |
| box-shadow: 0 0 5px rgba(0,0,0,0.7), 0 0 15px rgba(0,0,0,0.5), 0 0 25px rgba(0,0,0,0.25); | |
| } | |
| td[class="hide"], table[class="hide"], table[class="no-pad hide"], h3[class="for-yahoo hide"] { | |
| display: none !important; | |
| margin:0 !important; padding:0 !important; border:0 !important; | |
| } | |
| h1[class="for-yahoo"] { | |
| font-size: 19px !important; | |
| line-height: 24px !important; | |
| } | |
| h2[class="for-yahoo"] { | |
| font-size: 14px !important; | |
| line-height: 21px !important; | |
| } | |
| h3[class="for-yahoo"] { | |
| font-size: 22px !important; | |
| color: #313131 !important; | |
| font-family: 'Helvetica Neue', Arial, sans-serif; | |
| font-weight: 300 !important; | |
| line-height: 23px !important; | |
| margin: 0 !important; | |
| padding: 0 10px !important; | |
| } | |
| td[id="mobile"] { | |
| display: block !important; | |
| } | |
| td[class="color"] { | |
| padding: 10px 20px 10px !important; | |
| } | |
| table[id="dont-show"] { | |
| display: block !important; | |
| } | |
| table[id="footer"] h5 { | |
| padding: 15px 30px 0 !important; | |
| } | |
| table[id="content"] td { | |
| padding: 25px !important; | |
| } | |
| table[id="content1"] td { | |
| padding: 25px 25px 5px !important; | |
| } | |
| img[id="banner"] { | |
| width: 100% !important; | |
| height: auto !important; | |
| } | |
| img[class="sm"] { | |
| height: 50px !important; | |
| width: 50px !important; | |
| margin: 0 auto !important; | |
| display: block !important; | |
| float: none !important; | |
| } | |
| table[id="button-wrap"] { | |
| width: 300px !important; | |
| margin: 0 auto !important; | |
| } | |
| table[id="content1"] .no-pad td, table[id="content1"] td.no-pad { | |
| padding: 0!important; | |
| } | |
| table[id="intro"] { | |
| width: 100% !important; | |
| } | |
| h6[class="for-yahoo"] span { | |
| float: none !important; | |
| display: inline-block !important; | |
| padding: 0 0 15px !important; | |
| } | |
| h6[class="for-yahoo"] span[class="hide"] { | |
| display: none !important; | |
| } | |
| h6[class="for-yahoo"] span[class="floatr"] { | |
| display: inline-block !important; | |
| } | |
| } | |
| </style> | |
| <!--[if gte mso 9]> | |
| <style> | |
| </style> | |
| <![endif]--> | |
| </head> | |
| <body marginwidth="0" marginheight="0" bgcolor="#e4e4e4" leftmargin="0" topmargin="0" offset="0"> | |
| <table width="100%" cellpadding="0" cellspacing="0" align="center" bgcolor="#e4e4e4"> | |
| <tr> | |
| <td align="center"> | |
| <!-- media query wrapper --> | |
| <table width="700" cellpadding="0" cellspacing="0" id="break"><tr><td align="center"> | |
| <table width="700" cellpadding="0" cellspacing="0" id="intro"> | |
| <tr> | |
| <td align="left"> | |
| <table width="100%" cellpadding="0" cellspacing="0" class="no-pad"><tr><td height="10"></td></tr></table> | |
| <h6 class="for-yahoo"> | |
| <span class="hide">Please add <a href="#">RosettaStone@communications.rosettastone.com</a> to your contacts.</span> | |
| <span class="floatr">Problem viewing images? <a href="#">online version</a></span> | |
| </h6> | |
| <table width="100%" cellpadding="0" cellspacing="0" class="no-pad hide"><tr><td height="20"></td></tr></table> | |
| </td> | |
| </tr> | |
| </table> | |
| <a href="http://rosettastone.com/"><img src="http://browserspring.com/rosetta/e/banner.jpg" alt="Rosetta Stone | 180 Days: A language learning challenge" id="banner" /></a> | |
| <!-- media query wrapper2 --> | |
| <table width="610" cellpadding="0" cellspacing="0" id="break2" bgcolor="#e4e4e4"> | |
| <tr> | |
| <td> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="content"> | |
| <tr> | |
| <td align="left"> | |
| <img src="http://browserspring.com/rosetta/e/question.gif" class="sm" align="left" height="85" width="85" /> | |
| <h1 class="for-yahoo">Could you learn a language in six months using Rosetta Stone® software? And, when it’s all said and done, lead a presentation in your new language?</h1> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> | |
| <tr> | |
| <td width="50" height="101" class="hide"></td> | |
| <td width="20" class="color hide" height="101"></td> | |
| <td class="color" height="101" align="left"> | |
| <h3 class="for-yahoo">That’s the basis for <b>180 Days</b>, our <b>language learning challenge</b>.</h3> | |
| </td> | |
| <td width="107" height="101" class="hide"> | |
| <img src="http://browserspring.com/rosetta/e/min-banner-right.gif" height="101" width="107" /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td width="50" height="52" class="hide"></td> | |
| <td width="20" class="hide" height="52"></td> | |
| <td height="52" class="hide"></td> | |
| <td width="107" height="52" class="hide"> | |
| <img src="http://browserspring.com/rosetta/e/min-banner-right2.gif" height="52" width="107" /> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="content1"> | |
| <tr> | |
| <td align="left"> | |
| <h2 class="for-yahoo"><b>Meet Nuno: our curious challenger from Portugal.</b> Nuno took a design gig in Sweden, without knowing any Swedish. Naturally, this makes things tough around the office. He can’t follow day-to-day conversations; he can’t communicate directly with clients; and he’s feeling more and more like an outsider each day.</h2> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <h2 class="for-yahoo"><b>Can Nuno learn Swedish with our method?</b> We decided to follow him along the way, so consumers could track his progress. Test-drive the product through Nuno’s eyes, and gain confidence without having to commit.</h2> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <h2 class="for-yahoo"><b>Think Nuno has what it takes?</b> Visit <a href="http://rosettastone.com/">180 Days Challenge</a> to follow his story. You’ll find videos, pictures and other real-time updates on Nuno’s experience. You can even ask Nuno questions by commenting on his <a href="http://rosettastone.com/">Facebook Page</a>.</h2> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td height="20" class="no-pad"></td></tr></table> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> | |
| <tr> | |
| <td> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="button-wrap"> | |
| <tr> | |
| <td width="155" class="hide"></td> | |
| <td id="button" width="300" height="75" align="center" style="background: #2497ed; text-align: center; line-height: 23px"> | |
| <a href="http://rosettastone.com/"> | |
| <span style="position: relative; top: -2px; left: -2px;">See how Nuno’s doing</span> | |
| <img src="http://browserspring.com/rosetta/e/arrow.gif" /> | |
| </a> | |
| </td> | |
| <td width="155" class="hide"></td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> | |
| <tr> | |
| <td class="center" align="left"> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> | |
| <tr> | |
| <td width="186" class="hide"></td> | |
| <td> | |
| <img src="http://browserspring.com/rosetta/e/hey-icon.gif" id="center" /> | |
| </td> | |
| <td width="187" class="hide"></td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td height="15" class="no-pad"></td></tr></table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> | |
| <tr> | |
| <td width="30"></td> | |
| <td align="center" claass="center"> | |
| <h1 class="for-yahoo">Think you could learn a language in 180 days?</h1> | |
| <h1 class="for-yahoo"><span>Try our <a href="http://rosettastone.com/">free demo</a> to see how it works.</span></h1> | |
| </td> | |
| <td width="30"></td> | |
| </tr> | |
| </table> | |
| <!--<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td height="20" class="no-pad"></td></tr></table>--> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> | |
| <tr> | |
| <td align="center"> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <table width="100" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td width="155" class="hide"></td> | |
| <td> | |
| <img src="http://browserspring.com/rosetta/e/line.gif" /> | |
| </td> | |
| <td width="155" class="hide"></td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="60" class="no-pad"></td></tr></table> | |
| </td> | |
| </tr> | |
| </table> | |
| <table width="100%" cellpadding="0" cellspacing="0" id="footer"> | |
| <tr> | |
| <td align="left"> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <h5>Your privacy is important to us. We will not share your personal information with third parties without your consent. <a href="">View Privacy Policy</a></h5> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <h5>© 2013 Rosetta Stone Ltd. All Rights Reserved.</h5> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <h5>135 West Market Street<br /> | |
| Harrisonburg, VA, 22801</h5> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="20" class="no-pad"></td></tr></table> | |
| <h5><a href="#">Unsubscribe</a> to future emails from Rosetta Stone.</h5> | |
| <table width="100%" cellpadding="0" cellspacing="0"><tr><td height="40" class="no-pad"></td></tr></table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <!-- /media query wrapper2 --> | |
| </td></tr></table> | |
| <!-- /media query wrapper --> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment