decentralized-video-chat/public/reference/additional.html
2020-04-02 16:06:02 -04:00

1205 lines
50 KiB
HTML
Executable File
Vendored
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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"
>
Whats 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"
>
Whats 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"
>
Whats 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">
Youve 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">
&copy; 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>