"WILD CIRCUS"

Last

by Marc-Antoine Dumais

HTML

<!DOCTYPE html>

<header>
	<p class="wildcircus">
		Wild circus 
	</p>
	<ul id="navigation">
		<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</a></li>
	</ul>
</header>

<body>
	<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 chain reaction of deadly crossbows in order to pierce an apple on his own head. Gloups! A man hanging his...

CSS

body
{
	color: black;
	font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
	background-image: url("http://wikilicias.com.br/wp-content/uploads/2014/10/circus-11.jpg");
	background-position: 50%; 50%;
}

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

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

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

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

#navigation li
{
	display: inline;
}

#navigation li a
{
	background: black url(lienNormal.png) left top no-repeat;
	color: #fff;
	font: 1em "Trebuchet MS", Arial, sans-serif;
	line-height: 1em;
	padding: 4px 0;
	text-align: center;
}

#navigation li a:hover,#navigation li a:focus,#navigation li a:active
{
	background: #900 url(lienHover.png) left top no-repeat;
}

.wildcircus
{
	font-family: Jazz LET, fantasy;
	text-decoration: underline;
	color: black;
	text-align: center;
	font-size: xx-large;
}

h2
{
	font-family: Chalkduster, fantasy;
	text-decoration: underline;
}

h3
{
	font-family: Chalkduster, fantasy;
	text-decoration: underline;
}

.footer
{
	color: black;
  text-align: center
}

@media all and (max-width: 400px)
{
   img
    {
        display: none;
    }
    #navigation
    {
        text-align: center;
    }
   
}
 
@media screen and (max-width:400px)
{    
    body
    { 
        background-color: red;
        background-image: none;
        text-align: center;
    }
   
}

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);
  });
});

<ul class='description'>
            <li class="date"><span>Granville</span> Jusqu'au 12 juillet 2017</li>
            <li class="date"><span>St Quay Portrieux</span> Du 15 au 16 juillet 2017</li>
            <li class="date"><span>Perros Guirec</span> Du 17 au 18 juillet 2017</li>
            <li class="date"><span>Tregastel</span> Le 19 juillet 2017</li>
            <li class="date"><span>Treguier</span> Le 20 juillet 2017</li>
            <li class="date"><span>Crozon</span> Du 21 au 22 juillet 2017</li>
            <li class="date"><span>Pont L'Abbé</span> Du 23 au 24 juillet 2017</li>
            <li class="date"><span>Douarnenez</span> Le 25 juillet 2017</li>
            <li class="date"><span>Benodet</span> Le 26 juillet 2017</li>
            <li class="date"><span>Le Guilvinec</span> Du 27 au 28 juillet 2017</li>

          </ul>