digital-theory/index.html

304 lines
9.3 KiB
HTML

<!doctype html>
<html id="no-js" lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Sesame">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- <link rel="stylesheet" href="css/normalize.css">-->
<!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
<link rel="stylesheet" href="/css/main.css" type="text/css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<main class="has-text-centered">
<section id="cover" class="has-text-centerd">
<div id="hand"></div>
<div id="main_title_container" class="margin-auto has-text-centered">
<div id="main_title" class="margin-auto">
<h1 class="is-hidden">Sesame</h1>
</div>
<div class="title-container">
<h2 class="container-text margin-auto">
We focus on online conversion to help brands sell better and more.
</h2>
<a href="#open" class="button margin-auto">Scroll</a>
</div>
</div>
</section>
<section id="welcome">
<div class="phones-land">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
</div>
<h2 class="margin-auto container-text-lg">
We come from
<span class="color-emphasis">
the most immersive e-commerce market
</span>
in the world.
</h2>
</section>
<section id="open">
<div id="open-handle"></div>
<h2 class="text">
<img src="/img/unlock.png" alt="Open Sesame">
</h2>
</section>
<section id="content">
<h2>
<p id="content_first" class="first color-emphasis">Transactional</p>
<p id="content_second" class="second"><img src="/img/content.png" alt="content"></p>
</h2>
</section>
<section id="content_all">
<div id="content_all_img"></div>
<div class="columns">
<div class="column">
<h2 class="container-text-md">
For all your
<span class="color-emphasis">
digital
</span>
uses.
</h2>
</div>
<div class="column">
<p class="container-text-md text">
Our creative competitive edge
We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our
technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale
for all touchpoints to reduce costs.
</p>
</div>
</div>
</section>
<!-- flipping zones-->
<div id="flipping_zone">
<section id="content-2" class="flip-container flip-from-right">
<div id="content-2-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Motion &
3D design
</h2>
<p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
<button class="call-to-action">More infos
<span class="arrow-icon"></span>
</button>
</div>
<div class="phone-container">
<img src="/img/phone_shoes_blue.png" alt="phone">
</div>
</section>
<section id="content-3" class="flip-container flip-from-left">
<div id="content-3-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Videos
<br>
Production
</h2>
<p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
<button class="call-to-action">More infos
<span class="arrow-icon"></span>
</button>
</div>
<div class="phone-container">
<img src="/img/phone_glasses.png" alt="phone">
</div>
</section>
<section id="content-4" class="flip-container flip-from-right">
<div id="content-4-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Photos
<br>
Production
</h2>
<p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
<button class="call-to-action">More infos
<span class="arrow-icon"></span>
</button>
</div>
<div class="phone-container">
<img src="/img/phone_face.png" alt="phone">
</div>
</section>
<section id="content-5" class="flip-container flip-from-left">
<div id="content-5-handle" class="flip-handle"></div>
<div class="container-text">
<h2 class="text-title">
Videos
<br>
Production
</h2>
<p class="text-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
<button class="call-to-action">More infos
<span class="arrow-icon"></span>
</button>
</div>
<div class="phone-container">
<img src="/img/phone_clothes.png" alt="phone">
</div>
</section>
</div>
<section id="coming_soon">
<h2>
coming soon
</h2>
</section>
<!-- other section-->
<section id="popover" class="slider-screen">
<div class="close-button">
<img src="/img/cross_blue.png" alt="fermer">
</div>
<div class="arrow-left">
<img src="/img/arrow.svg" alt="précédent">
</div>
<div class="arrow-right">
<img src="/img/arrow.svg" alt="suivant">
</div>
<div class="phone-container">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
<div class="bullets">
<img src="/img/rond_gris.png" alt="rond">
<img src="/img/rond_blanc.png" alt="rond">
<img src="/img/rond_blanc.png" alt="rond">
<img src="/img/rond_blanc.png" alt="rond">
</div>
<div class="text">
<h2 class="text-title">
<span class="color-emphasis">
Premium
</span>
<span class="dark-emphasis">
& Campaign
</span>
</h2>
<p class="text-grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
</div>
</section>
<!--grey bg-->
<section id="portfolio" class="slider-screen">
<div class="close-button">
<img src="/img/cross_blue.png" alt="fermer">
</div>
<div class="arrow-left">
<img src="/img/arrow.svg" alt="précédent">
</div>
<div class="arrow-right">
<img src="/img/arrow.svg" alt="suivant">
</div>
<div class="phone-container">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
<div class="bullets">
<img src="/img/rond_gris.png" alt="rond">
<img src="/img/rond_blanc.png" alt="rond">
<img src="/img/rond_blanc.png" alt="rond">
<img src="/img/rond_blanc.png" alt="rond">
</div>
<div class="text">
<h2 class="text-title">
<span class="color-emphasis">
Premium
</span>
<span>
& Campaign
</span>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
</p>
</div>
</section>
<div class="credits">
B. Lemoine - cipherbliss.com
<br>
Digital Theory
</div>
<nav class="fixed-nav is-fixed-top">
<div class="burger-menu is-2">
<div class="icon-burger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<span>Menu</span>
</div>
<div class="nav-main is-10 has-text-centered">
Open Sesame
</div>
</nav>
</main>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>