| 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/ |
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">
</head>
<style>
body{
margin:0;
padding:0;
background-color:#f5efe2;
width:100%;
height:100vh;
font-family: "Inter", sans-serif;
}
#contain{
width:100%;
min-height:400vh;
height:auto;
overflow:hidden;
position:relative;
}
#cont1{
width:100%;
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
float:right;
}
#cont1_cont1{
min-height:60vh;
height:auto;
margin:70px;
margin-left:170px;
width:540px;
}
#cont1_cont1 h1{
background:white;
font-size:10rem;
padding:0;
margin:0;
}
#cont1_cont1 h2{
background:lightgrey;
width:540px;
font-size:4rem;
padding:0;
margin:0;
font-style:italic;
}
#cont1_cont1 p{
font-size:1.2rem;
padding:0;
margin:0;
margin-top:50px;
}
#cont1_cont1 h3{
background:black;
color:lightgrey;
font-size:1.2rem;
padding:0;
margin:0;
width:200px;
text-align:center;
margin:20px;
padding:5px;
}
#cont1_cont2{
margin-left:200px;
width:700px;
height:100vh;
position:relative;
}
#up{
width:48%;
height:100vh;
display:grid;
grid-template-columns:1fr;
grid-template-rows:2fr 1fr 3fr 2fr;
grid-gap:10px;
position:absolute;
left:0;
}
#down{
position:absolute;
right:0;
width:48%;
height:100vh;
display:grid;
grid-template-columns:1fr;
grid-template-rows:1fr 3fr 2fr 2fr;
grid-gap:10px;
}
#cont2{
float:right;
width:90%;
background:grey;
height:100vh;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
#absolue{
position:absolute;
width:100%;
height:30vh;
top:-25vh;
overflow:hidden;
}
#form1{
background:grey;
width:150%;
height:100%;
transform:rotate(-4deg);
position:absolute;
bottom:-14vh;
}
.image{
background:lightgrey;
}
#cont2_cont1{
width:90%;
}
#cont2_cont1_cont1{
width:100%;
padding-top:5vh;
padding-bottom:5vh;
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
}
#cont2_cont1_cont2{
margin-top:50px;
width:100%;
height:40vh;
display:flex;
justify-content:space-between;
}
#cont2_cont1_cont1_cont1{
width:40%;
height:100%;
}
#cont2_cont1_cont1_cont1 h2{
padding:0;
margin:0;
background:white;
display:inline;
padding: 0px 20px 10px 0px;
font-style:italic;
font-size:2.8rem;
}
#cont2_cont1_cont1_cont1 p{
padding:0;
margin:0;
margin-top:50px;
background:lightgrey;
font-size:1.2rem;
}
#cont2_cont1_cont1_cont2{
position:relative;
top:-50px;
right:50px;
width:40%;
display:flex;
justify-content:space-between;
flex-wrap:nowrap;
}
#cont2_cont1_cont1_cont2_form2{
background:lightgrey;
height:40vh;
width:55%;
}
#cont2_cont1_cont1_cont2_form1{
background:lightgrey;
height:40vh;
width:40%;
}
#cont3{
width:90%;
height:100vh;
float:right;
display:flex;
justify-content:center;
align-items:center;
}
#cont3_cont1{
margin-top:50px;
width:90%;
height:auto;
background:white;
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
padding-top:5vh;
padding-bottom:5vh;
}
#cont3_cont1 h2{
position:absolute;
top:-70px;
left:50%;
transform:translate(-50%);
background:white;
font-style:italic;
font-size:2.8rem;
padding:10px;
}
#cont3_cont1_cont1{
width:400px;
height:70vh;
background:red;
}
#cont3_cont1_cont2{
width:900px;
height:70vh;
background:blue;
}
#cont4{
background:grey;
min-height:150vh;
width:90%;
float:right;
position:relative;
}
#absolue2{
background:white;
position:absolute;
top:0;
right:0;
margin:30px;
}
#absolue2 h2{
position:relative;
font-size:2.8rem;
width:200px;
margin:0;
padding:0;
top:-10px;
right:10px;
}
#absolue2 p{
width:210px;
padding:5px;
}
#cont4_cont1{
height:45vh;
width:70%;
margin:50px;
}
#cont4_cont1_cont1{
width:100%;
height:100%;
background:red;
}
#cont4_cont2{
height:55vh;
width:85%;
margin:50px;
}
</style>
<body>
<div id='contain'>
<?php include 'header.php'; ?>
<div id='cont1'>
<div id='cont1_cont1'>
<h1>Galerie</h1>
<h2>Meuble à visuels</h2>
<p>Chainsaw lman chainsaw man chainsaw man chainsaw manChainsaw lman chainsaw man chainsaw man chainsaw manChainsaw lman chainsaw man chainsaw man chainsaw man</p>
<h3 class='button1'>Tirroirs à affiche</h3>
<h3 class='button1'>Le spot video</h3>
<h3 class='button1'>Shooting pics</h3>
</div>
<div id='cont1_cont2'>
<div id='up'>
<div class='image'></div>
<div class='image'></div>
<div class='image'></div>
<div class='image'></div>
</div>
<div id='down'>
<div class='image'></div>
<div class='image'></div>
<div class='image'></div>
<div class='image'></div>
</div>
</div>
</div>
<div id='cont2'>
<div id='absolue'>
<div id='form1'>
</div>
</div>
<div id='cont2_cont1'>
<div id='cont2_cont1_cont1'>
<div id='cont2_cont1_cont1_cont1'>
<h2>Tirroir à affiches</h2>
<p>Chainsaw lman chainsaw man chainsaw man chainsaw manChainsaw lman chainsaw man chainsaw man chainsaw manChainsaw lman chainsaw man chainsaw man chainsaw man</p>
</div>
<div id='cont2_cont1_cont1_cont2'>
<div id='cont2_cont1_cont1_cont2_form1'></div>
<div id='cont2_cont1_cont1_cont2_form2'></div>
</div>
</div>
<div id='cont2_cont1_cont2'>
</div>
</div>
</div>
<div id='cont3'>
<div id='cont3_cont1'>
<h2>Le Spot Video</h2>
<div id='cont3_cont1_cont1'>
</div>
<div id='cont3_cont1_cont2'></div>
</div>
</div>
<div id='cont4'>
<div id='absolue2'>
<h2>shooting photo</h2>
<p>Chainsaw lman chainsaw man chainsaw man chainsaw manChainsaw lman chainsaw man chainsaw man chainsaw manChainsaw lman chainsaw man chainsaw man chainsaw man</p>
</div>
<div id='cont4_cont1'>
<h3>porter vos vieux vêtements, ça donne ça</h3>
<div id='cont4_cont1_cont1'></div>
</div>
<div id='cont4_cont2'>
<h3>porter vos vieux vêtements, ça donne ça</h3>
<div id='cont4_cont1_cont1'></div>
</div>
</div>
<?php include 'footer.php'; ?>
</div>
</body>
</html>
<script>
let up = document.getElementById('up');
let down = document.getElementById('down');
let elements = document.querySelectorAll('.image');
let x = 0;
let speed=0.5;
setInterval(function(){
elements.forEach((element, index) => {
//element.style.top = x + 'px';
});
},10);
</script>