Skip to content

Instantly share code, notes, and snippets.

@JBreit

JBreit/home_test.html

Created October 27, 2013 20:19
Show Gist options
  • Save JBreit/7187405 to your computer and use it in GitHub Desktop.
Save JBreit/7187405 to your computer and use it in GitHub Desktop.
Download ZIP
Picture Polyfill for image swap based on display resolution with issues with the images being cut off when absolutely positioned bottom and left 0.
Raw
home_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Spundies">
<meta name="author" content="Jason Breitigan">
<link rel="shortcut icon" href="images/favicon.ico">
<title>Spundies</title>
<link href="css/reset.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="css/MyFontsWebfontsKit.css">
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<![endif]-->
<!--
/* @license
* MyFonts Webfont Build ID 2665526, 2013-10-15T04:35:16-0400
*
* The fonts listed in this notice are subject to the End User License
* Agreement(s) entered into by the website owner. All other parties are
* explicitly restricted from using the Licensed Webfonts(s).
*
* You may obtain a valid license at the URLs below.
*
* Webfont: Brandon Grotesque Bold by HVD Fonts
* URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/bold/
*
* Webfont: Brandon Grotesque Medium Italic by HVD Fonts
* URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/medium-italic/
*
* Webfont: Brandon Grotesque Regular by HVD Fonts
* URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/regular/
*
*
* License: http://www.myfonts.com/viewlicense?type=web&buildid=2665526
* Licensed pageviews: 10,000
* Webfonts copyright: Copyright (c) 2009 by Hannes von Doehren. All rights reserved.
*
* © 2013 MyFonts Inc
*/
-->
<style>
img.no-script-pic { max-width: 100% }
li.slide1-container { background-color: #f6f6f6;}
li.slide2-container { background-color: #fee6da;}
li.slide3-container { background-color: #e7e6e4;}
span.slide-img-span { position: absolute; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="box">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="Spundies's Logo" /></a>
</div><!--end logo-->
<nav id="global">
<ul class="nav-ul" id="example-one">
<li class="current_page_item"><a href="index.html">HOME</a></li>
<li><a href="shop.html">SHOP</a></li>
<li><a href="splog.html">SPLOG</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a class="open" href="#popup">SIGN-UP</a></li>
</ul><!--end nav-ul-->
</nav><!--end global-->
<div id="social">
<div class="fb-like" data-href="https://www.facebook.com/pages/Spundies/156341021215497" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="true" data-send="false"></div>
<a href="http://instagram.com/Spundies#" class="social-img-link"><img src="images/instagram.png" alt="Instagram" /></a>
<a href="https://twitter.com/Spundies_USA" class="social-img-link"><img src="images/twitter.png" alt="Twitter" /></a>
<a href="https://www.facebook.com/pages/Spundies/156341021215497" class="social-img-link"><img src="images/facebook.png" alt="Facebook" /></a>
</div><!--end social-->
</div><!--end box-->
</header><!--end header-->
<div id="main">
<div class="banner has-dots" style="margin: 0px auto; overflow: hidden; width: 100%; height: 100%;">
<ul>
<li class="slide1-container">
<!--<img id="slide1" src="images/bg1.jpg" width="100%">-->
<span data-picture data-alt="Meet Your New Fav Pair Of Undies">
<!--<span data-src="external/imgs/small.jpg"></span>-->
<span data-src="external/imgs/bg1-600.jpg" data-media="(min-width: 600px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-800.jpg" data-media="(min-width: 800px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-1024.jpg" data-media="(min-width: 1024px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-1152.jpg" data-media="(min-width: 1152px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-1280.jpg" data-media="(min-width: 1280px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-1360.jpg" data-media="(min-width: 1360px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-1600.jpg" data-media="(min-width: 1600px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-1920.jpg" data-media="(min-width: 1920px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-2560.jpg" data-media="(min-width: 2560px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg1-2880.jpg" data-media="(min-width: 2880px)" class="slide-img-span" width="100%" height="auto"></span>
<!--[if (lt IE 9) & (!IEMobile)]>
<span data-src="external/imgs/bg1-1024.jpg"></span>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/bg1-1024.jpg" class="no-script-pic" alt="Meet Your New Fav Pair Of Undies"></noscript>
</span>
<div class="box">
<div class="inner1">
<h1 class="slide1-row1">MEET</h1>
<h1 class="slide1-row2">YOUR</h1>
<h1 class="slide1-row3">NEW</h1>
<h1 class="slide1-row4">FAV</h1>
<h1 class="slide1-row5">PAIR</h1>
<h1 class="slide1-row6">OF UNDIES</h1>
</div>
</div><!--end box-->
</li>
<li class="slide2-container">
<!--<img id="slide1" src="images/bg2.jpg" width="100%">-->
<span data-picture data-alt="Spundies Categories Slide">
<!--<span data-src="external/imgs/small.jpg"></span>-->
<span data-src="external/imgs/bg2-600.jpg" data-media="(min-width: 600px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-800.jpg" data-media="(min-width: 800px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-1024.jpg" data-media="(min-width: 1024px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-1152.jpg" data-media="(min-width: 1152px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-1280.jpg" data-media="(min-width: 1280px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-1360.jpg" data-media="(min-width: 1360px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-1600.jpg" data-media="(min-width: 1600px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-1920.jpg" data-media="(min-width: 1920px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-2560.jpg" data-media="(min-width: 2560px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg2-2880.jpg" data-media="(min-width: 2880px)" class="slide-img-span" width="100%" height="auto"></span>
<!--[if (lt IE 9) & (!IEMobile)]>
<span data-src="external/imgs/bg1-1024.jpg"></span>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/bg2-1024.jpg" class="no-script-pic" alt="Spundies Categories Slide"></noscript>
</span>
<div class="box">
<div class="inner1">
<h1 class="slide2-row1"><span id="arrow-span"><a href="#"><img src="images/arrow.png" alt="Arrow" /></a> </span>SHHHH...SECRET</h1>
<h1 class="slide2-row2">WOMEN'S BUSINESS<p class="read-link"><a href="#" id="top-article"><img src="images/read-more.png" alt="Read More" /></a></p></h1>
</div>
<div id="inner2">
<h1 class="slide2-row3"><span id="arrow-span"><a href="#"><img src="images/arrow.png" alt="Arrow" /></a> </span>JUST ONE OF</h1>
<h1 class="slide2-row4">THOSE DAYS<p class="read-link"><a href="#" id="middle-article"><img src="images/read-more.png" alt="Read More" /></a></p></h1>
</div>
<div id="inner3">
<h1 class="slide2-row5"><span id="arrow-span"><a href="#"><img src="images/arrow.png" alt="Arrow" /></a> </span>GIRL'S</h1>
<h1 class="slide2-row6">NIGHT IN<p class="read-link"><a href="#" id="bottom-article"><img src="images/read-more.png" alt="Read More" /></a></p></h1>
</div>
</div><!--end box-->
</li>
<li class="slide3-container">
<!--<img id="slide1" src="images/bg3.jpg" width="100%">-->
<span data-picture data-alt="Follow Us #Spundies">
<!--<span data-src="external/imgs/small.jpg"></span>-->
<span data-src="external/imgs/bg3-600.jpg" data-media="(min-width: 600px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-800.jpg" data-media="(min-width: 800px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-1024.jpg" data-media="(min-width: 1024px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-1152.jpg" data-media="(min-width: 1152px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-1280.jpg" data-media="(min-width: 1280px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-1360.jpg" data-media="(min-width: 1360px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-1600.jpg" data-media="(min-width: 1600px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-1920.jpg" data-media="(min-width: 1920px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-2560.jpg" data-media="(min-width: 2560px)" class="slide-img-span" width="100%" height="auto"></span>
<span data-src="external/imgs/bg3-2880.jpg" data-media="(min-width: 2880px)" class="slide-img-span" width="100%" height="auto"></span>
<!--[if (lt IE 9) & (!IEMobile)]>
<span data-src="external/imgs/bg1-1024.jpg"></span>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="external/imgs/bg3-1024.jpg" class="no-script-pic" alt="Follow Us #Spundies"></noscript>
</span>
<div class="box">
<div class="inner1">
<div class="lips-container">
<img id="lips" src="images/lips.png" alt="Lips" width="100%" height="auto" />
</div><!-- end lips container -->
<h1 class="slide3-row1">FOLLOW</h1>
<h1 class="slide3-row2">US</h1>
<h1 class="slide3-row3">#SPUNDIES</h1>
<ul id="social-links">
<div class="links-container">
<li class="media"><a href="http://instagram.com/Spundies#"><img src="images/instagram_lg.png" alt="Instagram" width="100%" /></a></li>
</div><!-- end links container -->
<div class="links-container">
<li class="media"><a href="https://twitter.com/Spundies_USA"><img src="images/twitter_lg.png" alt="Twitter" width="100%" /></a></li>
</div><!-- end links container -->
<div class="links-container">
<li class="media"><a href="https://www.facebook.com/pages/Spundies/156341021215497"><img src="images/facebook_lg.png" alt="Facebook" width="100%" /></a></li>
</div><!-- end links container -->
</ul>
</div>
<div class="box">
</li>
<li>
<img id="slide1" src="images/bg4.jpg" width="100%">
</li>
</ul>
</div><!--end banner-->
<div class="box">
</div><!--end box-->
</div><!--end main-->
<footer id="foot-container">
<div class="box">
<nav id="courtesy">
<ul class="nav-ul">
<li><a href="index.html">HOME</a></li>
<li><a href="shop.html">SHOP</a></li>
<li><a href="splog.html">SPLOG</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a class="open" href="#popup">SIGN-UP</a></li>
<li><a href="http://instagram.com/Spundies#">INSTAGRAM</a></li>
<li><a href="https://www.facebook.com/pages/Spundies/156341021215497">FACEBOOK</a></li>
<li>&copy;&nbsp;2013&nbsp;SPUNDIES</li>
</ul><!--end nav-ul-->
</nav><!--end courtesy-->
</div><!--end box-->
</footer><!--end footer-->
<div id="overlay"></div>
<div id="popup">
<div class="dialog-content">
<a href="#" class="close">X</a>
<img id="dont-img" src="images/dont_miss_a_thing.png" alt="Don't Miss A Thing" />
<p id="newsletter">SIGN UP FOR OUR NEWSLETTER!</p>
<form action="" method="post" name="order" id="newsletter">
<label for="first-name" class="label-first">FIRST NAME</label>
<input type="text" name="first-name" id="first-name" class="required" title="Please enter your first name." />
<label for="last-name" class="label-last">LAST NAME</label>
<input type="text" name="last-name" id="last-name" class="required" title="Please enter your Last name." />
<label for="country" class="label-country">COUNTRY</label>
<input type="text" name="country" id="country" class="required" title="Please enter your country." />
<label for="dob" class="label-dob">DATE OF BIRTH</label>
<input type="text" name="month" id="month" class="required-birthday" title="Please enter your month of birth." /><span class="slash2">/</span>
<input type="text" name="date" id="date" class="required-birthday" title="Please enter your day of birth." /><span class="slash1">/</span>
<input type="text" name="year" id="year" class="required-birthday" title="Please enter your year of birth." />
<label for="gender" class="gender">GENDER</label>
<span id="female">FEMALE</span><input type="radio" id="chk1" class="female-radio" name="chk" value="female"><label for="chk1"> </label>
<span id="male">MALE</span><input type="radio" id="chk2" class="male-radio" name="chk" value="male"><label for="chk2"> </label>
<input type="submit" name="submit" id="submit" value=" " />
</form>
<div id="dialog-message"></div>
</div>
</div>
</div><!--end wrapper-->
<!--<div id="fb-root"></div>-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='js/magicline.js'></script>
<script src="js/unslider.js"></script>
<script src="external/matchmedia.js"></script>
<script src="js/picturefill.js"></script>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(document).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 5000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: true // Support responsive design. May break non-responsive designs
});
$('.open').click(function(){
$('#overlay').height($('body').height());
$('#overlay, #popup').fadeIn('fast');
return false;
});
$('.close').click(function() {
$('#overlay, #popup').fadeOut('fast');
});
});
</script>
</body>
</html>
Raw
style.css
@import url("//hello.myfonts.net/count/28ac36");
@font-face {font-family: 'BrandonGrotesque-Bold';src: url('webfonts/28AC36_0_0.eot');src: url('webfonts/28AC36_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28AC36_0_0.woff') format('woff'),url('webfonts/28AC36_0_0.ttf') format('truetype');}
@font-face {font-family: 'BrandonGrotesque-MediumItalic';src: url('webfonts/28AC36_1_0.eot');src: url('webfonts/28AC36_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28AC36_1_0.woff') format('woff'),url('webfonts/28AC36_1_0.ttf') format('truetype');}
@font-face {font-family: 'BrandonGrotesque-Regular';src: url('webfonts/28AC36_2_0.eot');src: url('webfonts/28AC36_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/28AC36_2_0.woff') format('woff'),url('webfonts/28AC36_2_0.ttf') format('truetype');}
.BrandonGrotesque-Bold {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
}
.BrandonGrotesque-MediumItalic {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
}
.BrandonGrotesque-Regular {
font-family: BrandonGrotesque-Regular;
font-weight: normal;
font-style: normal;
}
a {
}
body {
height: 100%;
font-family: BrandonGrotesque-Regular;
background-image: url('../images/polkadot.png');
}
p {
}
header {
height: 70px;
width: 100%;
background-color: #f3f3f4;
border-bottom: 5px solid #231f20;
}
.box {
margin-left: auto;
margin-right: auto;
width: 960px;
}
#logo {
float: left;
clear: right;
padding: 5px;
position: relative;
display: inline-block;
margin-top: 0px;
width: 185px;
}
#global {
float: left;
font-family: BrandonGrotesque-Regular;
font-weight: normal;
font-style: normal;
margin-left: 15px;
margin-right: 15px;
width: 545px;
}
#global .nav-ul {
clear: left;
margin: 0 auto;
list-style: none;
position: relative;
}
#global .nav-ul li {
display: inline;
}
#global .nav-ul li a {
color: #000;
font-size: 18px;
display: inline-block;
line-height: 3.5em;
padding: 0 10px 10px 10px;
text-decoration: none;
}
#magic-line {
position: absolute;
top: 50px;
left: 0;
width: 100px;
height: 2px;
background: #231f20;
}
#foot-container {
clear: both;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: auto;
width: 960px;
position: relative;
}
#courtesy {
clear: both;
font-family: BrandonGrotesque-Regular;
font-weight: normal;
font-style: normal;
width: 960px;
border-top: 2px solid #231f20;
position: absolute;
bottom: 0;
}
#courtesy .nav-ul {
margin: 0 auto;
text-align: center;
}
#courtesy li {
display: inline;
color: #000;
font-size: 12px;
font-weight: bold;
}
#courtesy .nav-ul li a {
color: #000;
display: inline-block;
line-height: 3.5em;
padding: 0 10px 10px 10px;
text-decoration: none;
}
.fb-like {
margin-right: 10px;
}
#social {
float: right;
display: inline-block;
height: 72px;
width: 185px;
position: relative;
line-height: 5em;
}
#social img {
margin-right: 10px;
}
#content {
height: 100%;
width: 920px;
background: #faf9f8;
padding: 20px;
position: relative;
}
.splog {
float: left;
width: 600px;
margin-bottom: 0px;
background-color: #faf9f8;
border-bottom: 2px solid #231f20;
position: relative;
}
.splog img {
width: 75%;
}
#content h1 {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
font-size: 50px;
margin-bottom: 10px;
}
.splog h2 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 40px;
}
.splog #post-date {
line-height: 1em
}
.blog-post {
float: left;
width: 600px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
.blog-post h3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 20px;
margin-top: 10px;
}
.blog-post p {
font-size: 16px;
line-height: 1.5em;
margin-top: 10px;
margin-bottom: 10px;
}
.right-sidebar {
float: right;
overflow: hidden;
}
#facebook-frame {
position: relative;
}
.banner {
position: relative;
overflow: auto;
height: 692px;
}
.banner li {
position: relative;
list-style: none;
height: 692px;
}
.banner ul li {
float: left;
margin: 0;
height: 692px;
}
.banner .inner1 ul.social-links {
position: absolute;
text-align: right;
}
.links-container {
width: 100%;
}
.banner .inner {
padding: 0;
position: absolute;
}
.banner .inner1 #lips {
width: 100%;
position: absolute;
}
.banner .inner1 ul {
margin-left: 60%;
}
.banner .inner1 ul li.media {
margin-top: 5px;
margin-left: 10px;
margin-right: 0px;
width: 50px;
}
.banner .inner1 {
padding: 0;
width: 960px;
position: absolute;
top: 0;
margin-bottom: 20px;
}
.banner #inner2 {
clear: both;
height: 50px;
padding: 0;
width: 960px;
position: absolute;
top: 150px;
margin-top: 27px;
margin-bottom: 20px;
}
.banner #inner3 {
clear: both;
height: 50px;
padding: 0;
width: 960px;
position: absolute;
top: 285px;
margin-top: 27px;
margin-bottom: 20px;
}
#top-article {
display: block;
clear: both;
height: 34px;
line-height: 0px;
margin: 20px 0 20px 0;
top: 120px;
width: 103px;
}
#middle-article {
display: block;
clear: both;
height: 34px;
margin: 20px 0 20px 0;
top: 140px;
width: 103px;
}
#bottom-article {
display: block;
clear: both;
height: 34px;
margin: 20px 0 20px 0;
top: 160px;
width: 103px;
}
.read-link {
margin-top: 20px;
}
h1.slide1-row1 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 64px;
color: #57585b;
position: relative;
line-height: 52px;
margin-left: 57.5%;
}
h1.slide1-row2 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 64px;
color: #a7a9ab;
position: relative;
line-height: 52px;
margin-left: 56%;
}
h1.slide1-row3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 64px;
color: #000;
position: relative;
line-height: 52px;
margin-left: 59%;
}
h1.slide1-row4 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 64px;
color: #f28ab8;
position: relative;
line-height: 52px;
margin-left: 60.5%;
}
h1.slide1-row5 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 64px;
color: #ef69a7;
position: relative;
line-height: 52px;
margin-left: 58%;
}
h1.slide1-row6 {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
font-size: 64px;
color: #000;
position: relative;
line-height: 52px;
margin-left: 40%;
}
h1.slide2-row1 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 30px;
color: #ec008b;
position: relative;
min-height: 31px;
margin-top: 5%;
margin-left: 55%;
}
h1.slide2-row2 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 30px;
color: #000;
position: relative;
min-height: 31px;
margin-left: 59%;
}
h1.slide2-row3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 30px;
color: #ec008b;
position: relative;
min-height: 31px;
margin-left: 55%;
}
h1.slide2-row4 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 30px;
color: #000;
position: relative;
min-height: 31px;
margin-left: 59%;
}
h1.slide2-row5 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 30px;
color: #ec008b;
position: relative;
min-height: 31px;
margin-left: 55%;
}
h1.slide2-row6 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 30px;
color: #000;
position: relative;
min-height: 31px;
margin-left: 59%;
}
h1.slide3-row1 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 50px;
color: #a7a9ab;
position: relative;
margin-top: 20%;
margin-left: 57%;
}
h1.slide3-row2 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 50px;
color: #f6adcd;
position: relative;
margin-left: 71%;
}
h1.slide3-row3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 50px;
color: #000;
position: relative;
margin-left: 50%;
}
.lips-container {
width: 300px;
position: relative;
margin-left: 50%;
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 100px;
text-align: center;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
background: #FFF;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #000;
border: 2px solid #000;
opacity: 1;
}
.banner .arrows {
position: absolute;
bottom: 100px;
right: 20px;
color: #fff;
}
.banner .arrow {
display: inline;
padding-left: 10px;
cursor: pointer;
}
#content .product-display {
clear: right;
float: left;
height: 557px;
width: 460px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
#content .product-display #photo {
clear: right;
float: left;
height: 100%;
width: 460px;
background-image: url('../images/polaroid.png');
background-repeat: no-repeat;
margin-bottom: 20px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#content .product-display ul li img {
margin: 40px 30px;
z-index: 0;
}
#content .product-info {
float: right;
height: 100%;
width: 420px;
padding: 10px;
position: relative;
overflow: hidden;
}
#content h2#shop {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
width: 50%;
float: left;
}
#content h2#product-head {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
width: 50%;
float: right;
}
#content h2 a {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
color: #000;
text-decoration: none;
}
#content h2#shop, #content h2#product-head {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
font-size: 24px;
}
#price-head {
height: 30px;
padding: 5px;
background: transparent;
border-bottom: 2px solid #231f20;
}
.product-info #price-head h3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1.5em;
}
#prod-description {
height: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
#prod-description p {
margin-bottom: 10px;
line-height: 1.5em;
}
#prod-description h3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
width: 100%;
color: #000;
padding: 10px;
}
#quantity-entry {
padding: 10px;
margin-bottom: 20px;
}
#quantity-entry label {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
width: 100%;
color: #000;
font-size: 18px;
}
#quantity-entry #submit {
background: url('../images/buy-now.png') transparent no-repeat;
border: none;
height: 58px;
width: 58px;
cursor: pointer;
}
#prod-description h3.accordion {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
width: 100%;
color: #000;
padding: 10px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
#prod-description h3 span {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
width: 20px;
text-align: center;
margin-right: 20px;
position: absolute;
right: 0;
}
#prod-description h4 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 16px;
color: #000;
font-weight: bold;
margin-bottom: 20px;
}
#prod-description > div > div {
display: none;
padding: 20px;
}
#prod-description > div {
border-top: 2px solid #231f20;
}
.clear {
height: 20px;
width: 100%;
clear: both;
}
#contact-headline {
float: right;
margin-top: 20px;
margin-bottom: 40px;
width: 85%;
padding-top: 10px;
padding-bottom: 10px;
border-top: 2px solid #231f20;
border-bottom: 2px solid #231f20;
}
#contact-container {
height: 600px;
width: 100%;
position: relative;
margin-bottom: 40px;
}
#top-row, #bottom-row {
margin-bottom: 20px;
}
#content h1.name-head {
font-size: 35px;
}
h2.job-title {
font-size: 25px;
font-weight: bold;
color: #a7a9ab;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
border-top: 2px solid #231f20;
border-bottom: 2px solid #231f20;
}
.contact-info {
font-size: 18px;
float: left;
width: 28%;
padding: 20px;
}
p.phone, p.email {
padding-top: 10px;
padding-bottom: 10px;
}
p.email a {
text-decoration: none;
color: #000;
}
p.email a:hover {
text-decoration: underline;
color: #1122CC;
}
.contact-info .italic-info {
font-family: BrandonGrotesque-MediumItalic;
font-weight: normal;
font-style: normal;
font-size: 18px;
}
#video {
margin-left: 25%;
margin-bottom: 20px;
}
#headline {
clear: both;
padding-left: 20px;
padding-right: 20px;
border-top: 2px solid #231f20;
border-bottom: 2px solid #231f20;
}
#headline h3 {
font-family: BrandonGrotesque-Bold;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1.5em;
}
#left-col {
float: left;
width: 450px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
#left-col p {
font-size: 16px;
line-height: 1.5em;
margin-bottom: 10px;
}
#right-col {
float: right;
width: 450px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
#right-col p {
font-size: 16px;
line-height: 1.5em;
margin-bottom: 10px;
}
.inputFocus {
border: 2px solid #FBDAEE;
background-color: #FAF2EE;
}
#submit {
float: right;
}
#title-container {
height: 100%;
}
#title-container img#title {
float: left;
clear: right;
margin-top: 20px;
margin-bottom: 20px;
}
#title-container img#multi-pack {
margin-top: 20px;
margin-bottom: 40px;
}
.product-info #social-media-group {
height: 50px;
}
.product-info #social-media-group #share-img {
margin-left: 0px;
margin-right: 50px;
}
.wrapper {
margin-left: auto;
margin-right: auto;
}
#overlay {
width:100%;
height:100%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background:#000;
position:absolute;
top:0;
left:0;
z-index:3000;
display:none;
}
#popup {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 50%;
-moz-border-radius: 50% !important;
-webkit-border-radius: 50%;
background: #faf1ed;
height: 480px;
width: 480px;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin: -240px;
position: absolute;
z-index: 5000;
display: none;
}
#popup .dialog-content {
text-align: left;
padding: 10px;
margin: 13px;
color: #666;
font-size: 11px;
}
a.close {
font-size: 16px;
margin: 10px auto 10px auto;
text-align:center;
display: block;
height: 10px;
width: 10px;
padding: 8px 10px 12px 10px;
color: #AAA;
text-decoration: none;
font-weight: bold;
line-height: -1.5em;
background-color: #FFF;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
a.close:hover {
background-color: #c33100;
}
#popup .dialog-content p {
font-weight:700; margin:0;
}
#popup .dialog-content ul {
margin:10px 0 10px 20px;
padding:0;
height:50px;
}
.label-first {
font-size: 18px;
color: #000;
text-align: left;
width: 100%;
position: absolute;
top: 155px;
left: 100px;
}
.label-last {
font-size: 18px;
color: #000;
text-align: left;
width: 100%;
position: absolute;
top: 207px;
left: 100px;
}
.label-country {
font-size: 18px;
color: #000;
text-align: left;
width: 100%;
position: absolute;
top: 261px;
left: 100px;
}
.label-dob {
font-size: 18px;
color: #000;
text-align: left;
width: 100%;
position: absolute;
top: 313px;
left: 100px;
}
.gender {
position: absolute;
font-size: 18px;
color: #000;
text-align: left;
top: 367px;
left: 100px;
}
#first-name {
position: absolute;
top: 175px;
left: 100px;
border: 1px solid #FBDAEE;
}
#last-name {
position: absolute;
top: 230px;
left: 100px;
border: 1px solid #FBDAEE;
}
#country {
position: absolute;
top: 282px;
left: 100px;
border: 1px solid #FBDAEE;
}
#first-name, #last-name, #country {
width: 280px;
border: 1px solid #FBDAEE;
}
#month {
position: absolute;
width: 80px;
top: 334px;
left: 100px;
border: 1px solid #FBDAEE;
}
#date {
position: absolute;
width: 80px;
top: 334px;
left: 200px;
border: 1px solid #FBDAEE;
}
#year {
position: absolute;
width: 80px;
top: 334px;
left: 300px;
border: 1px solid #FBDAEE;
}
#female {
font-size: 18px;
color: #000;
position: absolute;
top: 367px;
left: 185px;
}
#male {
font-size: 18px;
color: #000;
position: absolute;
top: 367px;
left: 285px;
}
.slash1 {
position: absolute;
font-size: 20px;
color: #000;
top: 340px;
left: 187px;
}
.slash2 {
position: absolute;
font-size: 20px;
color: #000;
top: 340px;
left: 287px;
}
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
margin:-2px;
padding: 10px 10px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #FFF;
background-repeat: repeat-x;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
background-color:#e0e0e0;
}
input[type=radio]#chk1 + label , input[type=checkbox]#chk1 + label {
position: absolute;
top: 367px;
left: 260px;
}
input[type=radio]#chk2 + label , input[type=checkbox]#chk2 + label {
position: absolute;
top: 367px;
left: 340px;
}
input {
height: 25px;
}
.dialog-content #dont-img {
position: absolute;
left: 160px;
right: 100px;
}
.dialog-content p {
color: #000;
font-size: 18px;
position: absolute;
top: 110px;
left: 50px;
text-align: center;
padding-right: 50px;
padding-bottom: 10px;
padding-left: 50px;
border-bottom: 2px solid #000;
}
.dialog-content #submit {
position: absolute;
top: 425px;
left: 210px;
background: url('../images/signup.png') transparent no-repeat;
border: none;
height: 40px;
width: 75px;
cursor: pointer;
}
@media screen and (min-width: 600px) and (max-width: 800px) {
#global {
width: 525px;
margin-left: 0;
margin-right: 0;
}
#global .nav-ul li a {
font-size: 14px;
line-height: -3.5em;
padding: 0 5px 5px 5px;
}
#social {
display: none;
}
.box {
max-width: 800px;
}
.banner .inner1 {
max-width: 800px;
margin-bottom: 10px;
}
.banner #inner2 {
max-width: 800px;
top: 120px;
}
.banner #inner3 {
max-width: 800px;
top: 250px;
}
h1.slide1-row1 {
margin-top: 2%;
line-height: 52px;
margin-left: 58.5%;
}
h1.slide1-row2 {
margin-top: 2%;
line-height: 10px;
margin-left: 57%;
}
h1.slide1-row3 {
margin-top: 2%;
line-height: 52px;
margin-left: 61.5%;
}
h1.slide1-row4 {
margin-top: 2%;
line-height: 10px;
margin-left: 64%;
}
h1.slide1-row5 {
margin-top: 2%;
line-height: 52px;
margin-left: 61.5%;
}
h1.slide1-row6 {
margin-top: 2%;
line-height: 10px;
margin-left: 40%;
}
h1.slide2-row1 {
font-size: 20px;
margin-top: 2%;
}
h1.slide2-row2 {
font-size: 20px;
}
h1.slide2-row3 {
font-size: 20px;
}
h1.slide2-row4 {
font-size: 20px;
}
h1.slide2-row5 {
font-size: 20px;
}
h1.slide2-row6 {
font-size: 20px;
}
#foot-container {
max-width: 800px;
}
#courtesy {
max-width: 800px;
}
#courtesy li {
font-size: 8px;
}
#courtesy .nav-ul li a {
line-height: 3.5em;
padding: 0 10px 10px 10px;
}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
h1.slide1-row1 {
margin-top: 2%;
font-size: 80px;
line-height: 52px;
margin-left: 59.5%;
}
h1.slide1-row2 {
margin-top: 2%;
font-size: 80px;
line-height: 25px;
margin-left: 58%;
}
h1.slide1-row3 {
margin-top: 2%;
font-size: 80px;
line-height: 52px;
margin-left: 62.5%;
}
h1.slide1-row4 {
margin-top: 2%;
font-size: 80px;
line-height: 25px;
margin-left: 64.5%;
}
h1.slide1-row5 {
margin-top: 2%;
font-size: 80px;
line-height: 52px;
margin-left: 62.5%;
}
h1.slide1-row6 {
margin-top: 2%;
font-size: 80px;
line-height: 25px;
margin-left: 40%;
}
}
@media screen and (min-width: 1025px) and (max-width: 1152px) {
h1.slide1-row1 {
margin-top: 4%;
font-size: 80px;
line-height: 52px;
margin-left: 59.5%;
}
h1.slide1-row2 {
margin-top: 2%;
font-size: 80px;
line-height: 25px;
margin-left: 58%;
}
h1.slide1-row3 {
margin-top: 2%;
font-size: 80px;
line-height: 52px;
margin-left: 62.5%;
}
h1.slide1-row4 {
margin-top: 2%;
font-size: 80px;
line-height: 25px;
margin-left: 64.5%;
}
h1.slide1-row5 {
margin-top: 2%;
font-size: 80px;
line-height: 52px;
margin-left: 62.5%;
}
h1.slide1-row6 {
margin-top: 2%;
font-size: 80px;
line-height: 25px;
margin-left: 40%;
}
}
@media screen and (min-width: 1153px) and (max-width: 1280px) {
h1.slide1-row1 {
margin-top: 4%;
font-size: 90px;
line-height: 52px;
margin-left: 62%;
}
h1.slide1-row2 {
margin-top: 2%;
font-size: 90px;
line-height: 37px;
margin-left: 60.5%;
}
h1.slide1-row3 {
margin-top: 2%;
font-size: 90px;
line-height: 55px;
margin-left: 65%;
}
h1.slide1-row4 {
margin-top: 2%;
font-size: 90px;
line-height: 37px;
margin-left: 68%;
}
h1.slide1-row5 {
margin-top: 2%;
font-size: 90px;
line-height: 55px;
margin-left: 65%;
}
h1.slide1-row6 {
margin-top: 2%;
font-size: 90px;
line-height: 37px;
margin-left: 40%;
}
}
@media screen and (min-width: 1281px) {
h1.slide1-row1 {
margin-top: 4%;
font-size: 100px;
line-height: 52px;
margin-left: 65%;
}
h1.slide1-row2 {
margin-top: 2%;
font-size: 100px;
line-height: 55px;
margin-left: 63%;
}
h1.slide1-row3 {
margin-top: 2%;
font-size: 100px;
line-height: 52px;
margin-left: 68%;
}
h1.slide1-row4 {
margin-top: 2%;
font-size: 100px;
line-height: 55px;
margin-left: 71%;
}
h1.slide1-row5 {
margin-top: 2%;
font-size: 100px;
line-height: 52px;
margin-left: 68%;
}
h1.slide1-row6 {
margin-top: 2%;
font-size: 100px;
line-height: 55px;
margin-left: 40%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment