| 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>Page d'accueil</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%;
height:400vh;
overflow:hidden;
position:relative;
}
.form{
position:absolute;
z-index:100;
background:black;
}
#form1{
width:800px;
height:500px;
top:-240px;
left:20%;
transform:rotate(-5deg);
}
#form2{
width:200px;
height:500px;
top:-200px;
right: -40px;
transform:rotate(-15deg);
}
#form3{
width:70%;
height:500px;
top:600px;
transform:rotate(15deg);
left:-85px;
background:grey;
}
#form4{
width:70%;
height:500px;
top:600px;
transform:rotate(-3deg);
right:-20px;
background:grey;
}
#form5{
width:100%;
height:15%;
background:grey;
z-index:101;
bottom:250vh;
}
#cont_un{
width:100%;
height:100%;
z-index:101;
position:absolute;
bottom:18vh;
display:flex;
justify-content:right;
background:red;
flex-wrap:wrap;
}
#cont_un1{
height:100%;
width:60%;
display:flex;
position:relative;
}
#cont_un1 p{
color:white;
margin:20px;
padding:0;
width:50%;
font-size:1.2rem;
}
#cont_un1 h1{
font-size:3.5rem;
font-style:italic;
position:absolute;
bottom:-40px;
line-height:1;
width:55%;
right:0;
}
#cont_un2{
height:100%;
width:35%;
}
#cont_un2 h1{
color:black;
font-size:3.5rem;
width:75%;
line-height:1;
font-style:italic;
}
#cont_form1{
background:lightgrey;
width:40%;
height:100%;
}
#cont_form2{
background:lightgrey;
width:100%;
height:30vh;
}
#form6{
width:400px;
height:500px;
top:450px;
transform:rotate(3deg);
left:15%;
}
#form7{
width:400px;
height:500px;
top:450px;
transform:rotate(12deg);
right:-100px;
}
#form8{
width:500px;
height:500px;
top:350px;
right:22%;
transform:rotate(-8deg);
}
.cont{
overflow:hidden;
width:80%;
height:100%;
position:absolute;
right:0;
}
#cont2{
width:100%;
height:150vh;
bottom:100vh;
position:absolute;
}
.form22{
margin-top:15px;
width:100%;
height:30vh;
display:flex;
justify-content:space-between;
position:relative;
}
#form221{
width:55%;
height:100%;
}
#form222{
width:44%;
height:100%;
}
.form220{
background:lightgrey;
}
#form23{
margin-top:15px;
width:100%;
height:60vh;
display:flex;
justify-content:space-between;
position:relative;
}
.cont3{
position:relative;
background:lightgrey;
width:45%;
height:100%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
#cont31{
width:54%;
background:none;
}
#form231{
background:lightgrey;
width:32%;
height:100%;
}
#form232{
background:lightgrey;
width:49%;
height:50%;
}
#form233{
background:lightgrey;
width:49%;
height:50%;
}
#form234{
background:lightgrey;
width:100%;
height:48%;
}
#fill{
width:100%;
height:2%;
}
.cont4{
width:66%;
height:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
position:relative;
}
.cont5{
width:100%;
height:80%;
background:white;
position:absolute;
z-index:990;
top:50%;
transform:translate(-20%,-50%);
}
.cont5 p{
margin:0;
padding:0;
font-size:1.2rem;
}
#form228{
background:lightgrey;
height:100%;
width:70%;
}
#form229{
background:lightgrey;
height:100%;
width:29%;
}
#titre{
background:#f5efe2;
width:83%;
height:10vh;
position:absolute;
z-index:990;
right:0;
top:-70px;
}
#titre h1{
font-size:4rem;
position:relative;
top:-70px;
line-height:1;
}
#titre h2{
position:relative;
top:-90px;
padding-top:5px;
padding-right: 15px;
padding-left:15px;
padding-bottom:5px;
width:auto;
color:white;
background:black;
display:inline-block;
cursor:pointer;
}
@media (min-width: 601px) and (max-width: 1224px) {
#cont_un{
background:green;
}
#cont_un1{
width:100%;
}
#cont_un2{
background:red;
width:100%;
}
}
</style>
<body>
<div id='contain'>
<div class='form' id='form1'></div>
<div class='form' id='form2'></div>
<div class='form' id='form6'></div>
<div class='form' id='form7'></div>
<div class='form' id='form8'></div>
<div class='cont'>
<div class='form' id='form3'></div>
<div class='form' id='form4'></div>
<div class='form' id='form5'>
<div id='cont_un'>
<div id='cont_un1'>
<div id='cont_form1'>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet eros vitae ipsum vulputate lacinia eu in augue. Donec non tristique est. Ut eget venenatis dolor. Sed pretium, est ac congue egestas, nisi elit varius eros, at congue erat arcu sit amet felis. Sed maximus purus auctor neque vehicula, sit amet cursus augue lacinia. Praesent gravida blandit sem, sed lobortis odio luctus eu. Nullam a erat blandit, tincidunt elit ac, hendrerit quam.</p>
<h1>les vieux vêtements, ça fait vivre</h1>
</div>
<div id='cont_un2'>
<h1>monde et mode, même problème</h1>
<div id='cont_form2'></div>
</div>
</div>
</div>
<div id='cont2'>
<div class='form22' >
<div class='form220' id='form221'></div>
<div class='form220' id='form222'></div>
</div>
<div id='form23' >
<div class='cont3'>
<div id='titre'>
<i><h1>de l'or dans ton placard</h1></i>
<i><h2>Campagne</h2></i>
</div>
</div>
<div class='cont3' id='cont31'>
<div id='form231'></div>
<div class='cont4'>
<div class='cont5'>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet eros vitae ipsum vulputate lacinia eu in augue. Donec non tristique est. Ut eget venenatis dolor. Sed pretium, est ac congue egestas, nisi elit varius eros, at congue erat arcu sit amet felis. Sed maximus purus auctor neque vehicula, sit amet cursus augue lacinia. Praesent gravida blandit sem, sed lobortis odio luctus eu. Nullam a erat blandit, tincidunt elit ac, hendrerit quam.</p></br>
<p>Mauris sit amet vehicula leo. Mauris scelerisque, dolor sit amet consectetur bibendum, sem mauris tristique libero, eu lacinia nunc ante vitae ligula. Integer et lorem vulputate, mollis dui vel, pretium nisi. Mauris et metus ligula. Sed quis ultricies ligula. Donec interdum erat non lorem faucibus placerat. Curabitur id mauris a neque cursus hendrerit. Donec et quam id tortor dictum faucibus eget eu augue. </p>
</div>
<div id='form232'></div>
<div id='form233'></div>
<div id='fill'></div>
<div id='form234'></div>
</div>
</div>
</div>
<div class='form22' >
<div id='form228'></div>
<div id='form229'></div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
</div>
</body>
</html>