Skip to content

Instantly share code, notes, and snippets.

@shzk

shzk/index.html

Last active May 12, 2019 09:57
Show Gist options
  • Save shzk/7dd554ca6a207b68dd0b3dfbd6b1014e to your computer and use it in GitHub Desktop.
Save shzk/7dd554ca6a207b68dd0b3dfbd6b1014e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- favicon -->
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/animate.css">
<title>Gustorvo</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139989792-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-139989792-1');
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark nav">
<div class="container">
<a class="navbar-brand" href="index.html">GUSTORVO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="javascript://0" onclick="slowScroll ('.about')">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://0" onclick="slowScroll ('.why')">Why</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://0" onclick="slowScroll ('.contact')">Contacts</a>
</li>
</ul>
</div>
</div>
<!-- /.container -->
</nav>
<header class="header" id="header-desctop">
<div class="offer">
<h1 class="wow fadeInDown" data-wow-duration="0.7s" data-wow-delay="2s" data-wow-offset="0">We bring hand
tracking to Extended Reality</h1>
<p class="wow fadeInUp" data-wow-duration="0.7s" data-wow-delay="3s" data-wow-offset="0">VR / AR / MR</p>
<h2 class="wow fadeInUp" data-wow-duration="0.7s" data-wow-delay="4s" data-wow-offset="0">If you can dream it,
XR can make it.</h2>
</div>
<div id="trailer" class="is_overlay is-chrome" data-vide-bg="assets/img/video/video.mp4">
</div>
<div id="trailer1" class="is_overlay no-chrome">
<video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="assets/img/video/video.mp4" type="video/mp4">
</source>
<source src="assets/img/video/video.webm" type="video/webm">
</source>
<source src="assets/img/video/video.ogv" type="video/ogg">
</source>
</video>
</div>
<script>
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");
var Chrome = document.querySelector('.is-chrome');
var NoChrome = document.querySelector('.no-chrome');
if (isIOSChrome) {
// is Google Chrome on IOS
Chrome.classList.add('visible');
NoChrome.classList.add('no-visible');
} else if (
isChromium !== null &&
typeof isChromium !== "undefined" &&
vendorName === "Google Inc." &&
isOpera === false &&
isIEedge === false
) {
// is Google Chrome
Chrome.classList.add('visible');
NoChrome.classList.add('no-visible');
} else {
// not Google Chrome
Chrome.classList.add('no-visible');
}
</script>
<div class="down-arrow">
<div class="wow fadeInUp" data-wow-duration="0.3s" data-wow-delay="5s" data-wow-offset="0">
<a href="javascript://0" onclick="slowScroll ('.about')">
<img src="assets/img/down-arrow.png" alt="down-arrow">
</a>
</div>
</div>
<div class="header-mobile"></div>
<div class="header-bg"></div>
</header>
<section>
<div class="container">
<div class="row row-section about first-row align-items-center">
<div class="col-lg-7 order-lg-first order-last">
<img class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0"
src="assets/img/about.png" alt="photo">
</div>
<div class="col-lg-5">
<h3 class="title wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">About Us</h3>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
We are an innovative start-up XR studio, specialised on hand-based interactions. We work within
virtual (VR), augmented (AR), and mixed realities (MR) and deliver hand interaction and virtual
object manipulation for mobile and PC.
</p>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
Our solution makes it easy to interact with virtual or
augmented environment in a more intuitive way, simply by using your hands instead of
traditional physical controllers.
</p>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
We are passionate about innovations and always research latest
cutting-edge technologies to deliver the Most Advanced Hand Tracking solutions to our customers.
It’s not just our work, it’s our hobby too.
</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section>
<div class="container bg-wihte">
<h2 class="title-sect why wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">WHY</h2>
<div class="row row-section align-items-center">
<div class="col-lg-5">
<h3 class="title wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">Human-intuitive Interaction</h3>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
We use innovational hand tracking technologies to make VR and AR experiences self-explanatory,
less bulky and more naturalistic. We strive after comfortable UX for intuitive and seamless
interaction. Simple. Natural. Friendly.
</p>
</div>
<div class="col-lg-7">
<img class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0" src="assets/img/1.png" alt="photo">
</div>
</div>
<!-- /.row -->
<div class="row row-section align-items-center">
<div class="col-lg-7 order-lg-first order-last">
<img class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0" src="assets/img/2.png" alt="photo">
</div>
<div class="col-lg-5">
<h3 class="title wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">More efficient VR Training</h3>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
In order to acquire trainees’ skills (and particularly for enhancing muscle memory), XR control
systems should be as close to the natural interaction as possible. We achieve this by enabling
Hand Interaction, which makes possible to touch and manipulate 3d objects in a natural way
using your fingers. Learn by doing.
</p>
</div>
</div>
<!-- /.row -->
<div class="row row-section align-items-center">
<div class="col-lg-5">
<h3 class="title wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">Cutting-Edge Technology</h3>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
Among few problems with VR are controllers. We eliminate this by using human-intuitive approach
- your hands. Simply skip physical devices when you can. No buttons, No gloves needed, just your
fingers.
</p>
</div>
<div class="col-lg-7">
<img class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0" src="assets/img/3.png" alt="photo">
</div>
</div>
<!-- /.row -->
<div class="row row-section align-items-center">
<div class="col-lg-7 order-lg-first order-last">
<img class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0" src="assets/img/4.png" alt="photo">
</div>
<div class="col-lg-5">
<h3 class="title wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">Eliminate Errors and Mistakes</h3>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
Virtual and Augmented Reality will not substitute real-world scenarios, but it will help you to
manage critical situations when you face such in real life. It’s all about simulating problems
to eliminate risks and to enhance decision making skills. Make mistakes in VR, not in Reality.
</p>
</div>
</div>
<!-- /.row -->
<div class="row row-section align-items-center">
<div class="col-lg-5">
<h3 class="title wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">Give us your problem, we give you solution back</h3>
<p class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
Don’t know how to benefit from VR and apply it into your workflow? It’s ok, tell us your
use-case and we’ll come up with real solutions and explain how Virtual (VR) or Augmented (AR)
Reality (or both) can help you in your scenario.
</p>
</div>
<div class="col-lg-7">
<img class="wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0" src="assets/img/5.png" alt="photo">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section>
<div class="container bg-wihte">
<h2 class="title-sect contact wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">Contacts</h2>
<div class="row row-section align-items-center">
<div class="col-lg-6">
<div class="contact-block wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
<div class="contact-block-img">
<img src="assets/img/phone.png" alt="phone">
</div>
<div class="contact-block-info">
<a href="tel:9999999999">070 324 56 14</a>
</div>
</div>
<div class="contact-block wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
<div class="contact-block-img">
<img src="assets/img/mail.png" alt="mail">
</div>
<div class="contact-block-info">
<a href="mailto:[email protected]">[email protected] </a>
</div>
</div>
<div class="contact-block wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
<div class="contact-block-img">
<img src="assets/img/location.png" alt="location">
</div>
<div class="contact-block-info">
Sweden, Stockholm
</div>
</div>
</div>
<div class="col-lg-6">
<form id="form" class="form wow fadeInDown" data-wow-duration="0.3s" data-wow-delay="0s" data-wow-offset="0">
<label>Name: <input class="form-input" type="text" name="name" required></label>
<label>E-mail: <input class="form-input" type="text" name="email" required></label>
<!-- <label>Phone: <input class="form-input" type="text" name="phone"></label> -->
<label>Message: <textarea name="msg" required></textarea></label>
<input class="btn btn-outline-dark btn-lg" type="submit" value="Submit">
<div class="thank-you">
<div class="thank-you-text">
<h4>Thank you</h4>
<p>Your message has been sent !</p>
</div>
</div>
</form>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<footer class="footer">
<p>copyright © 2019 gustorvo.se</p>
</footer>
<div class="page-top" id="top">
<button class="btn-page-top">
<span class="icon-bars"></span>
<span class="icon-bars"></span>
</button>
</div>
<script src="assets/js/jquery.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/vide.js"></script>
<script src="mail.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
Raw
script.js
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");
var Chrome = document.querySelector('.is-chrome');
var NoChrome = document.querySelector('.no-chrome');
if (isIOSChrome) {
// is Google Chrome on IOS
Chrome.classList.add('visible');
NoChrome.classList.add('no-visible');
} else if (
isChromium !== null &&
typeof isChromium !== "undefined" &&
vendorName === "Google Inc." &&
isOpera === false &&
isIEedge === false
) {
// is Google Chrome
Chrome.classList.add('visible');
NoChrome.classList.add('no-visible');
} else {
// not Google Chrome
Chrome.classList.add('no-visible');
}
Raw
style.css
.visible {
visibility: visible;
}
.no-visible {
visibility: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment