Landing Page Html

Developer
Alex Sperellis
Size
3,717 Kb
Views
26,312
  1. Landing Page Html Previews
  2. Landing Page Html HTML Codes
  3. Landing Page Html CSS Codes

How do I make an landing page html?

For designers. What is a landing page html? How do you make a landing page html? This script and codes were developed by Alex Sperellis on 16 September 2022, Friday.

Landing Page Html Previews
IQ Test

Landing Page Html - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Landing Page Html</title> <link rel='stylesheet prefetch' href='http://dev2.simon-ops.com/dist/styles/web.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- LANDING PAGE HTML -->
<!-- MALL LOGO HEADER -->
<section class="navbar"> <div class="container"> <a class="navbar-brand" href="/" title="Simon" style="width: 100%;"> <!-- replace with img tag and specific logo and make it black--> <img src="http://95a4a3c4724613be1dad-8055574429570516d3dfd359504a25ed.r85.cf1.rackcdn.com/malllogos/231/231.svg" class="navbar-logo" style="margin-left: auto;margin-right: auto;float: none;"> </a> </div>
</section>
<!-- JUMBOTRON EXAMPLES-->
<!-- NON FULL WIDTH-->
<div class="jumbotron jumbotron-fluid jumbotron-banner jumbotron-banner-no-stack mall-insider-hero"> <picture class="jumbotron-bg"> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/MALLINSIDER/mallinsider_banner_976x400.jpg" media="(min-width: 992px)"> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/MALLINSIDER/mallinsider_banner_751x300.jpg" media="(min-width: 768px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/MALLINSIDER/mallinsider_banner_320x300.jpg" alt="1,000 Reasons To Join" class="img-full container-width"> </picture> <div class="container-fluid"> <h6 class="jumbotron-desc text-white">Simon Landing Page Demo</h6> <h3 class="jumbotron-title text-white">HOW TO CODE<br>THE SIMON WAY</h3> </div>
</div>
<!--FULL WIDTH JUMBOTRON-->
<div class="jumbotron jumbotron-fluid jumbotron-hero"> <picture class="jumbotron-bg"> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/CONTACT/contact_banner_2000x400.jpg" media="(min-width: 2000px)"> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/CONTACT/contact_banner_1200x400.jpg" media="(min-width: 1200px)"> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/CONTACT/contact_banner_1024x400.jpg" media="(min-width: 1024px)"> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/CONTACT/contact_banner_992x400.jpg" media="(min-width: 992px)"> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/CONTACT/contact_banner_768x300.jpg" media="(min-width: 768px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/CONTACT/contact_banner_320x300.jpg" alt="A World of Shopping Awaits You. All Over The World." class="img-full"> </picture> <div class="container-fluid"> <h6 class="jumbotron-desc text-white">Full Width Hero</h6> <h3 class="jumbotron-title text-white">YOU<br>GOT IT.</h3> </div>
</div>
<!--END JUMBOTRONS-->
<!--BODY CONTENT-->
<div class="container no-gutter-mobile"> <div class="row"> <div class="col-xs-12 no-gutter-mobile"> <!-- DESKTOP IMAGE AND MOBILE IMAGE --> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-full-img.jpg" media="(min-width: 545px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-full-img-mobile.jpg" alt="1,000 Reasons To Join" class="img-full"> </picture> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="simon-section"> <p>Images should be the max height of the grid col they will reside in.</p> <p>Here are full, 2, and 3 col sizes</p> <ul> <li>container width = 1140 x any height. mobile = 544px x any height</li> <li>2 col desktop stacked on mobile = 570px x any height for each image (code example below)</li> <li>3 col desktop stacked on mobile = 380px x any height for each image - for this one there needs to be extra work. when they stack their cols will be 544px but they are only 380 so you can do one of two things. change class from img-fluid to img-full to stretch the width OR - use a picture tag and make sure the mobile version is 544px</li> </ul> <p>You can apply the same picture tag to any of the images in the other col structures as well or just use img tags.</p> <p>COMPRESS ALL IMAGES BEFORE PLACING ON THE CDN</p> </div> </div> </div> <div class="row"> <div class="col-xs-12 no-gutter-mobile"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-full-img-2.jpg" media="(min-width: 545px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-full-img-mobile.jpg" alt="1,000 Reasons To Join" class="img-full"> </picture> </div> </div> <div class="row"> <div class="col-xs-12"> <!-- HELPER CLASSES--> <div class="simon-section"> <p> You can put any HTML tags you would like in these pages as well but assuming you will mostly use images</p> <p>Here are some text color classes if you need some color changes</p> <ul> <li>text-white / text-black = white and black</li> <li class="text-brand-primary">text-brand-primary = plum</li> <li class="text-brand-secondary">text-brand-secondary = teal</li> <li class="text-brand-gray">text-brand-gray = simon gray</li> <li class="text-gray">text-gray = #757575</li> </ul> <p class="hidden-sm-down">Wanna hide stuff? use hidden-[breakpoint]-[up/down] as a class to hide an element. So hidden-sm-down on this element will hide it on mobile. breakpoints include - xl, lg, md, sm, xs - hidden-xs-up or down hides it across the board</p> <p>There are other utils. Ask Alex for more details</p> <p>Here's some tables - add class table-responsive to make a table responsive (horiz scroll if necessary on mobile)</p> </div> </div> <!-- TABLES --> <div class="col-xs-12"> <table class="table table-striped table-responsive"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row" width="10%">1</th> <td width="40%">Mark</td> <td width="40%">Otto</td> <td width="10%">@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <div class="col-xs-12"> <table class="table table-responsive"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row" width="10%">1</th> <td width="40%">Mark</td> <td width="40%">Otto</td> <td width="10%">@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <!-- CODE FOR TWO COLS OF IMAGES THAT STACK IN ORDER--> <div class="row"> <div class="col-sm-6 no-gutter-mobile" style="padding-right: 0;"> <img src="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-half-img-3.jpg" alt="Dont forget alts" class="img-fluid"> </div> <div class="col-sm-6 no-gutter-mobile" style="padding-left: 0;"> <img src="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-half-img-2.jpg" alt="Dont forget alts" class="img-fluid"> </div> </div> <!-- CODE FOR 3 COLS OF IMAGES THAT STACK IN ORDER--> <div class="row" style="margin-left: 0;margin-right: 0;"> <div class="col-sm-4 no-gutter-mobile" style="padding-left: 0;padding-right: 0;"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-third-img-1.jpg" media="(min-width: 545px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-third-img-1-mobile-2.jpg" alt="1,000 Reasons To Join" class="img-fluid"> </picture> </div> <div class="col-sm-4 no-gutter-mobile" style="padding-left: 0;padding-right: 0;"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-third-img-2.jpg" media="(min-width: 545px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-third-img-2-mobile-3.jpg" alt="1,000 Reasons To Join" class="img-fluid"> </picture> </div> <div class="col-sm-4 no-gutter-mobile" style="padding-left: 0;padding-right: 0;"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-third-img-3.jpg" media="(min-width: 545px)"> <!--[if IE 9]></video><![endif]--> <img srcset="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/Simon%20Website/LANDING%20PAGES/_demo/lp-third-img-3-mobile-2.jpg" alt="1,000 Reasons To Join" class="img-fluid"> </picture> </div> </div>
</div>
</body>
</html>

Landing Page Html - Script Codes CSS Codes

/* to prove the logo is there */
.navbar { background-color: #000;}
Landing Page Html - Script Codes
Landing Page Html - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded September 16, 2022
Rating 3
Size 3,717 Kb
Views 26,312
Do you need developer help for Landing Page Html?

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!

Alex Sperellis (asperellis) Script Codes
Name
A Pen by Alex Sperellis
Weather generator
Demo port page - for messing around
Twitch API
Wiki viewer
Custom File Input
Tribute page
Mobile Nav and Dropdown Animations
Header with search dropdown
Quote generator
Create amazing marketing copy 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!