Landing Page Prototype

Developer
Zane Riley
Size
7,132 Kb
Views
22,264
  1. Landing Page Prototype Previews
  2. Landing Page Prototype HTML Codes
  3. Landing Page Prototype CSS Codes
  4. Landing Page Prototype JS Codes

How do I make an landing page prototype?

Light parallax with an offset grid.. What is a landing page prototype? How do you make a landing page prototype? This script and codes were developed by Zane Riley on 11 September 2022, Sunday.

Landing Page Prototype Previews
IQ Test

Landing Page Prototype - Script Codes HTML Codes

<!DOCTYPE html>
<html class="modern">
<head> <meta charset="UTF-8"> <title>Landing Page Prototype</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://components.britcdn.com/components-1.3.24.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <div class="logo"></div> <div class="hero"> <video src="https://dl.dropboxusercontent.com/u/52491126/DSC_0073%20copy.MOV" autoplay="true" loop="true" muted="muted"></video> </div> <div class="cta-text"> <h1>Online classes taught by makers and creatives just like you.</h1> <p> <button class="primary" data-button="data-button">Teach a Class</button> </p> </div>
</main>
<section class="parallax-container"> <div class="parallax"> <div class="about" data-parallax="true" data-speed="0.35" data-direction="down" data-max-offset="165"> <p class="h2">Brit + Co online classes are taught by designers, entrepreneurs, artists and makers who are passionate about sharing their creativity with others.</p> </div> <div class="background" data-parallax="true" data-speed="0.3" data-direction="up"></div> <div class="media-object pattern" data-parallax="true" data-speed="0.19" data-direction="down" data-max-offset="100"></div> <div class="media-object instructor-photo" data-parallax="false" data-speed="0.75" data-direction="up" data-max-offset="0"> <div class="image-wrapper"><img src="http://imgh.us/Intro_To_Photo_BTS047.jpg" srcset="http://imgh.us/[email protected] 300w" alt=""/></div> </div> <div class="media-object bg-color" data-parallax="true" data-speed="0.06" data-direction="down" data-max-offset="35"> <div class="image-wrapper"><img src="http://imgh.us/color-box-bg.svg" alt=""/></div> </div> </div>
</section>
<div class="benefits"> <div class="text-container"> <h2 class="primary">Why Teach with Brit + Co?</h2> <p class="h2">Grow your brand with exposure to over 80 million people who love all things creative. Plus, you’ll earn a percent of every class sold. </p> </div>
</div>
<section class="how-it-works"> <h2 class="primary">How It Works</h2> <div class="row"> <div class="step step-one"><span class="h1 secondary step-number">01 </span> <h2 class="secondary">Teaching has never been easier.</h2> <div class="divider"><img src="http://imgh.us/step-one-divider.svg" alt=""/></div> <p class="h2">We’ll help you create a class concept, lesson plan and materials. Bring your expertise, we’ll help you organize it.</p> </div> <div class="illa step-one-image"><img src="http://imgh.us/your-class_1.svg" alt=""/></div> </div> <div class="row"> <div class="illa step-two-image"><img src="http://imgh.us/san-francisco.svg" alt=""/></div> <div class="step step-two"><span class="h1 secondary step-number">02 </span> <h2 class="secondary">No film or coding knowledge needed.</h2> <div class="divider"><img src="http://imgh.us/step-one-divider.svg" alt=""/></div> <p class="h2">We’ll fly you to San Francisco to film your class. Our video team will walk you through each step–makeup, filming and all.</p> </div> </div> <div class="row"> <div class="step step-three"><span class="h1 secondary step-number">03 </span> <h2 class="secondary">We'll take care of the rest.</h2> <div class="divider"><img src="http://imgh.us/step-one-divider.svg" alt=""/></div> <p class="h2">We’ll do the post-processing, create teaser videos and images and launch your class in the Brit + Co Shop. After that, sit back and relax.</p> </div> <div class="illa step-three-image"><img src="http://imgh.us/books.svg" alt=""/></div> </div>
</section>
<div class="space"></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/jquery.parallax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Landing Page Prototype - Script Codes CSS Codes

html,
body,
main { width: 100%; text-rendering: geometricPrecision !important;
}
html,
body { height: 1900px;
}
.hero { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: auto; margin-right: auto; background-color: #777; max-width: calc(100% - 1.6rem * 8); max-width: 1292px; min-width: 300px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: calc(1.6rem * 1); max-height: calc(1.6rem * 20); overflow: hidden;
}
.hero video { width: 100%; height: auto; z-index: 0; margin: 0;
}
.hero button { display: block; margin-right: auto; margin-left: auto;
}
.cta-text { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: white; top: 0; right: 0; bottom: 0; left: 0; max-width: calc(1440px * 6/12); margin: auto; padding: 2rem; z-index: 99; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;
}
.cta-text button { font-size: 0.8333em;
}
@media screen and (min-width: 785px) { .cta-text { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cta-text button { font-size: 1em; }
}
.logo { background: url("https://components.britcdn.com/assets/images/logo.svg") left center no-repeat; width: calc(1440px * 2/12); height: 1.6rem; margin-right: auto; margin-left: auto; margin-top: 1.6rem;
}
.parallax-container { position: relative; width: 100%; height: 25.6rem; z-index: 1; margin-top: 0;
}
.parallax { position: absolute; width: 100%; height: 100%; display: block; left: 0; right: 0; top: 0%; max-width: 1292px; margin-right: auto; margin-left: auto;
}
.about { position: absolute; top: -1.6rem; width: calc(99.99% * 4/12); left: 4rem;
}
.pattern { position: absolute; top: -8rem; right: calc(99.99% * 1/12 + 1rem); width: calc(99.99% * 7/12); height: 25.6rem; background-image: url("http://imgh.us/squiggles-bg_1.svg"); background-size: 6rem; z-index: -1;
}
.instructor-photo { position: absolute; top: 0; right: 0; width: calc(99.99% * 5/12); height: 353px;
}
.instructor-photo img { width: 100%; margin: auto; z-index: 1;
}
.instructor-photo .image-wrapper { position: relative;
}
.bg-color { position: absolute; top: -0.8rem; right: 1rem; width: calc(99.99% * 5/12); height: 353px; z-index: -1;
}
.bg-color img { width: 100%; margin: auto; z-index: 1;
}
.bg-color .image-wrapper { position: relative;
}
.benefits { position: relative; margin-right: auto; margin-left: auto; max-width: 1076.66667px; text-align: center; margin-top: 6.4rem; padding: 3.2rem 0;
}
.benefits .text-container { width: calc(99.99% * 8/12); margin: auto;
}
.benefits::after { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("http://imgh.us/paint.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; padding: 3.2rem 1rem; content: ''; z-index: -1; -webkit-transform: rotate(-3deg) translateY(-0.8rem); transform: rotate(-3deg) translateY(-0.8rem);
}
.how-it-works { max-width: 1292px; margin-top: 6.4rem; margin-right: auto; margin-left: auto; padding-right: 4rem; padding-left: 4rem;
}
.how-it-works .primary { text-align: center; width: 100%;
}
.how-it-works .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 3.2rem;
}
.step { position: relative; width: calc(99.99% * 5/12 - 0.5rem);
}
.step * + * { margin-top: 0.4rem !important;
}
.step.step-two { margin-top: 0; margin-left: auto; margin-right: 0;
}
.illa { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 0; width: calc(99.99% * 7/12 - 0.5rem); text-align: center; overflow: hidden; height: 25.6rem;
}
.illa img { max-height: 25.6rem;
}
.illa.step-two-image img { margin-right: auto; margin-left: 0;
}
.step-number { position: absolute; color: #d0fcdc; -webkit-transform: translateX(calc(-100% - 0.4rem)); transform: translateX(calc(-100% - 0.4rem)); z-index: -1; text-align: right;
}
.space { height: 25.6rem; width: 100%; content: '';
}

Landing Page Prototype - Script Codes JS Codes

$(document).ready(function() {      function draw() {         requestAnimationFrame(draw);         // Drawing code goes here          scrollEvent();     }     draw(); 
}); 
function scrollEvent() {      if (!is_touch_device()) {         viewportTop = $(window).scrollTop();         windowHeight = $(window).height();         viewportBottom = windowHeight + viewportTop;          if ($(window).width())          $('[data-parallax="true"]').each(function() {             distance = Math.min(viewportTop * $(this).attr('data-speed'), $(this).attr('data-max-offset') || 0);             if ($(this).attr('data-direction') === 'up') { sym = '-'; } else { sym = ''; }             $(this).css('transform', 'translate3d(0, ' + sym + distance + 'px,0)');         });      }
}   
function is_touch_device() {   return 'ontouchstart' in window // works on most browsers        || 'onmsgesturechange' in window; // works on ie10
}
Landing Page Prototype - Script Codes
Landing Page Prototype - Script Codes
Home Page Home
Developer Zane Riley
Username zaneriley
Uploaded September 11, 2022
Rating 3
Size 7,132 Kb
Views 22,264
Do you need developer help for Landing Page Prototype?

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!

Zane Riley (zaneriley) Script Codes
Name
Donation Prototype - v2 Visual Hierarchy Fixes
Michelle, submit your photography to Unsplash.
Splash Page with animated gradient and text clipping.
Landing Page Prototype
Fluid Type Demo with Grid
Callout Example
Portfolio Header and Footer
Typography
Halloween Pen
3d Shadow Prototype v2
Create amazing video scripts 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!