Landing page
Landing page is the first contact point with the Internet, including search engines like Google. It plays a vital role in digital marketing by:
- Driving Conversions: Its main goal is to turn visitors into leads or customers by offering something valuable in exchange for contact information.
- Focused Messaging: Unlike homepages, landing pages target specific audiences, offers, or campaigns, minimizing distractions to guide visitors toward a clear goal.
- Supporting Campaigns: They align with marketing efforts, directing traffic from email, social media, or ads to tailored pages matching the campaign's message.
- Data Insights: Landing pages track user interactions, providing data on traffic sources, audience preferences, and engagement to refine strategies.
- A/B Testing: Businesses can test elements like headlines or buttons to optimize conversions.
- Showcasing Value: A well-crafted landing page communicates the brand's value proposition and highlights key benefits.
In essence, landing pages are focused tools for driving specific actions, critical for marketing success.
How to create one?
Although search engines can visit and crawl modern JavaScript powered Single Page Applications, still, the best option is to have simple, static web page. There is a wast options of free and commercial templates available. One option is to use example from W3 Schools templates, updating it with previously created graphical identity.
For example, our solution is based on Demo and after rework looks like this.
./html/index.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bullshit Bingo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description"
content="A complete source and guides on how to build a progressive web app using Vue and Oracle database.">
<meta name="keywords" content="VueJS, Oracle database, Progressive Web Applications">
<link rel="icon" href="./assets/favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N0KY026CJS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-N0KY026CJS');
</script>
<!-- end - Google Analytics -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />-->
<style>
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
img{vertical-align:middle}a{color:inherit}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-half{float:left;width:100%}
@media (max-width:600px){
.w3-hide-small{display:none!important}
}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (min-width:993px){.w3-hide-large{display:none!important}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}
.w3-display-container{position:relative}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-container{padding:0.01em 16px}
.w3-row-padding,.w3-row-padding>.w3-half{padding:0 8px}
.w3-card{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}
.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-jumbo{font-size:64px!important}
.w3-center{text-align:center!important}
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}
.w3-section{margin-top:16px!important;margin-bottom:16px!important}
.w3-text-white{color:#fff!important}
.w3-text-grey{color:#757575!important}
.w3-black{color:#fff!important;background-color:#000!important}
.w3-white{color:#000!important;background-color:#fff!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-grayscale-min{filter:grayscale(50%)}
.w3-background{background-color:#f6f9ff}
.w3-background-image-main{background-position:center;background-size:cover;min-height:100%;background-image:url('./assets/background.jpg')}
.w3-right{float:right!important}
</style>
<style>
html {
scroll-behavior: smooth;
}
body,
html {
height: 100%;
line-height: 1.8;
background-color: #f6f9ff;
color: #5a564f;
}
.w3-yuge {
font-size: 5em !important;
}
.w3-bar .w3-button {
padding: 16px;
}
.w3-background-image-main {
background-position: center;
background-size: cover;
min-height: 100%;
background-image: url('./assets/background.jpg');
}
.w3-background {
background-color: #f6f9ff;
}
.w3-button {
border-radius: 4px;
}
.w3-card-min-height {
min-height: 480px;
background-color: white;
padding: 32px 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
align-items: center;
}
.w3-card-min-height hr {
width: 50px;
margin: 0 auto 24px;
border-top: 2px solid #000;
}
.w3-card-min-height p {
margin-bottom: 24px;
}
@media (max-width: 800px) {
.w3-half {
width: 100%;
margin-bottom: 32px;
}
.w3-card-min-height {
min-height: auto;
padding-bottom: 160px !important;
margin: 0 16px;
}
}
@media (min-width:801px) {
.w3-half {
width: 48% !important;
margin: 1% !important;
}
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-background w3-card" id="myNavbar">
<a href="#home" class="w3-bar-item w3-button w3-wide"><i class="fa fa-home"></i> HOME</a>
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<a href="https://apps.bsbingo.me" class="w3-bar-item w3-button">APPS</a>
<a href="https://wiki.bsbingo.me" class="w3-bar-item w3-button">WIKI</a>
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium"
onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large"
style="display: none" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close
×</a>
<a href="https://apps.bsbingo.me" class="w3-bar-item w3-button">APPS</a>
<a href="https://wiki.bsbingo.me" class="w3-bar-item w3-button">WIKI</a>
</nav>
<!-- Header with full-height image -->
<header class="w3-background-image-main w3-display-container w3-grayscale-min" id="home">
<div class="w3-display-left w3-text-white" style="padding: 48px">
<span class="w3-yuge w3-hide-small">Bullshit Bingo</span><br />
<span class="w3-jumbo w3-hide-large w3-hide-medium">Bullshit Bingo</span><br />
<span class="w3-xlarge">Release the Energy to Focus on Business</span>
<p>
<a href="#about"
class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Learn
more and start today</a>
</p>
</div>
<div class="w3-display-bottomright w3-text-grey w3-large" style="padding: 24px 48px">
<a href="https://github.com/erlihs" target="_blank"><i class="fa fa-github w3-hover-opacity"></i></a>
<a href="https://www.twitter.com/erlihs" target="_blank"><i class="fa fa-twitter w3-hover-opacity"></i></a>
</div>
</header>
<!-- About Section -->
<div class="w3-container" style="padding: 80px 16px" id="about">
<div class="w3-row-padding w3-center" style="margin-top: 32px">
<div class="w3-half w3-display-container w3-card-min-height"
style="margin-bottom: 64px; position: relative;">
<hr />
<i class="fa fa-bullseye w3-margin-bottom w3-jumbo w3-center"></i>
<p class="w3-large">Strategic</p>
<p>
Turning vision into action starts with understanding the problem - defining its scope and
challenges. Create a clear roadmap with milestones to guide your efforts. Build the necessary skills
and develop habits that promote consistency, discipline, and progress toward achieving your goals.
</p>
<a href="https://wiki.bsbingo.me/introduction/index.html" class="w3-button w3-black"
style="position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);">Start
exploring</a>
</div>
<div class="w3-half w3-display-container w3-card-min-height"
style="margin-bottom: 64px; position: relative;">
<hr />
<i class="fa fa-wikipedia-w w3-margin-bottom w3-jumbo w3-center"></i>
<p class="w3-large">Hands on</p>
<p>
A practical guide to building applications with the VueJS framework and Oracle Database. Learn to
set up VueJS for responsive front-end development, connect it to Oracle Database for robust data
management, and optimize performance for seamless functionality.
</p>
<a href="https://wiki.bsbingo.me/guide/index.html" class="w3-button w3-black"
style="position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);">Start building</a>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-32">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>Home</a>
<p>
The content provided on this website is for <strong>educational purposes only</strong> and should not be construed as professional advice. While every effort is made to ensure the accuracy and reliability of the information presented, the authors and contributors of this website <strong>do not bear any responsibility or liability</strong> for any actions taken based on the content provided herein.
All materials, including but not limited to code snippets, documentation, and resources, are made available under the <strong>MIT License</strong>. Use of this content is at your own risk, and by accessing this website, you agree to the terms of the MIT License, including its limitations on liability and warranty.
If you have specific concerns or require professional advice, we encourage you to consult with a qualified expert in the relevant field.
</p>
<div class="w3-xlarge w3-section">
<a href="https://github.com/erlihs" target="_blank"><i class="fa fa-github w3-hover-opacity"></i></a>
<a href="https://www.twitter.com/erlihs" target="_blank"><i class="fa fa-twitter w3-hover-opacity"></i></a>
</div>
</footer>
<script>
// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");
function w3_open() {
if (mySidebar.style.display === "block") {
mySidebar.style.display = "none";
} else {
mySidebar.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
}
</script>
</body>
</html>