@cocreate/scroll
Version:
A simple scroll component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
357 lines (342 loc) • 15.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="description"
content="Instantly create a start-up or manage and grow an existing business, all-in-one Realtime callobrative solution complete with many automation's and a customizable website." />
<meta name="keywords" content="CoCreate, app landing, responsive" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CoCreate - Build your business in minutes.</title>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<style>
.overlay-scroll {
overflow: overlay ;
position: relative;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #3790ff ;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.08) ;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.06) ;
}
.hidden {
display: none;
}
.scrolling {
background-color: rgb(226, 31, 210);
}
.scroll_top {
background-color: red;
}
.scroll_limbo {
background-color: green;
}
.scroll_bottom {
background-color: blue;
}
</style>
<body>
<!-- Navbar -->
<div
class="display:flex flex-wrap:wrap justify-content:space-between flex-direction:row padding-top:10px padding-bottom:10px width:100% nav"
content_id="content"
scroll-top="scroll_top"
scroll-bottom="scroll_bottom"
scroll="hidden, sticky-nav"
scroll-up="10"
scroll-down="5"
scroll-to="top | bottom | left | right">
<!--<a href="#" class="logo">Navbar</a>-->
<div
class="margin:0px_15px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center width:100%">
<div class="logo-box">
<a href="/">
<img src="https://cocreate.app/assets/logo.png" />
</a>
</div>
<a
class="nav-toggle menu_icon--hamburger show-on-phone-only"
toggle-sidenav="menuL">
<span></span>
<span></span>
<span></span>
</a>
<div
class="display:flex align-items:center show-on-tablet-and-up">
<div class="">
<a href="">Home</a>
</div>
<div class="margin-left:25px">
<a href="">Features</a>
</div>
<div class="margin-left:25px">
<a href="https://server.cocreate.app/documentation/"
>Documentation</a
>
</div>
<div class="margin-left:25px">
<a href="">Pricing</a>
</div>
<div class="margin-left:25px">
<a href="#spreadtheword">Spread the word</a>
</div>
<div class="margin-left:25px">
<a
class="border:1px_black_solid border-radius:50px padding:10px"
href=""
>Get Started
<i
class="height:16px"
src="/assets/svg/chevron-right.svg"></i
></a>
</div>
</div>
</div>
</div>
<section
class="padding-top:80px padding-bottom:40px"
scroll
scrolling="scrolling">
<div class="max-width:90% margin:0px_auto">
<div
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop autoplay muted class="width:100%">
<source
src="https://cocreate.app/assets/dashboard-video.mp4"
type="video/mp4" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding:0px_15px font-size:16px">
<h1 class="font-size:2rem">
Build your buisness in
<span class="color-blue">minutes</span>
</h1>
<p class="margin-top:10px">
Collaborate. Track. Sell. Manage with ease.
</p>
<a
class="btn display:inline-block bg-blue color:white border-radius-50px margin-top:20px padding:10px_0px padding:0px_30px"
>Get Started</a
>
</div>
</div>
</div>
</section>
<section
class="bg-light-gray padding:25px_0px"
scroll
scroll-limbo="scroll_limbo">
<div class="max-width:90% margin:0px_auto">
<div
class="padding:25px_0px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center">
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-01.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-02.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-03.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-04.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-05.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-06.png"
class="max-height:60px width:auto" />
</div>
<div class="padding:0px_10px">
<img
src="https://cocreate.app/assets/client-07.png"
class="max-height:60px width:auto" />
</div>
</div>
</div>
</section>
<section class="padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div class="display:flex flex-wrap:wrap align-items:center">
<div class="flex-grow:1 min-width:300px width:50%">
<video loop muted class="width:100%">
<source
type="video/mp4"
src="https://cocreate.app/assets/on-board-video.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1 class="font-size:2rem">
Easy onboarding, fast adoption
</h1>
<p class="margin-top:10px">
Getting your team on board is as simple as sending
an email. Getting them hooked is as simple as
letting them use it.
</p>
<p></p>
<a
class="text-decoration-underline margin-top:30px display:block"
>See all features</a
>
</div>
</div>
</div>
</section>
<section class="bg-light-gray padding-top:80px padding-bottom:40px">
<div class="max-width:90% margin:0px_auto">
<div
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
<div class="flex-grow:1 min-width:300px width:50%">
<video
loop
muted
class="width:100%"
scroll=""
scroll-intersect="testing">
<source
type="video/mp4"
src="https://cocreate.app/assets/cards.webm" />
</video>
</div>
<div
class="flex-grow:1 min-width:300px width:50% padding-left:15px padding-right:15px">
<h1 class="font-size:2rem">
Create dashboards & stay in control
</h1>
<p
class="margin-top:10px"
scroll=""
scroll-intersect="testing">
Build and customize your dashboards to gain
important insights and a clear overview of your
work.
</p>
</div>
</div>
</div>
</section>
<footer
id="spreadtheword"
class="padding:100px_0px background-size:cover background-position:center position:relative color:white"
style="
background-image: url(https://cocreate.app/assets/banner.png);
">
<div class="position:relative max-width:90% margin:0px_auto">
<h1 class="text-align:center padding-bottom:20px">
SPREAD THE WORD!
</h1>
<div
class="width:100% display:inline-block text-align:center padding-bottom:20px font-size:21px border-bottom:1px_solid_white">
<ul
class="padding-0px list-style-type:none justify-content:center display:flex">
<li class="padding:0px_15px">
<a
href="#"
class="share color:white"
social-network="facebook"
title="Share on Facebook"
><i src="/assets/svg/facebook-f.svg"></i
></a>
</li>
<li class="padding:0px_15px">
<a
href="#"
class="share color:white"
social-network="twitter"
><i src="/assets/svg/twitter.svg"></i
></a>
</li>
<li class="padding:0px_15px">
<a
href="#"
class="share color:white"
social-network="google"
><i src="/assets/svg/google-plus-g.svg"></i
></a>
</li>
<li class="padding:0px_15px">
<a
href="#"
class="share color:white"
social-network="linkedin"
><i src="/assets/svg/linkedin-in.svg"></i
></a>
</li>
<li class="padding:0px_15px">
<a
href="#"
class="share color:white"
social-network="pintrest"
><i src="/assets/svg/pinterest-p.svg"></i
></a>
</li>
</ul>
</div>
<p class="text-align:center padding-top:20px">
2015 - 2020 All Right Reserved
</p>
<p class="text-align:center">
<a class="color:white" href="#">CoCreate LLC</a>
</p>
</div>
</footer>
<div
id="menuL"
class="cocreate-sidenav background:lightgrey"
data-main_content="canvas,navbar"
sidenav-default_desktop="offcanvas"
sidenav-default_tablet="offcanvas"
sidenav-default_phone="offcanvas"
sidenav-expanded_width="300px">
<ul class="cocreate-scroll">
<div class="margin-left:25px">
<a href="">Home</a>
</div>
<div class="margin-left:25px">
<a href="">Features</a>
</div>
<div class="margin-left:25px">
<a href="">Demo</a>
</div>
<div class="margin-left:25px">
<a href="">Pricing</a>
</div>
<div class="margin-left:25px">
<a href="">Spread the word</a>
</div>
<div resize="right"></div>
</ul>
</div>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>