| Server IP : 109.234.162.214 / Your IP : 216.73.216.21 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>Campagne</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-image:url('images/fond5.png');
background-size:cover;
background-position:center;
background-attachment:fixed;
width:100%;
height:100vh;
font-family: "Poppins", sans-serif;
font-weight: 600;
}
#cont1{
margin-left:200px;
margin-top:50px;
}
#contain{
width:100%;
min-height:400vh;
height:auto;
position:relative;
}
#cont1 h1{
margin:0;
padding:0;
font-size:4rem;
font-style:italic;
font-family: "Poppins", sans-serif;
font-weight: 800;
background:#70C588;
width:500px;
text-align:center;
padding:5px 15px 5px 15px;
}
#cont1 h2{
margin:0;
padding:0;
font-size:5rem;
font-family: "Playfair Display", serif;
background:#558C4C;
width:1000px;
padding:5px 15px 5px 15px;
color:white;
}
#cont2{
width:100%;
margin-top:20px;
background-image:url('images/fond2.png');
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
flex-wrap:wrap;
align-items:center;
padding-top:10vh;
padding-bottom:25vh;
}
#cont2 h2{
background:green;
font-size:4rem;
font-family: "Playfair Display", serif;
color:white;
padding:5px 15px 5px 15px;
}
#form1{
width:60%;
}
#form1 p{
font-size:1.2rem;
width:500px;
margin:auto;
text-align:center;
background:#F4F4F4;
padding:5px 15px 5px 15px;
}
#cont3{
background-image:url('images/50.png');
background-size:cover;
background-position:center;
width:100%;
padding-bottom:30vh;
padding-top:5vh;
margin-top:-32vh;
}
#cont3 h2{
font-size:4rem;
font-family: "Playfair Display", serif;
margin:0;
padding:0;
margin-top:140px;
margin-left:200px;
background:#6BAF92;
width:300px;
padding:5px 15px 5px 15px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#cont3 p{
background:#D1EBE2;
padding:5px 15px 5px 15px;
width:400px;
margin-top:40px;
margin-left:200px;
font-size:1.2rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#cont3_cont1{
width:90%;
display:flex;
justify-content:right;
}
#cont3_cont2{
width:90%;
display:flex;
justify-content:right;
flex-wrap:wrap;
}
#cont3_cont2 h3{
margin:20px;
background:#C7DDF2;
padding:5px 15px 5px 15px;
width:200px;
display:flex;
justify-content:right;
align-items:center;
text-align:center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition:.5s all;
}
#cont3_cont2 h3:hover{
transform:scale(1.1);
transition:.5s all;
}
#cont3_cont1 h3{
background:#94FFD8;
padding:5px 15px 5px 15px;
text-align:right;
font-size:1.6rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#cont4{
width:100%;
padding-top:24vh;
padding-bottom:10vh;
background-image:url('images/fond4.png');
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
margin-top:-25vh;
}
#cont4_cont2{
width:400px;
background:#C0E0C6;
margin:20px;
position:relative;
}
#cont4_cont2 h2{
background:#E2CC00;
font-size:5rem;
margin:0;
padding:0;
margin:auto;
text-align:center;
margin:20px;
font-family: "Playfair Display", serif;
}
#cont4_cont2 p{
margin:20px;
font-size:1.2rem;
}
#cont4_cont2 h3{
font-style:italic;
font-size:1.6rem;
background:#D0EDDF;
text-align:center;
padding:5px 15px 5px 15px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
width:300px;
margin:auto;
margin-top:200px;
margin-bottom:40px;
transition: .5s all;
cursor:pointer;
}
#cont4_cont2 h3:hover{
transform:scale(1.1);
transition: .5s all;
}
#cont4_cont1{
width:1200px;
min-height:80vh;
background:#2E5A3F;
margin:40px;
margin-left:140px;
position:relative;
}
#cont4_cont1 h3{
margin:0;
padding:0;
background:#F4F4F4;
font-family: "Playfair Display", serif;
font-size:2rem;
text-align:center;
padding:40px 40px 40px 40px;
margin:80px;
}
#cont4_cont1 p{
margin:0;
padding:0;
margin:20px;
text-align:center;
font-size:1.2rem;
}
#cont4_cont1 h2{
top:10vh;
font-size:5rem;
font-family: "Playfair Display", serif;
background:#6CBA6B;
padding:5px 15px 5px 15px;
margin:auto;
width:600px;
text-align:center;
position:relative;
top:10vh;
}
#cont5{
width:100%;
background-image:url('images/fond3.png');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:right;
}
#cont5_cont1{
width:1200px;
min-height:65vh;
background:#889878;
margin:40px;
margin-right:140px;
position:relative;
}
#cont5_cont1 h3{
margin:0;
padding:0;
background:#F4F4F4;
font-family: "Playfair Display", serif;
font-size:2rem;
text-align:center;
padding:40px 40px 40px 40px;
margin:80px;
}
#cont5_cont1 p{
margin:0;
padding:0;
margin:20px;
text-align:center;
font-size:1.2rem;
}
#cont5_cont1 h2{
top:10vh;
font-size:5rem;
font-family: "Playfair Display", serif;
background:#9BCD5C;
padding:5px 15px 5px 15px;
margin:auto;
width:600px;
text-align:center;
position:relative;
top:10vh;
}
#cont6{
width:100%;
background-image:url('images/fond6.png');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
}
#cont6_cont1{
width:1200px;
min-height:65vh;
background:#60611D;
margin:40px;
margin-left:140px;
position:relative;
}
#cont6_cont1 h3{
margin:0;
padding:0;
background:#F4F4F4;
font-family: "Playfair Display", serif;
font-size:2rem;
text-align:center;
padding:40px 40px 40px 40px;
margin:80px;
}
#cont6_cont1 p{
margin:0;
padding:0;
margin:20px;
text-align:center;
font-size:1.2rem;
}
#cont6_cont1 h2{
top:10vh;
font-size:5rem;
font-family: "Playfair Display", serif;
background:#C4DE5A;
padding:5px 15px 5px 15px;
margin:auto;
width:600px;
text-align:center;
position:relative;
top:10vh;
}
#cont7{
width:100%;
background-image:url('images/fond8.png');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:right;
}
#cont7_cont1{
width:1200px;
min-height:65vh;
background:#556215;
margin:40px;
margin-right:140px;
position:relative;
}
#cont7_cont1 h3{
margin:0;
padding:0;
background:#F4F4F4;
font-family: "Playfair Display", serif;
font-size:2rem;
text-align:center;
padding:40px 40px 40px 40px;
margin:80px;
}
#cont7_cont1 p{
margin:0;
padding:0;
margin:20px;
text-align:center;
font-size:1.2rem;
}
#cont7_cont1 h2{
top:10vh;
font-size:5rem;
font-family: "Playfair Display", serif;
background:#E4E845;
padding:5px 15px 5px 15px;
margin:auto;
width:600px;
text-align:center;
position:relative;
top:10vh;
}
#cont8{
width:100%;
padding-bottom:0;
margin-bottom:0;
background-image:url('images/fond9.png');
background-size:cover;
background-position:center;
display:flex;
align-items:flex-start;
justify-content:right;
padding-top:10vh;
padding-bottom:30vh;
}
#cont8 p{
font-size:4.4rem;
font-family: "Playfair Display", serif;
background:#A7C960;
width:65%;
margin:auto;
text-align:center;
padding:5px 15px 5px 15px;
text-transform:UPPERCASE;
}
@media only screen and (max-width: 601px){
#cont1 h1{
font-size:3rem;
width:300px;
}
#cont1 h2{
font-size:2rem;
width:300px;
}
#cont1{
margin:40px;
margin-left:120px;
}
#cont2 h2{
width:300px;
margin-left:90px;
}
#cont2 p{
width:300px;
margin-left:30px;
}
#cont3 p{
margin-left:120px;
width:300px;
}
#cont3_cont1 h3{
width:300px;
}
#cont3{
padding-bottom:10vh;
}
#cont4_cont1 h3{
width:300px;
font-size:3rem;
}
#cont4_cont1 h2{
width:300px;
font-size:4rem;
}
#cont4_cont1 p{
width:300px;
margin:auto;
padding-bottom:5vh;
}
#cont4_cont2{
margin-left:120px;
}
#cont5_cont1 h3{
width:300px;
font-size:3rem;
margin:auto;
}
#cont5_cont1 h2{
width:300px;
font-size:4rem;
}
#cont5_cont1 p{
width:300px;
margin:auto;
padding-bottom:5vh;
}
#cont5_cont1{
margin-right:-50px;
width:500px;
}
#cont6_cont1 h3{
width:300px;
font-size:3rem;
}
#cont6_cont1 h2{
width:300px;
font-size:4rem;
}
#cont6_cont1 p{
width:300px;
margin:auto;
padding-bottom:5vh;
}
#cont6_cont1{
margin:auto;
position:relative;
left:25px;
}
#cont7_cont1 h3{
width:300px;
font-size:3rem;
margin:auto;
}
#cont7_cont1 h2{
width:300px;
font-size:4rem;
}
#cont7_cont1 p{
width:300px;
margin:auto;
padding-bottom:5vh;
}
#cont7_cont1{
margin-right:-50px;
width:500px;
}
#cont8 p{
font-size:2rem;
width:350px;
margin-left:100px;
}
}
#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;
}
</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'>
<h1>La campagne</h1>
<h2>NOS REVENDICATIONS, NOS MISSIONS, NOTRE CONSTAT</h2>
</div>
<div id='cont2'>
<h2>REAL FASHION NEVER DIES</h2>
<div id='form1'>
<p>Si nous avons décidé de lancer cette campagne, c’est pour que les jeunes d’aujourd’hui et de demain puissent avoir la volonté de faire des choix de consommation textile pour eux et pour leur planète. </p>
<p>Challenge accepted : et si trash²trend arrivait à te faire adopter une mode plus saine et plus durable ?</p>
<p>Pas convaincu ?
Laisse nous faire : en deux temps trois vêtements, tu verras que porter les pulls de mémé ça a plus de style que ça en a l’air !</p>
</div>
</div>
<div id='cont3'><a id='bref'></a>
<h2>EN BREF</h2>
<p>Notre campagne a pour objectif de te montrer qu’il est possible d’avoir un style bien à toi tout en préservant l’environnement qui t’entoure, même si tu as sans doute l’impression de ne pas avoir de contrôle là-dessus.</p>
<div id='cont3_cont1'>
<h3>Avec une consommation responsable, tu as tout à y gagner : </h3>
</div>
<div id='cont3_cont2'>
<h3><a href='#fv'>Faire valoir des principes responsables </a></h3>
<h3><a href='#d'>Developper ta créativité </a></h3>
<h3><a href='#a'>Affirmer ta personnalité </a></h3>
<h3><a href='#f'>Faire des economies </a></h3>
</div>
</div>
<div id='cont4'>
<div id='cont4_cont1'><a id='why'></a>
<h2>FAIRE VALOIR</h2><a id='fv'></a>
<h3>Des principes responsables et emprunts d’actualité</h3>
<p>Le monde d’aujourd’hui subit les nombreuses conséquences de la surconsommation à l’échelle mondiale, et les déchets textiles sont les ambassadeurs du problème actuel... Fast fashion, jeter des vêtements encore utilisables, culture de la mode éphèmère, ce sont des phénomènes et actions dont tu as sûrement entendu parler !</p>
<p>Si t’es déjà dans l’optique de faire attention à ta consommation, sache que tu peux en être fier ! Porter du réutilisé, acheter de la seconde main : pas besoin de t’en cacher, tu peux carrément te la péter ! Tu en doutes ? Ben voyons : quel genre de king/ de queen ne mettrait pas en avant sa responsabilité vis-à-vis de la planète ?</p>
</div>
<div id='cont4_cont2'>
<h2>IMPACT</h2>
<p>Si tu veux comprendre plus en détail les problématiques liées aux déchets textiles, on te propose de consulter ce quiz !</p>
<h3><a href='quiz.php'>Fais le Quiz !</a></h3>
</div>
</div>
<div id='cont5'>
<div id='cont5_cont1'>
<h2>DEVELOPPER</h2><a id='d'></a>
<h3>Ta créativité à travers ton style vestimentaire</h3>
<p>T’as de l’imagination à revendre et tu ne sais pas quoi en faire ? Voici notre remède magique, le seul et l’unique : l’upcycling ! Plus sérieusement, si t’as envie de te lancer dans la couture ou autre, c’est tout bénef ! </p>
<p>Des sacs, des jeans que tu ne portes plus, ou même de vieux rideaux ou chutes de tissus : rien ne se crée, rien ne se perd, tout se transforme ! Après tout, ce n’est pas le matériel qui fait la beauté d’une pièce, mais le talent de son créateur :3 (gros big up à notre influenceur partenaire Kevin Germanier)</p>
</div>
</div>
<div id='cont6'>
<div id='cont6_cont1'>
<h2>AFFIRMER</h2><a id='a'></a>
<h3>Une personnalité qui t’es propre</h3>
<p>On est très loin de te demander de n’acheter que du 100% coton ou bien de ne plus rien acheter : no stress ! En vrai de vrai, on veut juste te montrer qu’en choisissant intelligemment les vêtements que tu achètes, tu es un peu comme dans une chasse au trésor : ne dénicher que les perles rares ! </p>
<p>De cette façon, tu peux être content de ta trouvaille et porter fièrement au quotidien des vêtements que tu es sûr de porter souvent.</p>
</div>
</div>
<div id='cont7'>
<div id='cont7_cont1'>
<h2>FAIRE</h2><a id='f'></a>
<h3>Des économies... parce que tu es jeune (et tu le seras toujours :D)</h3>
<p>On est d’accord que parfois t’as super mal au porte-monnaie, pas vrai ? Eh bah tu verras qu’en consommant de façon responsable, tu ne prendras que ce qui t'est nécessaire et en plus tu pourras mettre de côté pour plein d’autres trucs cools qui te restent en tête ! (Pourquoi pas de supers bons restaus ou des vacances bien méritées : qui sait :D) </p>
<p> Si tu veux en savoir plus sur de bons plans de seconde-main, jette un oeil sur notre carte des partenaires !</p>
</div>
</div>
<div id='cont8'>
<p>En bref, pour nous trash²trend c’est ça. Ton style, ta beauté extérieure : ton impact, ta beauté intérieure !</p>
</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>