Файловый менеджер - Редактировать - /home/carpe/public_html/space/lbrm3v/partenaires.php.tar
Назад
home/carpe/public_html/sae 202/V2/partenaires.php 0000644 00000042267 15120137754 0015461 0 ustar 00 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Partenaires</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> body{ margin:0; padding:0; background-color:#f5efe2; width:100%; height:100vh; font-family: "Poppins", sans-serif; font-weight: 600; background-image:url('images/92.png'); background-size:cover; background-position:center; background-attachment:fixed; } #contain{ width:100%; min-height:400vh; height:auto; overflow:hidden; position:relative; } #cont1{ float:right; margin:100px; } #help{ width:100%; display:flex; justify-content:right; } #titre1{ font-size:6rem; padding:0; margin:0; background:#4C3AB6; font-style:italic; color:#F4F4F4; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; text-align:right; font-family: "Poppins", sans-serif; font-weight: 800; padding:5px 15px 5px 15Px; } #titre2{ font-family: "Playfair Display", serif; background:#2B0B6F; font-size:5rem; padding:0; margin:0; width:800px; color:#F4F4F4; margin:auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; text-transform:uppercase; text-align:center; } #cont2{ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin-top:10vh; width:90%; float:right; position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-around; background-image:url('images/93.png'); background-size:cover; background-position:center; padding-top:10vh; padding-bottom:5vh; } #cont2_cont1{ } #cont2_cont1 p{ width:800px; margin:20px; color:white; font-family: "Poppins", sans-serif; font-weight: 600; font-style:italic; } #cont2_cont2{ width:auto; } #titre1000{ display:flex; justify-content:center; } #titre1000 h2{ margin:0; padding:0; font-size:3rem; width:400px; font-family: "Playfair Display", serif; text-align:right; color:white; background:#443F80; padding:10px; text-transform:uppercase; } #sous_titre6{ width:400px; font-size:1.2rem; text-align:right; background:#D2D2F5; padding:10px; font-family: "Poppins", sans-serif; font-weight: 600; } #cont2_cont1_cont1{ width:800px; background:#443F80; height:60vh; margin:20px; display:flex; justify-content:center; align-items:center; } #cont2_cont1_cont1 img{ background:lightgrey; width:90%; height:90%; } #cont3{ width:90%; height:auto; float:right; background-image:url('images/96.png'); background-size:cover; background-position:center; padding-bottom:20vh; } #cont4_cont1 img{ height:15vh; margin:20px; } #form2{ width:150%; height:100%; background:grey; transform:rotate(2deg); position:absolute; bottom:-15vh; left:-10px; } #encoreencore{ width:94%; height:80%; } #titre3{ width:100%; position:relative; height:30vh; margin:0; padding:0; display:flex; justify-content:center; align-items:center; } #titre3 h2{ margin:0; padding:0; background:#ADA8DF; width:700px; font-size:2.8rem; font-family: "Playfair Display", serif; text-transform:uppercase; } #titre3 p{ font-family: "Poppins", sans-serif; font-weight: 600; background:#ECD0E9; width:500px; } #cont3_cont1{ width:110%; position:relative; left:-10px; height:auto; margin:auto; background:#BBAFC2; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display:flex; align-items:center; padding-top:5vh; padding-bottom:5vh; } #cont3_cont1_cont1{ width:86%; margin-left:40px; display:flex; flex-wrap:wrap; } .contient{ margin:20px; height:25vh; display:block; } .contient img{ width:auto; height:20vh; display:block; } .contient h3{ margin:0; padding:0; background:#F4F4F4; font-size:1.4rem; font-family: "Poppins", sans-serif; font-weight: 600; display:inline-block; font-style:italic; margin-top:10px; padding:5px 15px 5px 15px; } .absolue{ width:100%; height:200px; position:absolute; top:-20vh; overflow:hidden; } #form1{ width:150%; height:100%; background:grey; transform:rotate(-2deg); position:absolute; bottom:-15vh; } #cont4{ width:90%; padding-bottom:10vh; float:right; position:relative; display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; background-image:url('images/29.png'); background-size:cover; background-position:center; padding-top:10vh; padding-bottom:10vh; position:relative; height:auto; top:-6vh; } #cont4_cont1{ width:55%; height:auto; padding-bottom:10vh; } #cont4_cont1_form1{ background-image:url('images/encore.png'); background-size:cover; background-position:center; width:100%; height:58vh; } .cont4_cont1_cont1_form{ width:19%; height:20vh; background:lightgrey; margin:10px; } #cont4_cont1_cont1{ margin-top:2vh; width:100%; height:auto; display:flex; justify-content:center; flex-wrap:wrap; } #cont4_cont2{ min-width:26%; width:auto; height:80vh; display:flex; flex-direction:column; } #cont4_cont2 p{ margin-top:20px; width:400px; background:#F4F4F4; font-family: "Poppins", sans-serif; font-weight: 600; font-size:1.2rem; padding:5px 15px 5px 15px; } #sous_titre3{ text-align:right; position:relative; left:50px; } #titrejsp{ background:#98D3C5; float:right; } #titrejsp h2{ padding:0; margin:0; font-size:3.6rem; text-align:right; text-transform:uppercase; font-family: "Playfair Display", serif; width:450px; padding: 5px 15px 5px 15px; } @media only screen and (min-width: 601px) and (max-width: 1224px) { #cont1{ margin:50px; } } @media only screen and (max-width: 601px){ #cont2_cont1_cont1{ width:300px; height:220px; margin:auto; } #cont2_cont1 p{ width:300px; } #titre1000 h2{ width:300px; font-size:2.4rem; } #sous_titre6{ width:300px; margin-top:20px; } #cont1{ margin:20px; } #help{ } #titre1{ font-size:2rem; } #titre2{ font-size:2.6rem; width:300px; } .contient{ height:auto; } .contient img{ height:100px; } .contient h3{ max-width:200px; } #titre3{ height:auto; padding-top:5vh; padding-bottom:5vh; } #titre3 h2{ margin:0; padding:0; background:#ADA8DF; width:300px; font-size:2.4rem; font-family: "Playfair Display", serif; text-transform:uppercase; margin:auto; } #titre3 p{ margin:auto; font-family: "Poppins", sans-serif; font-weight: 600; background:#ECD0E9; width:300px; margin-top:20px; } #cont4_cont1_cont1{ display:block; height:auto; } .cont4_cont1_cont1_form{ width:100%; height:10vh; margin-top:20px; background:lightgrey; } #cont4_cont2 p{ width:300px; margin-left:30px; } #titrejsp{ } #titrejsp h2{ font-size:2.4rem; width:300px; } #cont3_cont1_cont1{ position:relative; left:20px; } #cont4_cont1_form1{ height:30vh; position:relative; left:10px; } } #tshirt{ position:absolute; top:-300px; right:40px; z-index:999; cursor:pointer; } #tshirt img{ width:100px; } #boom{ position:absolute; width:200px; z-index:1111; right:0; top:0; display:none; } #sous_titre1{ padding:5px 15px 5px 15px; } </style> <body> <div id='contain'> <?php include 'header.php'; ?> <div id='tshirt'> <img src='images/shirt.png'> </div> <img id='boom' src='images/boom.png'> <div id='cont1'> <div id='help'> <h1 id='titre1'>Partenaires</h1> </div> <h2 id='titre2'>Allez plus loin, engagez vous !</h2> </div> <div id='cont2'> <div id='cont2_cont1'><a id='un'></a> <div id='cont2_cont1_cont1'> <img src='images/94.png'> </div> <p id='sous_titre7'>Zoome à travers la carte pour y trouver les points de collecte les plus proches de chez toi. Tu seras le bienvenu chez les associations du coin !</p> </div> <div id='cont2_cont2'> <div id='titre1000'> <h2>Associations et points de collecte</h2> </div> <p id='sous_titre6'>Évidemment, s’intéresser à la cause du recyclage des déchets textiles, ça implique de t’orienter vers des organisations, et associations tiers ! Et pour concrétiser le tout, on te propose de consulter les nombreux points de collecte de vêtements à travers l’Europe !</p> </div> </div> <div id='cont3'><a id='deux'></a> <div id='titre3'> <div id='encoreencore'> <h2>Les acteurs qui soutiennent l'initiative</h2> <p id='sous_titre1'>Les acteurs qui soutiennent les revendications et messages de trash²trend : réutiliser tes vêtements, et recycler ton textile en quelque chose de nouveau !</p> </div> </div> <div id='cont3_cont1'> <div id='cont3_cont1_cont1'> <div class='contient'> <img src='images/97.png'> <h3>Owantshoozi</h3> </div> <div class='contient'> <img src='images/98.png'> <h3>Antifashion Project</h3> </div> <div class='contient'> <img src='images/34.png'> <h3>Collectivo Paris</h3> </div> <div class='contient'> <img src='images/35.png'> <h3>Re-Fashion</h3> </div> <div class='contient'> <img src='images/36.png'> <h3>Institut français de la mode</h3> </div> <div class='contient'> <img src='images/38.png'> <h3>Marché de la mode Vintage</h3> </div> </div> </div> </div> <div id='cont4'> <div id="cont4_cont1"><a id='trois'></a> <div id="cont4_cont1_form1"></div> <div id="cont4_cont1_cont1"> <a href='https://www.instagram.com/p/CSrAZJ6MrV3/?utm_source=ig_embed&ig_rid=a376ed90-1ad6-406d-9ba5-cb3f3a15c708'><img src='images/dos.png'></a> <a href='https://www.instagram.com/p/CbrtXoHOcNZ/?utm_source=ig_embed&ig_rid=47d0117f-ba91-4b43-9a29-70977a90a362'><img src='images/tres.png'></a> <a href='https://www.instagram.com/p/Cc01WTHKz4e/?utm_source=ig_embed&ig_rid=3a980b2c-d988-4034-9ed2-0b9b91688b48'><img src='images/quatro.png'></a> <a href='https://www.instagram.com/p/CacxDiFMzHj/?utm_source=ig_embed&ig_rid=7ed76aca-f506-43b9-9dca-0f3dc6d43624'><img src='images/cinqo.png'></a> <a href='https://www.instagram.com/p/CbxhLiutRCf/?utm_source=ig_embed&ig_rid=e1e8d82e-75fe-43f2-b0bb-1c575ab75e1e'><img src='images/seis.png'></a> <a href='https://www.instagram.com/p/CthMi8hIzIN/?utm_source=ig_embed&ig_rid=d39ded36-c162-44f7-a1d6-5059c31e4f01'><img src='images/sept.png'></a> </div> </div> <div id="cont4_cont2"> <div id='titrejsp'> <h2>Réseaux, Influenceurs</h2> </div> <p id='sous_titre3'>Eh oui ! Tu as bien vu : nous sommes en collaboration avec tous ces influenceurs ou créateurs de mode pour notre campagne. Tu ne veux pas les louper ? Alors rend toi à la Trashy Fashion Week le 22 novembre, on t’y attend avec impatience !</p> </div> </div> <?php include 'footer.php'; ?> </div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> let tshirt = document.getElementById('tshirt'); let boom = document.getElementById('boom'); let random = Math.floor(Math.random() * (1800 - 0 + 1)) + 0; tshirt.style.right = random + 'px'; let y = 0; let angle=0; let restart = true; function rotate() { angle = (angle + 0.5) % 360; tshirt.style.transform = `rotate(${angle}deg)`; requestAnimationFrame(rotate); } rotate(); tshirt.addEventListener('click', () => { tshirt.style.display='none'; restart=false; const tshirt2 = window.getComputedStyle(tshirt); const toptshirt = tshirt2.top; const righttshirt = tshirt2.right; boom.style.display='block'; boom.style.top = toptshirt; boom.style.right = righttshirt; }); setInterval(function(){ if(restart){ y=y+2; } if(!restart){ y=-300; tshirt.style.display='block'; random = Math.floor(Math.random() * (1800 - 0 + 1)) + 0; tshirt.style.right = random + 'px'; setTimeout(function (){ restart=true; boom.style.display ='none'; },400) } tshirt.style.top = y + 'px'; },10) setTimeout(function(){ $('#title_left').css({ transform: 'translate(0px)' }); $('#title_right').css({ transform: 'translate(0px)' }); },100) </script>