WILDCIRCUS

by Paul DOS SANTOS

HTML

<header>	<!-- Titre -->
		<div id="title">
    <a href="http://eoras.github.io/Wild-Circus/" target="_blank"><h1>WILD CIRCUS</h1></a>
		</div>

		<nav>	<!-- Navigation -->
			<ul id="nav">
				<a href="http://eoras.github.io/Wild-Circus/" target="_blank"><li>HOME</li></a>
				<a href="#welcomeconte"><li>ACTS</li></a>
				<a href="#buyticket"><li>BUY TICKETS</li></a>
				<a href="#about"><li>CONTACT US</li></a>
			</ul>
		</nav>
	</header>

	<div id="welcomecont">	<!-- Bienvenue msg -->
		<div id="welcomeconte">
			<h1>WELCOME</h1><br/>
			<p>Come and discover the biggest horror showcase with more than a dozen of unpublished acts in the world!</p><br/>

			<span class="welcomet"><p>Schedule: Monday to Sunday from 8 pm to 11 pm</p></span>
		</div>
	</div>

	<div id="page">

		<section class="section">
			<!-- IMAGE -->
			<p><img src="http://pauldsb.free.fr/WILDCIRCUS/img/playwithfire1.jpg" class="img" alt="Play with fire" data-name="playwithfire" /></p>
			<!-- TITRE -->
			<h1>DON'T PLAY WITH THE FIRE ...</h1>
			<!-- DESCRIPTION -->
			<p><br/>Fire is the production of a flame and the visible degradation of a body by an oxidation chemical reaction called combustion.<br/><br/>
			For several years, Lydia has been playing with fire. She tames the flames and controls them to a completely crazy music. Sometimes Lydia loses control and becomes mindless, irrational ... Smell at your hair, it could be that it smells like a barbecue!<br/><br/>
			Are you burning with impatience?</p>
		</section>
		
		<section class="section">
			<!-- IMAGE -->
			<p><img src="http://pauldsb.free.fr/WILDCIRCUS/img/knifes1.jpg" class="img" alt="Knife Throwing" data-name="knifes" /></p>
			<!-- TITRE -->
			<h1>KNIFE THROWING</h1>
			<!-- DESCRIPTION -->
			<p><br/>Chris is big and strong, his precision will (or won't) save your life. Since the youngest age he hunts with blades.<br/><br/>
			His assistant Lyn has already paid the price, will she end up alive at the end of this issue? Or...

CSS

/* ******************** FONT FACE ******************** */
@font-face {
    font-family: '20_dbregular';
    src: url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/20db/20db-webfont.eot');
    src: url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/20db/20db-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/20db/20db-webfont.woff') format('woff'),
         url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/20db/20db-webfont.ttf') format('truetype'),
         url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/20db/20db-webfont.svg#20_dbregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'existencelight';
    src: url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/existence_light/Existence-Light-webfont.eot');
    src: url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/existence_light/Existence-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/existence_light/Existence-Light-webfont.woff') format('woff'),
         url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/existence_light/Existence-Light-webfont.ttf') format('truetype'),
         url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/existence_light/Existence-Light-webfont.svg#existencelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: 	url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/FontAwesome/fontawesome-webfont.eot?v=4.7.0');
  src: 	url('https://raw.githubusercontent.com/Eoras/Wild-Circus/master/style/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.7.0')...

JavaScript

$(document).ready(function() {

  $('select').on('change', function() {
    var quantity = +$(this).val();
    var price = +$(this).closest('.formprice').data('price');
    $('#totalticket').text(price * quantity);
  });

  $('.section').on('mouseenter', function() {
    var namepic = $(this).closest('.section').find('img').data('name');
    $(this).addClass('sectionmouse')
    $(this).closest('.section').find('img').attr('src', 'http://pauldsb.free.fr/WILDCIRCUS/img/' + namepic + '2.jpg');
  });

  $('.section').on('mouseleave', function() {
    var namepic = $(this).closest('.section').find('img').data('name');
    $(this).removeClass('sectionmouse');
    $(this).closest('.section').find('img').attr('src', 'http://pauldsb.free.fr/WILDCIRCUS/img/' + namepic + '1.jpg');
  });

  $('.fcontener_div').on('mouseenter', function() {
    $(this).addClass('fcontener_mouse');
  });

  $('.fcontener_div').on('mouseleave', function() {
    $(this).removeClass('fcontener_mouse');
  });
});