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

focus on content flipping

Browse Source
This commit is contained in:
Tykayn 2023-04-25 15:54:47 +02:00 committed by tykayn
parent 9286105b98
commit d2f8565d37
4 changed files with 233 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
css/4-content.css
View File

@ -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);
}

6
css/5-popover.css
View File

@ -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;
} }

BIN
img/Sesame Digital Website.zip
View File

Binary file not shown.

283
index.html
View File

@ -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">
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. 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_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">