<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="tls">
<section class="tls-a">
<div class="tls-logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-logo.svg"/><span>#<span style='color: #888'>FIND</span>YOUR<span style='color: #888'>FIT</span></span></div>
<div class="tls-social">
<ul>
<li class="tls-facebook"></li>
<li class="tls-twitter"></li>
<li class="tls-youtube"></li>
<li class="tls-pinterest"></li>
<li class="tls-instagram"></li>
<li class="tls-google"></li>
</ul>
</div>
<div class="tls-title">
<h1>Weightloss isn't magic, it's <br> <span>SCIENCE</span></h1>
</div>
<div class="tls-platform"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-platforms-w.svg"/></div>
</section>
<section class="tls-b">
<div class="tls-logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-logo.svg"/><span>#<span style='color: #34b0e5'>FIND</span>YOUR<span style='color: #34b0e5'>FIT</span></span></div>
<div class="tls-title-b"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-2-hero_copy.svg"/></div>
</section>
<section class="tls-c">
<div class="tls-logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-logo.svg"/><span>#<span style='color: #34b0e5'>FIND</span>YOUR<span style='color: #34b0e5'>FIT</span></span></div>
<div class="tls-title-c">
<h3>Four Fundamentals to TLS Weight Loss Solution:</h3>
</div>
<div class="tls-details">
<ul>
<li class="tls-det">
<input id="item1" type="checkbox"/>
<label class="title" for="item1"></label>Low-GI Eating
<div class="tls-more-info">
<ul>
<li>superior for weight loss and weight management</li>
<li>maintain lean muscle mass</li>
<li>cardiovascular health</li>
<li>Keep your body in fat burning zone</li>
</ul>
</div>
</li>
<li class="tls-det">
<input id="item2" type="checkbox"/>
<label class="title" for="item2"></label>Low-GI Eating
<div class="tls-more-info">
<ul>
<li>superior for weight loss and weight management</li>
<li>maintain lean muscle mass</li>
<li>cardiovascular health</li>
<li>Keep your body in fat burning zone</li>
</ul>
</div>
</li>
<li class="tls-det">
<input id="item3" type="checkbox"/>
<label class="title" for="item3"></label>Low-GI Eating
<div class="tls-more-info">
<ul>
<li>superior for weight loss and weight management</li>
<li>maintain lean muscle mass</li>
<li>cardiovascular health</li>
<li>Keep your body in fat burning zone</li>
</ul>
</div>
</li>
<li class="tls-det">
<input id="item4" type="checkbox"/>
<label class="title" for="item4"></label>Low-GI Eating
<div class="tls-more-info">
<ul>
<li>superior for weight loss and weight management</li>
<li>maintain lean muscle mass</li>
<li>cardiovascular health</li>
<li>Keep your body in fat burning zone</li>
</ul>
</div>
</li>
</ul>
</div>
</section>
<section class="tls-d">
<div class="tls-logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-logo.svg"/><span>#<span style='color: #34b0e5'>FIND</span>YOUR<span style='color: #34b0e5'>FIT</span></span></div>
<div class="tls-title-d">
<h3>Introducing yourself<br>to the "MAGIC"</h3>
</div>
<div class="tls-products">
<ul>
<li><a href="">
<div class="tls-product" style="background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-acts.jpg); background-size:contain"></div></a><br><br><a href="">TLS® ACTS Adrenal, Cortisol, Thyroid & Stress Support Formula</a></li>
<li><a href="">
<div class="tls-product" style="background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-core.jpg); background-size:contain"></div></a><br><br><a href="">TLS® CORE Fat & Carb Inhibitor</a></li>
<li><a href="">
<div class="tls-product" style="background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-green-coffee.jpg); background-size:contain"></div></a><br><br><a href="">TLS® Green Coffee Plus Garcinia Cambogia</a></li>
<li><a href="">
<div class="tls-product" style="background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-thermochrome.jpg); background-size:contain"></div></a><br><br><a href="">TLS® Thermochrome with Advantra Z®</a></li>
<li><a href="">
<div class="tls-product" style="background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-tonalin-cla.jpg); background-size:contain"></div></a><br><br><a href="">TLS® Tonalin® CLA (Conjugated Linoleic Acid)</a></li>
</ul>
</div>
</section>
<section class="tls-e">
<div class="tls-bonuses">
<ul>
<li>
<div class="tls-bonus"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-platforms.svg"/>
<h4><br>TLS App</h4>
</div>
</li>
<li>
<div class="tls-bonus"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-social.svg"/>
<h4>Socially Connected</h4>
</div>
</li>
<li>
<div class="tls-bonus"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-bmi.svg"/>
<h4>BMI<br>Calculator</h4>
</div>
</li>
</ul>
</div>
</section>
<section class="tls-f">
<div class="tls-title-f"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-crown.svg"/>
<h2>Keep Calm <span style='font-size:.5em;'>and</span> Train On.<br>Because I Can<br><span style='font-size: 1em; letter-spacing: -2px; line-height: 2em;'>#<span style='color: #34b0e5'>FIND</span>YOUR<span style='color: #34b0e5'>FIT</span></span></h2>
</div>
</section>
</div>
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/tls-bg-3.jpg") repeat;
margin: 0;
padding: 0;
}
#tls {
color: #fff;
font: 400 8px "gill-sans", arial, sans-sarif;
-webkit-font-smoothing: antialiased;
margin: 0 auto;
max-width: 960px;
min-width: 320px;
width: 100%;
}
@media screen and (min-width: 480px) {
#tls {
font-size: 10px;
}
}
@media screen and (min-width: 568px) {
#tls {
font-size: 13px;
}
}
@media screen and (min-width: 667px) {
#tls {
font-size: 16px;
}
}
#tls * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#tls h1, #tls h2, #tls h3, #tls h4 {
color: #fff;
font-weight: 400;
text-transform: uppercase;
}
#tls h1 {
font-size: 2em;
text-align: center;
position: relative;
z-index: 10;
}
@media screen and (min-width: 480px) {
#tls h1 {
font-size: 1.5em;
}
}
#tls h2 {
font-size: 2.75em;
text-align: center;
}
#tls h3 {
font-size: 2em;
text-align: left;
}
@media screen and (min-width: 940px) {
#tls h3 {
font-size: 2.75em;
}
}
#tls h4 {
font-size: 1.45em;
text-align: center;
}
#tls .tls-logo {
height: auto;
max-height: 80px;
min-width: 280px;
width: 100%;
}
#tls .tls-logo img {
background: rgba(52, 176, 229, 0.7);
max-height: 75px;
max-width: 216px;
padding: 5px;
width: 40%;
}
#tls .tls-logo > span {
float: right;
font-size: 2.5em;
letter-spacing: -1px;
line-height: 60px;
}
#tls .tls-a, #tls .tls-b, #tls .tls-c, #tls .tls-d, #tls .tls-e, #tls .tls-f {
background-size: cover;
display: inline-block;
max-width: 960px;
min-width: 320px;
padding: 20px;
width: 100%;
}
#tls .tls-a {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-1-hero.jpg) no-repeat center #999;
}
@media screen and (min-width: 760px) {
#tls .tls-a {
height: 600px;
}
}
#tls .tls-a .tls-social {
display: none;
}
@media screen and (min-width: 760px) {
#tls .tls-a .tls-social {
display: inline-block;
float: left;
padding: 70px 0;
}
}
#tls .tls-a .tls-social ul li {
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
height: 40px;
list-style: none;
margin: 8px 0;
width: 40px;
}
#tls .tls-a .tls-social ul li:hover {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}
#tls .tls-a .tls-social .tls-facebook:before, #tls .tls-a .tls-social .tls-twitter:before, #tls .tls-a .tls-social .tls-youtube:before, #tls .tls-a .tls-social .tls-pinterest:before, #tls .tls-a .tls-social .tls-instagram:before, #tls .tls-a .tls-social .tls-google:before {
color: #999;
display: block;
font: 1.25em "FontAwesome";
line-height: 40px;
text-align: center;
}
#tls .tls-a .tls-social .tls-facebook:before {
content: '\f09a';
}
#tls .tls-a .tls-social .tls-twitter:before {
content: '\f099';
}
#tls .tls-a .tls-social .tls-youtube:before {
content: '\f167';
}
#tls .tls-a .tls-social .tls-pinterest:before {
content: '\f0d2';
}
#tls .tls-a .tls-social .tls-instagram:before {
content: '\f16d';
}
#tls .tls-a .tls-social .tls-google:before {
content: '\f0d5';
}
#tls .tls-a .tls-title {
height: 160px;
margin: 60px auto 0;
max-width: 580px;
min-width: 280px;
padding: 40px 0 0;
position: relative;
width: 100%;
}
#tls .tls-a .tls-title:after {
background: rgba(52, 176, 229, 0.3);
content: '';
display: block;
height: 100%;
max-width: 580px;
min-width: 280px;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
@media screen and (min-width: 760px) {
#tls .tls-a .tls-title {
height: 250px;
margin: 100px auto 50px;
padding: 80px 0 0;
}
}
#tls .tls-a .tls-title h1 > span {
font-size: 50px;
font-weight: 700;
}
@media screen and (min-width: 480px) {
#tls .tls-a .tls-title h1 > span {
font-size: 64px;
}
}
@media screen and (min-width: 760px) {
#tls .tls-a .tls-title h1 > span {
font-size: 74px;
}
}
#tls .tls-a .tls-platform {
margin: 30px auto 0;
width: 180px;
}
#tls .tls-b {
background: rgba(0, 0, 0, 0.5);
}
#tls .tls-b .tls-title-b {
margin: 0 auto;
max-width: 900px;
min-width: 280px;
width: 100%;
}
#tls .tls-b .tls-title-b img {
display: block;
margin: 0 auto;
width: 100%;
}
#tls .tls-c {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-3-hero.jpg) -450px center;
background-size: cover;
}
@media screen and (min-width: 480px) {
#tls .tls-c {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-3-hero.jpg) right center;
background-size: cover;
}
}
@media screen and (min-width: 940px) {
#tls .tls-c {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-3-hero.jpg) center;
background-size: cover;
height: 600px;
}
}
#tls .tls-c .tls-title-c {
color: #fff;
display: inline-block;
margin-left: 0px;
padding-top: 60px;
text-transform: uppercase;
width: 200px;
}
@media screen and (min-width: 480px) {
#tls .tls-c .tls-title-c {
width: 250px;
}
}
@media screen and (min-width: 568px) {
#tls .tls-c .tls-title-c {
width: 300px;
}
}
@media screen and (min-width: 667px) {
#tls .tls-c .tls-title-c {
width: 500px;
}
}
#tls .tls-c .tls-details {
display: inline-block;
min-width: 280px;
padding: 50px 0 0;
width: 100%;
}
#tls .tls-c .tls-details input[type=checkbox] {
display: none;
}
#tls .tls-c .tls-details ul {
position: relative;
max-width: 900px;
min-width: 280px;
width: 100%;
}
#tls .tls-c .tls-details ul li {
float: left;
list-style: none;
width: 50%;
}
@media screen and (min-width: 480px) {
#tls .tls-c .tls-details ul li {
width: 33.33333%;
}
}
@media screen and (min-width: 568px) {
#tls .tls-c .tls-details ul li {
width: 25%;
}
}
@media screen and (min-width: 760px) {
#tls .tls-c .tls-details ul li {
width: 20%;
}
}
#tls .tls-c .tls-details .tls-det {
background: rgba(255, 255, 255, 0.75);
border-radius: 50%;
color: #222;
font-size: 1.1em;
font-weight: 700;
height: 115px;
line-height: 80px;
margin: 15px 2%;
padding: 15px 0;
position: relative;
text-align: center;
text-transform: uppercase;
transition: all 750ms;
width: 115px;
}
#tls .tls-c .tls-details .tls-det:after {
border: 1px dotted #fff;
border-radius: 50%;
content: '';
display: inline-block;
height: 125px;
position: absolute;
left: -6px;
top: -6px;
width: 125px;
}
#tls .tls-c .tls-details .tls-det input[type=checkbox] + label {
transition: all 750ms;
position: relative;
z-index: 99;
}
#tls .tls-c .tls-details .tls-det input[type=checkbox] + label:after {
color: #222;
content: '\f055';
display: block;
font: 2em "FontAwesome";
line-height: .05em;
position: relative;
transition: all 750ms;
z-index: 99;
}
#tls .tls-c .tls-details .tls-det input[type=checkbox]:checked + label + .tls-more-info {
display: inline-block;
}
@media screen and (min-width: 480px) {
#tls .tls-c .tls-details .tls-det {
font-size: .95em;
}
}
@media screen and (min-width: 568px) {
#tls .tls-c .tls-details .tls-det {
font-size: .75em;
}
}
@media screen and (min-width: 667px) {
#tls .tls-c .tls-details .tls-det {
font-size: .6em;
}
}
@media screen and (min-width: 940px) {
#tls .tls-c .tls-details .tls-det {
font-size: .75em;
height: 150px;
line-height: 115px;
margin: 0 2%;
width: 150px;
}
#tls .tls-c .tls-details .tls-det:after {
height: 170px;
position: absolute;
left: -10px;
top: -10px;
width: 170px;
}
}
#tls .tls-c .tls-more-info {
background: #fff;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
color: #222;
display: none;
font-size: 1.5em;
font-weight: 400;
line-height: 1.25em;
margin: 40px -100px 0;
padding: 5px 10px;
position: relative;
width: 160px;
z-index: 999;
}
#tls .tls-c .tls-more-info:before {
background: #fff;
content: '';
display: inline-block;
height: 50px;
margin-top: -50px;
position: relative;
top: 30px;
transform: rotate(45deg);
width: 50px;
}
@media screen and (min-width: 667px) {
#tls .tls-c .tls-more-info {
font-size: 1.35em;
}
}
#tls .tls-c .tls-more-info ul li {
float: none;
font-size: .9em;
list-style: disc outside none;
margin: 10px;
text-align: left;
text-transform: uppercase;
width: 120px;
}
#tls .tls-d {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-4-hero.jpg) no-repeat -690px center;
background-size: cover;
}
@media screen and (min-width: 480px) {
#tls .tls-d {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-4-hero.jpg) no-repeat right center;
background-size: cover;
}
}
@media screen and (min-width: 940px) {
#tls .tls-d {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/section-4-hero.jpg) no-repeat center;
background-size: cover;
height: 600px;
}
}
#tls .tls-d .tls-title-d {
display: inline-block;
padding: 40px 0 60px;
}
@media screen and (min-width: 760px) {
#tls .tls-d .tls-title-d {
padding: 50px 10px 10px;
}
}
@media screen and (min-width: 940px) {
#tls .tls-d .tls-title-d {
padding: 120px 10px 60px;
}
}
#tls .tls-d .tls-products {
padding: 0;
}
@media screen and (min-width: 760px) {
#tls .tls-d .tls-products {
padding: 0 5px;
}
}
#tls .tls-d .tls-products ul {
max-width: 900px;
min-width: 280px;
width: 100%;
}
#tls .tls-d .tls-products ul li {
color: #fff;
float: left;
font-size: 1.25em;
height: 200px;
list-style: none;
padding: 0 10px;
text-align: left;
text-transform: uppercase;
width: 50%;
}
#tls .tls-d .tls-products ul li a {
color: #fff;
text-decoration: none;
}
#tls .tls-d .tls-products ul li a:hover {
color: rgba(52, 176, 229, 0.7);
}
@media screen and (min-width: 480px) {
#tls .tls-d .tls-products ul li {
font-size: 1em;
width: 33.33333%;
}
}
@media screen and (min-width: 568px) {
#tls .tls-d .tls-products ul li {
font-size: .75em;
width: 25%;
}
}
@media screen and (min-width: 760px) {
#tls .tls-d .tls-products ul li {
width: 20%;
}
}
#tls .tls-d .tls-products .tls-product {
background: #fff;
border-radius: 50%;
height: 115px;
margin: 0 auto;
width: 115px;
}
#tls .tls-d .tls-products .tls-product:before {
border: 1px dashed #fff;
border-radius: 50%;
content: '';
display: block;
height: 125px;
position: relative;
left: -6px;
top: -6px;
width: 125px;
}
#tls .tls-d .tls-products .tls-product:hover {
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.15);
}
@media screen and (min-width: 940px) {
#tls .tls-d .tls-products .tls-product {
height: 150px;
width: 150px;
}
#tls .tls-d .tls-products .tls-product:before {
height: 170px;
left: -10px;
top: -10px;
width: 170px;
}
}
#tls .tls-e .tls-bonuses ul {
display: block;
margin: 0 auto;
max-width: 900px;
min-width: 280px;
width: 100%;
}
#tls .tls-e .tls-bonuses ul li {
float: left;
list-style: none;
padding: 0 5px;
width: 33.33333%;
}
#tls .tls-e .tls-bonus {
background: #fff;
margin: 0 auto;
max-width: 250px;
padding: 10px 5px;
width: 100%;
}
#tls .tls-e .tls-bonus img {
width: 100%;
}
#tls .tls-e .tls-bonus h4 {
border-bottom: 1px solid #000;
color: #000;
margin: 10px auto 0;
max-width: 150px;
width: 100%;
}
#tls .tls-f {
background: rgba(0, 0, 0, 0.5);
}
#tls .tls-f .tls-title-f {
padding: 10px 0 0;
text-transform: uppercase;
}
#tls .tls-f .tls-title-f img {
display: block;
margin: 0 auto;
width: 75px;
}
