| 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;
}
#titres{
margin:50px;
margin-left:150px;
}
#titres h1{
font-size:8rem;
margin:0;
padding:0;
width:1000px;
background:white;
}
#titres h2{
margin:0;
padding:0;
font-size:4rem;
width:800px;
background:lightgrey;
}
#cont1{
background:lightgrey;
width:90%;
float:right;
margin-top:30vh;
position:relative;
display:flex;
justify-content:center;
}
.absolue{
width:100%;
height:30vh;
position:absolute;
overflow:hidden;
top:-30vh;
}
#form1{
position:absolute;
width:150%;
height:100%;
transform:rotate(-8deg);
background:lightgrey;
bottom:-10vh;
}
#cont1_cont1{
width:90%;
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:right;
padding-bottom:25vh;
}
#titre1{
margin:0;
padding:0;
font-size:2.8rem;
font-style:italic;
background:white;
display:inline;
margin:50px;
height:50px;
}
#cont1_cont1_cont1{
width:100%;
background:red;
height:100vh;
}
#cont2{
background:grey;
width:90%;
min-height:70vh;
float:right;
position:relative;
}
#form2{
position:absolute;
width:150%;
height:100%;
transform:rotate(5deg);
background:grey;
bottom:-25vh;
left:-30px;
}
#cont2_cont1{
margin-top:5vh;
width:100%;
height:50vh;
background:red;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
#cont2 h2{
margin:0;
padding:0;
display:inline;
background:white;
font-size:2.8rem;
margin-left:50px;
}
#cont2_cont1_cont1{
width:80%;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
.conteneur{
background:green;
width:300px;
height:30vh;
}
#cont3{
width:90%;
float:right;
background:lightgrey;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
#cont3_cont1{
width:80%;
background:white;
padding-bottom:10vh;
}
#cont3_cont1_cont1{
background:lightgrey;
width:80%;
margin:auto;
margin-top:80px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
#cont3_cont1_cont1 h2{
font-size:2.8rem;
width:100%;
text-align:center;
margin:0;
padding:0;
font-style:italic;
}
#cont3_cont1_cont1 h3{
font-size:2rem;
width:330px;
text-align:center;
margin:0;
padding:0;
}
#cont3_cont1 p{
font-size:1.2rem;
width:80%;
margin:auto;
text-align:center;
margin-top:50px;
}
#slogan{
width:80%;
margin:auto;
text-align:center;
margin-top:50px;
}
</style>
<body>
<div id='contain'>
<?php include 'header.php'; ?>
<div id='titres'>
<h1>La campagne</h1>
<h2>Nos revendications, nos missions, notre constat</h2>
</div>
<div id='cont1'>
<div class='absolue'>
<div id='form1'></div>
</div>
<div id='cont1_cont1'>
<h2 id='titre1'>Le dechet textile</h2>
<div id='cont1_cont1_cont1'>
</div>
</div>
</div>
<div id='cont2'>
<div class='absolue'>
<div id='form2'></div>
</div>
<h2>Un constat</h2>
<div id='cont2_cont1'>
<div id='cont2_cont1_cont1'>
<div class='conteneur'></div>
<div class='conteneur'></div>
<div class='conteneur'></div>
</div>
</div>
</div>
<div id='cont3'>
<div id='cont3_cont1'>
<div id='cont3_cont1_cont1'>
<h2>Réutiliser</h2>
<h3>au service du monde et de la fashion</h3>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis nunc justo, vulputate ullamcorper dui commodo id. Suspendisse potenti. Fusce pretium metus eget tincidunt laoreet. In hac habitasse platea dictumst. Maecenas eu dui sit amet turpis condimentum ullamcorper. In commodo enim non lacus rhoncus, vel faucibus mi hendrerit. Sed cursus dictum tortor, nec eleifend ipsum pretium sed.
Ut vitae orci at felis mattis dignissim. Aliquam eget metus eros. Maecenas sed justo mattis, maximus felis id, blandit dolor. Etiam efficitur fringilla vehicula. Sed consequat a ligula a vestibulum. Etiam egestas orci at orci ornare feugiat. In et libero et lacus iaculis sollicitudin sed vel eros.
Vestibulum non tortor diam. Nulla ut metus ligula. Donec imperdiet in sapien et tempus. Ut rhoncus magna scelerisque erat aliquam tristique. Nullam pellentesque, magna eu sollicitudin finibus, neque mi tristique dolor, eu lacinia tellus lectus nec nisi. Sed congue lorem quis facilisis vestibulum. Suspendisse eget sodales purus. Sed tincidunt auctor ullamcorper. Phasellus lectus arcu, euismod in molestie nec, mollis sit amet nibh. Vestibulum laoreet ac ligula eget efficitur. </p>
<h3 id='slogan'>REAL FASHION NEVER DIES</h3>
</div>
</div>
<?php include 'footer.php'; ?>
</div>
</body>
</html>