Halloween Promo

November 21, 2019

Photo Editing & Modal Popup Design & HTML / CSS Coding

Photo editing based web product for a campaign.

Live View

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

HTML

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

– – – – – – – – – –

</head>

<body>

<!– temporary background for layout / delete on implementing / start –>
<div style=”position:absolute; width:100%; height:100%; top:0; background:url(images/bg-delete.jpg) top center; z-index:-9;”></div>
<div style=”position:absolute; width:100%; height:100%; top:0; background:rgba(0,0,0,.7); z-index:-8;”></div>
<!– temporary background for layout / delete on implementing / end –>

<div class=”bf-container”>
<div class=”bf-title”>YOU’VE EARNED A <span>fREE</span> LIFETIME ACCESS</div>
<div class=”bf-subtitle”>Available for a limited time.</div>
<a class=”bf-visual” href=”#”><img src=”images/product.jpg”></a>

– – – – – – – – – –

</body>
</html>

CSS

body {font-family:Tahoma, Geneva, sans-serif; color:#000;}
* {margin:0; padding:0; box-sizing:border-box; overflow:hidden;}
a, a:visited, a:active, a img {text-decoration:none; border:0;}
.clear {clear:both;}

.bf-container {max-width:560px; position:relative; margin:auto; margin-top:calc(10vh + 5vw); padding:30px 20px 25px; background:#fff; border-radius:4px; box-shadow:0 0 10px #000; text-align:center;}

– – – – – – – – – –

.bf-buttons a {width:220px; height:50px; margin:0 10px 10px; display:inline-block; border:1px solid #646464; border-radius:4px; font-size:18px; line-height:50px; color:#fff; background:#008d5b;}
.bf-buttons a:hover {background:#00a854; border:1px solid #999; box-shadow:0 1px 5px #999;}
.bf-turnoff {position:absolute; top:5px; right:5px; width:14px; height:14px; color:#333; border:1px solid #666!important; font-size:12px; line-height:10px;}

@media (max-width:640px) {
.bf-container {max-width:calc(100% – 40px); margin-top:calc(8vh + 1vw); padding:20px;}
.bf-title {font-size:4.5vw; line-height:5vw;}
.bf-subtitle {font-size:2.5vw; line-height:3vw;}
}