From 12cc047f6ac62ca13cabc03369359dd1befcdfe3 Mon Sep 17 00:00:00 2001 From: romainvalls Date: Wed, 15 Nov 2023 15:49:10 +0100 Subject: [PATCH] background img in body --- app.css | 12 ++++++------ docs/index.b3cd4ceb.css | 2 ++ docs/index.b3cd4ceb.css.map | 1 + docs/index.html | 2 +- 4 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 docs/index.b3cd4ceb.css create mode 100644 docs/index.b3cd4ceb.css.map diff --git a/app.css b/app.css index 5980941..4c88d6d 100644 --- a/app.css +++ b/app.css @@ -12,6 +12,11 @@ body { margin: 0; font-family: "Avenir"; overflow-x: hidden; + background-image: url(/public/assets/visuels/background_site_kickoff.webp); + background-size: cover; + background-position: center; + background-attachment: fixed; + background-repeat: no-repeat; } html { @@ -23,11 +28,6 @@ html { color: var(--color); height: 100%; width: 100vw; - background-image: url(./public/assets/visuels/background_site_kickoff.webp); - background-size: cover; - background-position: center; - background-attachment: fixed; - background-repeat: no-repeat; } .background-black { @@ -121,7 +121,7 @@ html { align-items: center; justify-content: center; background: #13120d; - overflow-y : hidden + overflow-y: hidden; } .section-three { diff --git a/docs/index.b3cd4ceb.css b/docs/index.b3cd4ceb.css new file mode 100644 index 0000000..e351804 --- /dev/null +++ b/docs/index.b3cd4ceb.css @@ -0,0 +1,2 @@ +*{box-sizing:border-box}@font-face{font-family:Avenir;src:url(avenir-medium.c9385150.woff)format("woff")}body{background-image:url(background_site_kickoff.65a64907.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;margin:0;padding:0;font-family:Avenir;overflow-x:hidden}html{scroll-behavior:smooth}.background{text-align:center;color:var(--color);width:100vw;height:100%}.background-black{background-color:#000}.text-wrapper{flex-direction:column;align-items:center;width:100vw;display:flex}.section-one{color:#fff;flex-direction:column;justify-content:center;width:100vw;height:100vh;display:flex;position:relative;overflow-x:hidden}.container-one{flex-direction:column;justify-content:center;align-items:center;height:50vh;display:flex}#first-text-container{opacity:0;justify-content:baseline;flex-direction:column;align-items:center;height:20vh;display:flex}#first-text-container span{color:#786abf}#first-text-container h2{text-align:left;justify-content:center;align-items:center;font-size:2rem;line-height:0;display:flex}#first-text-container p{text-align:left;justify-content:center;align-items:center;padding:0;font-size:1.5rem;line-height:0;display:flex}.section-two{color:#fff;width:100vw;height:100vh;position:relative;overflow-x:hidden}.section-two .part-one{background:#786abf;flex-direction:column;justify-content:center;align-items:center;height:40vh;display:flex}.section-two .link:hover{opacity:.5;transition:opacity .3s ease-in-out}.section-two .part-two{background:#13120d;flex-direction:column;justify-content:center;align-items:center;height:60vh;display:flex;overflow-y:hidden}.section-three{color:#fff;text-align:center;background:#786abf;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:1rem;display:flex;position:relative;overflow:hidden}.section-three .part-one{flex-direction:column;justify-content:center;align-items:center;font-size:18px;display:flex}.section-three .part-two{justify-content:center;align-items:justify;text-align:justify;flex-direction:column;justify-content:flex-start;font-size:1.5rem;display:flex}.section-three .head{margin-top:1rem;font-size:3rem}.section-three span{color:#000;font-size:1.4rem}.section-three span2{font-size:1.5rem}.section-three span3{color:#000;font-size:1.2rem}.section-three span4{color:#000;font-size:1rem}.section-three p{font-size:1rem}.section-four{color:#fff;width:100vw;height:100vh}.container-four{flex-direction:column;justify-content:space-evenly;align-items:center;height:100vh;display:flex}.footer{opacity:0;justify-content:flex-start;transition:opacity .5s ease-in-out;display:flex;position:fixed;bottom:0;left:0;right:0}.footer div{justify-content:space-evenly}.footer img{height:2rem;padding-left:1rem}.footer.show{opacity:1}.logo-date{height:4rem}#circle{opacity:0}.st1{height:10rem}.logo-place{height:15rem}.logo-metro{vertical-align:-6px;height:1.5rem}a{text-decoration:none}.link{color:#fff}h1,h2{font-size:3rem}time{font-size:2rem}#second-text{opacity:0}#first-ornament-svg{opacity:0;width:10vh;height:10vh;position:absolute;bottom:100px;left:-10px}#second-ornament-svg{opacity:0;width:15vh;height:15vh;position:absolute;top:50px;right:-2%}#third-ornament-svg{z-index:1000;height:4rem;position:absolute;bottom:50px;right:-15px;rotate:110deg}#fourth-ornament-svg{z-index:1000;height:6rem;position:absolute;top:10rem;left:-10px;rotate:110deg}#fifth-ornament-svg{height:13rem;position:absolute;bottom:20%;right:-6rem}#titre,#date{opacity:0;height:15%}#arrow-down{opacity:1;cursor:pointer;height:3.8vh;padding-right:.5rem;transition:opacity .1s ease-in-out}#arrow-up{cursor:pointer;height:3.8vh;padding-right:.5rem;transition:opacity .1s ease-in-out}.arrow-container{z-index:1000;flex-direction:row;display:flex;position:fixed;bottom:1%;right:2%}.arrow-container div{justify-content:center;padding-left:4px;transition:opacity .5s}.arrow-container div.hide{opacity:0;pointer-events:none}.splitflap{text-align:center;color:#fff;min-width:50px;height:50px;margin:5px;font-family:monospace;font-size:50px;line-height:50px;position:relative}.center{opacity:0;perspective:500px;justify-content:center;width:100%;margin-top:2%;display:flex;top:50%;left:0}.top{z-index:0;background-color:#2a2a2a;border-radius:10px 10px 0 0;width:100%;height:50%;position:relative;overflow:hidden}.bottom{z-index:-1;transform-origin:50%;background-color:#000;background-image:linear-gradient(#2a2a2a,#2a2a2a);border-radius:10px;width:100%;height:100%;margin-top:-50%;position:relative}.nextHalf{z-index:2;transform-origin:bottom;background-color:#000;background-image:linear-gradient(#2a2a2a,#2a2a2a);border-radius:10px 10px 0 0;width:100%;height:50%;margin-top:-100%;position:relative;overflow:hidden}.nextFull{z-index:-3;background-color:#2a2a2a;border-radius:10px;width:100%;height:100%;margin-top:-50%;position:relative}.flip1{animation:1s ease-in flip1}.flip2{animation:1s ease-out flip2}@keyframes flip1{0%{background-color:#2a2a2a;transform:rotateX(0)}50%{background-color:#000;transform:rotateX(90deg)}to{transform:rotateX(90deg)}}@keyframes flip2{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}to{background-color:#2a2a2a;transform:rotateX(0)}}.hidden{opacity:0;filter:blur(5px);transition:all 1.5s;transform:translateY(5%)}.show{opacity:1;filter:blur();transform:translateY(0)}@media screen and (width<=1024px) and (width>=700px){.section-one p,.section-two p{font-size:20px}.section-two h2{font-size:2rem}.section-three span{font-size:15px}.section-three span2,.section-three span3{font-size:13px}.section-three span4{font-size:10px}.section-three .head{margin-top:none;font-size:30px}time{font-size:15px}.section-four p{font-size:40px}#logo-osrd-big{height:20rem;padding:.5rem}.logo-date{height:2rem}.logo-titre{height:4rem}#first-text-container{opacity:0;flex-direction:column;justify-content:center;align-items:baseline;height:20vh;display:flex}#first-text-container span{color:#786abf}#first-text-container h2{text-align:left;font-size:2rem;line-height:0}#first-text-container p{text-align:left;padding:0;font-size:1.5rem;line-height:0}.splitflap{text-align:center;color:#fff;min-width:25px;height:25px;margin:2.5px;font-family:monospace;font-size:25px;line-height:25px;position:relative}.center{perspective:500px;justify-content:center;width:100%;margin-top:2%;display:flex;top:50%;left:0}.top{z-index:0;background-color:#2a2a2a;border-radius:5px 5px 0 0;width:100%;height:50%;position:relative;overflow:hidden}.bottom{z-index:-1;transform-origin:50%;background-color:#000;background-image:linear-gradient(#2a2a2a,#2a2a2a);border-radius:5px;width:100%;height:100%;margin-top:-50%;position:relative}.nextHalf{z-index:2;transform-origin:bottom;background-color:#000;background-image:linear-gradient(#2a2a2a,#2a2a2a);border-radius:5px 5px 0 0;width:100%;height:50%;margin-top:-100%;position:relative;overflow:hidden}.nextFull{z-index:-3;background-color:#2a2a2a;border-radius:5px;width:100%;height:100%;margin-top:-50%;position:relative}#first-ornament-svg{opacity:0;width:10vh;height:10vh;position:absolute;bottom:100px;left:-10px}#second-ornament-svg{opacity:0;width:15vh;height:15vh;position:absolute;top:50px;right:-2%}#third-ornament-svg{z-index:1000;height:8rem;position:absolute;bottom:6rem;right:-15px;rotate:110deg}#fourth-ornament-svg{z-index:1000;height:4rem;position:absolute;bottom:10px;left:-10px;rotate:110deg}#fifth-ornament-svg{z-index:1000;height:8rem;position:absolute;top:30%;right:-7rem;rotate:110deg}}@media screen and (width<=700px) and (width>=200px){p{padding:.5px}.section-three span{font-size:15px}.section-three span2,.section-three span3{font-size:13px}.section-three span4{font-size:10px}.section-three .head{margin-top:none;font-size:30px}time{font-size:15px}.section-three p{font-size:12px}.section-one p{font-size:20px}.section-two p{font-size:15px}.section-two h2{font-size:2rem}.section-four p{font-size:20px}#logo-osrd-big{height:12rem}.logo-date{height:2rem}.logo-titre{height:4rem}h2{font-size:3rem}#first-text-container{opacity:0;flex-direction:column;justify-content:center;align-items:baseline;height:15vh;display:flex}#first-text-container span{color:#786abf}#first-text-container h2{text-align:left;font-size:2rem;line-height:0}#first-text-container p{text-align:left;padding:0;font-size:1rem;line-height:0}.splitflap{text-align:center;color:#fff;min-width:25px;height:25px;margin:2.5px;font-family:monospace;font-size:25px;line-height:25px;position:relative}.center{perspective:500px;justify-content:center;width:100%;margin-top:2%;display:flex;top:50%;left:0}.top{z-index:0;background-color:#2a2a2a;border-radius:5px 5px 0 0;width:100%;height:50%;position:relative;overflow:hidden}.bottom{z-index:-1;transform-origin:50%;background-color:#000;background-image:linear-gradient(#2a2a2a,#2a2a2a);border-radius:5px;width:100%;height:100%;margin-top:-50%;position:relative}.nextHalf{z-index:2;transform-origin:bottom;background-color:#000;background-image:linear-gradient(#2a2a2a,#2a2a2a);border-radius:5px 5px 0 0;width:100%;height:50%;margin-top:-100%;position:relative;overflow:hidden}.nextFull{z-index:-3;background-color:#2a2a2a;border-radius:5px;width:100%;height:100%;margin-top:-50%;position:relative}#first-ornament-svg{opacity:0;width:6.5vh;height:6.5vh;position:absolute;bottom:100px;left:-10px}#second-ornament-svg{opacity:0;width:12vh;height:12vh;position:absolute;top:50px;right:-2%}#third-ornament-svg{z-index:1000;height:4rem;position:absolute;top:4rem;right:-15px;rotate:110deg}#fourth-ornament-svg{z-index:1000;height:4rem;position:absolute;bottom:10px;left:-10px;rotate:110deg}#fifth-ornament-svg{z-index:1000;height:8rem;position:absolute;top:50%;right:-7rem;rotate:110deg}.container-one{height:40vh}}@media (prefers-reduced-motion){.hidden{transition:none}} +/*# sourceMappingURL=index.b3cd4ceb.css.map */ diff --git a/docs/index.b3cd4ceb.css.map b/docs/index.b3cd4ceb.css.map new file mode 100644 index 0000000..575df26 --- /dev/null +++ b/docs/index.b3cd4ceb.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,wBAIA,kGAKA,gPAYA,4BAIA,yEAOA,wCAIA,gFAOA,+IAWA,wGAQA,2HASA,yCAIA,6HASA,wIAUA,qFAQA,mIASA,uEAKA,qJAUA,oNAgBA,qHAQA,sKAUA,oDAKA,gDAKA,sCAIA,iDAKA,+CAKA,gCAIA,kDAMA,gHAQA,oIAYA,yCAGA,0CAKA,uBAIA,uBAIA,kBAIA,kBAIA,yBAIA,8CAKA,uBAIA,iBAIA,qBAQA,oBAIA,uBAIA,+FASA,2FASA,qGAQA,mGAQA,0EAOA,kCAWA,yGAOA,6FAOA,gGAQA,oFAMA,wDAOA,sJAYA,gHAWA,4HAUA,4LAYA,yNAaA,0HAUA,kCAKA,mCAKA,kJAcA,8HAaA,gFAOA,sDAMA,qDACE,6CAMA,+BAGA,mCAIA,yDAQA,oCAIA,oDAKA,oBAIA,+BAIA,0CAIA,uBAIA,wBAKA,2HASA,yCAIA,sEAMA,iFAMA,wJAYA,sGAUA,0HAUA,2LAYA,uNAaA,yHASA,+FASA,2FASA,qGAQA,qGASA,kGASF,oDACE,eAIA,mCAIA,yDAQA,oCAIA,oDAKA,oBAIA,gCAGA,8BAGA,8BAGA,+BAGA,+BAIA,4BAIA,uBAIA,wBAIA,kBAIA,2HASA,yCAIA,sEAMA,+EAMA,wJAYA,sGAUA,0HAUA,2LAYA,uNAaA,yHASA,iGASA,2FASA,kGAQA,qGASA,iGASA,4BAKF,gCACE","sources":["index.b3cd4ceb.css","app.css"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n@font-face {\n font-family: Avenir;\n src: url(\"avenir-medium.c9385150.woff\") format(\"woff\");\n}\n\nbody {\n background-image: url(\"background_site_kickoff.65a64907.webp\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n background-attachment: fixed;\n margin: 0;\n padding: 0;\n font-family: Avenir;\n overflow-x: hidden;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.background {\n text-align: center;\n color: var(--color);\n width: 100vw;\n height: 100%;\n}\n\n.background-black {\n background-color: #000;\n}\n\n.text-wrapper {\n flex-direction: column;\n align-items: center;\n width: 100vw;\n display: flex;\n}\n\n.section-one {\n color: #fff;\n flex-direction: column;\n justify-content: center;\n width: 100vw;\n height: 100vh;\n display: flex;\n position: relative;\n overflow-x: hidden;\n}\n\n.container-one {\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 50vh;\n display: flex;\n}\n\n#first-text-container {\n opacity: 0;\n justify-content: baseline;\n flex-direction: column;\n align-items: center;\n height: 20vh;\n display: flex;\n}\n\n#first-text-container span {\n color: #786abf;\n}\n\n#first-text-container h2 {\n text-align: left;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n line-height: 0;\n display: flex;\n}\n\n#first-text-container p {\n text-align: left;\n justify-content: center;\n align-items: center;\n padding: 0;\n font-size: 1.5rem;\n line-height: 0;\n display: flex;\n}\n\n.section-two {\n color: #fff;\n width: 100vw;\n height: 100vh;\n position: relative;\n overflow-x: hidden;\n}\n\n.section-two .part-one {\n background: #786abf;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 40vh;\n display: flex;\n}\n\n.section-two .link:hover {\n opacity: .5;\n transition: opacity .3s ease-in-out;\n}\n\n.section-two .part-two {\n background: #13120d;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 60vh;\n display: flex;\n overflow-y: hidden;\n}\n\n.section-three {\n color: #fff;\n text-align: center;\n background: #786abf;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100vw;\n height: 100vh;\n padding: 1rem;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.section-three .part-one {\n flex-direction: column;\n justify-content: center;\n align-items: center;\n font-size: 18px;\n display: flex;\n}\n\n.section-three .part-two {\n justify-content: center;\n align-items: justify;\n text-align: justify;\n flex-direction: column;\n justify-content: flex-start;\n font-size: 1.5rem;\n display: flex;\n}\n\n.section-three .head {\n margin-top: 1rem;\n font-size: 3rem;\n}\n\n.section-three span {\n color: #000;\n font-size: 1.4rem;\n}\n\n.section-three span2 {\n font-size: 1.5rem;\n}\n\n.section-three span3 {\n color: #000;\n font-size: 1.2rem;\n}\n\n.section-three span4 {\n color: #000;\n font-size: 1rem;\n}\n\n.section-three p {\n font-size: 1rem;\n}\n\n.section-four {\n color: #fff;\n width: 100vw;\n height: 100vh;\n}\n\n.container-four {\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n height: 100vh;\n display: flex;\n}\n\n.footer {\n opacity: 0;\n justify-content: flex-start;\n transition: opacity .5s ease-in-out;\n display: flex;\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.footer div {\n justify-content: space-evenly;\n}\n\n.footer img {\n height: 2rem;\n padding-left: 1rem;\n}\n\n.footer.show {\n opacity: 1;\n}\n\n.logo-date {\n height: 4rem;\n}\n\n#circle {\n opacity: 0;\n}\n\n.st1 {\n height: 10rem;\n}\n\n.logo-place {\n height: 15rem;\n}\n\n.logo-metro {\n vertical-align: -6px;\n height: 1.5rem;\n}\n\na {\n text-decoration: none;\n}\n\n.link {\n color: #fff;\n}\n\nh1, h2 {\n font-size: 3rem;\n}\n\ntime {\n font-size: 2rem;\n}\n\n#second-text {\n opacity: 0;\n}\n\n#first-ornament-svg {\n opacity: 0;\n width: 10vh;\n height: 10vh;\n position: absolute;\n bottom: 100px;\n left: -10px;\n}\n\n#second-ornament-svg {\n opacity: 0;\n width: 15vh;\n height: 15vh;\n position: absolute;\n top: 50px;\n right: -2%;\n}\n\n#third-ornament-svg {\n z-index: 1000;\n height: 4rem;\n position: absolute;\n bottom: 50px;\n right: -15px;\n rotate: 110deg;\n}\n\n#fourth-ornament-svg {\n z-index: 1000;\n height: 6rem;\n position: absolute;\n top: 10rem;\n left: -10px;\n rotate: 110deg;\n}\n\n#fifth-ornament-svg {\n height: 13rem;\n position: absolute;\n bottom: 20%;\n right: -6rem;\n}\n\n#titre, #date {\n opacity: 0;\n height: 15%;\n}\n\n#arrow-down {\n opacity: 1;\n cursor: pointer;\n height: 3.8vh;\n padding-right: .5rem;\n transition: opacity .1s ease-in-out;\n}\n\n#arrow-up {\n cursor: pointer;\n height: 3.8vh;\n padding-right: .5rem;\n transition: opacity .1s ease-in-out;\n}\n\n.arrow-container {\n z-index: 1000;\n flex-direction: row;\n display: flex;\n position: fixed;\n bottom: 1%;\n right: 2%;\n}\n\n.arrow-container div {\n justify-content: center;\n padding-left: 4px;\n transition: opacity .5s;\n}\n\n.arrow-container div.hide {\n opacity: 0;\n pointer-events: none;\n}\n\n.splitflap {\n text-align: center;\n color: #fff;\n min-width: 50px;\n height: 50px;\n margin: 5px;\n font-family: monospace;\n font-size: 50px;\n line-height: 50px;\n position: relative;\n}\n\n.center {\n opacity: 0;\n perspective: 500px;\n justify-content: center;\n width: 100%;\n margin-top: 2%;\n display: flex;\n top: 50%;\n left: 0;\n}\n\n.top {\n z-index: 0;\n background-color: #2a2a2a;\n border-radius: 10px 10px 0 0;\n width: 100%;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.bottom {\n z-index: -1;\n transform-origin: center;\n background-color: #000;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n border-radius: 10px;\n width: 100%;\n height: 100%;\n margin-top: -50%;\n position: relative;\n}\n\n.nextHalf {\n z-index: 2;\n transform-origin: bottom;\n background-color: #000;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n border-radius: 10px 10px 0 0;\n width: 100%;\n height: 50%;\n margin-top: -100%;\n position: relative;\n overflow: hidden;\n}\n\n.nextFull {\n z-index: -3;\n background-color: #2a2a2a;\n border-radius: 10px;\n width: 100%;\n height: 100%;\n margin-top: -50%;\n position: relative;\n}\n\n.flip1 {\n animation: 1s ease-in flip1;\n}\n\n.flip2 {\n animation: 1s ease-out flip2;\n}\n\n@keyframes flip1 {\n 0% {\n background-color: #2a2a2a;\n transform: rotateX(0);\n }\n\n 50% {\n background-color: #000;\n transform: rotateX(90deg);\n }\n\n 100% {\n transform: rotateX(90deg);\n }\n}\n\n@keyframes flip2 {\n 0% {\n transform: rotateX(-90deg);\n }\n\n 50% {\n transform: rotateX(-90deg);\n }\n\n 100% {\n background-color: #2a2a2a;\n transform: rotateX(0);\n }\n}\n\n.hidden {\n opacity: 0;\n filter: blur(5px);\n transition: all 1.5s;\n transform: translateY(5%);\n}\n\n.show {\n opacity: 1;\n filter: blur();\n transform: translateY(0);\n}\n\n@media screen and (width <= 1024px) and (width >= 700px) {\n .section-one p, .section-two p {\n font-size: 20px;\n }\n\n .section-two h2 {\n font-size: 2rem;\n }\n\n .section-three span {\n font-size: 15px;\n }\n\n .section-three span2, .section-three span3 {\n font-size: 13px;\n }\n\n .section-three span4 {\n font-size: 10px;\n }\n\n .section-three .head {\n margin-top: none;\n font-size: 30px;\n }\n\n time {\n font-size: 15px;\n }\n\n .section-four p {\n font-size: 40px;\n }\n\n #logo-osrd-big {\n height: 20rem;\n padding: .5rem;\n }\n\n .logo-date {\n height: 2rem;\n }\n\n .logo-titre {\n height: 4rem;\n }\n\n #first-text-container {\n opacity: 0;\n flex-direction: column;\n justify-content: center;\n align-items: baseline;\n height: 20vh;\n display: flex;\n }\n\n #first-text-container span {\n color: #786abf;\n }\n\n #first-text-container h2 {\n text-align: left;\n font-size: 2rem;\n line-height: 0;\n }\n\n #first-text-container p {\n text-align: left;\n padding: 0;\n font-size: 1.5rem;\n line-height: 0;\n }\n\n .splitflap {\n text-align: center;\n color: #fff;\n min-width: 25px;\n height: 25px;\n margin: 2.5px;\n font-family: monospace;\n font-size: 25px;\n line-height: 25px;\n position: relative;\n }\n\n .center {\n perspective: 500px;\n justify-content: center;\n width: 100%;\n margin-top: 2%;\n display: flex;\n top: 50%;\n left: 0;\n }\n\n .top {\n z-index: 0;\n background-color: #2a2a2a;\n border-radius: 5px 5px 0 0;\n width: 100%;\n height: 50%;\n position: relative;\n overflow: hidden;\n }\n\n .bottom {\n z-index: -1;\n transform-origin: center;\n background-color: #000;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n border-radius: 5px;\n width: 100%;\n height: 100%;\n margin-top: -50%;\n position: relative;\n }\n\n .nextHalf {\n z-index: 2;\n transform-origin: bottom;\n background-color: #000;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n border-radius: 5px 5px 0 0;\n width: 100%;\n height: 50%;\n margin-top: -100%;\n position: relative;\n overflow: hidden;\n }\n\n .nextFull {\n z-index: -3;\n background-color: #2a2a2a;\n border-radius: 5px;\n width: 100%;\n height: 100%;\n margin-top: -50%;\n position: relative;\n }\n\n #first-ornament-svg {\n opacity: 0;\n width: 10vh;\n height: 10vh;\n position: absolute;\n bottom: 100px;\n left: -10px;\n }\n\n #second-ornament-svg {\n opacity: 0;\n width: 15vh;\n height: 15vh;\n position: absolute;\n top: 50px;\n right: -2%;\n }\n\n #third-ornament-svg {\n z-index: 1000;\n height: 8rem;\n position: absolute;\n bottom: 6rem;\n right: -15px;\n rotate: 110deg;\n }\n\n #fourth-ornament-svg {\n z-index: 1000;\n height: 4rem;\n position: absolute;\n bottom: 10px;\n left: -10px;\n rotate: 110deg;\n }\n\n #fifth-ornament-svg {\n z-index: 1000;\n height: 8rem;\n position: absolute;\n top: 30%;\n right: -7rem;\n rotate: 110deg;\n }\n}\n\n@media screen and (width <= 700px) and (width >= 200px) {\n p {\n padding: .5px;\n }\n\n .section-three span {\n font-size: 15px;\n }\n\n .section-three span2, .section-three span3 {\n font-size: 13px;\n }\n\n .section-three span4 {\n font-size: 10px;\n }\n\n .section-three .head {\n margin-top: none;\n font-size: 30px;\n }\n\n time {\n font-size: 15px;\n }\n\n .section-three p {\n font-size: 12px;\n }\n\n .section-one p {\n font-size: 20px;\n }\n\n .section-two p {\n font-size: 15px;\n }\n\n .section-two h2 {\n font-size: 2rem;\n }\n\n .section-four p {\n font-size: 20px;\n }\n\n #logo-osrd-big {\n height: 12rem;\n }\n\n .logo-date {\n height: 2rem;\n }\n\n .logo-titre {\n height: 4rem;\n }\n\n h2 {\n font-size: 3rem;\n }\n\n #first-text-container {\n opacity: 0;\n flex-direction: column;\n justify-content: center;\n align-items: baseline;\n height: 15vh;\n display: flex;\n }\n\n #first-text-container span {\n color: #786abf;\n }\n\n #first-text-container h2 {\n text-align: left;\n font-size: 2rem;\n line-height: 0;\n }\n\n #first-text-container p {\n text-align: left;\n padding: 0;\n font-size: 1rem;\n line-height: 0;\n }\n\n .splitflap {\n text-align: center;\n color: #fff;\n min-width: 25px;\n height: 25px;\n margin: 2.5px;\n font-family: monospace;\n font-size: 25px;\n line-height: 25px;\n position: relative;\n }\n\n .center {\n perspective: 500px;\n justify-content: center;\n width: 100%;\n margin-top: 2%;\n display: flex;\n top: 50%;\n left: 0;\n }\n\n .top {\n z-index: 0;\n background-color: #2a2a2a;\n border-radius: 5px 5px 0 0;\n width: 100%;\n height: 50%;\n position: relative;\n overflow: hidden;\n }\n\n .bottom {\n z-index: -1;\n transform-origin: center;\n background-color: #000;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n border-radius: 5px;\n width: 100%;\n height: 100%;\n margin-top: -50%;\n position: relative;\n }\n\n .nextHalf {\n z-index: 2;\n transform-origin: bottom;\n background-color: #000;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n border-radius: 5px 5px 0 0;\n width: 100%;\n height: 50%;\n margin-top: -100%;\n position: relative;\n overflow: hidden;\n }\n\n .nextFull {\n z-index: -3;\n background-color: #2a2a2a;\n border-radius: 5px;\n width: 100%;\n height: 100%;\n margin-top: -50%;\n position: relative;\n }\n\n #first-ornament-svg {\n opacity: 0;\n width: 6.5vh;\n height: 6.5vh;\n position: absolute;\n bottom: 100px;\n left: -10px;\n }\n\n #second-ornament-svg {\n opacity: 0;\n width: 12vh;\n height: 12vh;\n position: absolute;\n top: 50px;\n right: -2%;\n }\n\n #third-ornament-svg {\n z-index: 1000;\n height: 4rem;\n position: absolute;\n top: 4rem;\n right: -15px;\n rotate: 110deg;\n }\n\n #fourth-ornament-svg {\n z-index: 1000;\n height: 4rem;\n position: absolute;\n bottom: 10px;\n left: -10px;\n rotate: 110deg;\n }\n\n #fifth-ornament-svg {\n z-index: 1000;\n height: 8rem;\n position: absolute;\n top: 50%;\n right: -7rem;\n rotate: 110deg;\n }\n\n .container-one {\n height: 40vh;\n }\n}\n\n@media (prefers-reduced-motion) {\n .hidden {\n transition: none;\n }\n}\n\n/*# sourceMappingURL=index.b3cd4ceb.css.map */\n","* {\n box-sizing: border-box;\n}\n\n@font-face {\n font-family: \"Avenir\";\n src: url(\"/public/fonts/Avenir/avenir-medium.woff\") format(\"woff\");\n}\n\nbody {\n padding: 0;\n margin: 0;\n font-family: \"Avenir\";\n overflow-x: hidden;\n background-image: url(/public/assets/visuels/background_site_kickoff.webp);\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.background {\n text-align: center;\n color: var(--color);\n height: 100%;\n width: 100vw;\n}\n\n.background-black {\n background-color: black;\n}\n\n.text-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100vw;\n}\n\n.section-one {\n position: relative;\n height: 100vh;\n width: 100vw;\n color: white;\n justify-content: center;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n}\n\n.container-one {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 50vh;\n}\n\n#first-text-container {\n opacity: 0;\n display: flex;\n flex-direction: column;\n justify-content: baseline;\n align-items: center;\n height: 20vh;\n}\n\n#first-text-container span {\n color: #786abf;\n}\n\n#first-text-container h2 {\n font-size: 2rem;\n line-height: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: left;\n}\n\n#first-text-container p {\n font-size: 1.5rem;\n padding: 0;\n line-height: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: left;\n}\n\n.section-two {\n position: relative;\n height: 100vh;\n width: 100vw;\n color: white;\n overflow-x: hidden;\n}\n\n.section-two .part-one {\n height: 40vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #786abf;\n}\n\n.section-two .link:hover {\n opacity: 0.5;\n transition: opacity 0.3s ease-in-out;\n}\n\n.section-two .part-two {\n height: 60vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: #13120d;\n overflow-y: hidden;\n}\n\n.section-three {\n position: relative;\n height: 100vh;\n width: 100vw;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n text-align: center;\n background: #786abf;\n overflow-x: hidden;\n padding: 1rem;\n overflow-y: hidden;\n}\n\n.section-three .part-one {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n font-size: 18px;\n}\n\n.section-three .part-two {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: justify;\n text-align: justify;\n justify-content: flex-start;\n font-size: 1.5rem;\n}\n\n.section-three .head {\n font-size: 3rem;\n margin-top: 1rem;\n}\n\n.section-three span {\n color: black;\n font-size: 1.4rem;\n}\n\n.section-three span2 {\n font-size: 1.5rem;\n}\n\n.section-three span3 {\n font-size: 1.2rem;\n color: #000;\n}\n\n.section-three span4 {\n font-size: 1rem;\n color: #000;\n}\n\n.section-three p {\n font-size: 1rem;\n}\n\n.section-four {\n height: 100vh;\n width: 100vw;\n color: white;\n}\n\n.container-four {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n}\n\n.footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: flex-start;\n\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n}\n\n.footer div {\n justify-content: space-evenly;\n}\n.footer img {\n height: 2rem;\n padding-left: 1rem;\n}\n\n.footer.show {\n opacity: 1;\n}\n\n.logo-date {\n height: 4rem;\n}\n\n#circle {\n opacity: 0;\n}\n\n.st1 {\n height: 10rem;\n}\n\n.logo-place {\n height: 15rem;\n}\n\n.logo-metro {\n height: 1.5rem;\n vertical-align: -6px;\n}\n\na {\n text-decoration: none;\n}\n\n.link {\n color: white;\n}\n\nh1 {\n font-size: 3rem;\n}\n\nh2 {\n font-size: 3rem;\n}\n\ntime {\n font-size: 2rem;\n}\n\n#second-text {\n opacity: 0;\n}\n\n#first-ornament-svg {\n position: absolute;\n left: -10px;\n bottom: 100px;\n height: 10vh;\n width: 10vh;\n opacity: 0;\n}\n\n#second-ornament-svg {\n position: absolute;\n right: -2%;\n top: 50px;\n height: 15vh;\n width: 15vh;\n opacity: 0;\n}\n\n#third-ornament-svg {\n position: absolute;\n right: -15px;\n bottom: 50px;\n height: 4rem;\n z-index: 1000;\n rotate: 110deg;\n}\n#fourth-ornament-svg {\n position: absolute;\n left: -10px;\n top: 10rem;\n height: 6rem;\n z-index: 1000;\n rotate: 110deg;\n}\n#fifth-ornament-svg {\n position: absolute;\n right: -6rem;\n bottom: 20%;\n height: 13rem;\n}\n\n#titre {\n /* padding-top: 10; */\n height: 15%;\n opacity: 0;\n}\n\n#date {\n /* padding-top: 10; */\n height: 15%;\n opacity: 0;\n}\n#arrow-down {\n height: 3.8vh;\n opacity: 1;\n transition: opacity 0.1s ease-in-out;\n cursor: pointer;\n padding-right: 0.5rem;\n}\n#arrow-up {\n height: 3.8vh;\n transition: opacity 0.1s ease-in-out;\n cursor: pointer;\n padding-right: 0.5rem;\n}\n\n.arrow-container {\n position: fixed;\n bottom: 1%;\n right: 2%;\n display: flex;\n flex-direction: row;\n z-index: 1000;\n}\n.arrow-container div {\n transition: opacity 0.5s ease;\n padding-left: 4px;\n justify-content: center;\n}\n\n.arrow-container div.hide {\n opacity: 0;\n pointer-events: none;\n}\n\n/* Rebours */\n\n.splitflap {\n position: relative;\n min-width: 50px;\n height: 50px;\n margin: 5px;\n line-height: 50px;\n font-size: 50px;\n font-family: Monospace;\n text-align: center;\n color: white;\n}\n\n.center {\n opacity: 0;\n left: 0;\n top: 50%;\n margin-top: 2%;\n width: 100%;\n display: flex;\n justify-content: center;\n perspective: 500px;\n}\n\n.top {\n position: relative;\n height: 50%;\n width: 100%;\n background-color: #2a2a2a;\n border-radius: 10px 10px 0 0;\n overflow: hidden;\n z-index: 0;\n}\n\n.bottom {\n position: relative;\n height: 100%;\n width: 100%;\n margin-top: -50%;\n border-radius: 10px 10px 10px 10px;\n z-index: -1;\n background-color: black;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n transform-origin: center;\n}\n\n.nextHalf {\n position: relative;\n height: 50%;\n width: 100%;\n margin-top: -100%;\n overflow: hidden;\n border-radius: 10px 10px 0 0;\n z-index: 2;\n background-color: black;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n transform-origin: bottom;\n}\n\n.nextFull {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: #2a2a2a;\n margin-top: -50%;\n border-radius: 10px 10px 10px 10px;\n z-index: -3;\n}\n\n.flip1 {\n animation: flip1 ease-in 1;\n animation-duration: 1s;\n}\n\n.flip2 {\n animation: flip2 ease-out 1;\n animation-duration: 1s;\n}\n\n@keyframes flip1 {\n 0% {\n transform: rotateX(0deg);\n background-color: #2a2a2a;\n }\n 50% {\n transform: rotateX(90deg);\n background-color: black;\n }\n 100% {\n transform: rotateX(90deg);\n }\n}\n\n@keyframes flip2 {\n 0% {\n transform: rotateX(-90deg);\n }\n 50% {\n transform: rotateX(-90deg);\n }\n 100% {\n transform: rotateX(0deg);\n background-color: #2a2a2a;\n }\n}\n\n.hidden {\n opacity: 0;\n filter: blur(5px);\n transform: translateY(5%);\n transition: all 1.5s;\n}\n\n.show {\n opacity: 1;\n filter: blur(0);\n transform: translateY(0);\n}\n\n@media screen and (max-width: 1024px) and (min-width: 700px) {\n .section-one p {\n font-size: 20px;\n }\n .section-two p {\n font-size: 20px;\n }\n .section-two h2 {\n font-size: 2rem;\n }\n .section-three span {\n font-size: 15px;\n }\n\n .section-three span2 {\n font-size: 13px;\n }\n\n .section-three span3 {\n font-size: 13px;\n }\n\n .section-three span4 {\n font-size: 10px;\n }\n\n .section-three .head {\n font-size: 30px;\n margin-top: none;\n }\n\n time {\n font-size: 15px;\n }\n\n .section-four p {\n font-size: 40px;\n }\n\n #logo-osrd-big {\n height: 20rem;\n padding: 0.5rem;\n }\n .logo-date {\n height: 2rem;\n /* padding: 0.5rem; */\n }\n .logo-titre {\n height: 4rem;\n /* padding: 0.5rem; */\n }\n\n #first-text-container {\n opacity: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: baseline;\n height: 20vh;\n }\n\n #first-text-container span {\n color: #786abf;\n }\n\n #first-text-container h2 {\n text-align: left;\n font-size: 2rem;\n line-height: 0;\n }\n\n #first-text-container p {\n text-align: left;\n font-size: 1.5rem;\n padding: 0;\n line-height: 0;\n }\n .splitflap {\n position: relative;\n min-width: 25px;\n height: 25px;\n margin: 2.5px;\n line-height: 25px;\n font-size: 25px;\n font-family: Monospace;\n text-align: center;\n color: white;\n }\n\n .center {\n left: 0;\n top: 50%;\n margin-top: 2%;\n width: 100%;\n display: flex;\n justify-content: center;\n perspective: 500px;\n }\n\n .top {\n position: relative;\n height: 50%;\n width: 100%;\n background-color: #2a2a2a;\n border-radius: 5px 5px 0 0;\n overflow: hidden;\n z-index: 0;\n }\n\n .bottom {\n position: relative;\n height: 100%;\n width: 100%;\n margin-top: -50%;\n border-radius: 5px 5px 5px 5px;\n z-index: -1;\n background-color: black;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n transform-origin: center;\n }\n\n .nextHalf {\n position: relative;\n height: 50%;\n width: 100%;\n margin-top: -100%;\n overflow: hidden;\n border-radius: 5px 5px 0 0;\n z-index: 2;\n background-color: black;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n transform-origin: bottom;\n }\n\n .nextFull {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: #2a2a2a;\n margin-top: -50%;\n border-radius: 5px 5px 5px 5px;\n z-index: -3;\n }\n #first-ornament-svg {\n position: absolute;\n left: -10px;\n bottom: 100px;\n height: 10vh;\n width: 10vh;\n opacity: 0;\n }\n\n #second-ornament-svg {\n position: absolute;\n right: -2%;\n top: 50px;\n height: 15vh;\n width: 15vh;\n opacity: 0;\n }\n\n #third-ornament-svg {\n position: absolute;\n right: -15px;\n bottom: 6rem;\n height: 8rem;\n z-index: 1000;\n rotate: 110deg;\n }\n #fourth-ornament-svg {\n position: absolute;\n left: -10px;\n bottom: 10px;\n height: 4rem;\n z-index: 1000;\n rotate: 110deg;\n }\n\n #fifth-ornament-svg {\n position: absolute;\n right: -7rem;\n top: 30%;\n height: 8rem;\n z-index: 1000;\n rotate: 110deg;\n }\n}\n@media screen and (max-width: 700px) and (min-width: 200px) {\n p {\n padding: 0.5px;\n }\n\n .section-three span {\n font-size: 15px;\n }\n\n .section-three span2 {\n font-size: 13px;\n }\n\n .section-three span3 {\n font-size: 13px;\n }\n\n .section-three span4 {\n font-size: 10px;\n }\n\n .section-three .head {\n font-size: 30px;\n margin-top: none;\n }\n\n time {\n font-size: 15px;\n }\n\n .section-three p {\n font-size: 12px;\n }\n .section-one p {\n font-size: 20px;\n }\n .section-two p {\n font-size: 15px;\n }\n .section-two h2 {\n font-size: 2rem;\n }\n .section-four p {\n font-size: 20px;\n }\n\n #logo-osrd-big {\n height: 12rem;\n /* padding: 0.5rem; */\n }\n .logo-date {\n height: 2rem;\n /* padding: 0.5rem; */\n }\n .logo-titre {\n height: 4rem;\n /* padding: 0.5rem; */\n }\n h2 {\n font-size: 3rem;\n }\n\n #first-text-container {\n opacity: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: baseline;\n height: 15vh;\n }\n\n #first-text-container span {\n color: #786abf;\n }\n\n #first-text-container h2 {\n text-align: left;\n font-size: 2rem;\n line-height: 0;\n }\n\n #first-text-container p {\n text-align: left;\n font-size: 1rem;\n padding: 0;\n line-height: 0;\n }\n .splitflap {\n position: relative;\n min-width: 25px;\n height: 25px;\n margin: 2.5px;\n line-height: 25px;\n font-size: 25px;\n font-family: Monospace;\n text-align: center;\n color: white;\n }\n\n .center {\n left: 0;\n top: 50%;\n margin-top: 2%;\n width: 100%;\n display: flex;\n justify-content: center;\n perspective: 500px;\n }\n\n .top {\n position: relative;\n height: 50%;\n width: 100%;\n background-color: #2a2a2a;\n border-radius: 5px 5px 0 0;\n overflow: hidden;\n z-index: 0;\n }\n\n .bottom {\n position: relative;\n height: 100%;\n width: 100%;\n margin-top: -50%;\n border-radius: 5px 5px 5px 5px;\n z-index: -1;\n background-color: black;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n transform-origin: center;\n }\n\n .nextHalf {\n position: relative;\n height: 50%;\n width: 100%;\n margin-top: -100%;\n overflow: hidden;\n border-radius: 5px 5px 0 0;\n z-index: 2;\n background-color: black;\n background-image: linear-gradient(#2a2a2a, #2a2a2a);\n transform-origin: bottom;\n }\n\n .nextFull {\n position: relative;\n height: 100%;\n width: 100%;\n background-color: #2a2a2a;\n margin-top: -50%;\n border-radius: 5px 5px 5px 5px;\n z-index: -3;\n }\n #first-ornament-svg {\n position: absolute;\n left: -10px;\n bottom: 100px;\n height: 6.5vh;\n width: 6.5vh;\n opacity: 0;\n }\n\n #second-ornament-svg {\n position: absolute;\n right: -2%;\n top: 50px;\n height: 12vh;\n width: 12vh;\n opacity: 0;\n }\n\n #third-ornament-svg {\n position: absolute;\n right: -15px;\n top: 4rem;\n height: 4rem;\n z-index: 1000;\n rotate: 110deg;\n }\n #fourth-ornament-svg {\n position: absolute;\n left: -10px;\n bottom: 10px;\n height: 4rem;\n z-index: 1000;\n rotate: 110deg;\n }\n\n #fifth-ornament-svg {\n position: absolute;\n right: -7rem;\n top: 50%;\n height: 8rem;\n z-index: 1000;\n rotate: 110deg;\n }\n\n .container-one {\n height: 40vh;\n }\n}\n\n@media (prefers-reduced-motion) {\n .hidden {\n transition: none;\n }\n}\n"],"names":[],"version":3,"file":"index.b3cd4ceb.css.map"} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 3753ce9..162509f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -OSRD #1 Paris
titre titre

Programme OSRD

Études exploitation & Sillons de dernière minute

(+diffusion en ligne)

arrowUp
logo-gouv logo-ue logo-sncf
\ No newline at end of file +OSRD #1 Paris
titre titre

Programme OSRD

Études exploitation & Sillons de dernière minute

(+diffusion en ligne)

arrowUp
logo-gouv logo-ue logo-sncf
\ No newline at end of file