mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-15 06:39:20 +08:00
559 lines
39 KiB
HTML
Executable File
559 lines
39 KiB
HTML
Executable File
<!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="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> |