Experimental Landing Page

Developer
Danwarfel
Size
6,319 Kb
Views
4,048
  1. Experimental Landing Page Previews
  2. Experimental Landing Page HTML Codes
  3. Experimental Landing Page CSS Codes
  4. Experimental Landing Page JS Codes

How do I make an experimental landing page?

What is a experimental landing page? How do you make a experimental landing page? This script and codes were developed by Danwarfel on 18 January 2023, Wednesday.

Experimental Landing Page Previews
IQ Test

Experimental Landing Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Experimental Landing Page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- 3D PANEL BACKGROUND -->
<div class="jx"> <div class="jx3d"> <div class="jx3d-scene"> <div class="jx3d-panel jx3d-back"></div> <div class="jx3d-panel jx3d-top"></div> <div class="jx3d-panel jx3d-bottom"></div> <div class="jx3d-panel jx3d-left"></div> <div class="jx3d-panel jx3d-right"></div> </div> </div>
</div>
<!-- CONTENT AREA FOREGROUND -->
<div class="dw"> <header> <h1> <span class="ls-symbol clubs">♣</span><span class="ls-symbol diamonds">♦</span> <span class="spades">Dan Warfel </span> <span class="ls-symbol hearts">♥</span><span class="ls-symbol spades">♠</span> </h1> <h2>CREATIVE DEVELOPER, DESIGNER <span>& AVID HUMAN</span></h2> <h3 class="spades">Hey there, <span class="purp">hi there,</span> ho there!</h3> <p>I'm Dan. Greetings. Lipsum ipsum and slipsum klipsum got in their flipsum and took a ride down to Pipsum! Ishkabiddily blop blop blipsum!</p> </header> <main> <section class="homepage"> <div class="hero"> <img src="http://lorempixel.com/900/500/city" alt="" /> </div> </section> <section class="blog"> <div class="col-large"> <h2>This is the Left Column</h2> <h4>July 15, 2014</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio magni similique repellendus, neque velit rerum labore dignissimos numquam harum id corrupti ipsam fugit minima! Asperiores minima praesentium sit quisquam repudiandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel sit, commodi ut eum molestias labore placeat amet eveniet, itaque, aliquam minima magnam voluptas dignissimos culpa quam praesentium atque. Possimus.</p> <p>Quam, quasi. Aut commodi, repellendus. Aspernatur sequi, alias necessitatibus dignissimos hic eligendi quibusdam. Vero error qui aliquid, odio minus vitae. Aperiam eaque eveniet nihil, consequatur quos, iusto omnis libero corporis! <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum neque illum sed, molestiae corrupti ea similique maiores dolore voluptates aperiam doloribus, pariatur in impedit quia earum beatae aliquam ducimus explicabo.</span></p> <p>Totam voluptatem corporis magni consequuntur culpa tempora quam, sint fuga aperiam ipsum ut odit quidem. Laborum odio repellendus quae, accusantium omnis nemo nesciunt laudantium soluta ad? Natus saepe excepturi iste.</p> <p>Eaque blanditiis impedit est necessitatibus ullam saepe autem ipsam ipsum cum aperiam rerum, incidunt enim quisquam dolores sint odio magnam voluptate dignissimos alias amet animi consequatur. Delectus aspernatur non, eius.</p> <p>Saepe asperiores aliquam consectetur, ducimus quisquam sit, assumenda dolor repellendus ut repellat ipsa vel quasi illum earum in error officia necessitatibus perspiciatis laudantium ullam dicta. Alias expedita tenetur similique, fugiat.</p> <p>Accusantium nisi dolorum voluptatem architecto aspernatur. Assumenda iure, magni quidem optio maxime at molestiae modi non nesciunt. Veritatis mollitia, id inventore quo commodi sunt beatae. In nisi consectetur officiis quasi.</p> <p>Nihil tempore veniam impedit esse sint enim dignissimos perspiciatis voluptate dolores aut ipsa dolorum voluptatum nesciunt, at error ducimus accusantium totam quasi alias? Itaque laboriosam illum ex veniam nobis odit.</p> <p>In dolores sint voluptas earum quasi, nam quos facilis tempore et fugit esse recusandae ipsum sed doloribus adipisci, sit similique iure, aperiam quas voluptate error quibusdam dolorem ipsam maiores non.</p> </div> <div class="col-small"> <h2>The Right Column</h2> <p>Earum expedita exercitationem quaerat quibusdam cum temporibus facere delectus mollitia voluptatum optio nulla ratione perspiciatis numquam aut, in architecto dicta placeat! Doloribus voluptate saepe eligendi fugit quasi sint non repellendus!</p> <p>Dicta iste soluta, et quasi porro accusamus illum ipsum corrupti quos nisi autem ex ratione sequi odio.</p> <form action="#"> <div> <input type="text" name="name" id="name" placeholder="Your full name" /> <input type="email" name="email" id="email" placeholder="Your email address" /> </div> <fieldset> <legend>Vote Below</legend> <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" /> <label for="radio-choice-1"> Choice 1 </label> <br /> <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2"> Choice 2</label> </fieldset> <div> <input type="submit" value="Submit" /> </div> </form> </div> </section> </main>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Experimental Landing Page - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Domine:300,900,100italic|Playfair+Display|Montserrat:900);
html,
body { font-family: 'Domine'; font-size: 16px; font-weight: 300; height: 100%; line-height: 180%; margin: 0; padding: 0; width: 100%;
}
.jx { height: 100%; position: relative; width: 100%;
}
.jx3d { background: #000; background: -webkit-linear-gradient(#a9a9a9 50%, #ff6347 50%); background: linear-gradient(#a9a9a9 50%, #ff6347 50%); height: 100%; overflow: hidden; position: relative; width: 100%;
}
.jx3d-scene { height: 100%; position: relative; width: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: perspective(90px);
}
.jx3d-scene div { background: -webkit-linear-gradient(#a9a9a9 50%, #ff6347 50%); background: linear-gradient(#a9a9a9 50%, #ff6347 50%); background-position: 0px 0px; background-size: 16px 16px; bottom: 0; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100%;
}
.jx3d-back { -webkit-transform: translate3d(0, 0, -1600px);
}
.jx3d-top { -webkit-transform-origin: 0 0; -webkit-transform: translate3d(0, 0, -1000px) rotate3d(1, 0, 0, 90deg);
}
.jx3d-bottom { -webkit-transform-origin: 50% 100%; -webkit-transform: rotateY(180deg) translate3d(0, 0, -50px) rotate3d(1, 0, 0, -90deg);
}
.jx3d-left { -webkit-transform-origin: 0 100%; -webkit-transform: translate3d(2px, -1px, -1000px) rotate3d(0, 1, 0, -90deg);
}
.jx3d-right { -webkit-transform-origin: 100% 100%; -webkit-transform: translate3d(-2px, 1px, -1000px) rotate3d(0, 1, 0, 90deg);
}
.dw { background: rgba(242, 227, 147, 0.9); box-sizing: border-box; color: #444; display: block; font-weight: 300; height: 90%; left: 50%; margin-left: -45%; overflow: scroll; padding: 1.5rem; position: absolute; top: 2%; width: 90%;
}
.dw h1 { font-family: 'Futura'; font-weight: 300;
}
.dw h2 { line-height: 115%; font-size: 2rem; font-family: 'Domine'; font-weight: 700; color: darkblue;
}
.dw .homepage { display: block; position: relative; width: 100%; height: 100%;
}
.dw .homepage .hero { max-width: 960px; max-height: 500px; overflow: hidden; margin-bottom: 5rem;
}
.dw .homepage .hero img { position: relative; top: 0; left: 0; opacity: 1; display: block; width: 100%; height: 100%; min-width: 940px; min-height: 500px;
}
.dw .col-large { box-sizing: border-box; float: left; padding-right: 20px; width: 66%;
}
.dw .col-large h2 { font-family: Garamond, Georgia, serif; letter-spacing: 0; text-align: left; line-spacing: 185%;
}
.dw .col-small { background: rgba(155, 155, 155, 0.6); border: 8px solid #eee; box-sizing: border-box; float: right; padding: 10px; width: 34%;
}
.dw .col-small h2 { font-family: 'Domine'; font-size: 1rem; font-weight: thin; font-style: italic; letter-spacing: 0; text-align: center; text-transform: uppercase;
}
.dw h1 { color: #444; font-family: 'Playfair Display'; font-size: 4.2rem; font-weight: bold; text-align: center; /* text-transform: uppercase;*/
}
.dw h2 { font-size: 2.1rem; font-family: "Playfair Display"; letter-spacing: 12px; text-align: center; font-weight: 100;
}
.dw h2 span { color: #eee; letter-spacing: 1px; text-transform: lowercase; text-shadow: 1px 1px 6px #444;
}
.dw h3 { color: #222; padding: 5px 15%; text-align: center; font-family: 'Montserrat'; text-transform: uppercase; font-weight: bold; font-size: 1.8rem;
}
.dw input[type="text"], .dw input[type="email"] { color: #444; margin: 10px auto; padding: 10px; width: 80%;
}
.dw input[type="radio"] { margin-right: 6px;
}
.dw input[type="submit"] { margin: 10px auto; padding: 10px; widows: 80%; color: darkgray; color: #444; font-weight: bold; font-family: 'Playfair Display', cursive; font-size: 2rem; width: 100%;
}
.dw p { font-size: 1.4rem; line-height: 150%; font-weight: 300;
}
.dw header:after { background: #eee; border-bottom: 1px solid #e2e2e2; content: ' '; display: block; height: 4px; margin-bottom: 20px; position: relative; width: 100%;
}
.diamonds, .hearts { color: tomato;
}
.clubs, .spades { color: #444;
}
.purp { color: purple;
}

Experimental Landing Page - Script Codes JS Codes

var tm = TweenMax;
tm.to( $('.jx3d-panel'), 1.6, { backgroundPosition: '0px 90px', repeat: -1, yoyo: false, ease: Linear.easeNone
});
tm.to( $('.jx3d-panel'), 1.6, { transform: 'rotate(45deg, -45deg)', repeat: 0, ease: Linear.easeNone
});
tm.from( $('.dw'), 1.3, { opacity: 0, delay: 1.6
});
/*TweenMax.to( $('.jx3d-left, .jx3d-right'), 1.6, { transform: 'rotate(180deg, -180deg)', repeat: 0, opacity: .6, ease: Back.easeOut
});*/
Experimental Landing Page - Script Codes
Experimental Landing Page - Script Codes
Home Page Home
Developer Danwarfel
Username danwarfel
Uploaded January 18, 2023
Rating 3
Size 6,319 Kb
Views 4,048
Do you need developer help for Experimental Landing Page?

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!

Danwarfel (danwarfel) Script Codes
Name
Sticky Nav Demo
Fullscreen Menu With Hamburger Icon
A Pen by danwarfel
Loading Animation
CSS3 rainbow ribbon
Breathing Honeycomb
SCSS Simple Animated Drop-In
Full-Screenery
SVG Hyphens Text
Smoke Effect Demo
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!