Skip to content

Instantly share code, notes, and snippets.

@dragonslayer77

dragonslayer77/index.html

Created January 27, 2019 21:35
Show Gist options
  • Save dragonslayer77/2da33feeb915f99030e4c29dc0f9eddd to your computer and use it in GitHub Desktop.
Save dragonslayer77/2da33feeb915f99030e4c29dc0f9eddd to your computer and use it in GitHub Desktop.
Download ZIP
International Wild Circus Template
Raw
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="[email protected]"><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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment