Landing Page

December 4, 2019

MOBILE Priority Landing page

Responsive HTML5 & CSS3 coding.

Live View

Please click here or the ‘Live View’ button below .

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”x-apple-disable-message-reformatting”>
<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet”>

– – – – – – – – – –

<!– header –>
<header>
<div class=”m-geotext”>Would you like to get a free <span>Strawberry</span> <medium>cheese cake?</medium></div>
<div class=”m-badgeheader”>
<div class=”m-badge”><span>100<small>%</small></span></div>
<div class=”m-badgetext”>Free Cake</div>
</div>
</header>
<!– /header –>

<!– step –>
<section class=”m-step”>
<div class=”m-calltoaction”>Please Choose one of the offers</div>
<larger>And get your free cake</larger>
<br> 
<nav>
<a href=”#”>Yes, I want free cake<span> »</span></a>
<div>Error message comes here</div>
<a href=”#”>I prefer another desert<span> »</span></a>
<div>Error message comes here</div>
<a href=”#”>No, I don’t want it<span> »</span></a>
<div>Error message comes here</div>
</nav>
<a class=”m-goback” href=”#”>« Exit</a>
</section>
<!– /step –>

</section>

– – – – – – – – – –

</body>
</html>

CSS

html {background:#fafafa;}
body {font-family:Segoe, “Segoe UI”, “DejaVu Sans”, “Trebuchet MS”, Verdana, “sans-serif”; font-size:12px; line-height:14px; color:#222; background:#e6e6e6; background:-ms-linear-gradient(top, #e6e6e6, #fafafa); background:-moz-linear-gradient(top, #e6e6e6, #fafafa); background:-webkit-gradient(linear, center top, center bottom, from(#e6e6e6), to(#fafafa));}
* {margin:0; padding:0; box-sizing:border-box; text-align:center; /*-webkit-transition:all 0.3s; transition:all 0.3s;*/}
a, a img {text-decoration:none; border:0;}
img {display:block;}

.m-wrapper {position:relative; width:100%; max-width:880px; margin:auto; padding:30px 0 0;}

header {position:absolute; width:390px; top:30px; right:0; z-index:9;}
.m-geotext {font-size:32px; line-height:34px; text-transform:uppercase;}
.m-geotext span {font-weight:bold; color:#cc0000;}
.m-badge {font-family:’Lobster’, cursive; transform:rotate(45deg); margin:60px auto -50px; /*background:#559966;*/ background:#222; width:70px; height:70px; line-height:60px; border-radius:10px; font-size:30px; color:#fff; text-indent:5px; text-shadow:0 0 1px rgba(0,0,0,.3); border:5px solid #ececec;}
.m-badge span {display:block; transform:rotate(-45deg);}
.m-badge span small {font-size:16px;}
.m-badgetext {width:260px; height:28px; font-family:’Lobster’, cursive; font-size:20px; line-height:26px; color:#222; word-spacing:100px; text-indent:6px; margin:auto; background:#fff; border-radius:5px;}
.m-calltoaction {font-size:18px; line-height:22px; color:#222; text-transform:uppercase;}

.m-pictures {width:100%; max-width:450px;}
.m-pictures img {width:100%; max-width:450px; height:auto; border:1px solid #fff;}

.m-step {position:absolute; width:100%; max-width:390px; bottom:0; right:0; font-size:18px; color:#222;}
.m-step larger {font-size:16px; line-height:20px;}
.m-step nav a {width:100%; height:50px; line-height:50px; margin-bottom:10px; display:block; box-shadow:0 0 1px rgba(0,0,0,.3);}
.m-step nav a span {display:none;}
.m-step nav a:first-child {background:#4158b2; color:#fff;}
.m-step nav a:nth-child(3) {background:#6fa3f1; color:#fff;}
.m-step nav a:nth-child(5) {background:#fff; color:#666;}

.m-step nav div {width:100%; font-size:12px; color:#fff; background:#cc0000; margin:-5px 0 5px; padding:2px 0; display:none;/**/}
.m-goback {display:block; margin:20px auto 0; font-size:12px; color:#999;}

::-webkit-input-placeholder {color:#587ed2; opacity:1;}
:-ms-input-placeholder {color:#587ed2; opacity:1;}
::-moz-placeholder {color:#587ed2; opacity:1;}
:-moz-placeholder {color:#587ed2; opacity:1;}

– – – – – – – – – –

@media (max-width:420px) {
.m-wrapper {margin:0; padding:0; width:100vw; max-width:100vw;}
header {position:absolute; top:0; padding:10px 0 10px; color:#fff; opacity:1;
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));
background: -o-linear-gradientbottom, rgba(0,0,0,1), rgba(0,0,0,0);
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.m-geotext {font-size:6.6vw; line-height:7vw;}
.m-geotext span {color:#ff3333;}
/*.m-geotext medium {display:none;}*/
.m-calltoaction {color:#fff;}

.m-pictures {background:#000; width:100vw; overflow:hidden;}
.m-pictures img {opacity:.7; width:112vw; margin-left:-6vw;}

.m-step {position:absolute; width:88vw; margin:auto; bottom:5px; left:0; right:0; color:#ccc;}
.m-step input:first-child, .m-step nav select:first-child, .m-step input:nth-child(3), .m-step nav select:nth-child(3), .m-step nav select:nth-child(5), .m-step input placeholder {color:#fff; background:rbga(0,0,0,.2);}
.m-confirmation {color:#ddd;}

::-webkit-input-placeholder {color:#fff;}
:-ms-input-placeholder {color:#fff;}
::-moz-placeholder {color:#fff;}
:-moz-placeholder {color:#fff;}
}