From 99815e2f90d45c8d0c5d67f970f40d0c7529fd92 Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 25 May 2023 13:00:50 +0200 Subject: [PATCH] wip #5941 @2:30 correctifs css --- app.css | 168 +++++++++++++++++++++++++++++++++++-------- app.css.map | 2 +- index.html | 22 ++++-- sass/animations.sass | 2 +- sass/app.sass | 120 +++++++++++++++++++++++++------ sass/helpers.sass | 2 +- 6 files changed, 258 insertions(+), 58 deletions(-) diff --git a/app.css b/app.css index 1eeaddb..d375a79 100644 --- a/app.css +++ b/app.css @@ -160,10 +160,10 @@ a { @keyframes line-first { 0% { - width: 0px; + width: 0; } 100% { - width: 493px; + width: 100%; } } @keyframes line-second { @@ -190,19 +190,27 @@ body { overflow-x: hidden; } +.bg-blue { + background-color: #0A7DFF; +} + +.color-blue { + color: #0A7DFF; +} + .container { width: 80%; margin: 0 auto; } -@media screen and (min-width: 1024px) { +@media screen and (max-width: 1680px) { .container { - width: 90%; - max-width: 1680px; + width: 100%; } } @media screen and (min-width: 1680px) { .container { width: 100%; + max-width: 1680px; } } .container:not(.full) { @@ -210,14 +218,6 @@ body { box-sizing: border-box; } -.bg-blue { - background-color: #0A7DFF; -} - -.color-blue { - color: #0A7DFF; -} - .grid { display: grid; gap: 32px; @@ -230,6 +230,16 @@ body { .grid .grid { grid-template-columns: repeat(2, 278px); } +@media screen and (max-width: 1344px) { + .grid .grid { + grid-template-columns: repeat(1, 358px); + } +} +@media screen and (max-width: 1024px) { + .grid .grid { + grid-template-columns: repeat(1, 1fr); + } +} .grid-item { overflow: hidden; } @@ -323,8 +333,10 @@ b { font-weight: bold; } -.max-content { - width: max-content; +@media screen and (min-width: 1024px) { + .max-content { + width: max-content; + } } .relative { @@ -335,8 +347,49 @@ b { padding-top: var(--space-l-3xl); padding-bottom: 100px; } +@media screen and (max-width: 1024px) { + .app-header { + padding-bottom: 288px; + } +} +.app-header .logo { + position: relative; + z-index: 1; + max-width: 100px; + display: inline-block; +} +@media screen and (min-width: 1024px) { + .app-header .logo { + max-width: 160px; + } +} +.app-header .logo img { + width: 100%; +} +.app-header .video-container-mobile { + width: 288px; + height: 288px; + position: absolute; + top: 0; + right: 0; +} +@media screen and (min-width: 1024px) { + .app-header .video-container-mobile { + display: none; + } +} +.app-header .video-container-mobile video, +.app-header .video-container-mobile svg { + position: absolute; + width: 100%; +} +.app-header .video-container-mobile video { + height: 100%; + object-fit: cover; +} .app-banner { overflow: hidden; + padding-bottom: 169px; } .app-banner p { font-size: var(--step-10); @@ -345,11 +398,26 @@ b { .app-banner p.first { padding-left: var(--space-custom-title-1); } -.app-banner p.third { - padding-left: var(--space-custom-title-3); +@media screen and (min-width: 768px) { + .app-banner p.third { + padding-left: var(--space-custom-title-3); + } +} +@media screen and (max-width: 768px) { + .app-banner .last-phrase { + flex-direction: column-reverse; + padding-left: var(--space-custom-title-3); + } } .app-banner span { font-size: var(--step-3); + transform: translateY(25%); +} +@media screen and (max-width: 1024px) { + .app-banner span { + width: 100%; + max-width: 200px; + } } .app-banner .video-container { height: 0; @@ -359,6 +427,11 @@ b { top: 2.2vw; right: var(--space-l-3xl); } +@media screen and (max-width: 1024px) { + .app-banner .video-container { + display: none; + } +} @media screen and (min-width: 1680px) { .app-banner .video-container { right: 145px; @@ -374,20 +447,20 @@ b { } .app-banner .video-container:before { width: 93%; - left: -100%; + left: -17%; + transform: translateX(-100%); } @media screen and (min-width: 1024px) { .app-banner .video-container:before { animation-name: line-first; animation-timing-function: cubic-bezier(0.82, 0, 0.65, 0.93); animation-fill-mode: forwards; - animation-duration: 1s; + animation-duration: 0.8s; } } @media screen and (min-width: 1680px) { .app-banner .video-container:before { width: 0; - transform: translateX(-79px); } } .app-banner .video-container:after { @@ -398,10 +471,10 @@ b { .app-banner .video-container:after { width: 0; animation-name: line-second; - animation-timing-function: linear; + animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 1s; - animation-duration: 3s; + animation-duration: 1s; } } .app-banner .video-container .overlay { @@ -415,8 +488,8 @@ b { transform: skewX(-35deg); animation-name: overlay; animation-fill-mode: forwards; - animation-duration: 1s; - animation-delay: 1s; + animation-duration: 0.8s; + animation-delay: 0.7s; } .app-banner .video-container video, .app-banner .video-container svg { @@ -432,7 +505,7 @@ b { position: relative; overflow: hidden; } -@media screen and (min-width: 500px) { +@media screen and (min-width: 768px) { .app-intro { font-size: var(--step-4); } @@ -472,11 +545,49 @@ b { .app-section { margin-bottom: var(--space-4xs-6xl); } +.app-section .image { + position: sticky; + top: 0; + height: max-content; +} +@media screen and (max-width: 1024px) { + .app-section .image { + height: 0; + padding-bottom: 100%; + margin-bottom: 36px; + position: relative; + } +} +@media screen and (max-width: 1680px) { + .app-section .image { + height: 100vh; + } +} .app-section .image img { width: 100%; } -.app-section .content p { - line-height: 20px; +@media screen and (max-width: 1680px) { + .app-section .image img { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + object-position: center; + } +} +.app-section .text { + width: 100%; + max-width: 85%; +} +@media screen and (max-width: 1024px) { + .app-section .text { + margin: auto; + } +} +@media screen and (min-width: 1024px) { + .app-section .text { + width: max-content; + } } .app-section .content p:not(:last-of-type) { margin: 0 0 1.73rem; @@ -502,13 +613,14 @@ b { .app-footer .block { width: 100%; height: 0; - padding-bottom: 62.5%; + padding-bottom: 100%; background-repeat: no-repeat; background-size: cover; } @media screen and (min-width: 768px) { .app-footer .block { width: 50%; + padding-bottom: 62.5%; } } .app-footer .block.leftblock { diff --git a/app.css.map b/app.css.map index 83ef1f1..61ac44e 100644 --- a/app.css.map +++ b/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AChBD;AACC;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;AACA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;EAKA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;AAEA;EACA;EAEA;;;AC3HA;EACE;IACE;;EAEF;IACE;;;AALJ;EACE;IACE;;EAEF;IACE;;;AALJ;EACE;IACE;;EAEF;IACE;;;ACDN;EACE,kBFLM;EEMN,aFFQ;EEGR,OFNE;EEOF;EACA;;;AAEF;EACE;EACA;;AFJA;EEEF;IAII;IACA;;;AFPF;EEEF;IAOI;;;AAEF;EACE;EACA;;;AAEJ;EACE,kBF1BK;;;AE4BP;EACE,OF7BK;;;AE+BP;EACE;EACA;;AFvBA;EEqBF;IAII;;;AAEF;EACE;;AAEF;EACE;;AF/BF;EE8BA;IAGI;;;AFjCJ;EEqCI;IACE;IACA;;EACF;IACE;IACA;;;AF1CN;EE4CE;IAEI;;;;AAGR;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AF9DA;EEiEF;IAEI;;;;AFnEF;EEqEF;IAEI;;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,aFpGQ;;;AEsGV;EACE,aFtGQ;;;AEwGV;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGA;EACE;EACA;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AFpIJ;EE8HE;IAQI;;;AAEF;EAEE;EACA;EACA,kBFpJJ;EEqJI;EACA;EACA;;AAEF;EACE;EACA;;AFnJN;EEiJI;IAII;IACA;IACA;IACA;;;AFxJR;EEiJI;IASI;IACA;;;AAEJ;EACE;EACA;;AF/JN;EE6JI;IAII;IACA;IACA;IACA;IACA;IACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA,YFxLD;EEyLC;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAEF;EACE;EACA;;AAEN;EACE;EACA;EACA;;AFlMF;EE+LA;IAKI;;;AAEF;EACE;EACA;EACA;EACA,kBFlNF;EEmNE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA,kBFnOD;;AEqOD;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEN;EACE;;AAEE;EACE;;AAGF;EACE;;AACA;EACE;;AACJ;EACE;;AAEJ;EACE;;AACA;EACE;;AACF;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AFrQJ;EEgQE;IAOI;;;AAEF;EACE;;AAEF;EACE;;AAEJ;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,OFlSF;EEmSE;;AACA;EACE","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/fontface.sass","sass/helpers.sass","sass/animations.sass","sass/app.sass"],"names":[],"mappings":"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","file":"app.css"} \ No newline at end of file diff --git a/index.html b/index.html index 0640ddd..f886f02 100644 --- a/index.html +++ b/index.html @@ -2,21 +2,35 @@ + Title
- + +
+ + + + + + + + +
+
-