<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width" />
<title>McAfee LiveSafe</title>
<link href="../samsung_mls.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pgcontainer">
<div class="logobar">
<img class="mclogo" src="../logo.png" title="McAfee®, Inc." alt="McAfee®, Inc.">
<img class="afflogo" src="../logo_samsung_132x46.jpg" alt="Samsung" title="Samsung" />
</div>
<div class="banner">
<div class="boxshot"><img src="../livesafe_boxshot-2014-pcmag.png" title="McAfee LiveSafe™" alt="McAfee LiveSafe™"></div>
<div class="txt">
<h1>McAfee LiveSafe™</h1>
<h2><span class="l1">You live your Digital Life.</span> <span class="l2">We keep it secure.</span></h2>
<div class="pricesec">
<div class="price">$somePrice <em>1-Year Subscription</em></div>
<div class="pricebtn">
<button class="button" title="Buy Now" value="Buy Now" onclick="window.location.href='somelink'">Buy Now</button>
<span class="bluetxt"><a href="somelink">Free Trial >></a></span>
</div>
</div>
</div>
</div>
<div class="contentarea">
<h3>Features Chart:</h3>
<ul>
<li>Protect all your PCs, Macs, smartphones and tablets</li>
<li>Guard against viruses and online threats</li>
<li>Comprehensive mobile security</li>
<li>Password manager</li>
<li>Secure cloud storage</li>
</ul>
<div class="video-container">
<iframe src="somevideo" frameborder="0" width="560" height="315" allowfullscreen=""></iframe>
</div>
</div>
</div>
<div class="footer">© 2003-2014 McAfee, Inc.</div>
</body>
</html>
*{padding:0;margin:0;text-align:left;}
html
{
font-size: 100%;
}
img{max-width:100%;}
body{font-family:Segoe UI,Helvetica,Myriad,Arial Light,Arial,Nimbus Sans L,sans-serif;color:#444;text-align:center;margin:auto;background-color:#444;}
.pgcontainer{background:../pattern_bottom.jpg) repeat scroll 0 0 #fff;max-width:1000px; text-align:center;margin:auto;padding-bottom:20px;}
.logobar {
background-color: #FFFFFF;
min-height: 50px;
padding: 10px;
}
.logobar img{max-width:100%;}
.logobar .afflogo{float:right;text-align:right;}
.logobar .mclogo {
float: left;}
.banner .boxshot{display:inline-block;margin-top:2%;max-height:370px;max-width:180px;width:35%;}
.banner .txt{display:inline-block;margin-top:3%;padding-left:3%;vertical-align:top;width:58%;}
.banner .txt h1{color:#444;font-size:1.4em;font-weight:bold;margin-bottom:0;vertical-align:top;font-weight:normal;}
.banner .txt h2{margin-bottom:10px;margin-top:10px;color:#444;text-transform:uppercase;font-size:1em; font-weight:normal;line-height:1.5em;}
h2.l1, h2.l2{display:inline-block;}
.banner .pricesec{width:100%;margin-top:0px;}
.banner .price{color:#b9153b;font-size:220%;font-weight:700;display:inline-block;padding-right:5px;vertical-align:top;}
.banner .pricebtn{display:inline-block; vertical-align:top;}
.banner .button{display:block;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-left-radius:5px;
text-indent:0px;
border:1px solid #84bbf3;
color:#ffffff;
font-size:120%;
font-style:normal;
min-height:35px;
cursor:pointer;
text-decoration:none;
text-align:center;
margin-top:10px;}
.banner .button:hover{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;}
.banner .bluetxt a{color:#2980b9;font-size:120%;text-decoration:none; display:block; margin-top:3px;}
.banner em{color:#666;font-style:italic;display:block;margin-top:3px;font-size:16px; font-weight:normal;}
.contentarea{clear:left;display:block; padding-left:5%;padding-right:5%;margin-top:15px;}
h3{color:#333;font-size:1.5em;padding-bottom:20px;font-weight:normal;}
ul{margin-left:5%;font-size:1.2em;line-height:1.6em;color:#333;padding-bottom:10px;}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.footer
{
max-width:1000px; text-align:center;margin:auto;padding-bottom:20px;color:#444; background-color:#fff;
}
@media (min-width:400px)
{
.banner .txt h1{font-size:1.5em;}
.banner .txt h2{font-size:1.2em; line-height:1.3em;}
}
@media (min-width:450px)
{
.banner .txt h1{font-size:1.8em;}
.banner .txt h2{font-size:1.4em;}
h3{font-size:1.7em;}
ul{font-size:1.3em;line-height:1.6em;}
}
@media (min-width:500px)
{
.banner .txt h1{font-size:2.1em;}
.banner .txt h2{font-size:1.4em;}
.banner .boxshot{width:30%;}
.banner .price{margin-right: 10px;}
h3{font-size:1.7em;}
ul{font-size:1.3em;line-height:1.6em;}
}