-
-
Save sherline-hub/51d677a4b6d1e45e68d198c6608d58ac 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment