mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-15 06:39:20 +08:00
1205 lines
50 KiB
HTML
Executable File
Vendored
1205 lines
50 KiB
HTML
Executable File
Vendored
<!DOCTYPE html>
|
||
<html lang="en" class="no-js">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Neon Template</title>
|
||
<link rel="stylesheet" href="../css/landing.css" />
|
||
</head>
|
||
<body class="has-animations">
|
||
<div class="body-wrap">
|
||
<header class="site-header">
|
||
<div class="container">
|
||
<div class="site-header-inner">
|
||
<div class="brand">
|
||
<h1 class="m-0">
|
||
<a href="../landing.html"
|
||
><img
|
||
src="../images/logo.svg"
|
||
alt="Neon"
|
||
width="32"
|
||
height="32"
|
||
/></a>
|
||
</h1>
|
||
</div>
|
||
<button
|
||
id="header-nav-toggle"
|
||
class="header-nav-toggle"
|
||
aria-controls="primary-menu"
|
||
aria-expanded="false"
|
||
>
|
||
<span class="screen-reader">Menu</span>
|
||
<span class="hamburger"
|
||
><span class="hamburger-inner"></span
|
||
></span>
|
||
</button>
|
||
<nav id="header-nav" class="header-nav">
|
||
<div class="header-nav-inner">
|
||
<ul class="list-reset text-xxs header-nav-right">
|
||
<li><a href="additional.html">Secondary page</a></li>
|
||
</ul>
|
||
<ul class="list-reset header-nav-right">
|
||
<li>
|
||
<a
|
||
class="button button-primary button-sm"
|
||
href="signup.html"
|
||
>Sign up</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="site-content">
|
||
<section class="pricing section illustration-section-02">
|
||
<div class="container">
|
||
<div class="pricing-inner section-inner">
|
||
<div class="section-header center-content reveal-from-bottom">
|
||
<div class="container-xs">
|
||
<h1 class="m-0">
|
||
Engage Your Visitors with a beautiful template
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
<div class="pricing-switcher center-content reveal-from-top">
|
||
<label class="form-switch"
|
||
><input
|
||
id="pricing-toggle"
|
||
type="checkbox"
|
||
name="pricing-toggle"
|
||
checked="checked"
|
||
/>
|
||
<span class="form-switch-icon"></span>
|
||
<span>Billed Monthly</span>
|
||
<span>Billed Annually</span></label
|
||
>
|
||
</div>
|
||
<div class="tiles-wrap">
|
||
<div
|
||
class="tiles-item reveal-from-right"
|
||
data-reveal-delay="400"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="pricing-item-content">
|
||
<div class="pricing-item-header pb-24 mb-24">
|
||
<div class="pricing-item-price mb-4">
|
||
<span class="pricing-item-price-currency h3">$</span
|
||
><span
|
||
class="pricing-item-price-amount h1 pricing-switchable"
|
||
data-pricing-monthly="34"
|
||
data-pricing-yearly="27"
|
||
>27</span
|
||
><span class="text-sm">/m</span>
|
||
</div>
|
||
<div class="text-xs text-color-low">
|
||
Lorem ipsum is a common text
|
||
</div>
|
||
</div>
|
||
<div class="pricing-item-features mb-40">
|
||
<div
|
||
class="pricing-item-features-title h6 text-xs text-color-high mb-24"
|
||
>
|
||
What’s included
|
||
</div>
|
||
<ul
|
||
class="pricing-item-features-list list-reset text-xs mb-32"
|
||
>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li>Excepteur sint occaecat velit</li>
|
||
<li>Excepteur sint occaecat velit</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="pricing-item-cta mb-8">
|
||
<a class="button button-primary button-block" href="#"
|
||
>Start free trial</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-bottom"
|
||
data-reveal-delay="200"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="pricing-item-content">
|
||
<div class="pricing-item-header pb-24 mb-24">
|
||
<div class="pricing-item-price mb-4">
|
||
<span class="pricing-item-price-currency h3">$</span
|
||
><span
|
||
class="pricing-item-price-amount h1 pricing-switchable"
|
||
data-pricing-monthly="54"
|
||
data-pricing-yearly="47"
|
||
>47</span
|
||
><span class="text-sm">/m</span>
|
||
</div>
|
||
<div class="text-xs text-color-low">
|
||
Lorem ipsum is a common text
|
||
</div>
|
||
</div>
|
||
<div class="pricing-item-features mb-40">
|
||
<div
|
||
class="pricing-item-features-title h6 text-xs text-color-high mb-24"
|
||
>
|
||
What’s included
|
||
</div>
|
||
<ul
|
||
class="pricing-item-features-list list-reset text-xs mb-32"
|
||
>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li>Excepteur sint occaecat velit</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="pricing-item-cta mb-8">
|
||
<a class="button button-primary button-block" href="#"
|
||
>Start free trial</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-left"
|
||
data-reveal-delay="400"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="pricing-item-content">
|
||
<div class="pricing-item-header pb-24 mb-24">
|
||
<div class="pricing-item-price mb-4">
|
||
<span class="pricing-item-price-currency h3">$</span
|
||
><span
|
||
class="pricing-item-price-amount h1 pricing-switchable"
|
||
data-pricing-monthly="74"
|
||
data-pricing-yearly="67"
|
||
>67</span
|
||
><span class="text-sm">/m</span>
|
||
</div>
|
||
<div class="text-xs text-color-low">
|
||
Lorem ipsum is a common text
|
||
</div>
|
||
</div>
|
||
<div class="pricing-item-features mb-40">
|
||
<div
|
||
class="pricing-item-features-title h6 text-xs text-color-high mb-24"
|
||
>
|
||
What’s included
|
||
</div>
|
||
<ul
|
||
class="pricing-item-features-list list-reset text-xs mb-32"
|
||
>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
<li class="is-checked">
|
||
Excepteur sint occaecat velit
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="pricing-item-cta mb-8">
|
||
<a class="button button-primary button-block" href="#"
|
||
>Start free trial</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="team section center-content">
|
||
<div class="container">
|
||
<div class="team-inner section-inner has-top-divider">
|
||
<div class="section-header center-content reveal-from-bottom">
|
||
<div class="container-xs">
|
||
<h2 class="mt-0 mb-16">
|
||
Meet the team - Lorem ipsum is placeholder text.
|
||
</h2>
|
||
<p class="m-0">
|
||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||
esse cillum dolore eu fugiat nulla pariatur excepteur sint —
|
||
occaecat cupidatat non proident, sunt in culpa qui.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="tiles-wrap">
|
||
<div class="tiles-item reveal-from-bottom">
|
||
<div class="tiles-item-inner">
|
||
<div class="team-item-header">
|
||
<div class="team-item-image mb-24">
|
||
<img
|
||
src="../images/team-member-01.jpg"
|
||
alt="Team member 01"
|
||
width="180"
|
||
height="180"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="team-item-content">
|
||
<h5 class="team-item-name mt-0 mb-4">Markus Hasinika</h5>
|
||
<div
|
||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||
>
|
||
Founder & CEO
|
||
</div>
|
||
<p class="m-0 text-sm">
|
||
Magnis dis parturient montes nascetur. Quam quisque id
|
||
diam vel quam ultricies leo integer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-bottom"
|
||
data-reveal-delay="200"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="team-item-header">
|
||
<div class="team-item-image mb-24">
|
||
<img
|
||
src="../images/team-member-02.jpg"
|
||
alt="Team member 02"
|
||
width="180"
|
||
height="180"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="team-item-content">
|
||
<h5 class="team-item-name mt-0 mb-4">Diana Stafford</h5>
|
||
<div
|
||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||
>
|
||
Founder & CEO
|
||
</div>
|
||
<p class="m-0 text-sm">
|
||
Magnis dis parturient montes nascetur. Quam quisque id
|
||
diam vel quam ultricies leo integer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-bottom"
|
||
data-reveal-delay="400"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="team-item-header">
|
||
<div class="team-item-image mb-24">
|
||
<img
|
||
src="../images/team-member-03.jpg"
|
||
alt="Team member 03"
|
||
width="180"
|
||
height="180"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="team-item-content">
|
||
<h5 class="team-item-name mt-0 mb-4">Patricia Collins</h5>
|
||
<div
|
||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||
>
|
||
Founder & CEO
|
||
</div>
|
||
<p class="m-0 text-sm">
|
||
Magnis dis parturient montes nascetur. Quam quisque id
|
||
diam vel quam ultricies leo integer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tiles-item reveal-from-bottom">
|
||
<div class="tiles-item-inner">
|
||
<div class="team-item-header">
|
||
<div class="team-item-image mb-24">
|
||
<img
|
||
src="../images/team-member-04.jpg"
|
||
alt="Team member 04"
|
||
width="180"
|
||
height="180"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="team-item-content">
|
||
<h5 class="team-item-name mt-0 mb-4">Anton Klenkov</h5>
|
||
<div
|
||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||
>
|
||
Founder & CEO
|
||
</div>
|
||
<p class="m-0 text-sm">
|
||
Magnis dis parturient montes nascetur. Quam quisque id
|
||
diam vel quam ultricies leo integer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-bottom"
|
||
data-reveal-delay="200"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="team-item-header">
|
||
<div class="team-item-image mb-24">
|
||
<img
|
||
src="../images/team-member-05.jpg"
|
||
alt="Team member 05"
|
||
width="180"
|
||
height="180"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="team-item-content">
|
||
<h5 class="team-item-name mt-0 mb-4">Nick Kornilov</h5>
|
||
<div
|
||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||
>
|
||
Founder & CEO
|
||
</div>
|
||
<p class="m-0 text-sm">
|
||
Magnis dis parturient montes nascetur. Quam quisque id
|
||
diam vel quam ultricies leo integer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-bottom"
|
||
data-reveal-delay="400"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="team-item-header">
|
||
<div class="team-item-image mb-24">
|
||
<img
|
||
src="../images/team-member-06.jpg"
|
||
alt="Team member 01"
|
||
width="180"
|
||
height="180"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="team-item-content">
|
||
<h5 class="team-item-name mt-0 mb-4">Andrea Engler</h5>
|
||
<div
|
||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||
>
|
||
Founder & CEO
|
||
</div>
|
||
<p class="m-0 text-sm">
|
||
Magnis dis parturient montes nascetur. Quam quisque id
|
||
diam vel quam ultricies leo integer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="clients section reveal-fade">
|
||
<div class="container">
|
||
<div
|
||
class="clients-inner section-inner has-top-divider has-bottom-divider"
|
||
>
|
||
<ul class="list-reset">
|
||
<li class="reveal-from-top">
|
||
<img src="images/clients-01.svg" alt="Clients 01" />
|
||
</li>
|
||
<li class="reveal-from-bottom" data-reveal-delay="150">
|
||
<img src="images/clients-02.svg" alt="Clients 02" />
|
||
</li>
|
||
|
||
<li class="reveal-from-top" data-reveal-delay="300">
|
||
<img src="images/clients-03.svg" alt="Clients 03" />
|
||
</li>
|
||
|
||
<li class="reveal-from-bottom" data-reveal-delay="450">
|
||
<img src="images/clients-04.svg" alt="Clients 04" />
|
||
</li>
|
||
|
||
<li class="reveal-from-top" data-reveal-delay="600">
|
||
<img src="images/clients-05.svg" alt="Clients 05" />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
Video
|
||
<section class="section center-content">
|
||
<div class="container">
|
||
<div class="section-inner">
|
||
<div class="section-header reveal-from-bottom">
|
||
<div class="container-xs">
|
||
<h2 class="mt-0 mb-16">Built exclusively for you</h2>
|
||
<p class="m-0">
|
||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||
esse cillum dolore eu fugiat nulla pariatur excepteur sint —
|
||
occaecat cupidatat non proident, sunt in culpa qui.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="reveal-from-bottom">
|
||
<a
|
||
class="modal-trigger"
|
||
aria-controls="modal-01"
|
||
data-video="https://player.vimeo.com/video/174002812"
|
||
href="#"
|
||
><img
|
||
src="images/video-placeholder.svg"
|
||
alt="Video"
|
||
width="712"
|
||
height="400"
|
||
/></a>
|
||
</div>
|
||
<div id="modal-01" class="modal modal-video">
|
||
<div class="modal-inner">
|
||
<div class="responsive-video">
|
||
<iframe
|
||
src="#"
|
||
frameborder="0"
|
||
webkitallowfullscreen
|
||
mozallowfullscreen
|
||
allowfullscreen
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Video-->
|
||
|
||
<section class="testimonial section">
|
||
<div class="container">
|
||
<div class="testimonial-inner section-inner has-top-divider">
|
||
<div class="section-header center-content">
|
||
<div class="container-xs">
|
||
<h2 class="mt-0 mb-16">Don't take our word for it</h2>
|
||
<p class="m-0">
|
||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||
esse cillum dolore eu fugiat nulla pariatur excepteur sint —
|
||
occaecat cupidatat non proident, sunt in culpa qui.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="tiles-wrap">
|
||
<div
|
||
class="tiles-item reveal-from-right"
|
||
data-reveal-delay="200"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="testimonial-item-content">
|
||
<p class="text-sm mb-0">
|
||
— Duis aute irure dolor in reprehenderit in voluptate
|
||
velit esse cillum dolore eu fugiat nulla pariatur.
|
||
Excepteur sint occaecat cupidatat non proident, sunt in
|
||
culpa qui officia deserunt mollit anim id est laborum
|
||
cillum dolore eu fugiat.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
|
||
>
|
||
<span class="testimonial-item-name text-color-high"
|
||
>Roman Level</span
|
||
>
|
||
<span class="text-color-low">/ </span
|
||
><span class="testimonial-item-link"
|
||
><a href="#">AppName</a></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tiles-item reveal-from-bottom">
|
||
<div class="tiles-item-inner">
|
||
<div class="testimonial-item-content">
|
||
<p class="text-sm mb-0">
|
||
— Duis aute irure dolor in reprehenderit in voluptate
|
||
velit esse cillum dolore eu fugiat nulla pariatur.
|
||
Excepteur sint occaecat cupidatat non proident, sunt in
|
||
culpa qui officia deserunt mollit anim id est laborum
|
||
cillum dolore eu fugiat.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
|
||
>
|
||
<span class="testimonial-item-name text-color-high"
|
||
>Diana Rynzhuk</span
|
||
>
|
||
<span class="text-color-low">/ </span
|
||
><span class="testimonial-item-link"
|
||
><a href="#">AppName</a></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tiles-item reveal-from-left"
|
||
data-reveal-delay="200"
|
||
>
|
||
<div class="tiles-item-inner">
|
||
<div class="testimonial-item-content">
|
||
<p class="text-sm mb-0">
|
||
— Duis aute irure dolor in reprehenderit in voluptate
|
||
velit esse cillum dolore eu fugiat nulla pariatur.
|
||
Excepteur sint occaecat cupidatat non proident, sunt in
|
||
culpa qui officia deserunt mollit anim id est laborum
|
||
cillum dolore eu fugiat.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
|
||
>
|
||
<span class="testimonial-item-name text-color-high"
|
||
>Ben Stafford</span
|
||
>
|
||
<span class="text-color-low">/ </span
|
||
><span class="testimonial-item-link"
|
||
><a href="#">AppName</a></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta section center-content-mobile reveal-from-bottom">
|
||
<div class="container">
|
||
<div class="cta-inner section-inner cta-split">
|
||
<div class="cta-slogan">
|
||
<h3 class="m-0">For previewing layouts and visual?</h3>
|
||
</div>
|
||
<div class="cta-action">
|
||
<div class="has-icon-right">
|
||
<label for="newsletter" class="form-label screen-reader"
|
||
>Subscribe</label
|
||
>
|
||
<input
|
||
id="newsletter"
|
||
class="form-input"
|
||
type="email"
|
||
placeholder="Your best email"
|
||
/>
|
||
<svg
|
||
width="16"
|
||
height="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z"
|
||
fill="#376DF9"
|
||
fill-rule="nonzero"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="features-split section">
|
||
<div class="container">
|
||
<div class="features-split-inner section-inner has-top-divider">
|
||
<div class="section-header center-content">
|
||
<div class="container-xs">
|
||
<h2 class="mt-0 mb-16">
|
||
Features - Lorem ipsum is placeholder text.
|
||
</h2>
|
||
<p class="m-0">
|
||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||
esse cillum dolore eu fugiat nulla pariatur excepteur sint —
|
||
occaecat cupidatat non proident, sunt in culpa qui.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="split-wrap invert-mobile">
|
||
<div class="split-item">
|
||
<div
|
||
class="split-item-content center-content-mobile reveal-from-right"
|
||
data-reveal-container=".split-item"
|
||
>
|
||
<h3 class="mt-0 mb-12">Data-driven insights</h3>
|
||
<p class="m-0">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||
aliqua — Ut enim ad minim veniam, quis nostrud
|
||
exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||
consequat.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="split-item-image split-item-image-fill reveal-from-left"
|
||
data-reveal-container=".split-item"
|
||
>
|
||
<img
|
||
src="../images/features-split-image-01.svg"
|
||
alt="Features split image 01"
|
||
width="528"
|
||
height="396"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="split-item">
|
||
<div
|
||
class="split-item-content center-content-mobile reveal-from-left"
|
||
data-reveal-container=".split-item"
|
||
>
|
||
<h3 class="mt-0 mb-12">Data-driven insights</h3>
|
||
<p class="m-0">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||
aliqua — Ut enim ad minim veniam, quis nostrud
|
||
exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||
consequat.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="split-item-image split-item-image-fill reveal-from-right"
|
||
data-reveal-container=".split-item"
|
||
>
|
||
<img
|
||
src="../images/features-split-image-02.svg"
|
||
alt="Features split image 02"
|
||
width="528"
|
||
height="396"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="split-item">
|
||
<div
|
||
class="split-item-content center-content-mobile reveal-from-right"
|
||
data-reveal-container=".split-item"
|
||
>
|
||
<h3 class="mt-0 mb-12">Data-driven insights</h3>
|
||
<p class="m-0">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||
aliqua — Ut enim ad minim veniam, quis nostrud
|
||
exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||
consequat.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="split-item-image split-item-image-fill reveal-from-left"
|
||
data-reveal-container=".split-item"
|
||
>
|
||
<img
|
||
src="../images/features-split-image-01.svg"
|
||
alt="Features split image 03"
|
||
width="528"
|
||
height="396"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-inner has-top-divider">
|
||
<div class="container-xs">
|
||
<h2 class="mt-0">
|
||
Lorem ipsum is placeholder text commonly used in the graphic.
|
||
</h2>
|
||
<p>
|
||
Lorem ipsum dolor sit amet,
|
||
<a href="#">consectetur adipiscing elit</a>, sed do eiusmod
|
||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||
minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||
ut aliquip ex ea commodo consequat.
|
||
</p>
|
||
<p>
|
||
Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||
cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||
occaecat cupidatat non proident, sunt in culpa qui officia
|
||
deserunt mollit anim id est laborum.
|
||
</p>
|
||
<figure>
|
||
<img
|
||
class="image-larger"
|
||
src="../images/image-placeholder.svg"
|
||
alt="Image placeholder"
|
||
width="712"
|
||
height="400"
|
||
/>
|
||
<figcaption class="text-color-low">
|
||
A super-nice image
|
||
<span role="img" aria-label="smile">😀</span>
|
||
</figcaption>
|
||
</figure>
|
||
<h4>Flexibility</h4>
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||
laboris nisi ut aliquip ex ea commodo consequat sint occaecat
|
||
cupidatat non proident, sunt in culpa qui officia deserunt
|
||
mollit anim id est laborum.
|
||
</p>
|
||
<ul>
|
||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||
</ul>
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||
laboris.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-inner has-top-divider">
|
||
<div class="container-xs">
|
||
<div class="section-header center-content">
|
||
<h2 class="m-0">
|
||
Modal - Lorem ipsum is placeholder text commonly used.
|
||
</h2>
|
||
</div>
|
||
<div class="center-content">
|
||
<a
|
||
class="button button-primary modal-trigger"
|
||
aria-controls="modal-01"
|
||
href="#"
|
||
>Open modal</a
|
||
>
|
||
</div>
|
||
<div id="modal-01" class="modal">
|
||
<div class="modal-inner">
|
||
<button
|
||
class="modal-close modal-close-trigger"
|
||
aria-label="close"
|
||
></button>
|
||
<div class="modal-content">
|
||
<div class="center-content">
|
||
<h3 class="mt-16 mb-12">Join our newsletter</h3>
|
||
<p class="text-sm">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||
elit, sed do eiusmod.
|
||
</p>
|
||
</div>
|
||
<form style="max-width: 320px; margin: 0 auto;">
|
||
<div class="mb-12">
|
||
<input
|
||
class="form-input"
|
||
type="email"
|
||
id="modal-input"
|
||
placeholder="Your best email"
|
||
/>
|
||
</div>
|
||
|
||
<button class="button button-primary button-block">
|
||
Subscribe
|
||
</button>
|
||
</form>
|
||
<div class="center-content mt-24">
|
||
<a
|
||
class="text-xxs fw-500 tt-u modal-close-trigger"
|
||
aria-label="close"
|
||
href="#0"
|
||
>No thanks!</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section center-content">
|
||
<div class="container">
|
||
<div class="section-inner has-top-divider">
|
||
<div class="container-xs">
|
||
<div class="section-header">
|
||
<h2 class="m-0">
|
||
Buttons - Lorem ipsum is placeholder text commonly used.
|
||
</h2>
|
||
</div>
|
||
<div class="button-group">
|
||
<a class="button button-primary button-wide-mobile" href="#"
|
||
>Get started now</a
|
||
>
|
||
<a class="button button-secondary button-wide-mobile" href="#"
|
||
>Get started now</a
|
||
>
|
||
</div>
|
||
<div class="button-group">
|
||
<a class="button button-dark button-wide-mobile" href="#"
|
||
>Get started now</a
|
||
>
|
||
<a class="button button-wide-mobile" href="#"
|
||
>Get started now</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-inner has-top-divider">
|
||
<div class="container-xs">
|
||
<div class="section-header center-content">
|
||
<h2 class="m-0">
|
||
Input forms - Lorem ipsum is placeholder text commonly used.
|
||
</h2>
|
||
</div>
|
||
<form style="max-width: 420px; margin: 0 auto;">
|
||
<div class="mb-24">
|
||
<label class="form-label screen-reader" for="input-01"
|
||
>This is a label</label
|
||
>
|
||
<div class="form-group-desktop">
|
||
<input
|
||
class="form-input"
|
||
type="email"
|
||
id="input-01"
|
||
placeholder="Your best email"
|
||
/>
|
||
<button class="button button-primary">
|
||
Early access
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mb-24">
|
||
<label class="form-label screen-reader" for="input-02"
|
||
>This is a label</label
|
||
>
|
||
<div class="form-group-desktop">
|
||
<input
|
||
class="form-input"
|
||
type="email"
|
||
id="input-02"
|
||
placeholder="Your best email"
|
||
value="hello@cruip.com"
|
||
/>
|
||
<button class="button button-primary is-loading">
|
||
Early access
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mb-24">
|
||
<label class="form-label screen-reader" for="input-03"
|
||
>This is a label</label
|
||
>
|
||
<div class="form-group-desktop">
|
||
<input
|
||
class="form-input form-error"
|
||
type="email"
|
||
id="input-03"
|
||
placeholder="Your best email"
|
||
/>
|
||
<button class="button button-primary">
|
||
Early access
|
||
</button>
|
||
</div>
|
||
<div class="form-hint text-color-error">
|
||
Something is wrong.
|
||
</div>
|
||
</div>
|
||
<div class="mb-24">
|
||
<label class="form-label screen-reader" for="input-04"
|
||
>This is a label</label
|
||
>
|
||
<div class="form-group-desktop">
|
||
<input
|
||
class="form-input form-success"
|
||
type="email"
|
||
id="input-04"
|
||
placeholder="Your best email"
|
||
/>
|
||
<button class="button button-primary">
|
||
Early access
|
||
</button>
|
||
</div>
|
||
<div class="form-hint text-color-success">
|
||
You’ve done it.
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-inner has-top-divider">
|
||
<div class="container-xs">
|
||
<div class="section-header center-content">
|
||
<h2 class="m-0">
|
||
FAQ - Lorem ipsum is placeholder text commonly used.
|
||
</h2>
|
||
</div>
|
||
<ul class="accordion list-reset mb-0">
|
||
<li class="is-active">
|
||
<div class="accordion-header text-sm">
|
||
<span class="h6 m-0"
|
||
>Nisi porta lorem mollis aliquam ut.</span
|
||
>
|
||
<div class="accordion-icon"></div>
|
||
</div>
|
||
<div class="accordion-content text-xs">
|
||
<p>
|
||
Lorem ipsum is placeholder text commonly used in the
|
||
graphic, print, and publishing industries for previewing
|
||
layouts and visual mockups.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="accordion-header text-sm">
|
||
<span class="h6 m-0"
|
||
>Nisi porta lorem mollis aliquam ut.</span
|
||
>
|
||
<div class="accordion-icon"></div>
|
||
</div>
|
||
<div class="accordion-content text-xs">
|
||
<p>
|
||
Lorem ipsum is placeholder text commonly used in the
|
||
graphic, print, and publishing industries for previewing
|
||
layouts and visual mockups.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="accordion-header text-sm">
|
||
<span class="h6 m-0"
|
||
>Nisi porta lorem mollis aliquam ut.</span
|
||
>
|
||
<div class="accordion-icon"></div>
|
||
</div>
|
||
<div class="accordion-content text-xs">
|
||
<p>
|
||
Lorem ipsum is placeholder text commonly used in the
|
||
graphic, print, and publishing industries for previewing
|
||
layouts and visual mockups.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="accordion-header text-sm">
|
||
<span class="h6 m-0"
|
||
>Nisi porta lorem mollis aliquam ut.</span
|
||
>
|
||
<div class="accordion-icon"></div>
|
||
</div>
|
||
<div class="accordion-content text-xs">
|
||
<p>
|
||
Lorem ipsum is placeholder text commonly used in the
|
||
graphic, print, and publishing industries for previewing
|
||
layouts and visual mockups.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="accordion-header text-sm">
|
||
<span class="h6 m-0"
|
||
>Nisi porta lorem mollis aliquam ut.</span
|
||
>
|
||
<div class="accordion-icon"></div>
|
||
</div>
|
||
<div class="accordion-content text-xs">
|
||
<p>
|
||
Lorem ipsum is placeholder text commonly used in the
|
||
graphic, print, and publishing industries for previewing
|
||
layouts and visual mockups.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="cta section center-content-mobile reveal-from-bottom">
|
||
<div class="container">
|
||
<div class="cta-inner section-inner cta-split">
|
||
<div class="cta-slogan">
|
||
<h3 class="m-0">For previewing layouts and visual?</h3>
|
||
</div>
|
||
<div class="cta-action">
|
||
<div class="has-icon-right">
|
||
<label for="newsletter" class="form-label screen-reader"
|
||
>Subscribe</label
|
||
>
|
||
<input
|
||
id="newsletter"
|
||
class="form-input"
|
||
type="text"
|
||
placeholder="Username"
|
||
/>
|
||
<svg
|
||
width="16"
|
||
height="12"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z"
|
||
fill="#376DF9"
|
||
fill-rule="nonzero"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<div class="site-footer-inner has-top-divider">
|
||
<div class="footer-top text-xxs">
|
||
<div class="footer-blocks">
|
||
<div class="footer-block">
|
||
<div class="brand mb-16">
|
||
<a href="../landing.html"
|
||
><img
|
||
src="../images/logo.svg"
|
||
alt="Neon"
|
||
width="32"
|
||
height="32"
|
||
/></a>
|
||
</div>
|
||
<div class="footer-copyright">
|
||
© 2019 Neon, all rights reserved
|
||
</div>
|
||
</div>
|
||
<div class="footer-block">
|
||
<div class="footer-block-title">Company</div>
|
||
<ul class="list-reset mb-0">
|
||
<li><a href="#">Dummy text used</a></li>
|
||
<li><a href="#">The purpose of lorem</a></li>
|
||
<li><a href="#">Filler text can be very useful</a></li>
|
||
<li><a href="#">Be on design</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-block">
|
||
<div class="footer-block-title">Uses cases</div>
|
||
<ul class="list-reset mb-0">
|
||
<li><a href="#">Consectetur adipiscing</a></li>
|
||
<li><a href="#">Lorem Ipsum is place</a></li>
|
||
<li><a href="#">Excepteur sint</a></li>
|
||
<li><a href="#">Occaecat cupidatat</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-block">
|
||
<div class="footer-block-title">Docs</div>
|
||
<ul class="list-reset mb-0">
|
||
<li><a href="#">The purpose of lorem</a></li>
|
||
<li><a href="#">Dummy text used</a></li>
|
||
<li><a href="#">Excepteur sint</a></li>
|
||
<li><a href="#">Occaecat cupidatat</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="footer-bottom space-between center-content-mobile text-xxs"
|
||
>
|
||
<nav class="footer-nav">
|
||
<ul class="list-reset mb-0">
|
||
<li><a href="#">Contact</a></li>
|
||
<li><a href="#">About us</a></li>
|
||
<li><a href="#">FAQ's</a></li>
|
||
<li><a href="#">Support</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="footer-social">
|
||
<ul class="list-reset">
|
||
<li>
|
||
<a href="#">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 16 16"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<title>LinkedIn</title>
|
||
<path
|
||
d="M15.3 0H.7C.3 0 0 .3 0 .7v14.7c0 .3.3.6.7.6h14.7c.4 0 .7-.3.7-.7V.7c-.1-.4-.4-.7-.8-.7zM4.7 13.6H2.4V6h2.4v7.6h-.1zM3.6 5c-.8 0-1.4-.7-1.4-1.4 0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4-.1.7-.7 1.4-1.4 1.4zm10 8.6h-2.4V9.9c0-.9 0-2-1.2-2s-1.4 1-1.4 2v3.8H6.2V6h2.3v1c.3-.6 1.1-1.2 2.2-1.2 2.4 0 2.8 1.6 2.8 3.6v4.2h.1z"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 16 16"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<title>Pinterest</title>
|
||
<path
|
||
d="M8 0C3.6 0 0 3.6 0 8c0 3.4 2.1 6.3 5.1 7.4-.1-.6-.1-1.6 0-2.3.1-.6.9-4 .9-4s-.2-.4-.2-1.1c0-1.1.7-2 1.5-2 .7 0 1 .5 1 1.1 0 .7-.4 1.7-.7 2.7-.2.8.4 1.4 1.2 1.4 1.4 0 2.5-1.5 2.5-3.7 0-1.9-1.4-3.3-3.3-3.3-2.3 0-3.6 1.7-3.6 3.5 0 .7.3 1.4.6 1.8v.4c-.1.3-.2.8-.2.9 0 .1-.1.2-.3.1-1-.5-1.6-1.9-1.6-3.1C2.9 5.3 4.7 3 8.2 3c2.8 0 4.9 2 4.9 4.6 0 2.8-1.7 5-4.2 5-.8 0-1.6-.4-1.8-.9 0 0-.4 1.5-.5 1.9-.2.7-.7 1.6-1 2.1.8.2 1.6.3 2.4.3 4.4 0 8-3.6 8-8s-3.6-8-8-8z"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 16 16"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<title>GitHub</title>
|
||
<path
|
||
d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<script src="../js/landing.js"></script>
|
||
</body>
|
||
</html>
|