Page Web HTML/CSS pour l'agence de voyage "Zanzibar"
Résultat
Index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zanzibar</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<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=Warnes&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<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=Lato:wght@100&display=swap" rel="stylesheet">
</head>
<body data-rsssl=1>
<header>
<h1>Zanzibar</h1>
<nav>
<a href="">Qui sommes-nous</a>
<a href="">Notre île</a>
<a href="">Photos</a>
<a href="">Témoignages</a>
<a href="">Nos séjours</a>
<a href="">Contact</a>
</nav>
</header>
<!-- Banniere -->
<section id="imgbanniere">
<h2 id="h2blanc"><b>ZANZIBAR</b> <br>
<p>UN ART DE VIVRE</p>
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<a class="bouton">Notre île</a>
<a class="bouton">Contactez-nous</a>
</section>
<!-- fin banniere -->
<!-- qui sommes nous début-->
<section>
<center>
<h2>QUI SOMMES-NOUS</h2>
<hr>
</center>
<div id="listesinge">
<div><img decoding="async" src="img/tea.png" /></div>
<ul>
<li>
<div><i class="far fa-check-circle"></i></div>
<div>
<h2>
RELIGIONS ET CROYANCES
</h2> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores necessitatibus
aspernatur
atque fugit architecto eius blanditiis facere ut excepturi suscipit voluptates nesciunt
minus
distinctio, repudiandae veritatis quibusdam recusandae sint provident.</p>
</div>
</li>
<li>
<div><i class="far fa-check-circle"></i></div>
<div>
<h2>MUSIQUE</h2> <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta cupiditate
magni recusandae aliquid odio libero obcaecati veniam, unde officia maiores error reprehenderit
dolores fugiat saepe inventore commodi nihil? Dolores, praesentium.
</div>
</li>
<li>
<div><i class="far fa-laugh"></i></div>
<div>
<h2>MYTHE LITTéRAIRE</h2> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia accusamus numquam neque
magni,
optio excepturi saepe tenetur quisquam eum aliquam vitae ducimus eos quidem nostrum maiores
eveniet aspernatur est cumque!</p>
</div>
</li>
</ul>
</div>
</section>
<!-- qui sommes nous fin -->
<!-- Notre Ile début -->
<section id="notreile">
<center>
<BR></BR>
<h2>NOTRE ÎLE</h2>
<hr>
</center>
<div class="parent">
<div class="contenu1 contenu">
<div class="contenu1-image"></div>
<h2>STONE TOWN</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quae consectetur vero, eaque vitae
maxime ratione eum. Architecto aut eveniet veritatis optio eligendi asperiores accusamus nisi
expedita harum atque. Consectetur. </p>
</div>
<div class="contenu2 contenu">
<div class="contenu2-image">
<img decoding="async" src="prison-island.png" alt="Prison">
</div>
<h2>PRISON ISLAND</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quae consectetur vero, eaque vitae
maxime ratione eum. Architecto aut eveniet veritatis optio eligendi asperiores accusamus nisi
expedita harum atque. Consectetur. </p>
</div>
<div class="contenu3 contenu">
<div class="contenu3-image"></div>
<h2>PARC JOZANI</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quae consectetur vero, eaque vitae
maxime ratione eum. Architecto aut eveniet veritatis optio eligendi asperiores accusamus nisi
expedita harum atque. Consectetur. </p>
</div>
</section>
<!-- Notre Ile fin -->
<!-- galerie photo début -->
<center>
<h2>GALERIE PHOTO</h2>
<hr>
</center>
<section>
<div id="femmeplage">
<div id="femmezanzibar">
<p>LES FEMMES DE ZANZIBAR</p>
</div>
<div id="plagezanzibar">
<P>LA PLAGE DE ZANZIBAR</P>
</div>
</div>
</section>
<section>
<div id="epicepeche">
<div id="epiceszanzibar">
<p>LES EPICES DE ZANZIBAR</p>
</div>
<div id="pecheur">
<p>VILLAGE DE PECHEUR A ZANZIBAR</p>
</div>
<div id="safari">
<p>SAFARI BLUE</p>
</div>
</div>
</section>
<!-- galerie photo fin -->
<!-- il nous ont adoré début -->
<section>
<div>
<div id="ilontadoreimg1">
<center>
<h2>ILS ONT ADORE</h2>
<hr>
</center>
</div>
<div id="ilontadorecom">
<div id="emilie">
<blockquote>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut obcaecati vel eveniet,
earum
adipisci cupiditate quae officia possimus unde explicabo consequuntur eius corrupti sapiente
commodi
natus dolore. Sed, saepe! </p>
</blockquote>
<div class="avatar"><img decoding="async" src="/clients/emilie.jpg" alt="">
<h4>Emilie</h4>
</div>
</div>
<div id="jean-claude">
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut obcaecati vel
eveniet, earum
adipisci cupiditate quae officia possimus unde explicabo consequuntur eius corrupti sapiente
commodi
natus dolore. Sed, saepe!</blockquote>
<div class="avatar"><img decoding="async" src="/clients/blaise.jpg" alt="">
<h4>Jean-claude</h4>
</div>
</div>
<div id="caroline">
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut obcaecati vel
eveniet, earum
adipisci cupiditate quae officia possimus unde explicabo consequuntur eius corrupti sapiente
commodi
natus dolore. Sed, saepe!</blockquote>
<div class="avatar"><img decoding="async" src="/clients/julia.jpg" alt="">
<h4>Caroline</h4>
</div>
</div>
</div>
</div>
</section>
<!-- il nous ont adoré fin -->
<!-- nos séjours début -->
<center>
<h2>NOS SEJOURS</h2>
<hr>
</center>
<section id="nossejours">
<div id="idylle">
<b>IDYLLE A ZANZIBAR</b>
<p>10 JOURS | 7 NUITS</p>
<h4>a partir de 2350€</h4>
<hr>
<p> <i class="far fa-check-circle"></i> Farniente sur les plages de Zanzibar </p>
<p><i class="far fa-check-circle"></i>Farniente sur les plages de Zanzibar</p>
<p><i class="far fa-check-circle"></i>Hébergement dans un hotel de luxe</p>
<p><i class="far fa-check-circle"></i>Une atmosphère dans le plus pur style zanzibari au coeur des jardins
</p>
<p><i class="far fa-check-circle"></i>De petites attentions tout au long de votre séjour</p>
</div>
<div id="tanzanie">
<b>TANZANIE A L'INFINI</b>
<p>13 JOURS | 10 NUITS</p>
<h4>a partir de 3440€</h4>
<hr>
<p> <i class="far fa-check-circle"></i>Le spectacle magnifique de la migration dans le Serengeti</p>
<p><i class="far fa-check-circle"></i>L'impressionnant cratère du Ngorongoro</p>
<p><i class="far fa-check-circle"></i>Les plages de Zanzibar</p>
<p><i class="far fa-check-circle"></i>La vieille ville de store town et des ruelles aux milles couleurs</p>
</div>
<div id="boutanzanie">
<b>AU BOUT DE LA TANZANIE</b>
<p>12 JOURS | 9 NUITS</p>
<h4>a partir de 3600€</h4>
<hr>
<p> <i class="far fa-check-circle"></i>La découverte de tous les principaux parcs du pays</p>
<p><i class="far fa-check-circle"></i>L'impressionnant cratère du Ngorongoro</p>
<p><i class="far fa-check-circle"></i>Les plages de Zanzibar</p>
<p><i class="far fa-check-circle"></i>Le spectacle magnifique de la migration dans le serengeti</p>
</div>
</section>
<!-- nos séjours fin -->
<!-- contactez nous début -->
<section id="contacteznous">
<div>
<center>
<h2>CONTACTEZ-NOUS</h2>
<hr>
</center>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam officia inventore maxime! Labore
deserunt doloribus quae recusandae. Voluptatum, aut ab.</p>
<span id="contacts">
<p><i class="fas fa-phone"></i>+255 777 360 982</p>
<p><i class="fas fa-map-marker-alt"></i>Office du Tourisme</p>
</span>
<form action="">
<label for="">nom:</label>
<input type="text">
<label for="">Email:</label>
<input type="email" placeholder="Ajouter votre email">
<br>
<br>
<label for="">Votre Message:</label>
<br>
<textarea name="" id="" cols="50" rows="5"></textarea>
<br>
<input type="submit">
</form>
</div>
<div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.7403941628454!2d2.347690115768849!3d48.863160608324726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66f92058eeef9%3A0x5878bb5909fbccd7!2sTrantranzai%20ch%C3%A2telet!5e0!3m2!1sfr!2sfr!4v1652861415409!5m2!1sfr!2sfr"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<footer>
<p>© site Zanzibar exercice arinfo - 2019 </p>
</footer>
<!-- contactez nous fin -->
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Lato', sans-serif;
}
blockquote p::before {
content: '\201C';
font-size: 800%;
}
blockquote p::after {
content: '\201D';
}
/* header */
h1 {
color: white;
font-size: 20px;
font-family: Warnes;
}
header {
display: flex;
justify-content: space-evenly;
background-color: black;
height: 40px;
line-height: 40px;
}
nav a {
color: white;
text-decoration: none;
font-size: 12px;
margin-left: 20px;
}
/* banniere */
#imgbanniere {
background-image: url(img/zanzibar.jpg);
background-size: cover;
height: 600px;
display: flex;
justify-content: flex-start;
padding-top: 250px;
padding-left: 150px;
color: white;
}
#h2blanc {
color: white;
font-size: 50px;
text-align: left;
}
.bouton {
color: white;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 8px;
text-align: center;
font-size: 20px;
border: white solid 2px;
}
.bouton:hover {
background-color: white;
color: aqua;
display: block;
width: 200px;
height: 50px;
line-height: 50px;
border-radius: 8px;
text-align: center;
font-size: 20px;
}
/* fin banniere */
hr {
margin-bottom: 50px;
width: 100px;
color: aqua;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
#listesinge {
display: flex;
justify-content: space-evenly;
color: gray;
}
#listesinge img {
object-fit: cover;
}
#listesinge ul {
margin: 80px;
width: 400px;
}
#listesinge li {
list-style: none;
display: flex;
}
center h2 {
padding: 50px;
font-size: 25px;
font-weight: 500;
}
/* notre ile début */
div.contenu {
background-color: white;
width: 400px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
border-radius: 5px;
}
h2 {
text-align: center;
}
.contenu1-image {
background-image: url("stone-town.png");
background-position: center;
background-size: cover;
/* respecte les dimensions */
width: 100%;
height: 200px;
}
.contenu2-image img {
width: 100%;
height: 200px;
object-fit: cover;
/* respecte les dimenions */
}
.parent {
display: flex;
justify-content: space-around;
}
#notreile {
display: flex;
background-color: #0CE0F5;
}
/* notre ile fin */
/* galerie photo début */
#femmeplage{
display: flex;
justify-content: center;
}
#femmezanzibar {
background-image: url(galerie/femmes-zanzibar.jpg);
width: 400px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#femmezanzibar p{
color: white;
}
#plagezanzibar{
background-image: url(galerie/plage-zanzibar.jpg);
width: 800px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#plagezanzibar p{
color: white;
}
#epicepeche{
display: flex;
justify-content: center;
}
#epiceszanzibar{
background-image: url(galerie/epices-zanzibar.jpg);
width: 600px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#epiceszanzibar p{
color: white;
}
#pecheur{
background-image: url(galerie/village-pecheur-zanzibar.jpg);
width: 200px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#pecheur p{
color: white;
}
#safari{
background-image: url(galerie/safari-blue.jpg);
width: 380px;
height: 200px;
background-position: center;
background-size: cover;
margin: 10px;
border-radius: 5px;
}
#safari p{
color: white;
}
/* galerie photo fin */
/* il nous ont adoré début */
#ilontadorecom{
display: flex;
justify-content: space-around;
}
.avatar{
display: flex;
line-height: 50px;
}
.avatar img{
border-radius: 50%;
width: 50px;
height: 50px;
}
#ilontadoreimg1{
background-image: url(/galerie/plage-zanzibar.jpg);
background-position: center;
background-size: cover;
height: 300px;
color: white;
}
#ilontadore{
display: flex;
justify-content: space-around;
}
/* il nous ont adoré fin */
/* nos séjours début */
#nossejours{
display: flex;
}
#idylle{
width: 300px;
height: 300px;
border-radius: 5px;
border-color: grey;
border: 5px;
margin: 50px;
}
#tanzanie{
width: 300px;
height: 300px;
border-radius: 5px;
border-color: grey;
border: 5px;
margin: 50px;
}
#boutanzanie{
width: 300px;
height: 300px;
border-radius: 5px;
border-color: grey;
border: 5px;
margin: 50px;
}
/* nos séjours fin */
#contacteznous{
display: flex;
justify-content: space-around;
}
#contacteznous p{
font-size: 12px;
}
#contacteznous div{
margin: 40px;
}
#contacts{
display: flex;
justify-content: space-around;
}
footer{
color: white;
text-align: center;
font-size: 15px;
background-color: black;
height: 150px;
padding: 30px;
}