James Bachini

A Simple Mobile Landing Page Template

mobile landing page code

Here’s a quick design template which is very flexible for mobile app / pin submit type offers.

mobile landing page codeYou can view the page at: http://jamesbachini.com/misc/simplemobile.htm

And download it from: http://jamesbachini.com/misc/simplemobile.zip

Obviously be careful that your button is above the fold on old and new phones. Big image + long headers can push it below which wouldn’t be good. This is great for testing new angles fast because it takes two mins to edit and get ready for traffic.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
<title>jamesbachini.com</title>
<meta name=”description” content=”A stupidly simple mobile landing page”>
<style>
html { font-size: 1rem; font-family: Arial,tahoma,sans-serif; background-color: #000; }
h1{ font-size: 1.4rem;}
h2{ font-size: 1.2rem;}
.image{width:90%; max-width: 90%; }
.container { background-color: #eee; width: 100%; text-align: center; }
.buttons { font-size: 2rem; cursor: pointer; text-shadow: 1px 1px #666; border: 1px solid rgba(100,100,100,0.5); color: #FFF; font-weight: bold; text-align: center; padding: 5px; margin: 15px; border-radius: 5px;  background: linear-gradient(to bottom,  rgba(255,90,0,1) 0%,rgba(255,175,75,1) 100%); box-shadow: 1px 2px 1px 0px rgba(50, 50, 50, 0.5); }
.buttons:hover { box-shadow: 3px 4px 3px 0px rgba(50, 50, 50, 0.5); text-shadow: 2px 2px #666; }
.bullets li { font-size: 0.8rem; text-align: left; margin-left: 20px; }
</style>
</head>
<body>
<div class=”container”>
<h1>1 Simple Trick For Making Great Mobile Landers</h1>
<h2>Profit today with a stupidly simple mobile landing page</h2>
<img src=”http://jamesbachini.com/misc/mobiles.png” class=”image”>
<div class=”buttons” onClick=”window.location = ‘http://jamesbachini.com’;”>
Download Now
</div>
<a href=”http://www.jamesbachini.com”>Click here to download App for FREE!</a>
<ul class=”bullets”>
<li>The number one benefit of this product</li>
<li>Will change your life because</li>
<li>You will miss the opportunity of a life time unless…</li>
</ul>
</div>
</body>
</html>


Get The Blockchain Sector Newsletter, binge the YouTube channel and connect with me on Twitter

The Blockchain Sector newsletter goes out a few times a month when there is breaking news or interesting developments to discuss. All the content I produce is free, if you’d like to help please share this content on social media.

Thank you.

James Bachini

Disclaimer: Not a financial advisor, not financial advice. The content I create is to document my journey and for educational and entertainment purposes only. It is not under any circumstances investment advice. I am not an investment or trading professional and am learning myself while still making plenty of mistakes along the way. Any code published is experimental and not production ready to be used for financial transactions. Do your own research and do not play with funds you do not want to lose.


Posted

in

by