Created
April 13, 2020 17:40
-
-
Save GravenilvecTV/64896a61f18593f2aa1767551d21ed53 to your computer and use it in GitHub Desktop.
Correction 25/30 - TP HTML/CSS 3 - Vol d'avions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Graven'air companie !</title> | |
<!-- lier la page html avec le css pour ajouter le design --> | |
<link rel="stylesheet" type="text/css" href="css/styles.css"> | |
<!-- ajouter une police d'ecriture --> | |
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet"> | |
<!-- je prend en compte les accents --> | |
<meta charset="utf-8"> | |
</head> | |
<body> | |
<!-- Balise pour le haut de page --> | |
<header> | |
<!-- Titre de la page --> | |
<h1 class="titre">Graven'air ✈</h1> | |
<!-- Slogan --> | |
<h3 class="slogan">«La tête dans les nuages !»</h3> | |
<div class="search-form"> | |
<!-- Formulaire de recherche --> | |
<form method="post"> | |
<div class="form-group"> | |
<label for="provenance">Ville de départ</label> | |
<input type="text" name="provenance" id="provenance" placeholder="Paris, Milan, ..."> | |
<label for="arrivee">Ville d'arrivée</label> | |
<input type="text" name="arrivee" id="arrivee" placeholder="Paris, Milan, ..."> | |
</div> | |
<div class="form-group"> | |
<label for="depart">Date de départ</label> | |
<input type="date" name="depart" id="depart" value="13/04/2020"> | |
<label for="retour">Date de Retour</label> | |
<input type="date" name="retour" id="retour" value="14/04/2020"> | |
</div> | |
<div class="form-group"> | |
<label for="adultes">Nombre d'adultes</label> | |
<select name="adultes" id="adultes"> | |
<option selected="selected">0 Adulte</option> | |
<option>1 Adulte</option> | |
<option>2 Adultes</option> | |
<option>3 Adultes</option> | |
<option>4 Adultes</option> | |
<option>5 Adultes</option> | |
</select> | |
<label for="enfants">Nombre d'enfants</label> | |
<select name="enfants" id="enfants"> | |
<option selected="selected">0 Enfant</option> | |
<option>1 Enfant</option> | |
<option>2 Enfants</option> | |
<option>3 Enfants</option> | |
<option>4 Enfants</option> | |
<option>5 Enfants</option> | |
</select> | |
<label for="type">Categorie</label> | |
<select name="type" id="type"> | |
<option selected="selected">Classe Economique</option> | |
<option>Classe Affaires</option> | |
</select> | |
</div> | |
<div class="button-submit"> | |
<input type="submit" value="Lancer la recherche" name="recherche" id="recherche"> | |
</div> | |
</form> | |
</div> | |
</header> | |
<!-- Une section avec les destinations --> | |
<section id="destinations"> | |
<h3>Nous proposons differentes destinations pour découvrir le monde !</h3> | |
<div class="destinations-group"> | |
<!-- destination 1 --> | |
<div class="destination-item barcelone"> | |
<div class="overlay"> | |
<span class="prix">Dès 80€</span> | |
<span class="nom">Barcelone</span> | |
</div> | |
</div> | |
<!-- destination 2 --> | |
<div class="destination-item dubai"> | |
<div class="overlay"> | |
<span class="prix">Dès 300€</span> | |
<span class="nom">Dubai</span> | |
</div> | |
</div> | |
<!-- destination 3 --> | |
<div class="destination-item philippines"> | |
<div class="overlay"> | |
<span class="prix">Dès 1200€</span> | |
<span class="nom">Manille</span> | |
</div> | |
</div> | |
<!-- destination 4 --> | |
<div class="destination-item paris"> | |
<div class="overlay"> | |
<span class="prix">Dès 55€</span> | |
<span class="nom">Paris</span> | |
</div> | |
</div> | |
<!-- destination 5 --> | |
<div class="destination-item tunis"> | |
<div class="overlay"> | |
<span class="prix">Dès 90€</span> | |
<span class="nom">Tunis</span> | |
</div> | |
</div> | |
<!-- destination 6 --> | |
<div class="destination-item londres"> | |
<div class="overlay"> | |
<span class="prix">Dès 65€</span> | |
<span class="nom">Londres</span> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Pied de page --> | |
<footer> | |
<hr> | |
<p>© 2020 - Graven'air - Tout droits réservés - <a href="cgu.html">CGU</a> </p> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
font-family: 'Acme', sans-serif; | |
} | |
body { | |
background-color: #DBDBD9; | |
margin: 20px 0 0 0; | |
color: #DBDBD9; | |
} | |
header { | |
background: url(../images/header-section.jpg) 100% fixed; | |
height: 60vh; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
line-height: 2px; | |
} | |
h1.titre { | |
font-size: 100px; | |
margin-top: 140px; | |
text-transform: uppercase; | |
} | |
h3.slogan { | |
font-size: 35px; | |
font-style: italic; | |
} | |
/* Destinations */ | |
section#destinations { | |
margin: 0px 20% 0 20%; | |
} | |
section#destinations h3 { | |
padding-top: 50px; | |
opacity: 0.5; | |
color: #373737; | |
} | |
div.destination-item { | |
color: #373737; | |
height: 300px; | |
margin: 15px; | |
position: relative; | |
flex: 1 0 29%; | |
background-repeat: no-repeat; | |
background-size: 100%; | |
} | |
div.destination-item:hover { | |
transform: scale(0.98); | |
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | |
transition: 0.2s all; | |
} | |
div.destinations-group { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.barcelone { background: url(../images/barcelone.jpg); } | |
.dubai { background: url(../images/dubai.jpg); } | |
.londres { background: url(../images/londres.jpg); } | |
.paris { background: url(../images/paris.jpg); } | |
.philippines { background: url(../images/philippines.jpg); } | |
.tunis { background: url(../images/tunis.jpg); } | |
.overlay { | |
position: absolute; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
top: 0; | |
} | |
span.nom { | |
position: relative; | |
color: #373737; | |
background-color: #DBDBD9; | |
top: 20px; | |
float: right; | |
padding: 12px; | |
font-size: 22px; | |
} | |
span.prix { | |
position: relative; | |
color: #fff; | |
background-color: #EF8F1D; | |
padding: 12px; | |
font-size: 25px; | |
top: 220px; | |
} | |
/* Formulaire de recherche */ | |
header form { | |
background-color: #EF8F1D; | |
padding: 20px; | |
} | |
.search-form { | |
transform: translateY(75px); | |
} | |
.form-group { | |
color: #ffffff; | |
display: flex; | |
justify-content: center; | |
flex-direction: row; | |
margin: 10px; | |
} | |
.form-group input, select, option{ | |
border: none; | |
padding: 5px; | |
background-color: bisque; | |
} | |
.form-group label { | |
margin: 5px; | |
padding: 10px; | |
} | |
.button-submit{ | |
text-align: center; | |
} | |
.button-submit input { | |
background-color: #373737; | |
border: none; | |
color: #DBDBD9; | |
font-size: 25px; | |
margin-top: 15px; | |
} | |
/* Pied de page */ | |
footer p { | |
text-align: center; | |
color: #373737; | |
padding: 10px; | |
} |
tres bien fait
gg
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
gg