Skip to content

Instantly share code, notes, and snippets.

@soner8

soner8/scroll.html

Created March 16, 2018 11:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save soner8/e944a25554d2c7b9869a5ce2e970f918 to your computer and use it in GitHub Desktop.
Save soner8/e944a25554d2c7b9869a5ce2e970f918 to your computer and use it in GitHub Desktop.
Download ZIP
scroll
Raw
scroll.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>The Market Tavern</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="styledev.css" />
</head>
<body>
<!-- Navbar **************************** -->
<nav class="fixed-top">
<div class="container-fluid">
<div class="row">
<div class="menuToggler1 col-6">
<span class="mainBurger">
<!-- <svg class="img-fluid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="7vh" height="7vh" viewBox="0 0 124 124" style="" xml:space="preserve">
<g >
<path d="M112,6H12C5.4,6,0,11.4,0,18s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,6,112,6z"/>
<path d="M112,50H12C5.4,50,0,55.4,0,62c0,6.6,5.4,12,12,12h100c6.6,0,12-5.4,12-12C124,55.4,118.6,50,112,50z" />
<path d="M112,94H12c-6.6,0-12,5.4-12,12s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,94,112,94z"/>
</g><g></g><g></g><g></g><g></g><g></g><g>
</g><g></g> <g></g><g></g><g></g><g></g>
<g></g><g></g><g></g><g></g>
</svg> -->
<!-- <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- <svg class="img-fluid" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" width="7vh" height="7vh" xml:space="preserve">
<g>
<g>
<path d="M491.318,235.318H20.682C9.26,235.318,0,244.577,0,256s9.26,20.682,20.682,20.682h470.636
c11.423,0,20.682-9.259,20.682-20.682C512,244.578,502.741,235.318,491.318,235.318z"/>
</g>
</g>
<g>
<g>
<path d="M491.318,78.439H20.682C9.26,78.439,0,87.699,0,99.121c0,11.422,9.26,20.682,20.682,20.682h470.636
c11.423,0,20.682-9.26,20.682-20.682C512,87.699,502.741,78.439,491.318,78.439z"/>
</g>
</g>
<g>
<g>
<path d="M491.318,392.197H20.682C9.26,392.197,0,401.456,0,412.879s9.26,20.682,20.682,20.682h470.636
c11.423,0,20.682-9.259,20.682-20.682S502.741,392.197,491.318,392.197z"/>
</g>
</g>
<g></g><g></g><g></g><g></g><g></g><g></g><g>
</g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg> -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="img-fluid" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" width="7vh" height="7vh" xml:space="preserve">
<g>
<g>
<path d="M454.1,230H57.9c-9.6,0-17.4,10.4-17.4,23.3c0,12.9,7.8,23.3,17.4,23.3h396.2c9.6,0,17.4-10.4,17.4-23.3
C471.5,240.5,463.7,230,454.1,230z"/>
</g>
</g>
<g>
<g>
<path d="M454.1,74H57.9c-9.6,0-17.4,10.3-17.4,22.9s7.8,22.9,17.4,22.9h396.2c9.6,0,17.4-10.3,17.4-22.9S463.7,74,454.1,74z"/>
</g>
</g>
<g>
<g>
<path d="M454.1,388H57.9c-9.6,0-17.4,10.2-17.4,22.8c0,12.6,7.8,22.8,17.4,22.8h396.2c9.6,0,17.4-10.2,17.4-22.8
C471.5,398.2,463.7,388,454.1,388z"/>
</g>
</g>
</svg>
</span>
</div>
<div class="col-6 menuToggler2">
<span class="phone">
<!-- <?xml version="1.0" encoding="iso-8859-1"?>
<svg class="img-fluid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="" xml:space="preserve" width="7vh" height="7vh">
<g>
<g>
<path d="M377,0H135C60.561,0,0,60.561,0,135v30c0,24.813,20.187,45,45,45h60c24.813,0,45-20.187,45-45v-30c0-8.271,6.729-15,15-15 h182c8.271,0,15,6.729,15,15v30c0,24.813,20.187,45,45,45h60c24.813,0,45-20.187,45-45v-30C512,60.561,451.439,0,377,0z M120,165 c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15v-15h90V165z M347,90H165c-19.555,0-36.228,12.542-42.42,30H31.076 C38.377,69.184,82.196,30,135,30h242c52.805,0,96.623,39.184,103.924,90H389.42C383.228,102.542,366.555,90,347,90z M482,165 c0,8.271-6.729,15-15,15h-60c-8.271,0-15-6.729-15-15v-15h90V165z" />
</g>
</g>
<g>
<g>
<path d="M476.273,420.235c-81.711-198.652-76.809-186.951-77.671-188.388C390.516,218.372,375.73,210,360.015,210H332v-15 c0-24.813-20.187-45-45-45h-62c-24.813,0-45,20.187-45,45v15h-28.014c-19.429,0-35.227,13.231-39.597,23.859L35.748,420.183 C31.934,429.356,30,439.044,30,448.977V467c0,24.813,20.187,45,45,45h362c24.813,0,45-20.187,45-45v-18.023 C482,439.042,480.065,429.353,476.273,420.235z M210,195c0-8.271,6.729-15,15-15h62c8.271,0,15,6.729,15,15v15h-92V195z M452,467 c0,8.271-6.729,15-15,15H75c-8.271,0-15-6.729-15-15v-18.023c0-5.96,1.16-11.773,3.47-17.33l76.159-185.149 c2.778-4.03,7.43-6.498,12.357-6.498c4.612,0,196.647,0,208.029,0c4.926,0,9.578,2.468,12.356,6.498l76.181,185.203 c2.288,5.503,3.448,11.315,3.448,17.276V467z" />
</g>
</g>
<g>
<g>
<path d="M257,270c-49.626,0-90,40.374-90,90c0,49.626,40.374,90,90,90c49.626,0,90-40.374,90-90C347,310.374,306.626,270,257,270z M257,420c-33.084,0-60-26.916-60-60s26.916-60,60-60s60,26.916,60,60S290.084,420,257,420z" />
</g>
</g>
<g>
<g>
<path d="M257,330c-16.542,0-30,13.458-30,30s13.458,30,30,30s30-13.458,30-30S273.542,330,257,330z" />
</g></g>g></g><g></g><g>
</g><g></g><g></g><g></g><g></g><g></g><g>
</g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg> -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" class="img-fluid" width="7vh" height="7vh" xml:space="preserve">
<g>
<g>
<path class="st0" d="M356.3,29h-208c-64,0-116,52-116,116v25.8c0,21.3,17.3,38.7,38.7,38.7h51.6c21.3,0,38.7-17.3,38.7-38.7V145
c0-7.1,5.8-12.9,12.9-12.9h156.4c7.1,0,12.9,5.8,12.9,12.9v25.8c0,21.3,17.3,38.7,38.7,38.7h51.6c21.3,0,38.7-17.3,38.7-38.7V145
C472.4,81,420.3,29,356.3,29z M135.5,170.8c0,7.1-5.8,12.9-12.9,12.9H71c-7.1,0-12.9-5.8-12.9-12.9v-12.9h77.3V170.8z
M330.6,106.3H174.2c-16.8,0-31.1,10.8-36.5,25.8H59.1c6.3-43.7,43.9-77.3,89.3-77.3h208c45.4,0,83,33.7,89.3,77.3H367
C361.7,117.1,347.4,106.3,330.6,106.3z M446.6,170.8c0,7.1-5.8,12.9-12.9,12.9h-51.6c-7.1,0-12.9-5.8-12.9-12.9v-12.9h77.3V170.8z
"/>
</g>
</g>
<g>
<g>
<path class="st0" d="M441.7,390.1c-70.2-170.7-66-160.7-66.7-161.9c-6.9-11.6-19.7-18.8-33.2-18.8h-24.1v-12.9
c0-21.3-17.3-38.7-38.7-38.7h-53.3c-21.3,0-38.7,17.3-38.7,38.7v12.9H163c-16.7,0-30.3,11.4-34,20.5L63.1,390.1
c-3.3,7.9-4.9,16.2-4.9,24.7v15.5c0,21.3,17.3,38.7,38.7,38.7h311.1c21.3,0,38.7-17.3,38.7-38.7v-15.5
C446.6,406.3,444.9,398,441.7,390.1z M212.8,196.6c0-7.1,5.8-12.9,12.9-12.9H279c7.1,0,12.9,5.8,12.9,12.9v12.9h-79.1V196.6z
M420.8,430.3c0,7.1-5.8,12.9-12.9,12.9H96.8c-7.1,0-12.9-5.8-12.9-12.9v-15.5c0-5.1,1-10.1,3-14.9l65.4-159.1
c2.4-3.5,6.4-5.6,10.6-5.6c4,0,169,0,178.8,0c4.2,0,8.2,2.1,10.6,5.6L417.8,400c2,4.7,3,9.7,3,14.8V430.3z"/>
</g>
</g>
<g>
<g>
<path class="st0" d="M253.2,261c-42.6,0-77.3,34.7-77.3,77.3s34.7,77.3,77.3,77.3s77.3-34.7,77.3-77.3S295.9,261,253.2,261z
M253.2,389.9c-28.4,0-51.6-23.1-51.6-51.6s23.1-51.6,51.6-51.6s51.6,23.1,51.6,51.6S281.7,389.9,253.2,389.9z"/>
</g>
</g>
<g>
<g>
<path class="st0" d="M253.2,312.6c-14.2,0-25.8,11.6-25.8,25.8s11.6,25.8,25.8,25.8c14.2,0,25.8-11.6,25.8-25.8
S267.4,312.6,253.2,312.6z"/>
</g>
</g>
</svg>
</span>
</div>
</div>
</div>
</nav>
<div class="fixed-top operationnelle">
<div class="container-fluid">
<div class="row">
<div class="menuToggler1 col-6">
<!-- I use bootstrap to set the width and the position of the togglers -->
<!-- Main menu (eat, sport, ...) refere to the CSS to understand better -->
<!-- /!\ je l'a fait en français :P
On va avoir là du JS. L'élément [onclick ="" ] est un événement JS.
Que sont les événements?
Je vous la fais courte:
Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non.
Ici, onclick = quand on clic (appuyer puis relâcher sur l'élément).
Ainsi, dans l'élément [onclick = ""] j'ai mis en valeur le nom d'une fonction que j'ai créé en JS (je vous rassure, rien de bien compliqué, je vous l'ai détaillée avant la balise fermante de ce <body> ... OK, c'est vrai, je l'ai pompée sur internet. Mais elle n'est pas compliquée en soi à comprendre). Cet élément a été mis dans des balises qui encadrent nos icones d'action (ouvrir le menu, afficher le numéro de téléphone, fermer le menu, ...).
Ainsi, si j'effectue l'action 'cliquer puis relâcher', je déclenche l'événement 'onclick' qui exécute le script en bas de cette page.
-->
<div id="myNav" class="overlay">
<div class="myNavContent">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img class="img-fluid mx-auto d-block croixNav t-25" src="icon/croix.svg" /> </a>
<div class="overlay-content">
<a href="#home" onclick="closeNav()">
<p>HOME</p>
</a>
<a href="#eat" onclick="closeNav()">
<p>EAT</p>
</a>
<a href="#sport" onclick="closeNav()">
<p>SPORT</p>
</a>
<a href="#drink" onclick="closeNav()">
<p>DRINK</p>
</a>
<a href="#event" onclick="closeNav()">
<p>EVENT</p>
</a>
<a href="#aboutUs" onclick="closeNav()">
<p>ABOUT</p>
</a>
<a href="#contactUs" onclick="closeNav()">
<p>CONTACT</p>
</a>
</div>
</div>
</div>
<!-- TOGGLER : width and height both set at 10vw in the attributes of the SVG-->
<!-- Main menu toggler *********************-->
<span class="mainMenuIcon" onclick="openNav()">
<svg class="img-fluid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="" xml:space="preserve" width="10vh" height="9vh" ></svg>
</span>
</div>
<!-- Même raisonnement que précédemment ******************* -->
<div class="col-6 menuToggler2">
<div id="phoneNumber">
<div class="overlay1-content">
<a class="open" href="tel:+33556440958" onclick="hideNumber()">
<p>05 56 44 09 58</p>
</a>
<a class="close" href="javascript:void(0)" class="closebtn1" onclick="hideNumber()"> </a>
</div>
</div>
<!-- TOGGLER : width and height both set at 10vw in the attributes of the SVG-->
<a href="tel:+33556440958" class="phoneIcon">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg class="img-fluid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="" xml:space="preserve" width="10vh" height="9vh" fill="#FFFFFF" fill-opacity="0"></svg>
</a>
<a class="phoneIconWide" onclick="displayNumber()">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg class="img-fluid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="" xml:space="preserve" width="10vh" height="9vh" fill="#FFFFFF" fill-opacity="0"></svg>
</a>
</div>
</div>
</div>
</div>
<!-- Welcome Page ********************************* -->
<section id="home" class="section-scroll">
<img class="img-fluid mx-auto d-block logo " src="icon/logo.png">
</section>
<div class="eatSport section-scroll">
<!-- EAT ******************************* -->
<section id="eat">
<!--Bouton "Modal" renvoyant sur le menu -->
<div class="container-fluid">
<div class="row">
<button class="col-4 offset-4 btn btn-modal openmodal" data-toggle="modal" data-target="#burgerModal">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/hamburgerBlue.svg">
</button>
</div>
<div class="row">
<button class="col-8 offset-2 btn btn-modal openmodal" data-toggle="modal" data-target="#burgerModal">
<div class='cadre'>
<h2>EAT</h2>
<h3>BURGER<br>SWEET<br>BRUNCH</h3>
</div>
</button>
</div>
</div>
<div id="burgerModal" class="modal animated bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- dialog -->
<div class="modal-dialog">
<!-- content -->
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<ul class="nav nav-pills text-fluid mx-auto">
<li role="presentation">
<a href="#starters">BEFORE</a>
</li>
<li role="presentation">
<a href="#mains">MAINS&BRUNCH</a>
</li>
<li role="presentation">
<a href="#sweet">SWEET</a>
</li>
</ul>
</div>
<!-- header -->
<!-- body -->
<div class="modal-body">
<div class="starters">
<h2 id="starters">STARTERS</h2>
<h3>SOUP OF THE DAY
<span>5</span>
</h3>
<h3>MOSSA STICKS
<span>5.5</span>
</h3>
<h3>DEEP FRIED CAMEMBERT
<span>5.50</span>
</h3>
<h3>DEEP FRIED CHEVRE
<span>5.90</span>
</h3>
<h3>GARLIC BREAD
<span>6</span>
</h3>
<h3>CHESSY GARLIC BREAD</h3>
<h3>MARKET TENDERS
<span>6.5</span>
</h3>
<h3>CHESSY NACHOS
<span>9.90</span>
</h3>
<h3>PULLED PORK NACHOS
<span>12.90</span>
</h3>
<h3>MIXED PLATTER
<span>14.50</span>
</h3>
<h3>THREE CHEESE PLATTER
<span>14.90</span>
</h3>
<h3>TAVERN PLATTER
<span>18.90</span>
</h3>
</div>
<div class="burg">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/burgerCreamBarreb.svg">
</div>
<div class="mains">
<h2 id="mains">MAINS & BRUNCH*</h2>
<h3>CHEESBURGER
<span>10.50</span>
</h3>
<h3>VEGGIE BURGER
<span>12.50</span>
</h3>
<h3>CHICKEN BACON AVOCADO
<span>14.5</span>
</h3>
<h3>FISH BURGER
<span>12.90</span>
</h3>
<h3>HO & BEEF BURGER
<span>12.90</span>
</h3>
<h3>BURGER BORDELAIS
<span>14.50</span>
</h3>
<h3>DOUBLE CHEESEBURGER
<span>14.50</span>
</h3>
<h3>MARKET BBQ RIBS
<span>12.90</span>
</h3>
<h3>CRIPSY BBQ CHICKEN
<span>12.90</span>
</h3>
<h3>CAESAR SALAD
<span>13.90</span>
</h3>
<h3>THE MARKET SALAD *
<span>15</span>
</h3>
<h3>TRADITIONAL FISH&CHIPS
<span>14.90</span>
</h3>
<h3>TAVERN PIE
<span>14.90</span>
</h3>
<h3>MARKET BREAKFAST *
<span>12.00</span>
</h3>
<h3>EGGS BENEDICT *
<span>13.00</span>
</h3>
<h3>PIÈCE DU BOUCHER *
<span>18.00</span>
</h3>
</div>
<div class="sweet">
<h2 id="sweet">SWEET</h2>
<h3>ICE CREAM
<span>4</span>
</h3>
<h3>PAIN PERDU
<span>5.50</span>
</h3>
<h3>CROONIE
<span>5.50</span>
</h3>
<h3>MARKET CHEESECAKE
<span>6</span>
</h3>
<h3>GREEDY COFFEE
<span>8</span>
</h3>
</div>
</div>
<!-- modal body -->
<!-- modal footer -->
<div class="modal-footer">
<button class="btn closemodal" data-dismiss="modal">
<img class="img-fluid mx-auto d-block" src="icon/croix.svg" style="width: 10%; height: auto;">
</button>
</div>
</div>
</div>
</div>
</section>
<!-- SPORT ********************************** -->
<section id="sport">
<div class="container-fluid">
<div class="row">
<button class="col-4 offset-4 btn btn-modal openmodal" data-toggle="modal" data-target="#sportModal">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/sportCream.svg">
</button>
</div>
<div class="row">
<button class="col-8 offset-2 btn btn-modal openmodal" data-toggle="modal" data-target="#sportModal">
<div class='cadre'>
<h2>SPORT</h2>
<h3>FOOT<br>RUGBY<br>CRICKET</h3>
</div>
</button>
</div>
</div>
<div id="sportModal" class="modal animated bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- dialog -->
<div class="modal-dialog">
<!-- content -->
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<h1 id="myModalLabel" class="modal-title ext-fluid mx-auto">SPORT</h1>
</div>
<!-- header -->
<!-- body -->
<div class="modal-body">
<div class="calendar">
<h2>MONDAY</h2>
<h3>Levante - Betis Seville football
<span>21:00</span>
</h3>
<h2>TUESDAY</h2>
<h3>Espagyol - Real Madrid football
<span>20:00</span>
</h3>
<h3>Swansea City - Sheffield Weds football
<span>21:05</span>
</h3>
<h2>WEDNESDAY</h2>
<h3>Juventus Turin - Atalana Bergame football
<span></span>17:30</h3>
<h3>Athletic Bilbao - Valence FC football
<span>19:30</span>
</h3>
<h3>Tottenham Hotspur -Rochdale football
<span></span>20:45</h3>
<h3>PSG - Marseille football
<span>21:00</span>
</h3>
<h3>Atletico Madrid - Leganés football
<span>21:30</span>
</h3>
<h2>THURSDAY</h2>
<h3>Hull Kingston Bovers - Castelford Tigers rugby
<span>20:35</span>
</h3>
<h3>Stade Montois - Mautauban rugby
<span>20:45</span>
</h3>
<h3>Arsenal - Manchester City
<span>20:45</span>
</h3>
<h3>Las Palmas - Fc Barcelone football
<span>21:00</span>
</h3>
<h3>France Angleterre - football féminin
<span>22:00</span>
</h3>
<h2>FRIDAY</h2>
<h3>Nevers - USAP rugby
<span>20:15</span>
</h3>
<h3>Wakefield - Huddersfield Giants rugby
<span>20:45</span>
</h3>
<h3>Monaco - Bordeaux football
<span>20:45</span>
</h3>
<div class="sportBlue">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/sportBlueBarreb.svg">
</div>
<h2>SATURDAY</h2>
<h3>Juventus Turin - Atalanta Bergame football
<span>17:30</span>
</h3>
<h3>Athletic Bilbao - Valence FC football
<span>19:30</span>
</h3>
<h3>Tottenham Hotspur - Rochdale football
<span>20:45</span>
</h3>
<h3>Espanyol - Real Madrid football
<span>20:00</span>
</h3>
<h2>SUNDAY</h2>
<h3>Wakefield - Huddersfield Giants rugby
<span>20:45</span>
</h3>
<h3>Harlequins - Bath rugby
<span>20:45</span>
</h3>
<h3>Monaco - Bordeaux football
<span>20:45</span>
</h3>
<h3>Athletic Bilbao - Valence FC football
<span>19:30</span>
</h3>
</div>
</div>
<!-- body -->
<!-- footer -->
<div class="modal-footer">
<button class="btn closemodal" data-dismiss="modal">
<img class="img-fluid mx-auto d-block" src="icon/croixBleue.svg" style="width: 10%; height: auto;">
</button>
</div>
</section>
</div>
<div class="drinkEvent section-scroll">
<!-- DRINK ********************************* -->
<section id="drink">
<div class="container-fluid">
<div class="row">
<button class="col-4 offset-4 btn btn-modal openmodal" data-toggle="modal" data-target="#drinksModal">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/beerCream.svg">
</button>
</div>
<div class="row">
<button class="col-8 offset-2 btn btn-modal openmodal" data-toggle="modal" data-target="#drinksModal">
<div class='cadre'>
<h2>DRINKS</h2>
<h3>COCKTAILS<br>BEER<br>SPIRITS</h3>
</div>
</button>
</div>
</div>
<div id="drinksModal" class="modal animated bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- dialog -->
<div class="modal-dialog">
<!-- content -->
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<ul class="nav nav-pills text-fluid mx-auto">
<li role="presentation">
<a href="#cocktails">COCKTAILS</a>
</li>
<li role="presentation">
<a href="#bier">BEERS</a>
</li>
<li role="presentation">
<a href="#spirits">SPIRITS</a>
</li>
</ul>
</div>
</div>
<!-- header -->
<!-- body -->
<div class="modal-body">
<div class="cocktails">
<h2 id="cocktails">COCKTAILS</h2>
<h3>ENGLISH PUNCH 6.50</h3>
<h3> MOJITO 8.00</h3>
<h3> MARGARITA 8.00</h3>
<h3> SEX ON THE BEACH 8.00</h3>
<h3> CUBA LIBRE 8.00</h3>
<h3> DARK & STORMY 8.00</h3>
</div>
<div class="spirits">
<h2 id="spirits">SPIRITS</h2>
<h2 class="rum">RUM</h2>
<h3> BACARDI SUPERIOR 6.00</h3>
<h3> BACARDI GOLD 6.50</h3>
<h3> CAPTAIN MORGAN SPICED 6.50</h3>
<h3> DIPLOMATICO 7.50</h3>
<h3> KRAKEN 7.50</h3>
<h2 class="vodka">VODKA</h2>
<h3> ABSOLUT VODKA 6.00</h3>
<h3> ABSOLUT PEACH 6.00</h3>
<h3> ABSOLUT CITRON 6.00</h3>
<h3> ABSOLUT MANGO 6.00</h3>
<h3> ZUBROWKA 7.00</h3>
<h2 class="gin">GIN</h2>
<h3> BEEFEATER 6.00</h3>
<h3> BOMBAY SAPPHIRE 6.50</h3>
<h3> EDINBURGH GIN 6.50</h3>
<h3> EDINBURGH ELDERFLOWER 6.50</h3>
<h3> HENDRICK'S 7.50</h3>
<h2 class="tequila">TEQUILA</h2>
<h3> JOSE CUERVO SILVER 6.00</h3>
<h3> PATRON 9.00</h3>
<h2 class="whiskey">WHISKEY</h2>
<h3>CLAN CAMPBELL 6.00</h3>
<h3>JAMESON 6.00</h3>
<h3>JACK DANIEL'S 6.50</h3>
<h3>MAKER‘S MARK 7.50</h3>
<h3> TALISKER 7.50</h3>
</div>
<div class="drinkBeer">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/drinksBlueBarreb.svg">
</div>
<div class="bier">
<h2 id="bier">BEERS</h2>
<h3>DUVEL 4€</h3>
<h3>DUVEL TRIPEL HOP 5€</h3>
<h3>BROOKLYN 5€</h3>
<h3>CHOUFFE 6€</h3>
<h3>CHIMAY 7€</h3>
</div>
</div>
<!-- body -->
<!-- footer -->
<div class="modal-footer">
<button class="btn closemodal" data-dismiss="modal">
<img class="img-fluid mx-auto d-block" src="icon/croixBleue.svg" style="width: 10%; height: auto;">
</button>
</section>
<!-- EVENT *************************** -->
<section id="event">
<div class="container-fluid">
<div class="row">
<button class="col-4 offset-4 btn btn-modal openmodal" data-toggle="modal" data-target="#eventModal">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/eventsBlue.svg">
</button>
</div>
<div class="row">
<button class="col-8 offset-2 btn btn-modal openmodal" data-toggle="modal" data-target="#eventModal">
<div class='cadre'>
<h2>EVENTS</h2>
<h3>LADIES NIGHT<br>HAPPY HOUR<br>CONCERTS</h3>
</div>
</button>
</div>
</div>
<div id="eventModal" class="modal animated bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- dialog -->
<div class="modal-dialog">
<!-- content -->
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<h1 id="myModalLabel" class="modal-title text-fluid mx-auto">EVENTS</h1>
</div>
<!-- header -->
<!-- body -->
<div class="modal-body">
<div class="agenda">
<h2>MONDAY</h2>
<h3>Monday Club Like our Facebook page Get Happy Hours all night!</h3>
<h2>TUESDAY</h2>
<h3>Live sport all day On our HD screens</h3>
<h2>WEDNESDAY</h2>
<h3>Happy Hours On many beers and spirits</h3>
<h2>THURSDAY</h2>
<h3>Happy Burgers! Burgers for 8€ from 19h to 21h</h3>
<h2>FRIDAY</h2>
<h3>Friday Nigth Cocktails Come and try out best cocktails from 6€</h3>
<div class="week">
<img class="img-fluid mx-auto d-block burger t-25 mt-3" src="icon/eventsCreamBarreb.svg">
</div>
<h2>SATURDAY</h2>
<h3>Ladies night Wine & Tapas boards for 20€</h3>
<h2>SUNDAY</h2>
<h3>The Market Pub Quizz at 20h30 with quizz master Andrew</h3>
</div>
</div>
<!-- body -->
<!-- footer -->
<div class="modal-footer">
<button class="btn closemodal" data-dismiss="modal">
<img class="img-fluid mx-auto d-block" src="icon/croix.svg" style="width: 10%; height: auto;">
</button>
</section>
</div>
<!-- ************************************************* -->
<!-- Compte à rebourd -->
<section id="countdown" class="section-scroll">
<div class="container-fluid">
<div class="row chrono">
<img class="col-12" src="icon/timerBlue.svg" style="height: 100% ">
</div>
<div class="row decompte">
<div class="col-12 ">
<h1 id="demo"></h1>
<script>
// Date et heure d'échéanceh du compte à rebourd !
var countDownDate = new Date("Mar 16, 2018 15:30:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Cherche la date et heure actuelle
var now = new Date().getTime();
// Calcul la difference entre la date de fin et la date actuelle
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Affiche le résultat de la difference dans l'ID DEMO
document.getElementById("demo").innerHTML = hours + ":" +
minutes + ":" + seconds + "";
// Si le compte à rebourd est terminé, affiche un message
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "C'est Partit !";
}
}, 1000);
</script>
<h1>FIFA </br> WORLD CUP </h1>
</div>
</div>
</div>
</section>
<!-- About Us ************************** -->
<section id="aboutUs" class="section-scroll">
<div class="container-fluid">
<div class="row">
<div class="col-10 offset-1 text-justify aboutus">
<h4 class="aboutUsTavern">ABOUT US</h4>
<h5 class="aboutUsText"> Opened in the start of 2015, The Market Tavern Bordeaux GastroPub is on the forefront of modern pub food and tasty craft beers on tap. Inspired by the modern gastro-pubs of London, TMT is a small family oriented establishment
in the heart of Bordeaux’s chic and historic Chartrons district.</h5>
<br>
<h5 class="aboutUsText"> Welcoming you with open arms seven days a week from 11am until 2am, this family owned pub has 40 seats inside and 40 seats on a terrace with table service all day. During lunchtimes you can enjoy the “Formule du Midi” that
includes a selection of different starters, main courses and desserts that changes every day using fresh produce.</h5>
</h5>
</div </div>
</div>
</section>
<!-- Formulaire -->
<section id="contactUs" class="section-scroll">
<div class="container-fluid">
<div class="row">
<div class="col-10 offset-1 quickform">
<h4 class="">Send us a message to book a table.</h4>
<form action="" method="get">
<input class="infoform" name="" type="text" placeholder="Name">
<input class="infoform" name="" type="text" placeholder="Email">
<input class="infoform" name="" type="text" placeholder="Phone">
<textarea class="infoform" name="" cols="" rows="" placeholder="Your message"></textarea>
<button>Submit</button>
</form>
</div>
</div>
</div>
</section>
<!--Footer-->
<footer class="section-scroll">
<!--Footer Links-->
<div class="container-fluid">
<div class="row social">
<!--First column-->
<div class="col-12 text-center">
<h4 class="text-uppercase">CONTACT</h4>
<h5>themarkettavern@gmail.com
<br/>05 56 44 09 56</h5>
<br/>
<h4 class="text-uppercase">ADRESS</h4>
<h5>The Market Tavern
<br/>15 rue Rode <br/> 33000 Bordeaux</h5>
<br/>
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-12 text-center">
<h4 class="text-uppercase">OPENING HOURS</h4>
<h5>Monday to Friday : <br/>12:00 – 00:00
<br/>Weekends : <br/>12:00 – 02:00</h5>
<br/>
<h4 class="text-uppercase">KITCHEN HOURS</h4>
<h5>Monday to Friday : <br/> 12:00 – 14:30 / 19:00 – 22:00
<br/>Weekends : <br/> 12:30 – 15:00 / 19h00 -22:00</h5>
</div>
<!--/.Second column-->
</div>
<!--Social -->
<div class="row social">
<div class="col-12 mb-0 text-center">
<img class="img-fluid" src="icon/newsCream.svg" style="width: 10% ">
<a href="https://www.instagram.com/themarkettavernbdx/"> <img class="img-fluid" src="icon/instaCream.svg" style="width: 10%"></a>
<a href="https://www.facebook.com/themarkettavernbordeaux/"> <img class="img-fluid" src="icon/facebookCream.svg" style="width: 10% "></a>
</div>
</div>
<!--/.Social->
<!--/.Footer Links-->
<!--Copyright-->
<div class="row copyright">
<div class="col-12 mb-0 text-center">
<h4> © LES 4 ELEMENTS </h4>
</div>
</div>
</div>
<!--/.Copyright-->
</footer>
<!-- ********************************** -->
<script>
function openNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
function displayNumber() {
document.getElementById("phoneNumber").style.display = "block";
}
function hideNumber() {
document.getElementById("phoneNumber").style.display = "none";
}
</script>
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.scrollify.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.scrollify({
section: ".section-scroll",
touchScroll: false,
});
$(".openmodal").on("click", function() {
$.scrollify.disable();
});
$(".closemodal").on("click", function() {
$.scrollify.enable();
});
});
})(jQuery)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment