2023-04-20 11:40:23 +02:00
|
|
|
|
<!doctype html>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<html id="no-js" lang="fr">
|
2023-04-20 11:40:23 +02:00
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<meta property="og:title" content="Sesame">
|
2023-04-20 11:40:23 +02:00
|
|
|
|
<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 -->
|
|
|
|
|
|
|
2023-04-24 18:47:52 +02:00
|
|
|
|
<!-- <link rel="stylesheet" href="css/normalize.css">-->
|
2023-04-25 12:05:23 +02:00
|
|
|
|
<!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
|
2023-04-24 18:47:52 +02:00
|
|
|
|
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
2023-04-20 11:40:23 +02:00
|
|
|
|
|
|
|
|
|
|
<meta name="theme-color" content="#fafafa">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
2023-04-20 18:34:40 +02:00
|
|
|
|
<main class="has-text-centered">
|
2023-04-20 16:53:33 +02:00
|
|
|
|
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<section id="cover" class="has-text-centerd">
|
|
|
|
|
|
<div id="hand"></div>
|
|
|
|
|
|
|
2023-04-24 18:47:52 +02:00
|
|
|
|
<div id="main_title_container" class="margin-auto has-text-centered">
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<div id="main_title" class="margin-auto">
|
|
|
|
|
|
<h1 class="is-hidden">Sesame</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-04-24 18:47:52 +02:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section id="welcome">
|
2023-04-21 16:14:24 +02:00
|
|
|
|
|
2023-04-24 15:21:22 +02:00
|
|
|
|
<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>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<h2 class="margin-auto container-text-lg">
|
2023-04-20 16:53:33 +02:00
|
|
|
|
We come from
|
|
|
|
|
|
<span class="color-emphasis">
|
2023-04-21 23:27:42 +02:00
|
|
|
|
the
most immersive e-commerce market
|
|
|
|
|
|
</span>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
in the world.
|
2023-04-20 18:34:40 +02:00
|
|
|
|
</h2>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</section>
|
|
|
|
|
|
<section id="open">
|
2023-04-24 18:47:52 +02:00
|
|
|
|
|
|
|
|
|
|
<h2 class="text">
|
2023-04-25 14:59:51 +02:00
|
|
|
|
<img src="/img/unlock.png" alt="Open Sesame">
|
2023-04-20 18:34:40 +02:00
|
|
|
|
</h2>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</section>
|
|
|
|
|
|
<section id="content">
|
2023-04-20 18:34:40 +02:00
|
|
|
|
<h2>
|
2023-04-25 14:59:51 +02:00
|
|
|
|
<p id="content_first" class="first color-emphasis">Transactional</p>
|
|
|
|
|
|
<p id="content_second" class="second">Content</p>
|
2023-04-20 18:34:40 +02:00
|
|
|
|
</h2>
|
2023-04-21 16:14:24 +02:00
|
|
|
|
</section>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<section id="content_all">
|
2023-04-25 14:59:51 +02:00
|
|
|
|
<div id="content_all_img"></div>
|
2023-04-21 16:14:24 +02:00
|
|
|
|
<div class="columns">
|
|
|
|
|
|
<div class="column">
|
2023-04-24 18:47:52 +02:00
|
|
|
|
<h2 class="container-text-md">
|
|
|
|
|
|
For all your
|
2023-04-24 15:10:58 +02:00
|
|
|
|
<span class="color-emphasis">
|
|
|
|
|
|
digital
|
|
|
|
|
|
</span>
|
2023-04-24 18:47:52 +02:00
|
|
|
|
uses.
|
|
|
|
|
|
</h2>
|
2023-04-21 16:14:24 +02:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="column">
|
2023-04-24 18:47:52 +02:00
|
|
|
|
<p class="container-text-md text">
|
2023-04-21 16:14:24 +02:00
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</section>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<section id="content-2" class="flip-from-right">
|
2023-04-21 16:14:24 +02:00
|
|
|
|
<div class="container-text">
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Motion &
|
|
|
|
|
|
3D design</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>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<button>More infos</button>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<div class="phone-container">
|
|
|
|
|
|
<img src="/img/phone_clothes.png" alt="phone">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section id="content-3" class="flip-from-left">
|
|
|
|
|
|
<h2>Motion &
|
|
|
|
|
|
3D design</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>
|
|
|
|
|
|
<button>More infos</button>
|
|
|
|
|
|
<div class="phone-container">
|
|
|
|
|
|
<img src="/img/phone_glasses.png" alt="phone">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</section>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<section id="content-4" class="flip-from-right">
|
|
|
|
|
|
<h2>Motion &
|
|
|
|
|
|
3D design</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>
|
|
|
|
|
|
<button>More infos</button>
|
|
|
|
|
|
<div class="phone-container">
|
|
|
|
|
|
<img src="/img/phone_face.png" alt="phone">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section id="content-5" class="flip-from-left">
|
|
|
|
|
|
<h2>Motion &
|
|
|
|
|
|
3D design</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>
|
|
|
|
|
|
<button>More infos</button>
|
|
|
|
|
|
<div class="phone-container">
|
|
|
|
|
|
<img src="/img/phone_clothes.png" alt="phone">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
2023-04-24 15:21:22 +02:00
|
|
|
|
<!-- other section-->
|
2023-04-25 12:26:45 +02:00
|
|
|
|
<section id="popover" class="slider-screen">
|
2023-04-24 15:10:58 +02:00
|
|
|
|
<div class="phone-container">
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="text">
|
2023-04-25 12:26:45 +02:00
|
|
|
|
<h2 class="text-title">
|
2023-04-24 15:10:58 +02:00
|
|
|
|
<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>
|
2023-04-25 12:26:45 +02:00
|
|
|
|
<section id="portfolio" class="slider-screen">
|
|
|
|
|
|
<div class="phone-container">
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<div id="text">
|
2023-04-25 12:26:45 +02:00
|
|
|
|
<h2 class="text-title">
|
2023-04-24 15:10:58 +02:00
|
|
|
|
<span class="color-emphasis">
|
2023-04-21 23:27:42 +02:00
|
|
|
|
Premium
|
|
|
|
|
|
</span>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<span>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
& Campaign
|
|
|
|
|
|
</span>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</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>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
|
|
|
|
|
|
<nav class="fixed-nav is-fixed-top">
|
|
|
|
|
|
<div class="burger-menu is-2">
|
2023-04-25 14:59:51 +02:00
|
|
|
|
<div class="icon-burger">
|
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
|
<span class="line"></span>
|
|
|
|
|
|
</div>
|
2023-04-21 23:27:42 +02:00
|
|
|
|
<span>Menu</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="nav-main is-10 has-text-centered">
|
|
|
|
|
|
Open Sesame
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
2023-04-20 16:53:33 +02:00
|
|
|
|
</main>
|
2023-04-25 11:10:59 +02:00
|
|
|
|
|
|
|
|
|
|
<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>
|
2023-04-20 16:53:33 +02:00
|
|
|
|
<script src="js/main.js"></script>
|
2023-04-20 11:40:23 +02:00
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
