tykayn
/
digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
digital-theory/index.html

264 lines
8.6 KiB
HTML
Raw Normal View History

:zap: init boilerplate html files
2023-04-20 11:40:23 +02:00
<!doctype html>
add assets and style for sections
2023-04-20 16:53:33 +02:00
<html id="no-js" lang="fr">
:zap: init boilerplate html files
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">
add assets and style for sections
2023-04-20 16:53:33 +02:00
<meta property="og:title" content="Sesame">
:zap: init boilerplate html files
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 -->
split css
2023-04-24 18:47:52 +02:00
<!-- <link rel="stylesheet" href="css/normalize.css">-->
focus on content flipping
2023-04-25 15:54:47 +02:00
<!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
split css
2023-04-24 18:47:52 +02:00
<link rel="stylesheet" href="/css/main.css" type="text/css">
:zap: init boilerplate html files
2023-04-20 11:40:23 +02:00
<meta name="theme-color" content="#fafafa">
</head>
<body>
more style in first section
2023-04-20 18:34:40 +02:00
<main class="has-text-centered">
add assets and style for sections
2023-04-20 16:53:33 +02:00
focus on content flipping
2023-04-25 15:54:47 +02:00
<!-- <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">-->
<!-- <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">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-->
<section id="content-2" class="flip-container flip-from-right">
rotate all cards with a flip handle
2023-04-25 17:22:09 +02:00
<div id="content-2-handle" class="flip-handle"></div>
add pictures from zip, containers for text
2023-04-21 16:14:24 +02:00
<div class="container-text">
focus on content flipping
2023-04-25 15:54:47 +02:00
<h2 class="text-title">
Motion &
3D design
</h2>
<p class="text-description">
add pictures from zip, containers for text
2023-04-21 16:14:24 +02:00
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>
focus on content flipping
2023-04-25 15:54:47 +02:00
<button class="call-to-action">More infos
<span class="arrow-icon">→</span>
</button>
add pictures from zip, containers for text
2023-04-21 16:14:24 +02:00
</div>
display pics and sections content
2023-04-21 23:27:42 +02:00
<div class="phone-container">
<img src="/img/phone_clothes.png" alt="phone">
</div>
</section>
focus on content flipping
2023-04-25 15:54:47 +02:00
<section id="content-3" class="flip-container flip-from-left">
rotate all cards with a flip handle
2023-04-25 17:22:09 +02:00
<div id="content-3-handle" class="flip-handle"></div>
focus on content flipping
2023-04-25 15:54:47 +02:00
<div class="container-text">
radius on phone container
2023-04-25 12:26:45 +02:00
<h2 class="text-title">
focus on content flipping
2023-04-25 15:54:47 +02:00
Videos
<br>
Production
sliders sections
2023-04-24 15:10:58 +02:00
</h2>
focus on content flipping
2023-04-25 15:54:47 +02:00
<p class="text-description">
sliders sections
2023-04-24 15:10:58 +02:00
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>
focus on content flipping
2023-04-25 15:54:47 +02:00
<button class="call-to-action">More infos
<span class="arrow-icon">→</span>
</button>
sliders sections
2023-04-24 15:10:58 +02:00
</div>
radius on phone container
2023-04-25 12:26:45 +02:00
<div class="phone-container">
focus on content flipping
2023-04-25 15:54:47 +02:00
<img src="/img/phone_glasses.png" alt="phone">
add assets and style for sections
2023-04-20 16:53:33 +02:00
</div>
</section>
display pics and sections content
2023-04-21 23:27:42 +02:00
rotate all cards with a flip handle
2023-04-25 17:22:09 +02:00
<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>
focus on content flipping
2023-04-25 15:54:47 +02:00
rotate all cards with a flip handle
2023-04-25 17:22:09 +02:00
<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>
focus on content flipping
2023-04-25 15:54:47 +02:00
<!-- other section-->
<!-- <section id="popover" class="slider-screen">-->
<!-- <div class="phone-container">-->
<!-- <div class="top">-->
<!-- </div>-->
<!-- <div class="bottom">-->
<!-- </div>-->
<!-- </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>-->
<!-- <section id="portfolio" class="slider-screen">-->
<!-- <div class="phone-container">-->
<!-- <div class="top">-->
<!-- </div>-->
<!-- <div class="bottom">-->
<!-- </div>-->
<!-- </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>-->
rotate all cards with a flip handle
2023-04-25 17:22:09 +02:00
<div class="credits">
B. Lemoine - cipherbliss.com
</div>
display pics and sections content
2023-04-21 23:27:42 +02:00
<nav class="fixed-nav is-fixed-top">
<div class="burger-menu is-2">
make css menu icon
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>
display pics and sections content
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>
add assets and style for sections
2023-04-20 16:53:33 +02:00
</main>
add GSAP animation on cover
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>
add assets and style for sections
2023-04-20 16:53:33 +02:00
<script src="js/main.js"></script>
:zap: init boilerplate html files
2023-04-20 11:40:23 +02:00
</body>
</html>