Landing Page Prototype

Developer
Zane Riley
Size
3,261 Kb
Views
18,216
  1. Landing Page Prototype Previews
  2. Landing Page Prototype HTML Codes
  3. Landing Page Prototype CSS Codes

How do I make an landing page prototype?

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/CLASS%20BTS%20V1.mp4" 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>
</body>
</html>

Landing Page Prototype - Script Codes CSS Codes

html,
body,
main { width: 100%;
}
html,
body { min-height: 200vh;
}
.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: 1440px; 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: 1.2em; }
}
.logo { background: url("https://components.britcdn.com/assets/images/logo.svg") left center no-repeat; width: calc(1440px * 2/12); height: 6rem; margin-right: auto; margin-left: auto; margin-top: calc(1.6rem);
}
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 3,261 Kb
Views 18,216
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
Halloween Pen
Landing Page Prototype
A Pen by Zane Riley
Splash Page with animated gradient and text clipping.
Button Explorations
Donation Prototype - v3 Multi-pay option
Fluid Type Demo with Grid
Masking Gifs
Portfolio Header and Footer
3d Shadow Prototype v2
Create amazing captions 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!