272 lines
8.0 KiB
Vue
272 lines
8.0 KiB
Vue
<script setup lang="ts"></script>
|
|
|
|
<template>
|
|
<div id="sprint_1">
|
|
<main class="has-text-centered">
|
|
<section id="cover" class="has-text-centerd">
|
|
<div id="hand" />
|
|
|
|
<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
|
|
id="phone-watches-1"
|
|
src="/img/phone_watches.png"
|
|
alt="phone watches"
|
|
/>
|
|
<img
|
|
id="phone-watches-2"
|
|
src="/img/phone_watches.png"
|
|
alt="phone watches"
|
|
/>
|
|
<img
|
|
id="phone-watches-3"
|
|
src="/img/phone_watches.png"
|
|
alt="phone watches"
|
|
/>
|
|
<img
|
|
id="phone-watches-4"
|
|
src="/img/phone_watches.png"
|
|
alt="phone watches"
|
|
/>
|
|
</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" />
|
|
<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 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 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 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 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 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 class="bottom" />
|
|
</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 class="bottom" />
|
|
</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 class="line" />
|
|
<span class="line" />
|
|
</div>
|
|
<span>Menu</span>
|
|
</div>
|
|
<div class="nav-main is-10 has-text-centered">Open Sesame</div>
|
|
</nav>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss"></style>
|