Landing Page Screen-Shot Landing Page Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Les célébrités les plus dangereuses en 2014 selon McAfee</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Will load font files for browsers other than IE7,8 -->
<!--[if gte IE 9]><!-->
<link rel="stylesheet" type="text/css" href="http://www.intel.com/etc/designs/ver/5.0.40.5.14/intel/us/en/css/latin.monotype.fonts.css" media="screen">
<!--<![endif]-->
<!-- Will load font file for browsers IE7,8 -->
<!--[if (gt IE 6)&(lt IE 9)]>
<link rel="stylesheet" type="text/css" href="http://www.intel.com/etc/designs/intel/us/en/css/latin.monotype.fonts.oldie.css" media="screen" />
<![endif]-->
<!-- Will load IE specific CSS for IE7 - IE9 -->
<!--[if (gt IE 6)&(lte IE 9)]>
<link rel="stylesheet" type="text/css" href="http://www.intel.com/etc/designs/intel/us/en/css/intel.main.ie.css" media="screen" />
<![endif]-->
<style>
body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
}
.sprite {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url(../sprite.png) 0 0 no-repeat;
display: inline-block;
*display: block;
*zoom: 1;
*margin-bottom: 5px;
color: #ffffff;
}
#wrapper {
width: 1200px;
margin: 0 auto;
background-color: #ffffff;
font-size: 1.8em;
font-weight: 100;
color: #53565a;
}
#header {
background: url("../main.png") 0 0 no-repeat;
height: 382px;
padding: 0;
}
h1 {
font-weight: 100;
font-size: 2.5em;
margin: 95px 0 0 400px;
padding: 0;
line-height: 60px;
font-family: "intel-clear", Arial, Tahoma, Helvetica, sans-serif;
}
h1 span {
color: #b71234;
}
h2 {
font-size: 1.25em;
line-height: 100%;
margin-bottom: 10px;
font-weight: bold;
}
#leftColumn h2 {
font-size: 1.15em;
}
h2#prName {
margin-top: 13px;
margin-bottom: 7px;
}
h2#prName a {
text-decoration: none;
}
h3 {
font-size: 1.0em;
line-height: 100%;
margin-bottom: 5px;
font-weight: bold;
}
#bigMcShield {
width: 62px;
height: 66px;
position: relative;
top: 60px;
left: 397px;
background-position: -20px -60px;
}
.red {
color: #b71234;
}
a {
outline: 0;
}
a, a:active, a:visited, #content-main #leftColumn sup {
color: #005387;
}
ul {
list-style: none;
}
strong {
font-weight: bold;
}
#content-main {
width: 1150px;
margin: 0 auto;
padding: 0 25px;
}
#leftColumn {
float: left;
padding-left: 0;
width: 51%;
}
#leftColumn p {
margin-top: 0;
margin-bottom: 0;
}
#leftColumn #prContent {
margin-top: 10px;
}
#leftColumn ol {
padding: 0 0 0 27px;
margin-top: 0;
margin-bottom: 0;
}
#leftColumn li {
padding: 3px 0 4px;
}
#leftColumn li.red {
font-weight: bold;
}
#leftColumn li.last {
padding-bottom: 0;
}
#rightColumn {
float: right;
width: 47%;
background: #e7e7e8;
padding-bottom: 15px;
}
#rightColumn h2 {
color: #005387;
}
#rightColumn .red {
font-size: 1.65em;
margin: 0;
}
#rightColumn #btn {
margin-top: 10px;
}
#rightColumn .left {
margin: 0 0 0 1.3em;
}
#rightColumn .boxImg {
width: 180px;
height: 276px;
display: inline-block;
background-position: -116px 0px;
margin: -1.7em 1.3em 0 0;
}
#rightColumn .left .sale {
font-size: 0.9em;
margin-bottom: 0;
margin-top: 0;
}
#rightColumn .left .sale span {
text-decoration: line-through;
}
#protection {
padding: 0;
margin: 0 0.9em;
}
#protection li {
font-size: 0.93em;
padding: 1.1em 0 1.1em 4.6em;
}
#protection .protect {
background: url("../protect.png") 0 10px no-repeat;
}
#protection .guard {
background: url("../guard.png") 0 10px no-repeat;
}
#protection .mobile {
background: url("../mobile.png") 0 13px no-repeat;
}
#protection .password {
background: url("../psw.png") 0 13px no-repeat;
}
#protection .cloud {
background: url("../cloud.png") 0 10px no-repeat;
}
#download {
float: left;
width: 100%;
font-size: 0.85em;
}
#download p {
padding-left: 10px;
}
#download a {
color: #58595b;
}
#footer {
background-color: #444444;
color: #FFFFFF;
clear: both;
}
.left {
float: left;
margin-top: 15px;
}
.right {
float: right;
}
#footer #links {
width: 100%;
text-align: center;
}
#footer #links ul {
padding: 5px 0 25px;
margin: 20px 90px 0;
border-top: 1px solid #FFFFFF;
}
#footer #links ul li {
padding-right: 20px;
padding-left: 10px;
}
#footer ul li {
display: inline-block;
font-size: 0.6em;
}
#social {
font-size: 0.7em;
float: left;
margin-top: 25px;
margin-right: 40px;
}
#social #text {
font-size: 1em;
margin-right: 10px;
margin-top: 3px;
}
#social li {
float: left;
margin-right: 5px;
}
#social li a {
display: block;
width: 25px;
height: 25px;
}
#social li.facebook {
background: url("../sprite.png") -122px -280px no-repeat;
}
#social li.twitter {
background: url("../sprite.png") -150px -280px no-repeat;
}
#social li.googlePlus {
background: url("../sprite.png") -208px -280px no-repeat;
}
#social li.pinterest {
background: url("../sprite.png") -238px -280px no-repeat;
}
#social li.youtube {
background: url("../sprite.png") -180px -280px no-repeat;
}
#footer ul li#copyRight {
padding-right: 0;
}
#footer a {
text-decoration: none;
color: #FFFFFF;
}
#footer #icons {
margin: 0 25px 0 120px;
}
.logo {
font-size: 0.85em;
font-family: "intel-clear", Arial, Tahoma, Helvetica, sans-serif;
}
#smMcShield {
width: 38px;
height: 42px;
position: relative;
top: 15px;
left: 0;
margin-right: 15px;
background-position: -34px -167px;
}
#mcafeeSecure {
float: right;
margin-top: 30px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* IE7 fixes */
.ie7 .clearfix {
display: block;
}
.ie7 #footer ul li {
display: inline;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('body').hide();
if (window.location.href.indexOf("test=true") > -1) {
$('body').css('display', 'block');
}
});
</script>
</head>
<!--[if IE 7]>
<body class="ie7">
<![endif]-->
<!--[if !IE]> -->
<body>
<!-- <![endif]-->
<div id="wrapper">
<div id="header">
<span class="sprite" id="bigMcShield"></span>
<h1>Les célébrités <span>les plus .dangereuses</span> en 2014<br> .selon McAfee</h1>
</div>
<div id="content-main">
<div id="leftColumn">
<h2>Grâce à McAfee, il n'y a plus de danger à suivre l'actualité de vos stars préférées</h2>
<p>Les cybercriminels profitent de la popularité des célébrités dans les résultats de recherche pour vous attirer sur des sites qui peuvent endommager votre ordinateur ou votre mobile.</p>
<p id="prContent">Protégez vos données et votre identité sur tous vos équipements avec <a target="_blank" title="McAfee LiveSafe" href="../offer.aspx?id=750541">McAfee LiveSafe</a><sup>™</sup> grâce à cette offre .à durée limitée !</p>
<h3>Liste des 10 célébrités françaises les plus dangereuses de 2014 selon McAfee :</h3>
<ol>
<li class="red">Shy’m</li>
<li>Luc Besson</li>
<li>Gad Elmaleh</li>
<li>Alain Delon</li>
<li>Omar Sy</li>
<li>Nicolas Sarkozy</li>
<li>Marion Cotillard</li>
<li>Nabilla Benattia</li>
<li>François Hollande</li>
<li class="last">Teddy Riner</li>
</ol>
</div>
<!-- end leftColumn -->
<div id="rightColumn">
<div class="clearfix">
<div class="left">
<h2 id="prName"><a target="_blank" title="McAfee LiveSafe" href="../offer.aspx?id=750541">McAfee LiveSafe<sup>™</sup></a></h2>
<p class="sale">Tarif normal : <span>€Price</span><br>Pour le moment, seulement : </p>
<p class="red"><strong>€Price</strong></p>
<p id="btn">
<a target="_blank" title="Acheter" href="../offer.aspx?id=750541">
<img border="0" src="../buyBtn.png">
</a>
</p>
</div>
<div class="sprite boxImg right"></div>
</div>
<ul id="protection">
<li class="bullets protect">Protection de tous vos équipements</li>
<li class="bullets guard">Protection contre les virus et les menaces .en ligne</li>
<li class="bullets mobile">Sécurité complète de l'environnement mobile</li>
<li class="bullets password">Gestionnaire de mots de passe</li>
<li class="bullets cloud">Stockage sécurisé dans le cloud</li>
</ul>
</div>
<!-- end rightColumn -->
</div>
<!-- end main -->
<div id="download">
<p>Pour télécharger la présentation graphique répertoriant le top 10 de cette année, cliquez <a target="_blank" title="Cliquez ici" href="../campaign.aspx?cid=157574">ici.</a></p>
</div>
<div id="footer">
<div id="icons" class="clearfix">
<div class="left logo">
<span class="sprite" id="smMcShield"></span>
<span>McAfee®</span>
</div>
<div class="right">
<div id="social">
<ul>
<li id="text">Suivez-nous sur les réseaux sociaux.</li>
<li class="sprite facebook">
<a target="_blank" title="Facebook" href="https://www.facebook.com/McAfee">Facebook</a>
</li>
<li class="sprite twitter">
<a target="_blank" title="Twitter" href="https://twitter.com/McAfeeConsumer">Twitter</a>
</li>
<li class="sprite youtube">
<a target="_blank" title="Youtube" href="http://www.youtube.com/mcafee4consumers">Youtube</a>
</li>
<li class="sprite googlePlus">
<a target="_blank" title="Google Plus" href="https://plus.google.com/+mcafee">Google Plus</a>
</li>
<li class="sprite pinterest">
<a target="_blank" title="Pinterest" href="http://pinterest.com/mcafee/">Pinterest</a>
</li>
</ul>
</div>
<div id="mcafeeSecure">
<a target="_blank" href="../RatingVerify?ref=home.mcafee.com&lang=FR" class="m_secure" title="HACKER SAFE certified sites prevent over 99.9% of hacker crime." id=""><img style="border-width:0px;" src="../55.gif?lang=CA" oncontextmenu="javascript:alert("Copie interdite légalement - McAfee SECURE est une marque de McAfee");return false;" title="Les sites McAfee Secure vous protègent contre le vol d'identité, les fraudes liées aux cartes de crédit, les logiciels espions, le spam, les virus et les escroqueries en ligne." id=""></a>
</div>
</div>
</div>
<div id="links">
<ul>
<li><a target="_blank" href="../AboutUs.aspx" title="À propos de McAfee">À propos de McAfee</a></li>
<li><a target="_blank" href="../AboutUs.aspx?id=contactUs" title="Contacter McAfee">Contacter McAfee</a></li>
<li><a target="_blank" href="../Support.aspx" title="Support">Support</a></li>
<li><a target="_blank" href="../consumer/french-fr/" title="Télécharger la politique de confidentialité">Télécharger la politique de confidentialité</a></li>
<li><a target="_blank" href="../PoliciesAndAgreement.aspx" title="Mentions légales">Mentions légales</a></li>
<li id="copyRight">© 2014 McAfee, Inc.</li>
</ul>
</div>
</div>
<!-- end footer -->
</div>
</body>
</html>