Last active
February 28, 2017 19:39
-
-
Save imrizzy/7fe974e7a7df5f9d61ef6eb02ca0ee8b to your computer and use it in GitHub Desktop.
WMG VDay
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> | |
<head> | |
<title>final-index</title> | |
<style type="text/css"> | |
/*----- START Standardization CSS -----*/ | |
table { | |
border-collapse: collapse; | |
font-family: Verdana, Geneva, sans-serif; | |
} | |
table.wrapper-1 table.fullwidth-1 { | |
margin: 0 auto; | |
} | |
table.wrapper-1 table.fullwidth-1 table.fullwidth-2 img#logo { | |
width: 600px; | |
height: auto; | |
display: block; | |
} | |
table.fullwidth-1 table.fullwidth-2 table.body table.heroimg img#treatyourself { | |
display: block; | |
width: 580px; | |
} | |
table.music-1,table.music-2,table.music-3,table.item-1,table.item-2,table.item-3,table.acc-1,table.acc-2,table.acc-3 { | |
text-align: center; | |
} | |
a.shop-btn { | |
font-family:Verdana, Geneva, sans-serif; | |
color: #006699; | |
font-size: 16px; | |
font-weight: bold; | |
text-decoration: none; | |
text-transform: uppercase; | |
} | |
td.art-name { | |
font-size: 18px; | |
line-height: 19px; | |
padding-bottom: 5px; | |
} | |
td.alb-name, td.item-name { | |
font-size: 15px; | |
line-height: 19px; | |
padding-bottom: 10px; | |
} | |
td.img-alb, td.art-name { | |
font-family: Verdana, Geneva, sans-serif; | |
} | |
table.footer a.footer-links { | |
text-transform: uppercase; | |
text-decoration: none; | |
color: black; | |
} | |
table.footer { | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 10px; | |
font-weight: bold; | |
} | |
table.music, table.apparel, table.accessories, table.other-cat { | |
width: 580px; | |
} | |
td.expand { | |
width: 33%; | |
padding-bottom: 40px; | |
} | |
/*----- END Standardization CSS -----*/ | |
/*----- START Mobile Responsive Navigation -----*/ | |
@media screen and (max-width: 620px) { | |
td.expand { | |
display: block; | |
width: 100%; | |
} | |
table.wrapper-1, table.fullwidth-1, table.fullwidth-2, table.body, table.music, table.apparel, table.accessories, table.other-cat { | |
width: 100%; | |
} | |
img#logo { | |
width: 100% !important; | |
} | |
img#treatyourself { | |
width: 100%; | |
height: auto; | |
} | |
img.banner-music, img.banner-apparel, img.banner-accessories, img.other-cat-1, img.other-cat-2 { | |
width: 100%; | |
height: auto; | |
} | |
img.alb, img.item { | |
width: 100%; | |
height: auto; | |
} | |
table.shop-btn-table { | |
width: 100%; | |
} | |
} | |
/*----- END Mobile Responsive Navigation -----*/ | |
</style> | |
</head> | |
<body> | |
<table class="wrapper-1" width="100%" > | |
<tr> | |
<td> | |
<table class="fullwidth-1" width="auto" style="table-layout: fixed;"> | |
<tr> | |
<td> | |
<table class="fullwidth-2"> | |
<tr> | |
<td> | |
<img id="logo" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/101515_WMG_Email_640.jpg" alt="Warner Music Store Logo"> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<table class="body" align="center" style="table-layout: fixed;"> | |
<tr> | |
<td> | |
<table class="heroimg" width="auto"> | |
<tr> | |
<td> | |
<a href="#"> | |
<img id="treatyourself" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/WMG-Vday-600x400+main.jpg" width="580px" height="386px" alt="Shop in the Name of Love"> | |
</a> | |
</td> | |
</tr> | |
</table> | |
<hr width="85%"> | |
<table class="music" width="auto" style="table-layout: fixed;"> | |
<tr> | |
<td style="padding-bottom: 15px;"> | |
<a href="#"> | |
<img class="banner-music" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/WMG-Vday-Music+v2.jpg" alt="Music Banner" width="580px" height="145px;"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-bottom: 40px;"> | |
<table style="table-layout: fixed; width: 100%;"> | |
<!-- for equal td width, set parent td style width 33% and its child table style width 100% --> | |
<tr> | |
<td class="expand"> | |
<table class="music-1" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
Kehlani | |
</td> | |
</tr> | |
<tr> | |
<td class="alb-name" style="font-family: Verdana, Geneva, sans-serif;"> | |
<i>Sweet SexySavage</i> Album + Picture Disc Bundle | |
</td> | |
</tr> | |
<tr> | |
<td class="img-alb"> | |
<a href="#"> | |
<img class="alb" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/cd_vinyldigital_bundle_presale.png.jpg" width="180" height="180"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
<td class="expand"> | |
<table class="music-2" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
JoJo | |
</td> | |
</tr> | |
<tr> | |
<td class="alb-name"> | |
<i>Mad Love</i><br>Vinyl LP<br><br> | |
</td> | |
</tr> | |
<tr> | |
<td class="img-alb"> | |
<a href="#"> | |
<img class="alb" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/010917_jojo-ml_vinylmockup-1100x1100.jpg.jpg" width="180" height="180"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
<td class="expand"> | |
<table class="music-3" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
Stevie Nicks | |
</td> | |
</tr> | |
<tr> | |
<td class="alb-name"> | |
<i>Crystal Visions</i> LP + Litho<br><br> | |
</td> | |
</tr> | |
<tr> | |
<td class="img-alb"> | |
<a href="#"> | |
<img class="alb" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/snicks-crystalvisions-bundlelithovinyl-1500x1500.png" width="180" height="180"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
<hr width="85%"> | |
<table class="apparel" width="auto" style="table-layout: fixed;"> | |
<tr> | |
<td style="padding-bottom: 15px;"> | |
<a href="#"> | |
<img class="banner-apparel" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/WMG-Vday-Apparel+v2.jpg" width="580px" height="145px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-bottom: 40px;"> | |
<table style="table-layout: fixed; width: 100%"> | |
<tr> | |
<td class="expand"> | |
<table class="item-1" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
My Chemical Romance | |
</td> | |
</tr> | |
<tr> | |
<td class="item-name"> | |
Smokin Gun Crewneck Sweatshirt | |
</td> | |
</tr> | |
<tr> | |
<td class="img-item"> | |
<a href="#"> | |
<img class="item" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/smokinggun.png" width="180px" height="180px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
<td class="expand"> | |
<table class="item-2" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
Tegan and Sara | |
</td> | |
</tr> | |
<tr> | |
<td class="item-name"> | |
LY2D<br>NY<br>T-Shirt | |
</td> | |
</tr> | |
<tr> | |
<td class="img-item"> | |
<a href="#"> | |
<img class="item" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/tns-ny.jpg" width="180px" height="180px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
<td class="expand"> | |
<table class="item-3" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
My Chemical Romance | |
</td> | |
</tr> | |
<tr> | |
<td class="item-name"> | |
Smokin Gun Crewneck Sweatshirt | |
</td> | |
</tr> | |
<tr> | |
<td class="img-item"> | |
<a href="#"> | |
<img class="item" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/heart_stopper_dolman-cole_swindell.jpg" width="180px" height="180px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
<hr width="85%"> | |
<table class="accessories" width="auto" style="table-layout: fixed;"> | |
<tr> | |
<td style="padding-bottom: 15px; width: 100%;"> | |
<a href="#"> | |
<img class="banner-accessories" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/WMG-Vday-Accessories+v2.jpg" width="580px" height="145px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-bottom: 40px;"> | |
<table style="table-layout: fixed; width: 100%;"> | |
<tr> | |
<td class="expand"> | |
<table class="acc-1" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
Tom Petty and The Heartbreakers | |
</td> | |
</tr> | |
<tr> | |
<td class="item-name"> | |
40th Anniversary Logo Hat | |
</td> | |
</tr> | |
<tr> | |
<td class="img-item"> | |
<a href="#"> | |
<img class="item" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/tp_hb_40th_hat_front.jpg" width="180px" height="180px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
<td class="expand"> | |
<table class="acc-2" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
Trey Songz | |
</td> | |
</tr> | |
<tr> | |
<td class="item-name"> | |
<span style="text-transform: uppercase;">Trigga</span><br>Gold<br>Bracelet | |
</td> | |
</tr> | |
<tr> | |
<td class="img-item"> | |
<a href="#"> | |
<img class="item" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/2treysongz_trigga_bracelet_800.jpg" width="180px" height="180px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
<td class="expand"> | |
<table class="acc-3" style="width: 100%;"> | |
<tr> | |
<td class="art-name"> | |
Charlie Puth | |
</td> | |
</tr> | |
<tr> | |
<td class="item-name"> | |
2017<br>Poster<br>Calendar | |
</td> | |
</tr> | |
<tr> | |
<td class="img-item"> | |
<a href="#"> | |
<img class="item" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/charlieputh_2017calendar_1100_1.jpg" width="180px" height="180px"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-top: 15px;"> | |
<table class="shop-btn-table" align="center"> | |
<tr> | |
<td style="padding: 7px 12px; border: 1px solid #006699;"> | |
<a class="shop-btn" href="#"> | |
shop now | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
<hr width="85%"> | |
<table class="other-cat"> | |
<tr> | |
<td style="padding-bottom: 40px;"> | |
<a href="#"> | |
<img class="other-cat-1" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/WMG-Vday-ShopTopSellers+button.jpg"> | |
</a> | |
</td> | |
</tr> | |
<tr> | |
<td style="padding-bottom: 40px;"> | |
<a href="#"> | |
<img class="other-cat-2" src="http://image.e.wmg.com/lib/fe8e12717267067a72/m/1/WMG-Vday-ShopAllPicks+button.jpg"> | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<table class="footer" width="100%"> | |
<tr> | |
<td style="text-align: center;"> | |
©2017 Warner Music Group 1633 Broadway New York, NY 10019 | |
<br> | |
<br> | |
<br> | |
<a class="footer-links" href="#"> | |
Privacy Policy | | |
</a> | |
<a class="footer-links" href="#"> | |
Terms of Use | | |
</a> | |
<a class="footer-links" href="#"> | |
Unsubscribe | |
</a> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment