| Server IP : 109.234.162.214 / Your IP : 216.73.216.222 Web Server : Apache System : Linux servd162214.srv.odns.fr 4.18.0-372.26.1.lve.1.el8.x86_64 #1 SMP Fri Sep 16 14:08:19 EDT 2022 x86_64 User : carpe ( 1178) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/carpe/public_html/sae 202/V2/ |
Upload File : |
<!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>