| 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>Trash²Trend</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/42.png');
background-size:cover;
background-position:center;
background-attachment:fixed;
width:100%;
height:100vh;
font-family: "Poppins", sans-serif;
font-weight: 600;
}
#contain{
width:100%;
min-height:538vh;
overflow:hidden;
position:relative;
}
.form{
position:fixed;
z-index:100;
}
#form1{
width:1050px;
height:30vh;
top:-50px;
transform:rotate(-5deg);
background-image:url('images/3.png');
background-size:cover;
background-position:center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#form2{
width:500px;
height:500px;
top:-100px;
left:1420px;
transform:rotate(-15deg);
background-image:url('images/6.png');
background-size:cover;
background-position:center;
}
#form3{
width:700px;
height:500px;
top:550px;
transform:rotate(93deg);
left:0px;
background-image:url('images/4.png');
background-size:cover;
background-position:center;
}
#form5{
width:500px;
height:500px;
top:350px;
left:800px;
transform:rotate(-8deg);
background-image:url('images/5.png');
background-size:cover;
background-position:center;
}
#titre_absolu{
position:absolute;
left:50%;
transform:translate(-50%);
z-index:1000;
text-align:center;
margin-top:30px;
}
#titre_absolu h1{
transition: transform 2s ease-in-out;
font-size:4rem;
padding:0;
margin:0;
background:#C96F6F;
width:500px;
margin:auto;
font-style:italic;
color:#F4F4F4;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transform:translate(-2000px);
}
#titre_absolu h2{
font-family: "Playfair Display", serif;
transition:3s all;
background:#6F0B59;
font-size:5rem;
padding:0;
margin:0;
width:700px;
color:#F4F4F4;
margin:auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transform:translate(2000px);
}
#cont1{
position:relative;
top:20px;
z-index:112;
width:90%;
background-image:url('images/19.png');
background-size:cover;
background-position:center;
padding-top:15vh;
padding-bottom:10vh;
margin-top:45vh;
float:right;
display:flex;
justify-content:right;
align-items:center;
color:#f5efe2;
}
#cont1_cont1{
width:95%;
display:flex;
align-items:center;
justify-content:space-between;
}
#cont1_cont1_cont1{
min-width:700px;
display:flex;
position:relative;
}
#formencore{
background-image:url('images/21.png');
width:300px;
height:70vh;
background-size:cover;
background-position:center;
}
#cont1_cont1_cont1 p{
width:300px;
font-size:1.2rem;
margin-top:50px;
margin-left:20px;
}
#cont1_cont1_cont1 h2{
position:absolute;
bottom:-20px;
left:320px;
font-size:2.8rem;
font-style:italic;
width:270px;
line-height:1;
font-family: "Playfair Display", serif;
}
#cont1_cont1_cont2{
width:40%;
height:61vh;
}
#cont1_cont1_cont2 h2{
font-family: "Playfair Display", serif;
font-size:2.8rem;
font-style:italic;
width:300px;
line-height:1;
margin:0;
padding:0;
}
#cont1_cont1_cont2_form1{
background-image:url('images/2.png');
background-size:cover;
background-position:center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
width:120%;
margin-top:50px;
height:38vh;
}
#cont2{
z-index:110;
float:right;
width:100%;
background:black;
position:relative;
z-index:111;
}
#cont2_cont1{
width:100%;
height:25vh;
display:flex;
justify-content:space-between;
}
#cont2_cont1_form1{
background:#E0E263;
width:52%;
}
#cont2_cont1_form2{
width:46%;
background-image:url('images/37.png');
background-size:cover;
background-position:center;
}
#cont2_cont2{
margin-top:40px;
width:100%;
display:flex;
justify-content:space-between;
}
#cont2_cont2_form1{
width:40%;
height:100%;
}
#cont2_cont2_form2{
width:58%;
height:54vh;
display:flex;
justify-content:space-between;
position:relative;
}
#cont2_cont3{
margin-top:40px;
width:100%;
height:25vh;
display:flex;
justify-content:space-between;
}
#cont2_cont2_form1_form1{
width:100%;
height:25vh;
background-image:url('images/40.png');
background-size:cover;
background-position:center;
position:relative;
}
#absolutejspcb{
position:absolute;
top:10vh;
left:250px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
z-index:121;
}
#absolutejspcb h2{
font-size:2.6rem;
font-style:italic;
margin:0;
padding:0;
background:#F4F4F4;
padding:5px 15px 5px 15px;
}
#cont2_cont2_form1_form2{
margin-top:40px;
width:100%;
height:25vh;
background-image:url('images/41.png');
background-size:cover;
background-position:center;
}
#cont2_cont2_form2_cont1{
width:35%;
height:100%;
background-image:url('images/39.png');
background-size:cover;
background-position:center;
}
#cont2_cont2_form2_cont2{
width:61%;
height:100%;
}
#absolutejsp{
position:absolute;
background:#F1DA87;
width:500px;
height:auto;
top:50%;
left:50%;
transform:translate(-50%,-50%);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#absolutejsp p{
margin:0;
padding:0;
padding:20px;
font-size:1.2rem;
}
#cont2_cont2_form2_cont2_cont1{
width:100%;
height:25vh;
display:flex;
justify-content:space-between;
}
#cont2_cont2_form2_cont2_form1{
margin-top:40px;
width:100%;
background:#EDD06B;
height:25vh;
}
#cont2_cont2_form2_cont2_cont1_form1{
width:47%;
height:100%;
background:#FD850F;
}
#cont2_cont2_form2_cont2_cont1_form2{
width:47%;
height:100%;
background:#C9A070;
}
#cont3{
z-index:110;
float:right;
width:90%;
min-height:100vh;
height:auto;
background-image:url('images/12.png');
background-size:cover;
background-position:center;
display:flex;
flex-wrap:wrap;
justify-content:center;
position:relative;
padding-bottom:5vh;
}
#titres2{
position:absolute;
top:0;
right:0;
margin-right:50px;
margin-top:30px;
background:black;
width:400px;
}
#titres2 h2{
padding:0;
margin:0;
width:350px;
font-size:2.8rem;
font-style:italic;
color:white;
text-align:right;
font-family: "Playfair Display", serif;
}
#button1{
background:#F4F4F4;
margin:auto;
padding: 5px 30px 10px 30px;
cursor:pointer;
transition: .5s all;
}
#button1:hover{
transform:scale(1.1);
transition: .5s all;
}
#button1 h2{
margin:0;
padding:0;
font-size:2.4rem;
font-style:italic;
color:black;
}
.conteneur{
position:relative;
top:-50px;
width:300px;
height:30vh;
margin:20px;
margin-bottom:70px;
}
.cont_form:hover{
transform:scale(1.1);
transition: .5s all;
cursor:pointer;
}
.conteneur h3{
padding: 5px 30px 10px 30px;
font-style:italic;
background:black;
color:white;
font-size:1.4rem;
}
.cont_form{
transition: .5s all;
width:100%;
height:30vh;
background:lightgrey;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#centre{
text-align:center;
}
#droite{
text-align:right;
}
#big_contain{
width:90%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin-top:30vh;
}
#cont4{
position:relative;
min-height:70vh;
z-index:112;
padding-top:5vh;
width:96%;
float:right;
display:flex;
justify-content:center;
padding-bottom:10vh;
background-image:url('images/89.png');
background-size:cover;
background-position:center;
}
#cont4_cont1{
width:90%;
display:flex;
justify-content:space-between;
}
#cont4_cont1_form1{
width:400px;
position:relative;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#cont4_cont1_form1 h2{
color:black;
font-family: "Playfair Display", serif;
margin:0;
padding:0;
font-size:2.8rem;
margin:auto;
background:white;
}
#cont4_cont1_form1 h3{
margin-top:200px;
color:black;
background:white;
font-size:1.4rem;
height:40px;
display:flex;
align-items:center;
padding: 5px 15px 5px 15px;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style:italic;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition:.5s all;
}
#cont4_cont1_form1 h3:hover{
transform:scale(1.1);
transition:.5s all;
}
#cont4_cont1_form1 p{
color:white;
font-family: "Poppins", sans-serif;
font-weight: 600;
margin:0;
padding:0;
font-size:1.2rem;
margin:auto;
background:black;
margin:20px;
padding:10px;
}
#button3 h3{
margin-left:100px;
color:black;
background:white;
font-size:1.4rem;
height:40px;
display:flex;
align-items:center;
padding: 5px 15px 5px 15px;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style:italic;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display:none;
transition:.5s all;
}
#button3 h3:hover{
transform:scale(1.1);
transition:.5s all;
}
#cont4_cont1_form1 p{
font-size:1.2rem;
padding-bottom:10px;
}
#button2{
background:#674F44;
padding: 5px 30px 10px 30px;
position:absolute;
bottom:20px;
left:12%;
cursor:pointer;
transition: .5s all;
}
#button2:hover{
transform:scale(1.1);
transition: .5s all;
}
#button2 h2{
margin:0;
padding:0;
font-size:2.4rem;
text-align:center;
font-style:italic;
color:#f5efe2;
width:200px;
}
.cont4_cont1_conts{
background: blue;
height:70vh;
width:30%;
margin:20px;
display:flex;
align-items:flex-end;
cursor:pointer;
transition:.5s all;
}
#form_1{
background-image:url('images/14.jpg');
background-size:cover;
background-position:center;
}
#form_2{
background-image:url('images/15.jpg');
background-size:cover;
background-position:center;
}
#form_3{
background-image:url('images/diego.jpg');
background-size:cover;
background-position:center;
}
.cont4_cont1_conts:hover{
transition: .5s all;
transform:scale(1.1);
}
#big_contain2{
width:80%;
height:100%;
display:flex;
justify-content:space-between;
}
.absolute{
margin:0;
padding:0;
font-size:2.8rem;
font-style:italic;
color:#f5efe2;
}
#cont5{
position:relative;
z-index:111;
margin-top:100px;
background:grey;
width:100%;
height:80vh;
display:flex;
justify-content:center;
align-items:center;
background-image:url('images/52.png');
background-size:cover;
background-position:center;
}
#cont124_cont1{
width:70%;
height:70%;
display:flex;
justify-content:center;
}
#cont124_cont1_cont1{
background:#292929;
position:relative;
width:800px;
height:80%;
display:flex;
justify-content:center;
align-items:center;
}
#cont124_cont1_cont1 label{
color:white;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-style:italic;
}
#cont124_cont1_cont1 h2{
font-family: "Poppins", sans-serif;
font-weight: 800;
font-style:italic;
}
#cont124_cont1_cont2{
width:300px;
}
#cont124_cont1_cont2 p{
float:right;
text-align:right;
width:80%;
font-size:1.2rem;
color:white;
font-family: "Poppins", sans-serif;
font-weight: 600;
background:#292929;
padding:10px;
}
#cont124_cont1_cont2_cont1{
float:right;
width:250px;
height:8vh;
display:flex;
align-items:flex-end;
background:#F4F4F4;
color:black;
}
#cont124_cont1_cont2_cont1 h2{
font-size:2.8rem;
font-family: "Playfair Display", serif;
text-transform:uppercase;
width:100%;
font-style:normal;
position:relative;
top:30px;
text-align:center;
width:100%;
}
#cont124_cont1_cont1_cont1{
width:100%;
height:100%;
display:flex;
justify-content:center;
}
#cont124_cont1_cont1_cont1 form{
width:80%;
height:100%;
display : flex;
flex-direction: column;
justify-content: center;
position:relative;
}
#cont124_cont1_cont1_cont1 form div{
width:100%;
display: flex;
flex-direction: column;
margin-top:20px;
}
#cont124_cont1_cont1_cont1 form div label{
margin-bottom:10px;
}
#cont124_cont1_cont1_cont1 form .space{
background:#F4F4F4;
}
#retour2{
height:15vh;
}
#envoyer{
border:none;
position:absolute;
bottom:-20px;
right:-120px;
width:200px;
height:40px;
color:white;
font-size:1.6rem;
font-style:italic;
font-family: "Poppins", sans-serif;
font-weight: 800;
background:#3C165A;
}
#absolue2{
position:absolute;
top:-20px;
left:-20px;
background:lightgrey;
height:50px;
text-align:center;
display:flex;
align-items:center;
font-size:1.8rem;
font-style:italic;
justify-content:center;
box-shadow:2px 2px 10px black;
padding: 5px 15px 5px 15px;
}
#cont2_cont3_form1{
width:70%;
height:100%;
background-image:url('images/45.png');
background-size:cover;
background-position:center;
}
#cont2_cont3_form2{
width:27%;
height:100%;
background:#AF7A7A;
}
#tshirt{
position:absolute;
top:-300px;
right:40px;
z-index:999;
cursor:pointer;
}
#tshirt img{
width:100px;
}
#cont_form1{
background-image:url('images/tois.png');
background-size:cover;
background-position:center;
}
#cont_form2{
background-image:url('images/tois2.png');
background-size:cover;
background-position:center;
}
#cont_form3{
background-image:url('images/tois3.png');
background-size:cover;
background-position:center;
}
@media only screen and (min-width: 601px) and (max-width: 1224px) {
#cont1_cont1{
flex-wrap:wrap;
}
#cont1_cont1_cont2{
width:100%;
}
#cont1_cont1_cont1{
width:100%;
}
#titre_absolu h1{
font-size:6rem;
}
#titre_absolu h2{
font-size:2rem;
}
#cont4_cont1_form1{
width:100%;
}
#cont4_cont1{
display:block;
}
#button2{
display:none;
}
#big_contain2{
justify-content:center;
height:auto;
width:100%;
}
#button3{
display:flex;
}
.cont4_cont1_conts{
height:50vh;
}
#cont124_cont1{
flex-wrap:wrap;
}
#cont124_cont1_cont2{
margin:20px;
}
#cont5{
height:100vh;
padding-bottom:15vh;
}
#cont1{
padding-top:25vh;
}
#cont4_cont1_form1 h3{
margin-top:50px;
}
#cont1{
margin-top:0;
}
#contain{
padding-bottom:10vh;
}
}
@media only screen and (max-width: 601px){
#contain{
padding-bottom:10vh;
}
#cont1_cont1{
flex-wrap:wrap;
}
#cont1_cont1_cont2{
width:100%;
}
#cont1_cont1_cont1{
width:100%;
flex-wrap:wrap;
}
#titre_absolu h1{
font-size:3rem;
}
#titre_absolu h2{
font-size:1rem;
}
#cont1{
top:0vh;
margin-top:0;
left:30px;
}
#cont1_cont1_cont1 img{
width:300px;
height:auto;
}
#cont1_cont1_cont1{
padding-top:15vh;
width:300px;
min-width:200px;
}
#cont1_cont1_cont1 h2{
top:-5vh;
left:0;
}
#big_contain{
position:relative;
left:20px;
}
#cont4_cont1{
display:block;
}
#button2{
display:none;
}
#cont4_cont1_form1 h3{
display:none;
}
#big_contain2{
display:block;
height:auto;
width:100%;
position:relative;
left:30px;
}
.cont4_cont1_conts{
width:200px;
height:20vh;
position:relative;
left:20px;
}
#cont4_cont1_form1{
width:300px;
margin:auto;
}
#button3{
display:flex;
}
#cont124_cont1{
flex-wrap:wrap;
margin:20px;
}
#cont5{
height:100vh;
padding-bottom:20vh;
}
#cont124_cont1_cont2{
margin:20px;
}
#absolue2{
left:20px;
width:400px;
}
#absolue2 h2{
width:400px;
}
#cont1{
padding-top:45vh;
position:relative;
left:50px;
}
#absolutejsp{
width:300px;
left: 50px;
}
#absolutejspcb{
left:230px;
}
#titres2{
margin-right:0;
top:100px;
}
.conteneur{
margin-top:100px;
}
#button3 h3{
display:block;
}
}
#boom{
position:absolute;
width:200px;
z-index:1111;
right:0;
top:0;
display:none;
}
</style>
<body>
<div id='contain'>
<div id='tshirt'>
<img src='images/shirt.png'>
</div>
<img id='boom' src='images/boom.png'>
<?php include 'header.php'; ?>
<div class='form' id='form1'>
</div>
<div class='form' id='form2'>
</div>
<div class='form' id='form3'>
</div>
<div class='form' id='form4'>
</div>
<div class='form' id='form5'>
</div>
<div id='titre_absolu'>
<h1 id='title_left'>trash²trend</h1>
<h2 id='title_right'>REAL FASHION NEVER DIES</h2>
</div>
<div id='cont1'>
<div id='absolue1'>
<div id='absolu_form1'></div>
<div id='absolu_form2'></div>
</div>
<div id='cont1_cont1'>
<div id='cont1_cont1_cont1'>
<div id='formencore'></div>
<div id='texte'>
<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><b><i>Challenge accepted :</i></b> et si trash²trend arrivait à te faire adopter une mode plus saine et plus durable ?</p>
</div>
<h2>les vieux vêtements, ça fait vivre</h2>
</div>
<div id='cont1_cont1_cont2'>
<h2>monde et mode, même problème</h2>
<div id='cont1_cont1_cont2_form1'></div>
</div>
</div>
</div>
<div id='cont2'><a id='campagne1'></a>
<div id='cont2_cont1'>
<div id='cont2_cont1_form1'></div>
<div id='cont2_cont1_form2'></div>
</div>
<div id='cont2_cont2'>
<div id='cont2_cont2_form1'>
<div id='cont2_cont2_form1_form1'>
<div id='absolutejspcb'>
<h2><a href='campagne.php'>Campagne</a></h2>
</div>
</div>
<div id='cont2_cont2_form1_form2'></div>
</div>
<div id='cont2_cont2_form2'>
<div id='cont2_cont2_form2_cont1'></div>
<div id='cont2_cont2_form2_cont2'>
<div id='cont2_cont2_form2_cont2_cont1'>
<div id='cont2_cont2_form2_cont2_cont1_form1'></div>
<div id='cont2_cont2_form2_cont2_cont1_form2'></div>
</div>
<div id='cont2_cont2_form2_cont2_form1'>
</div>
</div>
<div id='absolutejsp'>
<p>Ton placard cache des trésors ! Chaque vêtement peut avoir une seconde vie. Et tu peux t’informer sur comment adopter une mode plus durable et respectueuse de la planète juste ici ! </p>
</div>
</div>
</div>
<div id='cont2_cont3'>
<div id='cont2_cont3_form1'></div>
<div id='cont2_cont3_form2'></div>
</div>
</div>
<div id='cont3'><a id='pistes'></a>
<div id='titres2'>
<h2>d'autres pistes, d'autres gens</h2>
</div>
<div id='big_contain'>
<div class='conteneur'>
<div class='cont_form' id='cont_form1'></div>
<h3>Les assocs qui soutiennent</h3>
</div>
<div class='conteneur'>
<div class='cont_form' id='cont_form2'></div>
<h3 id='centre'>Marques Trash²Trend friendly</h3>
</div>
<div class='conteneur'>
<div class='cont_form' id='cont_form3'></div>
<h3 id='droite'>Des influenceurs qui influencent</h3>
</div>
</div>
<div id='button1'>
<h2><a href='partenaires.php'>partenaires</a></h2>
</div>
</div>
<div id='cont4'><a id='galerie1'></a>
<div id='cont4_cont1'>
<div id='cont4_cont1_form1'>
<h2>GALERIE</h2>
<p>La campagne, c’est des visuels ! Si ça t’intéresses, tu peux toujours consulter les différentes affiches, photos et vidéos prises pour trash²trend !</p>
<h3><a href='galerie.php'>Visiter la galerie</a></h3>
</div>
<div id='big_contain2'>
<div class='cont4_cont1_conts' id='form_1'>
<h2 class='absolute'>nos affiches</h2>
</div>
<div class='cont4_cont1_conts' id='form_2'>
<h2 class='absolute'>shooting pics</h2>
</div>
<div class='cont4_cont1_conts' id='form_3'>
<h2 class='absolute'>le spot video</h2>
</div>
</div>
<div id='button3'>
<h3><a href='galerie.php'>Visiter la galerie</a></h3>
</div>
</div>
</div>
<div id='cont5'><a id='contact1'></a>
<div id='cont124_cont1'>
<div id='cont124_cont1_cont1'>
<div id='absolue2'>
<h2>exprimez-vous !</h2>
</div>
<div id='cont124_cont1_cont1_cont1'>
<form method='POST' action='trash2trend.php'>
<div>
<label>nom et prenom : </label>
<input class='space' type='text' name='nom'>
</div>
<div>
<label>adresse mail : </label>
<input class='space' type='mail' name='mail'>
</div>
<div>
<label>retours / demandes : </label>
<input class='space' type='message' name='retour' id='retour2'>
</div>
<input type='submit' name='send' id='envoyer' value='Envoyer'>
</form>
</div>
</div>
<div id='cont124_cont1_cont2'>
<div id='cont124_cont1_cont2_cont1'>
<h2>contact</h2>
</div>
<p>Si t’as des demandes particulières, des retours à nous faire ou quoi que ce soit d’autre vis-à-vis de la campagne, c’est ici que ça se passe !</p>
</div>
</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>