Wild Circus V2

Wild Cicrus website

by Marc-Antoine Dumais

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<body>
	<div class="container">
		<header>
			<div class="header clearfix">
				<nav>
					<ul class="nav nav-pills pull-right">
						<li role="presentation"><a href="#">Home</a></li>
						<li role="presentation"><a href="#About">About</a></li>
						<li role="presentation"><a href="#Contact">Contact</a></li>
					</ul>
				</nav>  
				<h3 class="text-muted">Wild Circus</h3>
			</div>
		</header>
		<div class="jumbotron">
			<h1>HISTORY</h1>
			<p class="lead">
				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 companyconsistsof 3 artists and 3 technicians. We invite you to meet us if it is not already !
			</p>
		</div>
		<div id="bloc_page">
			<balise id="About">
				<h1 id="titre">					 
					<span id="first">...Wild</span>
					<span id="second">Circus</span>
					<span id="third">Presents...</span>
				</h1>
			</balise>
			<div id="contenue">
				<div id="bloc_droit">
					<section id="event1">
						<div>
							<h1>Clown</h1>
							<p class='description'>
								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>
						</div>
					</section>
					<section id="event2">
						<div>
							<h1>Acrobatics Brothers</h1>
							<p class='description'>
								The big brother...

CSS

body
{
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url("https://couleursetsons.files.wordpress.com/2012/06/dscn3255.jpg");
	background-position: center;
	background-color: #fff;
	margin: -10px 0 0 -10px;
}   

footer
{
	text-align: center;
}

a
{
	color: yellow;
	background-color: red;
}

h3
{
	color: yellow;
	font-family: 'Lobster', cursive;
}


.header,.marketing,.footer
{
	padding-right: 15px;
	padding-left: 15px;
}


.header
{
	padding-bottom: 20px;
	border-bottom: 1px solid #e5e5e5;
}


.header h3
{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 40px;
}


.footer
{
	padding-top: 19px;
	color: #777;
	border-top: 1px solid #e5e5e5;
}


@media (min-width: 768px)
{
	.container
	{
		max-width: 730px;
	}
}

.container-narrow > hr
{
	margin: 30px 0;
}


.jumbotron
{
	color: white;
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
	background-image: url("http://www.cirquedhiver.com/wp-content/uploads/2015/04/capture-d’ecran-2015-04-09-a-13.37.51.png");
	background-position: center;
	background: cover;
	margin: -10px 0 0 -10px;
	font-family: 'Lobster', cursive;
}

.jumbotron .btn
{
	padding: 14px 24px;
	font-size: 21px;
}


.marketing
{
	margin: 40px 0;
}

.marketing p + h4
{
	margin-top: 28px;
}


@media screen and (min-width: 800px)
{
	
	.header,  .marketing,  .footer
	{
		padding-right: 0;
		padding-left: 0;
	}

	
	.header
	{
		margin-bottom: 30px;
	}

	
	.jumbotron
	{
		border-bottom: 0;
	}
}

#event1
{
	background-image: url("http://applause.uterwincenter.com/wp-content/uploads/Circus_Clowns_101672.jpg");
}

#event2
{
	background-image: url("https://s-media-cache-ak0.pinimg.com/originals/e7/27/e1/e727e119421e7ec9b1c8956f4f66ed81.jpg");
}

#event3
{
	background-image: url("http://www.albertleatribune.com/wp-content/uploads/2013/03/0322.circus.8.jpg");
}

#event4
{
	background-image: url("http://i.imgur.com/ryXvw2C.jpg");
}

#bloc_droit
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:...

JavaScript

$(document).ready(function() {
    $('.description').hide();
    $('section').on('click', 'h1', function() {
      $(this).closest('section').find('.description').slideToggle();
    });
  });