sur 500~20000

194

D'abord amer puis sucré. Ne pas échouer La bonne chance mène à la malchance

1

172.67.203.190

TogaTech:Privacy,Security,Transparency @font-face{ font-family:Nunito; src:url(/fonts/Nunito/Nunito-Black.ttf); } @font-face{ font-family:Nunito-Bold; src:url(/fonts/Nunito/Nunito-Bold.ttf); } @font-face{ font-family:Nunito-SemiBold; src:url(/fonts/Nunito/Nunito-SemiBold.ttf); } @font-face{ font-family:Nunito-Light; src:url(/fonts/Nunito/Nunito-Light.ttf); } :root{ --bg-color:#; --shadow-color:#; --color-white:#ffffff; --color-lightgray:#dddddd; --color-green:#2bdc76; } *{ font-family:'Nunito',sans-serif; color:var(--color-white); } html,body{ width:100%; min-height:100%; margin:0; padding:0; overflow-x:hidden; } body{ background-color:var(--bg-color); } n{ min-width:100%; height:75px; background-color:var(--bg-color); position:fixed; top:0; left:0; z-index:10; box-shadow:0026px0var(--shadow-color); overflow:auto; } .n-element{ height:100%; padding-left:20px; padding-right:20px; display:inline-block; box-sizing:border-box; cursor:pointer; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color0.2sease-in-out; } .n-element>p{ margin:0; position:relative; top:50%; transform:translate(0,-50%); transition:color0.2sease-in-out; } .n-element:hover{ background-color:var(--color-white); } .n-element:hover>p{ color:var(--bg-color); } .n-element:active{ background-color:var(--color-lightgray); } #top{ width:max-content; max-width:calc(100%-50px); height:calc(100vh-75px); marTogatech: confidentialité, sécurité, transparencegin-top:75px; transition:transform0.2sease-in-out; position:relative; } #nodes{ position:absolute; height:calc(100vh-75px); margin-top:75px; } .vertical-center{ position:absolute; top:50%; width:100vw; transform:translate(-50%,calc(-50%-50px)); } .logo{ text-align:center; width:150px; margin:20px; } .header-text{ font-size:5em; margin:0; font-family:'Nunito-Bold',sans-serif; } .header-values{ font-size:2em; margin:0; font-family:'Nunito-Bold',sans-serif; } .header{ font-size:2em; margin:0; margin-top:60px; } #products-container{ width:calc(100%-50px); margin-left:25px; margin-top:25px; -webkit-user-select:none; -mTogatech: confidentialité, sécurité, transparenceoz-user-select:none; -ms-user-select:none; user-select:none; } #products-container>.product{ display:inline-block; text-decoration:none; width:calc(25%-24px); min-height:300px; margin:10px; padding:10px; box-sizing:border-box; vertical-align:top; border-radius:10px; border:5pxsolidvar(--color-white); box-shadow:0026px0var(--shadow-color); -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; transition:transform0.2sease-in-out, box-shadow0.2sease-in-out; } #products-container>.product-full{ width:calc(100%-21px); border:5pxsolidvar(--color-green); } #products-container>.product:hover{ transform:scale(1.03); } #products-container>.product:active{ transform:scale(0.98); box-shadow:none; } .product>.title{ text-align:center; fontTogatech: confidentialité, sécurité, transparence-size:1.1em; } .product-full>.title{ font-size:1.7em; } .timeline-content>h2{ font-size:1.5em; margin:0; margin-top:10px; margin-bottom:10px; } .product>.description{ font-family:'Nunito-SemiBold',sans-serif; } .timeline-content>p{ font-family:'Nunito-SemiBold',sans-serif; } #roadmap{ padding:100px; padding-top:25px; } .timeline{ position:relative; max-width:1200px; margin:0auto; } .timeline::after{ content:''; position:absolute; width:6px; background-color:var(--color-white); top:0; bottom:0; left:50%; margin-left:-3px; } .timeline-container{ padding:10px40px; position:relative; background-color:inherit; width:50%; } .timeline-container::after{ content:''; position:absolute; width:25px; height:25px; right:-17px; background-color:var(--bg-color); border:5pxsolidvar(--color-white); top:15px; border-radius:50%; z-index:1; } .timeline-containercomplete::after{ background-color:var(--color-white); } .timeline-left{ left:-80px; } .timeline-right{ left:50%; } .timeline-left::before{ content:""; height:0; position:absolute; top:22px; width:0; z-index:1; right:30px; border:mediumsolidvar(--color-white); border-width:10px010px10px; border-color:transparenttransparenttransparentvar(--color-white); } .timeline-right::before{ content:""; height:0; position:absolute; top:22px; width:0; z-index:1; left:30px; border:mediumsolidvar(--color-white); border-width:10px10px10px0; border-color:transparentvar(--color-white)transparenttransparent; } .timeline-right::after{ left:-16px; } .timeline-content{ padding:20px30px; background-color:var(--bg-color); border:5pxsolidvar(--color-white); color:white; position:relative; border-radius:10px; } .button{ padding-left:50px; padding-right:50px; padding-top:15px; padding-bottom:15px; border-radius:10px; margin:5px; border:3pxsolidvar(--color-white); background-color:var(--bg-color); display:inline-block; box-sizing:border-box; cursor:pointer; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color0.2sease-in-out, border0.2sease-in-out, transform0.2sease-in-out; } .button>p{ margin:0; transition:color0.2sease-in-out; } .button>p>i{ transition:color0.2sease-in-out; } .button:hover{ background-color:var(--color-white); transform:scale(1.03); } .button:hover>p{ color:var(--bg-color); } .button:hover>p>i{ color:var(--bg-color); } .button:active{ background-color:var(--color-lightgray); border:3pxsolidvar(--color-lightgray); transform:scale(0.98); } .hide-text{ background-color:var(--bg-color); width:100%; height:55px; z-index:4; } .parallax-blank{ width:100vw; height:px; } .parallax{ opacity:0; width:calc(100vw-100px); height:auto; position:fixed; top:150px; left:50px; z-index:-1; transform:scale(1)translate(0,0); transition:transform0.2sease-in-out; } .parallax-text{ position:absolute; margin:0; width:calc(50vw-200px); background-color:var(--bg-color); z-index:2; padding:20px; box-sizing:border-box; } .parallax-text-left{ left:calc(50vw+100px); } .parallax-text-right{ left:100px; } .parallax-text>h2{ font-size:2em; font-family:'Nunito-Bold',sans-serif; margin:0; margin-bottom:10px; } .parallax-text>p{ font-size:1em; font-family:'Nunito-SemiBold',sans-serif; margin:0; } .parallax-text>.button{ margin:0; } @media(min-width:1550px){ #products-container>.product{ width:calc(20%-24px); } #products-container>.product-full{ width:calc(100%-22px); } } @media(max-width:1200px){ #products-container>.product{ width:calc(33%-20px); } #products-container>.product-full{ width:calc(100%-22px); } } @media(max-width:1000px){ #products-container>.product{ width:calc(50%-23px); } #products-container>.product-full{ width:calc(100%-21px); } .parallax{ width:calc(100vw); left:0; } .parallax-text{ width:calc(100vw); left:0px; } .parallax-text>.button{ margin-left:50%; transform:translate(-50%,0); } } @media(max-width:800px){ .timeline::after{ left:-18px; } .timeline-container{ width:calc(100%+75px); padding-left:70px; padding-right:25px; } .timeline-container::before{ left:60px; border:mediumsolidvar(--color-white); border-width:10px10px10px0; border-color:transparentvar(--color-white)transparenttransparent; } .timeline-left{ left:-50px; } .timeline-left::after,.timeline-right::after{ left:15px; } .timeline-right{ left:-50px; } } @media(max-width:600px){ #products-container>.product{ width:calc(100%-21px); } #products-container>.product-full{ width:calc(100%-21px); } .header-text{ font-size:4em; } .header-values{ font-size:1.5em; } } @media(max-width:400px){ .header-text{ font-size:3em; } .header-values{ font-size:1.2em; } } functionscrollIt(destination,duration=200,easing='linear',extraOffset=0,callback,fallbackN){ consteasings={ linear(t){ returnt; }, easeInQuad(t){ returnt*t; }, easeOutQuad(t){ returnt*(2-t); }, easeInOutQuad(t){ returnt{ scrollAllowed=true; },{ link:link,title:title }); setTimeout(()=>{ if(!scrollAllowed&&link==nLink&&title==nTitle){ window.location.reload(); } },len+500) } } } varnodesjs=newNodesJs({ id:'nodes', width:window.innerWidth+100, height:window.innerHeight, particleSize:2, lineSize:1, particleColor:[225,225,225,0.3], lineColor:[225,225,225], backgroundFrom:[36,36,36], backgroundTo:[36,36,36], backgroundDuration:4000, nobg:false, number:window.hasOwnProperty('orientation')?30:parseInt(20+7*(window.innerWidth*window.innerHeight/)), speed:40, pointerCircleRadius:150 }); functionsetFade(el,y,startin,endin,startout,endout){ letincrementin=(endin-startin)/10; letincrementout=(endout-startout)/10; if(y=startin&&y=startin+incrementin&&y=startin+(2*incrementin)&&y=startin+(3*incrementin)&&y=startin+(4*incrementin)&&y=startin+(5*incrementin)&&y=startin+(6*incrementin)&&y=startin+(7*incrementin)&&y=startin+(8*incrementin)&&y=endin&&y=startout&&y=startout+incrementout&&y=startout+(2*incrementout)&&y=startout+(3*incrementout)&&y=startout+(4*incrementout)&&y=startout+(5*incrementout)&&y=startout+(6*incrementout)&&y=startout+(7*incrementout)&&y=startout+(8*incrementout)&&y=endout){ el.style.opacity="0"; return"hidden"; } } document.addEventListener("scroll",(e)=>{ checkParallax(); }); setInterval(()=>{ checkParallax(); },1000); checkParallax(); functioncheckParallax(){ if(window.innerHeight-window.scrollY-){ document.querySelector("#header-products").style.position="fixed"; document.querySelector("#header-products").style.top="96px"; document.querySelector("#header-products").style.margin="0px"; document.querySelector("#header-products").style.left="50%"; document.querySelector("#header-products").style.transform="translate(-50%,0)"; document.querySelector("#header-products").style.boxShadow="0-100px0100pxvar(--bg-color)"; }elseif(window.innerHeight-window.scrollYmaxChange){ document.querySelector("#parallax0").style.transform="scale(0.5)translate(-50%,-50%)"; } }elseif(parallax0Fade=="showing"){ document.querySelector("#parallax0").style.zIndex="1"; if(window.scrollY>parallax0ChangePos1&&window.scrollYmaxChange){ document.querySelector("#parallax0").style.transform="scale(0.5)"; }elseif(window.scrollY>parallax0ChangePos2&&window.innerWidth>maxChange){ document.querySelector("#parallax0").style.transform="scale(0.5)translate(-50%,-50%)"; }else{ document.querySelector("#parallax0").style.transform="scale(1)translate(0,0)"; } }elseif(parallax0Fade=="hidden"){ document.querySelector("#parallax0").style.zIndex="-1"; if(window.scrollY>parallax0EndOut&&window.innerWidth>maxChange){ document.querySelector("#parallax0").style.transform="scale(0.5)translate(-50%,-50%)"; }else{ document.querySelector("#parallax0").style.transform="scale(1)translate(0,0)"; } } letparallax1StartIn=4900; letparallax1EndIn=5400; letparallax1ChangePos1=6400; letparallax1ChangePos2=6600; letparallax1StartOut=7900; letparallax1EndOut=8400; letparallax1Fade=setFade(document.querySelector("#parallax1"),window.scrollY,parallax1StartIn,parallax1EndIn,parallax1StartOut,parallax1EndOut); if(parallax1Fade=="fadein"){ document.querySelector("#parallax1").style.zIndex="1"; document.querySelector("#parallax1").style.transform="scale(1)translate(0,0)"; }elseif(parallax1Fade=="fadeout"){ document.querySelector("#parallax1").style.zIndex="1"; if(window.innerWidth>maxChange){ document.querySelector("#parallax1").style.transform="scale(0.5)translate(50%,-50%)"; } }elseif(parallax1Fade=="showing"){ document.querySelector("#parallax1").style.zIndex="1"; if(window.scrollY>parallax1ChangePos1&&window.scrollYmaxChange){ document.querySelector("#parallax1").style.transform="scale(0.5)"; }elseif(window.scrollY>parallax1ChangePos2&&window.innerWidth>maxChange){ document.querySelector("#parallax1").style.transform="scale(0.5)translate(50%,-50%)"; }else{ document.querySelector("#parallax1").style.transform="scale(1)translate(0,0)"; } }elseif(parallax1Fade=="hidden"){ document.querySelector("#parallax1").style.zIndex="-1"; if(window.scrollY>parallax1EndOut&&window.innerWidth>maxChange){ document.querySelector("#parallax1").style.transform="scale(0.5)translate(50%,-50%)"; }else{ document.querySelector("#parallax1").style.transform="scale(1)translate(0,0)"; } } letparallax2StartIn=8900; letparallax2EndIn=9400; letparallax2ChangePos1=; letparallax2ChangePos2=; letparallax2StartOut=; letparallax2EndOut=; letparallax2Fade=setFade(document.querySelector("#parallax2"),window.scrollY,parallax2StartIn,parallax2EndIn,parallax2StartOut,parallax2EndOut); if(parallax2Fade=="fadein"){ document.querySelector("#parallax2").style.zIndex="1"; document.querySelector("#parallax2").style.transform="scale(1)translate(0,0)"; }elseif(parallax2Fade=="fadeout"){ document.querySelector("#parallax2").style.zIndex="1"; if(window.innerWidth>maxChange){ document.querySelector("#parallax2").style.transform="scale(0.5)translate(-50%,-50%)"; } }elseif(parallax2Fade=="showing"){ document.querySelector("#parallax2").style.zIndex="1"; if(window.scrollY>parallax2ChangePos1&&window.scrollYmaxChange){ document.querySelector("#parallax2").style.transform="scale(0.5)"; }elseif(window.scrollY>parallax2ChangePos2&&window.innerWidth>maxChange){ document.querySelector("#parallax2").style.transform="scale(0.5)translate(-50%,-50%)"; }else{ document.querySelector("#parallax2").style.transform="scale(1)translate(0,0)"; } }elseif(parallax2Fade=="hidden"){ document.querySelector("#parallax2").style.zIndex="-1"; if(window.scrollY>parallax2EndOut&&window.innerWidth>maxChange){ document.querySelector("#parallax2").style.transform="scale(0.5)translate(-50%,-50%)"; }else{ document.querySelector("#parallax2").style.transform="scale(1)translate(0,0)"; } } } if(window.location.hash!=""){ letloc=window.location.hash.replace("#/",""); lettitles={ "products":"Products|TogaTech", "roadmap":"Roadmap|TogaTech", "contact":"Contact|TogaTech" } n(loc,titles[loc]); }