Papillard/contact.html

## contact.html
<!DOCTYPE html>
<html>
<head>
  <title>KITTY BLOG | Home</title>
  <meta charset="utf-8">
  <meta name="description" content="KittyBlog, best cat blog in the world">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div id="header">
    <h1>Little kitties</h1>
    <p class="text-grey text-underline">Welcome to the world of kitties!</p>
  </div>

  <div id="aside-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </diV>

  <div id="container">

    <h2>Contact Us</h2>

    <form action="#">

      <label for="user_email">Enter your email</label>
      <input type="email" id="user_email" name="email" placeholder="john.doe@gmail.com">

      <br>

      <select name="fan_degree">
        <option>Je suis tres fan de chat</option>
        <option>Je m'en casse</option>
        <option>Pas d'avis tranché</option>
      </select>

      <br>

      <input type="radio" name="gender" value="m" id="male">
      <label for="male">Male</label>

      <input type="radio" name="gender" value="f" id="female">
      <label for="female">Female</label>

      <br>

      <input type="checkbox" name="spam_agreement" id="agreement">
      <label for="agreement">J'accepte de me faire spammer toute ma vie.</label>

      <input type="submit" value="Go for it">
    </form>
  </div>

  <div id="footer">
    <p class="text-grey text-underline" id="footer-text">
      KittyBlog is a blog by ©LeWagon
    </p>

    <ul id="social-list">
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>
  </div>

</body>

</html>

## index.html
<!DOCTYPE html>

<html>
<head>
  <title>KITTY BLOG | Home</title>
  <meta charset="utf-8">
  <meta name="description" content="KittyBlog, best cat blog in the world">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div id="header">
    <h1>Little kitties</h1>
    <p class="text-grey text-underline">Welcome to the world of kitties!</p>
  </div>

  <div id="aside-nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

  <div id="container">
    <div class="cat">
      <h2>Bleu de russie</h2>
      <img src="images/russian_blue.gif" id="last-picture" alt="Tres beau chat bleuté" width="100">
      <p>
        Les origines du bleu russe, sont controversées. Une première théorie avance que la race pourrait être originaire du port russe d'Arkhangelsk où elle était appréciée comme animal de compagnie, puis chassée pour sa fourrure chaude, puis avoir été introduite en Angleterre dans les années 1860 par des marins, d'où son surnom de « bleu d'Arkhangelsk », et le nom de bleu russe qui lui est donné aujourd'hui.
      </p>
    </div>

    <div class="cat">
      <h2>Siamois</h2>
      <img src="images/russian_blue.gif" alt="Tres beau chat maigrichon" width="100">
      <p>
        Les premiers Siamois sont arrivés en Grande-Bretagne au milieu du xixe siècle. Leur succès est tel qu'ils arrivent vite aux États-Unis. À cette époque, seuls les seal point étaient reconnus mais petit à petit s’est ajoutée une très large palette de couleurs. La race a connu une grande évolution dans les années 1970 quand les éleveurs ont accentué ses caractéristiques physiques.
      </p>
    </div>
  </div>

  <div id="footer">
    <p class="text-grey text-underline" id="footer-text">
      KittyBlog is a blog by ©LeWagon
    </p>

    <ul id="social-list">
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>
  </div>

</body>

</html>

## style.css
body{
  font-family: Arial;
}

h1{
  font-family: Courier;
  color: red;
}

#header{
  border: 1px solid red;
  padding: 20px;
  margin: 10px;
  text-align: center;
}

#aside-nav{
  width: 20%;
  float: left;
}

#container{
  float: right;
  width: 75%;
  padding: 20px;
  border-left: 1px solid lightgrey;
}

#footer{
  clear: both;
  border-top: 1px solid lightgrey;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>KITTY BLOG \| Home</title>
	<meta charset="utf-8">
	<meta name="description" content="KittyBlog, best cat blog in the world">
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>

	<div id="header">
	<h1>Little kitties</h1>
	<p class="text-grey text-underline">Welcome to the world of kitties!</p>
	</div>

	<div id="aside-nav">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="contact.html">Contact</a></li>
	</ul>
	</diV>

	<div id="container">

	<h2>Contact Us</h2>

	<form action="#">

	<label for="user_email">Enter your email</label>
	<input type="email" id="user_email" name="email" placeholder="john.doe@gmail.com">

	<br>

	<select name="fan_degree">
	<option>Je suis tres fan de chat</option>
	<option>Je m'en casse</option>
	<option>Pas d'avis tranché</option>
	</select>

	<br>

	<input type="radio" name="gender" value="m" id="male">
	<label for="male">Male</label>

	<input type="radio" name="gender" value="f" id="female">
	<label for="female">Female</label>

	<br>

	<input type="checkbox" name="spam_agreement" id="agreement">
	<label for="agreement">J'accepte de me faire spammer toute ma vie.</label>

	<input type="submit" value="Go for it">
	</form>
	</div>

	<div id="footer">
	<p class="text-grey text-underline" id="footer-text">
	KittyBlog is a blog by ©LeWagon
	</p>

	<ul id="social-list">
	<li><a href="#">Facebook</a></li>
	<li><a href="#">Twitter</a></li>
	</ul>
	</div>

	</body>

	</html>
	body{
	font-family: Arial;
	}

	h1{
	font-family: Courier;
	color: red;
	}

	#header{
	border: 1px solid red;
	padding: 20px;
	margin: 10px;
	text-align: center;
	}

	#aside-nav{
	width: 20%;
	float: left;
	}

	#container{
	float: right;
	width: 75%;
	padding: 20px;
	border-left: 1px solid lightgrey;
	}

	#footer{
	clear: both;
	border-top: 1px solid lightgrey;
	}