dragonslayer77/index.html

## index.html
<!--
In order to validate your HTML code, click on the arrow at the top right of this window. If you have some problems with validation, you can have a look here  : https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/
-->

<head>
    <meta charset="UTF-8">
    <meta name= "viewport" content= "width=device-width">
    <title>Wild Circus</title>
</head>

<body>
    <header>
     <link href='https://fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
      <h1>Wild Circus</h1>
      <nav>
        <ul>
            <!-- TODO: every menu link drive us to the specific section -->
            <li><a href="#">Performances</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

      </nav>
    </header>

    <section class= "performances">
      <h2><b>Performances </b></h2>
      <!-- TODO: With your CSS, put the three performances here  ("lough", "dream, "marvel at") on the same line, without the generated dot. Becareful, only use the CSS in order to align everything, you must not remove the <li> tags.-->
      <ul>
        <!-- performance 1 -->
        <li class="column">
            <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 class="column">
            <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 class="column">
            <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>
      <h2>About Us</h2>
      <p class="about"> Our company prides ourselves on bringing joy to the faces of the young and the old, but that is not our only concern. For generations the circus has been known to mistreat animals and employees, this is something we feel strongly against. When you take an adventure with us you can rest at ease knowing our animals are treated with the utmost of care and with their well being in mind. </p>
      <!-- TODO: This section hasn't been realized yet, . Cette section n'a pas encore été réalisée, you can show us here all of your creativity -->
    </section>


    <section class="prices">
      <h2>Prices</h2>
      <!-- TODO:  Create a table with all the prices (hint :  increase the size of the window in order to see all of the table.

                                | Adults  | Children under 12       | Groups (more than 10)          | Schools
        Weels (without wed.)    |         |                         |                                |
        weekend et wednesday    |         |                         |                                |
      -->
      <table style="width:100%">
  <tr>
    <th> </th>
    <th>Adults</th>
    <th>Children under 12</th>
    <th>Groups(more than 10)</th>
    <th>Schools</th>

  </tr>
  <tr>
    <th> Week days without wednesday</th>
    <th>20</th>
    <th>10</th>
    <th>15</th>
    <th>10</th>
  </tr>
  <tr>
   <th>Weekends with Wednesday </th>
    <th>15</th>
    <th>7.50</th>
    <th>10</th>
    <th>7.50</th>
  </tr>
</table>

    </section>


    <section class>
      <h2>Contact Us</h2>
      <!-- TODO: Create a contact form with the inputs for the email and message, add the send button at the end. Don't forget to add the labels on the inputs.
            This form doesn't need to be functional, just create the layout.
      -->
      <form action>
  Email:<br>
  <input type="text" name="email" value="mickey@mouse.com"><br>
  Write a message:<br>
  <input type="text" name="message" value="..."><br><br>
  <input type="submit" value="Submit">
</form>
    </section>

    <footer>
      <!-- TODO: Add your last name and first name.
        Place the link pointing on the Wild Code School website (https://wildcodeschool.com).
        You can also add the link to your own website, blog or Github profile.
       -->
      <p>Wild Circus by Isabella Fry - <a href="https://www.codecademy.com/users/isabellafry/achievements"> My Code Academy</a>
      -  <a href="https://www.sololearn.com/Profile/12541490/HTML">  SoloLearn</a> - <a href="https://wildcodeschool.com">Wild Code School</a> - 1/27/2019</p>
    </footer>
</body>

## international-wild-circus-template.markdown

      
    Raw
  

              international-wild-circus-template.markdown
            
          
    International Wild Circus Template

A Pen by dragonslayer77 on CodePen.
License.

  
## style.css
/* In order to validate your CSS code, click on the arrow at the top right of this window. Don't forget, you can have a look here : https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/
 */

/* Your CSS code here */
ul {
   padding: 0 0 30px 0;
}
li {
   display: inline;
   width: auto;
   list-style: outside none none;
}

/* Create three equal columns that floats next to each other */
.column {
  float: right;
  width: 300px;
  padding: 10px;
  color: #000000;
}

/* Clear floats after the columns */

h2 {
  text-decoration: underline;
  padding: 100px 0 0 30px;
  color: #F3FF1B;
}

h3{
  padding: 0 0 0 30px;
  color: #F8ADE8;
}

/*Prices*/
table {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px;
    border-collapse:
    collapse; border-spacing: 0;
}

td, th {
    border: 1px solid transparent;
    height: 30px;

}

th {
    background: #DFDFDF;
    font-weight: bold;
}

td {
    background: #FAFAFA;
    text-align: center;
}


body{
  font-family:"Lucida Console";
  font-size: 15px;
  margin: 0;
  padding: 0;
  background-color: #C83217;
}

/*Overall*/
.container{
  width: 80%;
  margin: auto;
  overflow: hidden;
}

/*Header*/
header
{
  font-family: 'Amatic SC';
  font-style: normal;
  background: #C80523;
  color: #F3FF1B;
  padding: 20px 0 0 30px;
  border-bottom: 5px solid #E2DE6D;
  font-size: 30px;
}
header a{
  font-family: 'Amatic SC';
  font-style: normal;
  color:#F3FF1B;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  padding: 0 0 20px 0;

}


header li {
   float: left;
  display:inline;
  padding: 20px 20px 0 20px;
}

header nav {
  float: right;
  display:inline;

}
.prices {
  float:left;
  display: inline;
  padding: 0px 50px 0 0;
}


footer {
  padding: 0 0 0 30px;
}

.about {
  padding: 20px 0 0 20px;
}

.performances{
  float: right;
}
	<!--
	In order to validate your HTML code, click on the arrow at the top right of this window. If you have some problems with validation, you can have a look here : https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/
	-->

	<head>
	<meta charset="UTF-8">
	<meta name= "viewport" content= "width=device-width">
	<title>Wild Circus</title>
	</head>

	<body>
	<header>
	<link href='https://fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
	<h1>Wild Circus</h1>
	<nav>
	<ul>
	<!-- TODO: every menu link drive us to the specific section -->
	<li><a href="#">Performances</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Prices</a></li>
	<li><a href="#">Contact</a></li>
	</ul>

	</nav>
	</header>

	<section class= "performances">
	<h2><b>Performances </b></h2>
	<!-- TODO: With your CSS, put the three performances here ("lough", "dream, "marvel at") on the same line, without the generated dot. Becareful, only use the CSS in order to align everything, you must not remove the <li> tags.-->
	<ul>
	<!-- performance 1 -->
	<li class="column">
	<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 class="column">
	<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 class="column">
	<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>
	<h2>About Us</h2>
	<p class="about"> Our company prides ourselves on bringing joy to the faces of the young and the old, but that is not our only concern. For generations the circus has been known to mistreat animals and employees, this is something we feel strongly against. When you take an adventure with us you can rest at ease knowing our animals are treated with the utmost of care and with their well being in mind. </p>
	<!-- TODO: This section hasn't been realized yet, . Cette section n'a pas encore été réalisée, you can show us here all of your creativity -->
	</section>



	<section class="prices">
	<h2>Prices</h2>
	<!-- TODO: Create a table with all the prices (hint : increase the size of the window in order to see all of the table.

	\| Adults \| Children under 12 \| Groups (more than 10) \| Schools
	Weels (without wed.) \| \| \| \|
	weekend et wednesday \| \| \| \|
	-->
	<table style="width:100%">
	<tr>
	<th> </th>
	<th>Adults</th>
	<th>Children under 12</th>
	<th>Groups(more than 10)</th>
	<th>Schools</th>

	</tr>
	<tr>
	<th> Week days without wednesday</th>
	<th>20</th>
	<th>10</th>
	<th>15</th>
	<th>10</th>
	</tr>
	<tr>
	<th>Weekends with Wednesday </th>
	<th>15</th>
	<th>7.50</th>
	<th>10</th>
	<th>7.50</th>
	</tr>
	</table>

	</section>



	<section class>
	<h2>Contact Us</h2>
	<!-- TODO: Create a contact form with the inputs for the email and message, add the send button at the end. Don't forget to add the labels on the inputs.
	This form doesn't need to be functional, just create the layout.
	-->
	<form action>
	Email:<br>
	<input type="text" name="email" value="mickey@mouse.com"><br>
	Write a message:<br>
	<input type="text" name="message" value="..."><br><br>
	<input type="submit" value="Submit">
	</form>
	</section>

	<footer>
	<!-- TODO: Add your last name and first name.
	Place the link pointing on the Wild Code School website (https://wildcodeschool.com).
	You can also add the link to your own website, blog or Github profile.
	-->
	<p>Wild Circus by Isabella Fry - <a href="https://www.codecademy.com/users/isabellafry/achievements"> My Code Academy</a>
	- <a href="https://www.sololearn.com/Profile/12541490/HTML"> SoloLearn</a> - <a href="https://wildcodeschool.com">Wild Code School</a> - 1/27/2019</p>
	</footer>
	</body>
	/* In order to validate your CSS code, click on the arrow at the top right of this window. Don't forget, you can have a look here : https://blog.codepen.io/2017/10/11/analyze-css-now-using-stylelint/
	*/

	/* Your CSS code here */
	ul {
	padding: 0 0 30px 0;
	}
	li {
	display: inline;
	width: auto;
	list-style: outside none none;
	}

	/* Create three equal columns that floats next to each other */
	.column {
	float: right;
	width: 300px;
	padding: 10px;
	color: #000000;
	}

	/* Clear floats after the columns */

	h2 {
	text-decoration: underline;
	padding: 100px 0 0 30px;
	color: #F3FF1B;
	}

	h3{
	padding: 0 0 0 30px;
	color: #F8ADE8;
	}

	/Prices/
	table {
	color: #333;
	font-family: Helvetica, Arial, sans-serif;
	width: 640px;
	border-collapse:
	collapse; border-spacing: 0;
	}

	td, th {
	border: 1px solid transparent;
	height: 30px;

	}

	th {
	background: #DFDFDF;
	font-weight: bold;
	}

	td {
	background: #FAFAFA;
	text-align: center;
	}




	body{
	font-family:"Lucida Console";
	font-size: 15px;
	margin: 0;
	padding: 0;
	background-color: #C83217;
	}

	/Overall/
	.container{
	width: 80%;
	margin: auto;
	overflow: hidden;
	}

	/Header/
	header
	{
	font-family: 'Amatic SC';
	font-style: normal;
	background: #C80523;
	color: #F3FF1B;
	padding: 20px 0 0 30px;
	border-bottom: 5px solid #E2DE6D;
	font-size: 30px;
	}
	header a{
	font-family: 'Amatic SC';
	font-style: normal;
	color:#F3FF1B;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 20px;
	padding: 0 0 20px 0;

	}


	header li {
	float: left;
	display:inline;
	padding: 20px 20px 0 20px;
	}

	header nav {
	float: right;
	display:inline;

	}
	.prices {
	float:left;
	display: inline;
	padding: 0px 50px 0 0;
	}


	footer {
	padding: 0 0 0 30px;
	}

	.about {
	padding: 20px 0 0 20px;
	}

	.performances{
	float: right;
	}