add responsive, disable animations
This commit is contained in:
parent
36ca950aeb
commit
35836defa8
@ -2,6 +2,7 @@
|
||||
body {
|
||||
background: #020225;
|
||||
padding-bottom: 50vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
main section {
|
||||
|
@ -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
107
css/7-responsive.css
Normal 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;
|
||||
}
|
||||
}
|
@ -18,3 +18,4 @@ custom
|
||||
@import "4-content.css";
|
||||
@import "5-popover.css";
|
||||
@import "6-portfolio.css";
|
||||
@import "7-responsive.css";
|
||||
|
@ -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>
|
||||
|
@ -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
4
package-lock.json
generated
@ -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": {
|
||||
|
@ -5,6 +5,9 @@
|
||||
"keywords": "sesame",
|
||||
"license": "AGPLv3+",
|
||||
"author": "B. Lemoine contact@cipherbliss.com",
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "serve ."
|
||||
},
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user