Circus

Wild Code School

by Marc-Antoine Dumais

HTML

<!DOCTYPE html>

<body>
 <header>
	<p class="wildcircus">
		WILD CIRCUS
	</p>
 <div id="mob-menu">Menu</div>
 <div id="nav">
   <div>
     <ul>
      <li><a href="#History">History</a></li>
      <li><a href="#Performances">Circus Performances</a></li>
      <li><a href="#Calendar">Calendar</a></li>
      <li><a href="#Ticket">Circus Ticket</a></li>
      <li><a href="#Contact">Contact Us</a></li>      
     </ul>
    </div>
  </div>
 </header> 

	<section>
		<div id="qui">
      <h2><balise id="History"> History </balise></h2>
			<p>
				The Wild Circus is a traditionnel english circus based in 1854 in United Kingdom by the brothers William and George Wild. Originally it was named "Britania Circus", the name of a ship whitch the veils will serve to realize the big top. The company consistsof 3 artists and 3 technicians. We invite you to meet us if it is not already.
			</p>
    </div>
		<div id="shows">
      <h2><balise id="Performances"> Circus performances</balise></h2>
		</div>
		<p>
			<img src="https://photos.smugmug.com/CircusScenes/Circus-Clown-Acts/i-WRMh2W2/0/S/IMG_0384-S.jpg" align="right" border="5">
			 The Clown performance is itself extremely varied. It alternates between moments of tenderness and melancholy with moments ofjoy and madness. The public participates greatly at that time.  
		</p>
		  &nbsp;  
		<p>
			<img src="https://s-media-cache-ak0.pinimg.com/736x/b6/81/fd/b681fd646049791d11276c838f3504e4.jpg" align="left" border="5">
			 The big brother lying on a bench turns his little brother with the help of his feet pushing on his buttocks. The little brotherrealizes several flips. Great level of confidence. The trapese performance is unique. It takes place just 2 meters above the audience giving a fabulous impression of speed and grace. Viewers are captivated and want more …  
		</p>
		  &nbsp;  
		<p>
			<img src="http://www.ameliage.fr/wp-content/uploads/2016/11/magie-mariage-1024x847.jpg" align="right" border="5">
			 A man triggers a...

CSS

body
{
	color: white;
	font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
	adding-top: 80px;
  background: black;
  background: linear-gradient(bottom, rgba(008, 008, 008, 1), rgba(008, 008, 008, 0.7));
  background: -webkit-linear-gradient(bottom, rgba(008, 008, 008, 1), rgba(008, 008, 008, 0.7));
  background: -moz-linear-gradient(bottom, rgba(008, 008, 008, 1), rgba(008, 008, 008, 0.7));
  margin: 0px;
  padding: 0px;
  font-size: 13px;
}

p
{
	font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; 
  font-size: 150%;
}

a
{
	font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

img
{
	width: 100px;
	height: 100px;
}

h4
{
	font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
 
#mob-menu {
  display: none;
  height: 40px;
  background: red url(http://2.bp.blogspot.com/-yntO6wkJlhM/VU2V5zFSVXI/AAAAAAAADFE/_pMaJyv7Kmw/s1600/menu-bg.png) 10px 8px no-repeat;
  color: white;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
  text-indent: 50px;
  cursor: pointer;
}

#nav {
  display: table;
  margin: auto;
}

#nav ul {
  margin: 20px 0px 0px 0px;
  padding: 0px;
  list-style: none;
  height: 40px;
  background: grey;
}

#nav ul li {
  float: left;
}

#nav ul li a {
  display: block;
  height: 40px;
  line-height: 40px;
  color: white;
  font-size: 16px;
  text-decoration: none;
  padding: 0px 15px;
}

#nav ul li a:hover 
{ 
  background: #222;
}

@media screen and (max-width:768px) 
  {
  body {
    padding-top: 40px;
  }
  #mob-menu {
    display: block;
  }
  #mob-menu {
    position: fixed;
    top: 0px;
  }
  
 #nav ul {
    position: absolute;
    width: 100%;
    margin: 0px;
    height: auto;
    display: none;
    left: 0px;
    top: 40px;
    background-color: ;
  }
  #nav ul li {
    float: none;
    border-bottom: solid 1px #333;
  }
  #nav ul li a:hover {
    background: #444;
  }
}

.wildcircus
{
	font-family: Jazz LET, fantasy;
	text-decoration: underline;
	color: red;
	text-align:...

JavaScript

$(document).ready(function() {
  $('.Ticket').on('keyup mouseup', '.quantity', function() {
    var price = +$(this).closest('.Ticket').data('price');
    var quantity = +$(this).val();
    $('#Total').text(price * quantity);
  });
}); 
 
 
 
$(function() {
  $('#mob-menu').on('click', function(e) {
    e.preventDefault();
    $('ul').slideToggle();
  });

})