Skip to content

Instantly share code, notes, and snippets.

@GravenilvecTV

GravenilvecTV/index.html

Created April 13, 2020 17:40
Show Gist options
  • Save GravenilvecTV/64896a61f18593f2aa1767551d21ed53 to your computer and use it in GitHub Desktop.
Save GravenilvecTV/64896a61f18593f2aa1767551d21ed53 to your computer and use it in GitHub Desktop.
Download ZIP
Correction 25/30 - TP HTML/CSS 3 - Vol d'avions
Raw
index.html
<!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>&copy; 2020 - Graven'air - Tout droits réservés - <a href="cgu.html">CGU</a> </p>
</footer>
</body>
</html>
Raw
styles.css
* {
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;
}
@GameMasterDev
Copy link

gg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment