Scribd
Upload
4 views

HTML&Cssproject

Uploaded by

aayaeljazouli
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

HTML&Cssproject

Uploaded by

aayaeljazouli
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*section1*/
.section1{
position: relative;
width:100%;
height: 640px;
background-image:
linear-gradient(to right,rgba(0, 128, 0, 0.5),rgba(0, 128, 0, 0.5)),
url(hero.jpg);
background-size: cover,cover;
clip-path: polygon(0 0, 100% 0%, 100% 84%, 0% 100%);

}
.menu{
width: 80px;
height: 80px;
background-color: aliceblue;
position: absolute;
right: 10px;
top:10px;
border-radius: 50%;
padding-top: 25px;
box-sizing: border-box;
}
span{
background-color: black;
display: block;
height: 4px;
position: relative;
margin: auto;
width: 30px;
margin-top: 5px;
}
.titre{
text-align: center;
font-size: 40px;
}
.sousTitre{
font-size: 20px;
letter-spacing: 8px;
}
.button1{
display: block;
margin: auto;
position:relative;
top:100px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
}
.button1:hover{
box-shadow: 2px 2px 10px 10px greenyellow;
}
.menu:hover>span{
width:40px;
background-color: red;
}
.menu:hover{
cursor: pointer;
box-shadow: 2px 2px 10px 10px rgba(233, 71, 7, 0.466);
}
.logo{
width:60px;
height:30px;
margin-top:10px;
margin-left: 10px;
}
/*section2*/
.secion2{

}
.Titre{
color: rgb(62, 161, 0);
text-shadow: 1px 1px 15px 15px rgb(1, 80, 1);
text-align: center;
font-size: 30px;

}
.Titre:hover{
font-style: italic;
}
.p1{
width:600px;
font-size: 25px;
line-height: 50px;
}
/*section3*/
.section3{
border: 0px solid green;
width:100%;
height: 640px;
background-image:
linear-gradient(to right,rgba(4, 231, 125, 0.663),rgba(0, 142, 94, 0.794));
background-size: cover,cover;
clip-path: polygon(0 18%, 100% 0%, 100% 92%, 0% 100%);
padding: 50px 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}

/*img*/
.images img{
position: absolute;

width: 300px;
height: 300px;
border-radius: 15px;
transform: scale(1);
box-shadow: 1px 1px 15px 15px rgba(0, 0, 0, 0.343);
right: 200px;
margin-top: 770px;
margin-left: 860px;

}
.images #ig1{
top: 0;
left: 50px;
}
.images #ig2{
top: 9%;
left: 100px;

}
.images #ig3{
top: 19%;
left: 150px;

}
.images img:hover{
transform:scale(1.1);
outline: 15px solid green;
box-shadow: 5px 5px 15px gray;
border-radius:20px;
}

.card{
background: rgb(87, 235, 97);
padding: 20px;
border-radius: 10px;
width: 200px;
height: 200px;
box-shadow: 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
margin-top: 200px;
}

.card h3 {
font-size: 1.2rem;
margin-bottom: 10px;
}
/*section-3*/
.section-3{
height: 600px;
margin-top: 60px;
text-align: centre;
position: relative;
width: 100%;

}
.titreSection{
color: rgb(62, 161, 0);
text-shadow: 1px 1px 15px 15px rgb(1, 80, 1);
text-align: center;
font-size: 30px;

}
.titreSection:hover{
font-style: italic;
}
.cartes{
margin: auto;
width: 80%;
display: flex;
justify-content: space-around;
position: relative;
}
.carte{
width: 30%;
position:relative;
height: 400px;
cursor: pointer;
}
.carteFace1,.carteFace2{
position: absolute;
top:0px;
left:0px;
border-radius:5px ;
box-shadow: 2px 2px 8px black;
height: 400px;
width: 100%;
transition-duration: 4s;
backface-visibility: hidden;
}

.carteFace2{
transform: rotateY(180deg);
}

.carte:hover .carteFace1{
transform: rotateY(180deg);
}
.carte:hover .carteFace2{
transform: rotateY(0deg);
}

.carte1Img,.carte2Img,.carte3Img{
border-radius:5px ;
width: 100%;
height: 40%;

background-size: 100% 100%;


}
.carte1Img{
background-image:linear-gradient(to right,rgba(255, 166, 0, 0.4),rgba(255, 166,
0, 0.4)) ,url(./img/nat-8.jpg);
}
.carte1 .carteFace2{
background-image:linear-gradient(to right,rgba(255, 166, 0, 0.4),rgba(255, 166,
0, 0.4)) ;
}
.carte2Img{
background-image: linear-gradient(to right,rgba(28, 207, 18, 0.4),rgba(28, 207,
18, 0.4)) ,url(./img/nat-4.jpg);
}
.carte2 .carteFace2{
background-image: linear-gradient(to right,rgba(28, 207, 18, 0.4),rgba(28, 207,
18, 0.4)) ;
}
.carte3Img{
background-image: linear-gradient(to right,rgba(71, 25, 239, 0.4),rgba(71, 25,
239, 0.4)), url(./img/nat-7.jpg);
}
.carte3 .carteFace2{
background-image: linear-gradient(to right,rgba(71, 25, 239, 0.4),rgba(71, 25,
239, 0.4));
}
.carteTitre{
text-align: center;
position: absolute;
font-size: 40px;
top: 2px;
color: rgba(0, 255, 85, 0.5);
}
.carteText{
width: 80%;
margin: auto;
line-height: 30px;
text-align: center;
}
li{
list-style-type: none;
}
.cartePrix{
width: 80%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.cartePrix p{
text-align: center;
font-size: 40px;
}
.btn{
text-decoration: none;
position: absolute;
bottom: 20px;
left:50%;
transform: translateX(-50%);
background-color: #055821;
color: #fff;
display: inline-block;
height: 40px;
width: 60%;
border-radius: 20px;
text-align: center;
padding-top: 10px;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -10;
transition: all 1s;
border-radius: 30px;
}
.btn:hover::after {
background-color: rgb(255, 0, 30);
transform: scaleX(1.2) scaleY(1.6);
opacity: 0; }
.btnBlue{
width: 25%;
padding-top: 20px;
background-color: #0f3bc9;
border-radius: 30px;
}
/*section-4*/
.Titre-4{
color: rgb(62, 161, 0);
text-shadow: 1px 1px 15px 15px rgb(1, 80, 1);
text-align: center;
font-size: 30px;

}
.Titre-4:hover{
font-style: italic;
}
.ficheMSAZ{
display: flex;
justify-content: space-around;
margin: auto;
transform: skewX(-7deg);
box-shadow: 2px 2px 5px black;
margin-top: 30px;
width: 80%;
height: 180px;
position: relative;

}
.ficheMSAZ{
display: flex;
justify-content: space-around;
margin: auto;
transform: skewX(-7deg);
box-shadow: 2px 2px 5px black;
margin-top: 30px;
width: 80%;
height: 180px;
position: relative;

}
.imgMSAZ{
width: 100%;
height: 100%;
border-radius: 50%;

}
.temoinImg{
width: 150px;
height: 150px;
border-radius: 50%;
transform: skew(7deg);
position: relative;
}
.temoinLabel{
opacity: 0;
left: 150px;
top: 140px;
transition-duration: 1s;
position: absolute;
font-size: 25px;
color: red;
text-align: center;
}
.ficheMSAZ:hover .temoinLabel{
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%,-50%);
color: red;
}
.ficheMSAZ:hover .imgMSAZ{
filter: blur(2px);
}
.ficheMSAZTEXT{
width: 70%;
transform: skewX(7deg);
line-height: 30px;
}
</style>
</head>
<body>
<section class="section1">
<img class="logo" src="logo-white.png" alt="">
<div class="titre">
<p>EN PLEIN AIR</p>
<p class="sousTitre">C'EST LA OU VOUS DEVEZ VOYAGER </p>
</div>

<div class="menu">
<span> </span>
<span> </span>
<span> </span>
</div>
<button class="button1">DECOUVREZ NOS CIRCUITS</button>
</section>
<section class="secion2">
<div class="Titre">
<h1>Des visites passionnantes pour les avanturiers</h1>
</div>
<div>
<div class="Nature1">
<h2>Vous allez tomber amoureux de la nature</h2>
<p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit sed, libero inventore fuga nobis odio sit molestias officia similique ducimus
unde! Quae, a dolores ratione asperiores officiis doloremque minus at.</p>
</div>
<div class="Nature2">
<h2>Vivez des aventures comme jamais aparavant</h2>
<p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores nulla deserunt voluptatum nam.
</p>
<a href="#" class="link">Apprendre plus</a>
</div>
</div>
<div class="images">
<img id="ig1" src="nat-1-large.jpg" alt="Nature 1">
<img id="ig2"src="nat-2-large.jpg" alt="Nature 2">
<img id="ig3"src="nat-3-large.jpg" alt="Nature 3">
</div>
</div>
</section>
<section class="section3">
<div class="card">
<h3>Explore le monde naturel</h3>
<p>Lorem ipsum color sit
amet consectetur adipisicing
elit . Aperiam, ipsum sapiente
aspernatur.</p>
</div>
<div class="card">
<h3>Rencontrez la nature</h3>
<p>Lorem ipsum color sit
amet consectetur adipisicing
elit . Aperiam, ipsum sapiente
aspernatur.</p>
</div>
<div class="card">
<h3>Trouvez votre chemin</h3>
<p>Lorem ipsum color sit
amet consectetur adipisicing
elit . Aperiam, ipsum sapiente
aspernatur.</p>
</div>
<div class="card">
<h3>Vivez une vie plus saine</h3>
<p>Lorem ipsum color sit
amet consectetur adipisicing
elit . Aperiam, ipsum sapiente
aspernatur.</p>
</div>
</section>
<section class="section-3" id="section-tours">
<h2 class="titreSection">
Les circuits les plus populaires
</h2>

<div class="cartes">
<div class="carte carte1">
<div class="carteFace1">
<div class="carteImg carte1Img">
&nbsp;
</div>
<h4 class="carteTitre">
L'explorateur de la mer
</h4>
<div class="carteText">
<ul>
<li>Circuits de 3 jours</li>
<li>Jusqu'à 30 personnes</li>
<li>2 guides touristiques</li>
<li>Dormir dans des hôtels cosy</li>
<li>Difficulté : facile</li>
</ul>
</div>
</div>
<div class="carteFace2">
<div class="cartePrix">
<p>Uniquement</p>
<p>2660DH</p>
</div>
<a href="#popup" class="btn btn--green">Reserve
maintenant!</a>
</div>
</div>

<div class="carte carte2">


<div class="carteFace1">
<div class="carteImg carte2Img">
&nbsp;
</div>
<h4 class="carteTitre">
Le randonneur forestier
</h4>
<div class="carteText">
<ul>
<li>Circuits de 7 jours</li>
<li>Jusqu'à 40 personnes</li>
<li>6 guides touristiques</li>
<li>Dormez dans les tentes fournies</li>
<li>Difficulté : moyenne</li>
</ul>
</div>
</div>
<div class="carteFace2">
<div class="cartePrix">
<p>Uniquement</p>
<p>2890DH</p>
</div>
<a href="#popup" class="btn btn--green">Reserve maintenant!
</a>
</div>
</div>

<div class="carte carte3">


<div class="carteFace1">
<div class="carteImg carte3Img">
&nbsp;
</div>
<h4 class="carteTitre">
L'aventurier des neiges
</h4>
<div class="carteText">
<ul>
<li>Circuits de 5 jours</li>
<li>Jusqu'à 15 personnes</li>
<li>3 guides touristiques</li>
<li>Dormez dans les tentes fournies</li>
<li>Difficulté : difficile</li>
</ul>
</div>
</div>
<div class="carteFace2">
<div class="cartePrix">
<p>Uniquement</p>
<p>3200DH</p>
</div>
<a href="#popup" class="btn btn--green">Reserve maintenant!</a>
</div>
</div>
</div>
<a href="#popup" class="btn btnBlue">DECOUVREZ TOUTES LES VISITES!</a>

</section>
<section id="section-4">
<h1 class="Titre-4">Nous rendons les gens vraiment heureux</h1>
<div class="ficheMSAZ">
<figure class="temoinImg">
<img class="imgMSAZ" src="nat-8.jpg" alt="nat-8">
<figcaption class="temoinLabel">Maryame Salim</figcaption>
</figure>
<div class="ficheMSAZTEXT">
<h3>J'ai passé la meilleure semaine de ma vie avec ma
famille</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
reprehenderit cum exercitationem maiores debitis tenetur quasi quod quaerat
temporibus qui explicabo in mollitia nostrum vitae velit recusandae, ipsam harum!
Fugiat quia obcaecati nemo cum omnis dicta totam, quos suscipit.</p>
</div>
</div>
<div class="ficheMSAZ">
<figure class="temoinImg">
<img class="imgMSAZ" src="nat-9.jpg" alt="nat-9">
<figcaption class="temoinLabel">Ahmed Zaki</figcaption>
</figure>
<div class="ficheMSAZTEXT">
<h3>WOW!Ma vie est complèment différente maintenant</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Id reprehenderit cum exercitationem maiores debitis tenetur quasi quod quaerat
temporibus qui explicabo in mollitia nostrum vitae velit recusandae, ipsam harum!
Fugiat quia obcaecati nemo cum omnis dicta totam, quos suscipit.</p>
</div>
</div>

<a href="#" id="lastlink" target="_top">Lire tout les histoirs -></a>

</section>

</body>
</html>

You might also like