Skip to content

Instantly share code, notes, and snippets.

@imrizzy
Last active February 28, 2017 19:39
Show Gist options
  • Save imrizzy/7fe974e7a7df5f9d61ef6eb02ca0ee8b to your computer and use it in GitHub Desktop.
Save imrizzy/7fe974e7a7df5f9d61ef6eb02ca0ee8b to your computer and use it in GitHub Desktop.
WMG VDay
<!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;">
&#169;2017 Warner Music Group 1633 Broadway New York, NY 10019
<br>
<br>
<br>
<a class="footer-links" href="#">
Privacy Policy&#160;&#124;
</a>
<a class="footer-links" href="#">
Terms of Use&#160;&#124;
</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