digital-theory/index.html

299 lines
9.3 KiB
HTML
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 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>
<!-- 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>