Nocktiss/circus.html

## circus.html
<!-- Afin de valider ton code HTML, fais un copier-coller de ce dernier et rends-toi sur https://validator.w3.org/#validate_by_input.
Click sur l'onglet "Validate by Direct Input" et colle ton code HTML, click ensuite sur le bouton "Check", et tu verras ensuite (si tu en as) les erreurs HTML s'afficher plus bas.
Tu peux jeter un oeil par ici pour en savoir un peu plus: https://www.243tech.com/valider-vos-codes-html-et-css-sur-validator-w3-org/ -->

<!DOCTYPE html>
<html  lang="fr">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative%7CGreat+Vibes%7CGupter%7CReenie+Beanie&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes%7CGupter%7CReenie+Beanie&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC%7CMansalva&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC%7CBangers%7CGupter%7CIndie+Flower%7CKalam%7CMansalva%7CPermanent+Marker&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
 <title>Wild Circus</title>
</head>
<body>
   <header>
     <div class="menu">
      <nav>
        <ul>
            <!-- TODO: Les liens du menu doivent nous emmener vers les sections correspondantes dans la page -->
            <li>
              <a href="#Performances">Performances</a>
              <a href="#AboutUs">About Us</a>
              <a href="#Prices">Prices</a>
              <a href="#Contact">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
      <h1>Wild Circus</h1>
     <p id="slogan">Fly into the wild</p>

    </header>
    <section>
      <h2 id="Performances">Performances</h2>
      <!-- TODO: En utilisant du css place ces trois performances ("lough", "dream, "marvel at") sur la même ligne en enlevant le point généré par la balise "li". Attention, utilise bien le css pour aligner les éléments, tu ne dois pas enlever les balises "li"-->
      <ul  class="performances">
        <!-- performance 1 -->
        <li>
              <h3>Laugh</h3>
            <p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
         </li>
        <!-- performance 2 -->
         <li>
               <h3>Dream</h3>
            <p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
         </li>
         <!-- performance 3 -->
         <li>
              <h3>Marvel at</h3>
            <p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
         </li>
      </ul>
    </section>

    <section>
      <div class="part2">
      <h2 id="AboutUs">About Us</h2>
      <!-- TODO: Cette section n'a pas encore été réalisée, tu as carte blanche pour nous montrer ta créativité -->
         &#9733;&#9733;&#9733;&#9733;
           <blockquote>WILD CIRCUS OFFERS US THE MOST BEAUTIFUL SETTING IN ITS HISTORY.</blockquote>

        <div class="Star">New York Times.</div>
      <p><a href="http://www.historyofcircus.com/famous-circuses/list-of-famous-circuses/">World's best artistic groups.</a></p>
      </div>
    </section>

    <section>
      <div class="part3">
      <h2 id="Prices">Prices</h2>
      <table>
        <tr>
          <th>Category</th>
          <th>Adult</th>
          <th>Child</th>
          <th>Group(+10)</th>
          <th>School</th>
        </tr>
        <tr>
          <td>Week except Wednesday</td>
          <td>14$</td>
          <td>6$</td>
          <td>10$</td>
          <td>5$</td>

        </tr>
        <tr>
          <td>Week-end and Wednesday</td>
          <td>22$</td>
          <td>9$</td>
          <td>16$</td>
          <td>5$</td>
        </tr>
      </table>
       </div>
    </section>


    <section>
      <h2 id="Contact">Contact Us</h2>
      <!-- TODO: Réalise un formulaire de contact avec les champs email et message plus un bouton pour envoyer le message. Pense bien à ajouter les labels pour les différents champs
        Ce formulaire n'a pas besoin d'être fonctionnel, réalise juste la mise en forme.
      -->
       <div class="part4">

          <label for="email">Type your email</label>
          <input type="email" name="email" id="email"/>
          <label for="text">Type your message</label>
          <input type="text" name="message" id="text"/>
          <input type="submit" value="Send"/>
        </div>
    </section>

    <footer>
      <!-- TODO: Entre ton nom et prénom.
        Mets en place un lien vers le site de la Wild Code School (https://wildcodeschool.fr) ainsi que le lien vers ton profil public France.ioi (avec les 16 premiers exercies de réalisés).
        Tu peux egalement mettre un lien sur ton nom vers ton site, ton blog ou ton profil github ou linkedin, si tu en a un.
       -->
      <p>Wild Circus by Aribi Rachid - France-IOI: <a href="http://www.france-ioi.org/user/perso.php?sLogin=raffa42"> Aribi Rachid</a> - SoloLearn: <a href="https://www.sololearn.com/Profile/11485122">Aribi Rachid</a> - <a href="https://wildcodeschool.fr">Wild Code School</a> - 11/28/2019</p>
    </footer>
</body>
</html>
	<!-- Afin de valider ton code HTML, fais un copier-coller de ce dernier et rends-toi sur https://validator.w3.org/#validate_by_input.
	Click sur l'onglet "Validate by Direct Input" et colle ton code HTML, click ensuite sur le bouton "Check", et tu verras ensuite (si tu en as) les erreurs HTML s'afficher plus bas.
	Tu peux jeter un oeil par ici pour en savoir un peu plus: https://www.243tech.com/valider-vos-codes-html-et-css-sur-validator-w3-org/ -->

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative%7CGreat+Vibes%7CGupter%7CReenie+Beanie&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Great+Vibes%7CGupter%7CReenie+Beanie&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Amatic+SC%7CMansalva&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Amatic+SC%7CBangers%7CGupter%7CIndie+Flower%7CKalam%7CMansalva%7CPermanent+Marker&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css" />
	<title>Wild Circus</title>
	</head>
	<body>
	<header>
	<div class="menu">
	<nav>
	<ul>
	<!-- TODO: Les liens du menu doivent nous emmener vers les sections correspondantes dans la page -->
	<li>
	<a href="#Performances">Performances</a>
	<a href="#AboutUs">About Us</a>
	<a href="#Prices">Prices</a>
	<a href="#Contact">Contact</a>
	</li>
	</ul>
	</nav>
	</div>
	<h1>Wild Circus</h1>
	<p id="slogan">Fly into the wild</p>

	</header>
	<section>
	<h2 id="Performances">Performances</h2>
	<!-- TODO: En utilisant du css place ces trois performances ("lough", "dream, "marvel at") sur la même ligne en enlevant le point généré par la balise "li". Attention, utilise bien le css pour aligner les éléments, tu ne dois pas enlever les balises "li"-->
	<ul class="performances">
	<!-- performance 1 -->
	<li>
	<h3>Laugh</h3>
	<p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
	</li>
	<!-- performance 2 -->
	<li>
	<h3>Dream</h3>
	<p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
	</li>
	<!-- performance 3 -->
	<li>
	<h3>Marvel at</h3>
	<p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
	</li>
	</ul>
	</section>

	<section>
	<div class="part2">
	<h2 id="AboutUs">About Us</h2>
	<!-- TODO: Cette section n'a pas encore été réalisée, tu as carte blanche pour nous montrer ta créativité -->
	★★★★
	<blockquote>WILD CIRCUS OFFERS US THE MOST BEAUTIFUL SETTING IN ITS HISTORY.</blockquote>

	<div class="Star">New York Times.</div>
	<p><a href="http://www.historyofcircus.com/famous-circuses/list-of-famous-circuses/">World's best artistic groups.</a></p>
	</div>
	</section>

	<section>
	<div class="part3">
	<h2 id="Prices">Prices</h2>
	<table>
	<tr>
	<th>Category</th>
	<th>Adult</th>
	<th>Child</th>
	<th>Group(+10)</th>
	<th>School</th>
	</tr>
	<tr>
	<td>Week except Wednesday</td>
	<td>14$</td>
	<td>6$</td>
	<td>10$</td>
	<td>5$</td>

	</tr>
	<tr>
	<td>Week-end and Wednesday</td>
	<td>22$</td>
	<td>9$</td>
	<td>16$</td>
	<td>5$</td>
	</tr>
	</table>
	</div>
	</section>


	<section>
	<h2 id="Contact">Contact Us</h2>
	<!-- TODO: Réalise un formulaire de contact avec les champs email et message plus un bouton pour envoyer le message. Pense bien à ajouter les labels pour les différents champs
	Ce formulaire n'a pas besoin d'être fonctionnel, réalise juste la mise en forme.
	-->
	<div class="part4">

	<label for="email">Type your email</label>
	<input type="email" name="email" id="email"/>
	<label for="text">Type your message</label>
	<input type="text" name="message" id="text"/>
	<input type="submit" value="Send"/>
	</div>
	</section>

	<footer>
	<!-- TODO: Entre ton nom et prénom.
	Mets en place un lien vers le site de la Wild Code School (https://wildcodeschool.fr) ainsi que le lien vers ton profil public France.ioi (avec les 16 premiers exercies de réalisés).
	Tu peux egalement mettre un lien sur ton nom vers ton site, ton blog ou ton profil github ou linkedin, si tu en a un.
	-->
	<p>Wild Circus by Aribi Rachid - France-IOI: <a href="http://www.france-ioi.org/user/perso.php?sLogin=raffa42"> Aribi Rachid</a> - SoloLearn: <a href="https://www.sololearn.com/Profile/11485122">Aribi Rachid</a> - <a href="https://wildcodeschool.fr">Wild Code School</a> - 11/28/2019</p>
	</footer>
	</body>
	</html>