focus on content flipping
This commit is contained in:
parent
9286105b98
commit
d2f8565d37
@ -20,17 +20,6 @@
|
|||||||
padding-left: 80px;
|
padding-left: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content_all .color-emphasis {
|
|
||||||
color: #1E33DA;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#content-1 h2,
|
|
||||||
#content-2 h2,
|
|
||||||
#content-3 h2,
|
|
||||||
#content-4 h2 {
|
|
||||||
margin-left: 10vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
|
|
||||||
@ -79,3 +68,92 @@
|
|||||||
order: 1;
|
order: 1;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.flip-container{
|
||||||
|
color: #FFFDFC;
|
||||||
|
padding-top: 15vh;
|
||||||
|
}
|
||||||
|
.flip-container + .flip-container{
|
||||||
|
padding-top:0;
|
||||||
|
margin-top: -15vh;
|
||||||
|
min-height: 91vh;
|
||||||
|
height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container .container-text{
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
left: 30vw;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.flip-container.flip-from-left .container-text{
|
||||||
|
width: 50%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container .color-emphasis {
|
||||||
|
color: #1E33DA;
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.flip-container .text-title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 60px;
|
||||||
|
line-height: 110%;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
margin-top: 158px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.flip-container .text-description{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 26px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 380px;
|
||||||
|
}
|
||||||
|
.flip-container .phone-container{
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
left: 60vw;
|
||||||
|
top: -540px;
|
||||||
|
background: rgba(225, 196, 183, 0.2);
|
||||||
|
border-radius: 70px;
|
||||||
|
width: 342px;
|
||||||
|
height: 700px;
|
||||||
|
border-color: rgba(255,255,255,0.4);
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container.flip-from-left .phone-container{
|
||||||
|
left: 5vw;
|
||||||
|
top: -540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container .phone-container img{
|
||||||
|
margin-top: 70px;
|
||||||
|
width: 318px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.flip-container .call-to-action{
|
||||||
|
cursor:pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 36px;
|
||||||
|
gap: 10px;
|
||||||
|
width: 198px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 70px;
|
||||||
|
flex: none;
|
||||||
|
order: 2;
|
||||||
|
flex-grow: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
border: 10px solid;
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-width: 5px;
|
||||||
|
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
|
||||||
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
.slider-screen .text{
|
.slider-screen .text{
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 62%;
|
left: 55vw;
|
||||||
top: -30%;
|
top: -30%;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
text-align:left;
|
text-align:left;
|
||||||
@ -48,14 +48,14 @@
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#popover .phone-container {
|
.slider-screen .phone-container {
|
||||||
height: 776px;
|
height: 776px;
|
||||||
width: 411px;
|
width: 411px;
|
||||||
background: url('/img/phone_cream.png') no-repeat;
|
background: url('/img/phone_cream.png') no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 33%;
|
left: 20vw;
|
||||||
top: 20vh;
|
top: 20vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
291
index.html
291
index.html
@ -17,7 +17,7 @@
|
|||||||
<!-- Place favicon.ico in the root directory -->
|
<!-- Place favicon.ico in the root directory -->
|
||||||
|
|
||||||
<!-- <link rel="stylesheet" href="css/normalize.css">-->
|
<!-- <link rel="stylesheet" href="css/normalize.css">-->
|
||||||
<!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
|
<!-- <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
|
||||||
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
||||||
|
|
||||||
<meta name="theme-color" content="#fafafa">
|
<meta name="theme-color" content="#fafafa">
|
||||||
@ -27,181 +27,172 @@
|
|||||||
|
|
||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
|
|
||||||
<section id="cover" class="has-text-centerd">
|
<!-- <section id="cover" class="has-text-centerd">-->
|
||||||
<div id="hand"></div>
|
<!-- <div id="hand"></div>-->
|
||||||
|
|
||||||
<div id="main_title_container" class="margin-auto has-text-centered">
|
<!-- <div id="main_title_container" class="margin-auto has-text-centered">-->
|
||||||
<div id="main_title" class="margin-auto">
|
<!-- <div id="main_title" class="margin-auto">-->
|
||||||
<h1 class="is-hidden">Sesame</h1>
|
<!-- <h1 class="is-hidden">Sesame</h1>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
|
||||||
<div class="title-container">
|
<!-- <div class="title-container">-->
|
||||||
|
|
||||||
<h2 class="container-text margin-auto">
|
<!-- <h2 class="container-text margin-auto">-->
|
||||||
We focus on online
conversion to help brands sell better and more.
|
<!-- We focus on online
conversion to help brands sell better and more.-->
|
||||||
</h2>
|
<!-- </h2>-->
|
||||||
<a href="#open" class="button margin-auto">Scroll</a>
|
<!-- <a href="#open" class="button margin-auto">Scroll</a>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</section>
|
<!-- </section>-->
|
||||||
<section id="welcome">
|
<!-- <section id="welcome">-->
|
||||||
|
|
||||||
<div class="phones-land">
|
<!-- <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-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-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-3">-->
|
||||||
<img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
|
<!-- <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<h2 class="margin-auto container-text-lg">
|
<!-- <h2 class="margin-auto container-text-lg">-->
|
||||||
We come from
|
<!-- We come from-->
|
||||||
<span class="color-emphasis">
|
<!-- <span class="color-emphasis">-->
|
||||||
the
most immersive e-commerce market
|
<!-- the
most immersive e-commerce market-->
|
||||||
</span>
|
<!-- </span>-->
|
||||||
in the world.
|
<!-- in the world.-->
|
||||||
</h2>
|
<!-- </h2>-->
|
||||||
|
|
||||||
</section>
|
<!-- </section>-->
|
||||||
<section id="open">
|
<!-- <section id="open">-->
|
||||||
|
|
||||||
<h2 class="text">
|
<!-- <h2 class="text">-->
|
||||||
<img src="/img/unlock.png" alt="Open Sesame">
|
<!-- <img src="/img/unlock.png" alt="Open Sesame">-->
|
||||||
</h2>
|
<!-- </h2>-->
|
||||||
</section>
|
<!-- </section>-->
|
||||||
<section id="content">
|
<!-- <section id="content">-->
|
||||||
<h2>
|
<!-- <h2>-->
|
||||||
<p id="content_first" class="first color-emphasis">Transactional</p>
|
<!-- <p id="content_first" class="first color-emphasis">Transactional</p>-->
|
||||||
<p id="content_second" class="second">Content</p>
|
<!-- <p id="content_second" class="second">Content</p>-->
|
||||||
</h2>
|
<!-- </h2>-->
|
||||||
</section>
|
<!-- </section>-->
|
||||||
<section id="content_all">
|
<!-- <section id="content_all">-->
|
||||||
<div id="content_all_img"></div>
|
<!-- <div id="content_all_img"></div>-->
|
||||||
<div class="columns">
|
<!-- <div class="columns">-->
|
||||||
<div class="column">
|
<!-- <div class="column">-->
|
||||||
<h2 class="container-text-md">
|
<!-- <h2 class="container-text-md">-->
|
||||||
For all your
|
<!-- For all your-->
|
||||||
<span class="color-emphasis">
|
<!-- <span class="color-emphasis">-->
|
||||||
digital
|
<!-- digital-->
|
||||||
</span>
|
<!-- </span>-->
|
||||||
uses.
|
<!-- uses.-->
|
||||||
</h2>
|
<!-- </h2>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="column">
|
<!-- <div class="column">-->
|
||||||
<p class="container-text-md text">
|
<!-- <p class="container-text-md text">-->
|
||||||
Our creative competitive edge
|
<!-- Our creative competitive edge-->
|
||||||
We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our
|
<!-- 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
|
<!-- technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale-->
|
||||||
for all touchpoints to reduce costs.
|
<!-- for all touchpoints to reduce costs.-->
|
||||||
</p>
|
<!-- </p>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
|
|
||||||
|
|
||||||
</section>
|
<!-- </section>-->
|
||||||
<section id="content-2" class="flip-from-right">
|
|
||||||
|
<!-- flipping zones-->
|
||||||
|
<section id="content-2" class="flip-container flip-from-right">
|
||||||
<div class="container-text">
|
<div class="container-text">
|
||||||
|
<h2 class="text-title">
|
||||||
<h2>Motion &
|
Motion &
|
||||||
3D design</h2>
|
3D design
|
||||||
<p>
|
</h2>
|
||||||
|
<p class="text-description">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
|
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.
|
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
||||||
</p>
|
</p>
|
||||||
|
<button class="call-to-action">More infos
|
||||||
|
<span class="arrow-icon">→</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button>More infos</button>
|
|
||||||
<div class="phone-container">
|
<div class="phone-container">
|
||||||
<img src="/img/phone_clothes.png" alt="phone">
|
<img src="/img/phone_clothes.png" alt="phone">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="content-3" class="flip-from-left">
|
|
||||||
<h2>Motion &
|
<section id="content-3" class="flip-container flip-from-left">
|
||||||
3D design</h2>
|
<div class="container-text">
|
||||||
<p>
|
<h2 class="text-title">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
|
Videos
|
||||||
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
<br>
|
||||||
</p>
|
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>
|
||||||
<button>More infos</button>
|
|
||||||
<div class="phone-container">
|
<div class="phone-container">
|
||||||
<img src="/img/phone_glasses.png" alt="phone">
|
<img src="/img/phone_glasses.png" alt="phone">
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</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-->
|
<!-- other section-->
|
||||||
<section id="popover" class="slider-screen">
|
<!-- <section id="popover" class="slider-screen">-->
|
||||||
<div class="phone-container">
|
<!-- <div class="phone-container">-->
|
||||||
<div class="top">
|
<!-- <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>-->
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
|
|
||||||
</div>
|
<!-- <section id="portfolio" class="slider-screen">-->
|
||||||
</div>
|
<!-- <div class="phone-container">-->
|
||||||
<div class="text">
|
<!-- <div class="top">-->
|
||||||
<h2 class="text-title">
|
<!-- </div>-->
|
||||||
<span class="color-emphasis">
|
<!-- <div class="bottom">-->
|
||||||
Premium
|
<!-- </div>-->
|
||||||
</span>
|
<!-- </div>-->
|
||||||
<span>
|
<!-- <div class="text">-->
|
||||||
& Campaign
|
<!-- <h2 class="text-title">-->
|
||||||
</span>
|
<!-- <span class="color-emphasis">-->
|
||||||
</h2>
|
<!-- Premium-->
|
||||||
<p>
|
<!-- </span>-->
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
|
<!-- <span>-->
|
||||||
Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
|
<!-- & Campaign-->
|
||||||
</p>
|
<!-- </span>-->
|
||||||
</div>
|
<!-- </h2>-->
|
||||||
</section>
|
<!-- <p>-->
|
||||||
<section id="portfolio" class="slider-screen">
|
<!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.-->
|
||||||
<div class="phone-container">
|
<!-- Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.-->
|
||||||
<div class="top">
|
<!-- </p>-->
|
||||||
|
<!-- </div>-->
|
||||||
</div>
|
<!-- </section>-->
|
||||||
<div class="bottom">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="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>
|
|
||||||
|
|
||||||
<nav class="fixed-nav is-fixed-top">
|
<nav class="fixed-nav is-fixed-top">
|
||||||
<div class="burger-menu is-2">
|
<div class="burger-menu is-2">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user