Landing Page Demo

Developer
Andy Hullinger
Size
4,804 Kb
Views
30,360
  1. Landing Page Demo Previews
  2. Landing Page Demo HTML Codes
  3. Landing Page Demo CSS Codes
  4. Landing Page Demo JS Codes

How do I make an landing page demo?

Quick example of a "one-page-design" for a landing page: points of interest...1.) Background (background-size:cover) image pinned to bottom right and filling header element.. What is a landing page demo? How do you make a landing page demo? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Landing Page Demo Previews
IQ Test

Landing Page Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Landing Page Demo</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *{ margin: 0;padding: 0;box-sizing:border-box;
}
li{list-style-type: none;}
body{ font-family: Arial; font-size: 24px; line-height: 32px;
}
section{ position: relative; padding:100px 10% 0 10%;
}
.product {display: block; float: left; padding-right: 20px; width: 400px;}
.description{ background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/pinjustice-protest.jpg") no-repeat right bottom; background-size: cover; height: 600px; color:white;
}
.benefits{margin-bottom: 100px;
}
.team{ background-color: orange; padding-bottom: 100px; text-align: center;
}
.nav{ display: flex; flex-direction: row; justify-content: center; align-items: center; height: 50px; text-align: center; box-shadow: 0 3px 20px rgba(0,0,0,.4); font-size: 1.3em;
}
.nav li{ width: 33%;
}
ul:not(.nav){ display:flex; justify-content: space-around; font-size: 80%; width: 80%; margin: 50px auto;
}
footer{ text-align: center; font-size: 14px; background-color: #333; height: 300px; color: white;
}
header{ position: fixed; width: 100%; z-index: 1; background-color: rgb(164,	22,	45)	;
}
h1,h2 { text-transform: uppercase; margin-bottom: .5em; line-height: 110%;
}
h1{ font-size: 200%; text-shadow: 3px 3px 2px rgb(164,22,45), 6px 6px 5px rgba(0,0,0,.8); margin-top: 150px;
}
a{ font-size: 18px;text-decoration: none; color:white; text-transform: uppercase; text-shadow: 2px 2px 3px rgba(0,0,0,.4);
}
a {transition:color .3s;}
a:hover{color:orange;}
figure{position: relative; }
figure img{width: 180px;height: 180px;border-radius: 50%}
figcaption{width: 180px; height: 180px; position: absolute; top: 0; right: 0;bottom: 0;left: 0; border-radius: 50%; background-color: rgba(0,0,0,.5); color:orange; line-height: 180px;
}
/*css animation to reveal figcaptions*/
figcaption{ opacity:0; transition: opacity .3s;
}
figcaption:hover{ opacity:1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <nav> <ul class="nav"> <li><a href="#top">The App</li></a> <li><a href="#how-it-works">How it Works</li></a> <li><a href="#meet-our-team">Meet Our Team</li></a>
</ul>
</nav>
</header>
<section id="top" class="description"> <img class="product" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/pinjustice-product.png"> <h1>What this app does</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus dolore ut unde, molestiae necessitatibus deserunt harum consectetur earum sequi optio.</p>
</section>
<section id="how-it-works" class="benefits"> <h2>How our app will help you</h2> <p><em>100 words</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta pariatur sed odit cumque perspiciatis reprehenderit autem vero, cupiditate id quia, magni, laboriosam voluptatem consequuntur eius nisi neque. Minus nostrum quod quo tempora illo adipisci cupiditate id mollitia dolore et consequuntur ab odio, placeat explicabo esse, blanditiis aliquid nam doloribus earum at! Libero natus, maxime tempore eum fugit beatae, sed veritatis illum ad accusantium, excepturi. Perferendis placeat suscipit cupiditate quasi reiciendis quisquam excepturi doloremque, minus, possimus fugit assumenda delectus repudiandae consequatur maxime nihil, ipsam dolorem! Iusto optio quidem, fugit voluptas possimus totam placeat esse facilis, aspernatur odio animi.</p> <ul> <li> <h3>A benefit</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea at accusantium cupiditate animi optio. Dignissimos reiciendis commodi accusamus accusantium temporibus?</p> </li> <li> <h3>One More</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea at accusantium cupiditate animi optio. Dignissimos reiciendis commodi accusamus accusantium temporibus?</p> </li> <li> <h3>Finally</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea at accusantium cupiditate animi optio. Dignissimos reiciendis commodi accusamus accusantium temporibus?</p> </li> </ul>
</section>
<section id="meet-our-team" class="team"> <h2>Meet The Team</h2> <ul> <li> <figure> <img src="http://www.placekitten.com/220/300" > <figcaption><h3>Jackie</h3></figcaption> </figure> </li> <li> <figure> <img src="http://www.placekitten.com/400/400" > <figcaption><h3>Shyla</h3></figcaption> </figure> </li> <li> <figure> <img src="http://www.placekitten.com/600/600" > <figcaption><h3>Supraja</h3></figcaption> </figure> </li> <li> <figure> <img src="http://www.placekitten.com/500/500" > <figcaption><h3>Stacia</h3></figcaption> </figure> </li> </section> <footer> <small>&copy; 2014 PINJUSTICE | A Non-Profit Organization | All Rights Reserved</small> </footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Landing Page Demo - Script Codes CSS Codes

*{ margin: 0;padding: 0;box-sizing:border-box;
}
li{list-style-type: none;}
body{ font-family: Arial; font-size: 24px; line-height: 32px;
}
section{ position: relative; padding:100px 10% 0 10%;
}
.product {display: block; float: left; padding-right: 20px; width: 400px;}
.description{ background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/pinjustice-protest.jpg") no-repeat right bottom; background-size: cover; height: 600px; color:white;
}
.benefits{margin-bottom: 100px;
}
.team{ background-color: orange; padding-bottom: 100px; text-align: center;
}
.nav{ display: flex; flex-direction: row; justify-content: center; align-items: center; height: 50px; text-align: center; box-shadow: 0 3px 20px rgba(0,0,0,.4); font-size: 1.3em;
}
.nav li{ width: 33%;
}
ul:not(.nav){ display:flex; justify-content: space-around; font-size: 80%; width: 80%; margin: 50px auto;
}
footer{ text-align: center; font-size: 14px; background-color: #333; height: 300px; color: white;
}
header{ position: fixed; width: 100%; z-index: 1; background-color: rgb(164,	22,	45)	;
}
h1,h2 { text-transform: uppercase; margin-bottom: .5em; line-height: 110%;
}
h1{ font-size: 200%; text-shadow: 3px 3px 2px rgb(164,22,45), 6px 6px 5px rgba(0,0,0,.8); margin-top: 150px;
}
a{ font-size: 18px;text-decoration: none; color:white; text-transform: uppercase; text-shadow: 2px 2px 3px rgba(0,0,0,.4);
}
a {transition:color .3s;}
a:hover{color:orange;}
figure{position: relative; }
figure img{width: 180px;height: 180px;border-radius: 50%}
figcaption{width: 180px; height: 180px; position: absolute; top: 0; right: 0;bottom: 0;left: 0; border-radius: 50%; background-color: rgba(0,0,0,.5); color:orange; line-height: 180px;
}
/*css animation to reveal figcaptions*/
figcaption{ opacity:0; transition: opacity .3s;
}
figcaption:hover{ opacity:1;
}

Landing Page Demo - Script Codes JS Codes

$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top-45 //notice I subtract "50px" from the "offest.top" to account for our fixed nav bar. }, 500); return false; } } });
})
Landing Page Demo - Script Codes
Landing Page Demo - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 3.5
Size 4,804 Kb
Views 30,360
Do you need developer help for Landing Page Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
GSAP Animation with TweenMax
Simple animated infographic
Simple photo captions
My Quote Assignment
Presentation Template with Animation
Mageractive Class 1
Banner Example
MFA iteration example
Mageractive Week 1
Example Infographic
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!