add responsive, disable animations

This commit is contained in:
Tykayn 2023-05-11 14:23:32 +02:00 committed by tykayn
parent 36ca950aeb
commit 35836defa8
9 changed files with 326 additions and 200 deletions

View File

@ -2,6 +2,7 @@
body {
background: #020225;
padding-bottom: 50vh;
overflow-x: hidden;
}
main section {

View File

@ -47,6 +47,11 @@
font-size: 100px !important;
letter-spacing: -0.04em;
line-height: 90px;
text-shadow: 0 0 1rem #333;
}
#content_all .text,
.text-title {
text-shadow: 0 0 1rem #333;
}
#content_all .columns > .column:nth-of-type(1) {

107
css/7-responsive.css Normal file
View File

@ -0,0 +1,107 @@
@media screen and (max-width: 900px) {
#main_title_container h2 {
margin-top: 15vh;
}
#main_title {
top: 15rem;
}
#cover .button {
top: 7vh;
}
#content_all h2,
#welcome h2 {
font-size: 6em;
line-height: 1em;
text-align: left;
}
#content_all .columns{
top: -145vh;
width: 55vw;
}
.columns{
display:block !important;
}
.column {
width: 100% !important;
}
#open {
top: 80vh;
}
/**
flipping part
*/
#flipping_zone {
margin-top: -120vh;
position: static;
}
.flip-container{
position: relative;
}
.flip-container + .flip-container{
margin-top: -5vh;
}
.flip-container .container-text{
z-index: 1;
left:33vw;
}
.flip-container .text-title{
margin-top:0;
}
.flip-container .phone-container{
left: 42vw;
top: 5vh;
}
.flip-container.flip-from-left .container-text{
left: 33vw;
top: 5vh;
}
.flip-container.flip-from-left .phone-container{
left: 25vw;
top: 10vh;
}
#content-4{
margin-top: 25vh;
}
#content-5
{
margin-top: 15vh;
}
#popover{
margin-top: 100vh;
}
/**
exemples sliders
*/
.slider-screen .text-title{
margin-top:1em;
}
.slider-screen .text,
.slider-screen .phone-container {
position: relative;
width: 412px;
left: 25vw;
top: 5vh;
}
.bullets{
top: 28em;
}
.arrow-left,
.arrow-right{
top: 60vh;
}
.slider-screen{
min-height:100vh;
}
}

View File

@ -18,3 +18,4 @@ custom
@import "4-content.css";
@import "5-popover.css";
@import "6-portfolio.css";
@import "7-responsive.css";

View File

@ -38,7 +38,7 @@
<div class="title-container">
<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>
<a href="#open" class="button margin-auto">Scroll</a>
</div>
@ -56,7 +56,7 @@
<h2 class="margin-auto container-text-lg">
We come from
<span class="color-emphasis">
the most immersive e-commerce market
the most immersive e-commerce market
</span>
in the world.
</h2>

View File

@ -2,6 +2,9 @@
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/
let development_debug = false
let enable_animations = false
if (enable_animations) {
gsap.fromTo('#main_title', {
opacity: 0,
@ -30,6 +33,7 @@ gsap.to('#hand', {
})
gsap.to('#main_title', {
top: 150,
duration: 1,
scrollTrigger: {
trigger: '#main_title',
@ -216,3 +220,4 @@ animateCard(2, 'right')
animateCard(3, 'left')
animateCard(4, 'right')
animateCard(5, 'left')
}

4
package-lock.json generated
View File

@ -7,11 +7,15 @@
"": {
"name": " ",
"version": "0.0.1",
"license": "AGPLv3+",
"dependencies": {
"serve": "~14.2.0"
},
"devDependencies": {
"parcel-bundler": "^1.8.1"
},
"engines": {
"node": ">=16.0.0"
}
},
"node_modules/@ampproject/remapping": {

View File

@ -5,6 +5,9 @@
"keywords": "sesame",
"license": "AGPLv3+",
"author": "B. Lemoine contact@cipherbliss.com",
"engines": {
"node": ">=16.0.0"
},
"scripts": {
"start": "serve ."
},

View File

@ -20,7 +20,7 @@ const count = ref(0)
<div class="title-container">
<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>
<a href="#open" class="button margin-auto">Scroll</a>
</div>