Created
March 30, 2020 14:46
-
-
Save GravenilvecTV/d93fe731ff8bb0f43c48343694ad8fbf to your computer and use it in GitHub Desktop.
Correction TP JOUR 11/30 - Menu du bar
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 --> | |
| <head> | |
| <title>GravenBar - Menu de l'hotel</title> | |
| <meta charset="utf-8"/> | |
| <!-- lier la page html avec le css --> | |
| <link rel="stylesheet" type="text/css" href="css/styles.css"/> | |
| <!-- lier un fichier ttf pour changer la police d'ecriture --> | |
| <link href="https://fonts.googleapis.com/css?family=Ravi+Prakash&display=swap" rel="stylesheet"> | |
| </head> | |
| <!-- body --> | |
| <body> | |
| <!-- header haut de page --> | |
| <header> | |
| <img src="images/logo.png"> | |
| <h1>GravenBar</h1> | |
| <span>Des cocktails maison d’une grande qualité </span> | |
| </header> | |
| <!-- section details --> | |
| <section id="about"> | |
| <div class="opening"> | |
| <h3>8H-12H et 15H-23H</h3> | |
| </div> | |
| <div class="mention"> | |
| <h3>Raffiné</h3> | |
| </div> | |
| <div class="cocktails"> | |
| <h3>5 cocktails</h3> | |
| </div> | |
| </section> | |
| <!-- section happy hour --> | |
| <section id="cocktails"> | |
| <div class="section_container"> | |
| <div class="first-row"> | |
| <div class="sunmoon-banner cocktail-item col-2"> | |
| <h4>Sunmoon - 7€80</h4> | |
| <div class="overlay"> | |
| <img src="images/sunmoon.png"> | |
| <p>Cocktail grenadine ananas avec une pointe d'orange</p> | |
| </div> | |
| </div> | |
| <div class="mentalux-banner cocktail-item col-2"> | |
| <h4>Mentalux - 3€90</h4> | |
| <div class="overlay"> | |
| <img src="images/mentalux.png"> | |
| <p>Cocktail Sirop de menthe et jus de poire</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="second-row"> | |
| <div class="coco-banner cocktail-item col-3"> | |
| <h4>Cocowhip - 9€20</h4> | |
| <div class="overlay"> | |
| <img src="images/cocowhip.png"/> | |
| <p>Cocktail noix de coco, lait d'amande et framboise</p> | |
| </div> | |
| </div> | |
| <div class="citrinus-banner cocktail-item col-3"> | |
| <h4>Citrinus - 3€20</h4> | |
| <div class="overlay"> | |
| <img src="images/citrinus.png"/> | |
| <p>Cocktail citron et poire avec lait d'amande</p> | |
| </div> | |
| </div> | |
| <div class="spicherry-banner cocktail-item col-3"> | |
| <h4>Spicherry - 5€20</h4> | |
| <div class="overlay"> | |
| <img src="images/spicherry.png"/> | |
| <p>Cocktail cerise, fruit rouge avec pointe de cassis</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- pied de page --> | |
| <footer> | |
| <p>© Copyright 2020 – GravenBar</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
| body { | |
| /* background-color: #F25A29; */ | |
| background: url(../images/header-section.jpg) no-repeat fixed; | |
| background-size: cover; | |
| color: #fff; | |
| margin: 0 auto; | |
| font-family: 'Ravi Prakash', cursive; | |
| } | |
| .overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background-color: #373737; | |
| overflow: hidden; | |
| width: 100%; | |
| height: 0; | |
| transition: 0.3s all; | |
| } | |
| .overlay { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .section_container { | |
| margin: 10px 20% 10px 20%; | |
| } | |
| /* header */ | |
| header { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| height: 700px; | |
| line-height: 12px; | |
| } | |
| header h1 { | |
| font-size: 120px; | |
| text-transform: uppercase; | |
| } | |
| header img { | |
| height: 300px; | |
| } | |
| header span { | |
| font-size: 30px; | |
| } | |
| /* a propos */ | |
| section#about { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: gray; | |
| } | |
| section#about { | |
| margin-bottom: -30px; | |
| margin-left: calc(20% + 32px); | |
| margin-right: calc(20% + 32px); | |
| } | |
| section#about div { | |
| height: 150px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex: 1; | |
| } | |
| section#about div h3 { | |
| font-size: 26px; | |
| text-transform: uppercase; | |
| } | |
| .opening { background: url(../images/1.jpg); } | |
| .mention { background: url(../images/2.jpg); } | |
| .cocktails { background: url(../images/3.jpg); } | |
| /* happy hour */ | |
| section#cocktails { | |
| background: url(../images/cocktail-section.jpg) fixed; | |
| padding: 20px; | |
| } | |
| .first-row, .second-row { display: flex; } | |
| .col-3 { flex: 0.333; } | |
| .col-2 { flex: 0.5; } | |
| .cocktail-item { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| margin: 20px; | |
| height: 300px; | |
| position: relative; | |
| padding: 20px; | |
| } | |
| .col-2 img { | |
| width: 140px; | |
| } | |
| .col-3 img { | |
| width: 100px; | |
| } | |
| .cocktail-item p { | |
| font-size: 25px; | |
| } | |
| .cocktail-item h4 { | |
| font-size: 30px; | |
| text-transform: uppercase; | |
| } | |
| .cocktail-item:hover .overlay { | |
| height: 100%; | |
| padding: 20px; | |
| } | |
| .sunmoon-banner{ background: url(../images/sunmoon-banner.jpg) } | |
| .mentalux-banner{ background: url(../images/mentalux-banner.jpg) } | |
| .coco-banner{ background: url(../images/coco-banner.jpg) } | |
| .citrinus-banner{ background: url(../images/citrinus-banner.jpg) } | |
| .spicherry-banner{ background: url(../images/cherry-banner.jpg) } | |
| /* pied de page */ | |
| footer { | |
| background-color: #373737; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #fff; | |
| font-size: 18px; | |
| } |
Thank Graven.
Thanks for all
c'est vraiment genial graven
salut graven j'espère que vous allez bien, au faite je m'exerce sur vos vidéos d'entraînement sur la programmation web mais j'ai un petit soucis au niveau de prérequis vu que les vidéos date je ne peux pas télécharger les images pour la conception du site. Merci
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Merci pour l'exercise.