digital-theory/index.html
2023-04-24 15:10:58 +02:00

214 lines
6.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">
<link rel="stylesheet" href="css/main.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">
<div id="main_title" class="margin-auto">
<h1 class="is-hidden">Sesame</h1>
</div>
<h2 class="container-text margin-auto">
We focus on online conversion to help brands sell better and more.
</h2>
<a href="#open" class="button">Scroll</a>
</div>
</section>
<section id="welcome">
<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">
<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">
<h2>
Open Sesame
</h2>
</section>
<section id="content">
<h2>
<p class="first color-emphasis">Transactional</p>
<p class="second">Content</p>
</h2>
</section>
<section id="content_all">
<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">
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>
<section id="content-2" class="flip-from-right">
<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>
<button>More infos</button>
<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>
</section>
<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>
<!-- other section-->
<section id="popover" >
<div class="phone-container">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
<div class="text">
<h2>
<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>
<section id="portfolio" >
<div class="phone-container"></div>
<div id="text">
<h2>
<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>
<nav class="fixed-nav is-fixed-top">
<div class="burger-menu is-2">
<div class="icon-burger"></div>
<span>Menu</span>
</div>
<div class="nav-main is-10 has-text-centered">
Open Sesame
</div>
</nav>
</main>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/vendor/anime.min.js"></script>
<script src="js/vendor/ScrollMagic.min.js"></script>
<script src="js/vendor/plugins/animation.gsap.min.js"></script>
<script src="js/vendor/plugins/animation.velocity.min.js"></script>
<script src="js/vendor/plugins/debug.addIndicators.min.js"></script>
<!--<script src="js/vendor/plugins/jquery.ScrollMagic.min.js"></script>-->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>