Untitled

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Basic Website</title>
		<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
	</head>


<body>

	<header>

<div class="container-2 clearfix">
		<div class="container">
			<a href="#" title="Retour à l'accueil" id="logo">
				<img src="images/logo.png" alt="Logo">
			</a>

<!-- nav -->
			<nav>
				<ul>
					<li><a href="">Société</a></li>
					<li><a href="">Services</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</nav>
		</div>
<!-- /nav -->
</div>

<!-- hero -->
		<div id="hero">
			<div class="container clearfix">

				<div id="hero-title">
					<h1>Slogan de la société</h1>
					<h2>Phrase d'accroche</h2>

					<div id="call-to-action">
						<a href="">Bouton CTA 1</a>
						<a href="">Bouton CTA 2</a>
					</div>

				</div>
				<img src="images/ecran.png" alt="Ecran" id="hero-image">
			</div>
		</div>
<!-- hero -->

	</header>


<!-- content -->

	<div id="content" class="container clearfix">
		<section id="column-content">

		<div id="lead-in">
			<h3>Nos services en HTML5 et CSS3</h3>
			<p>Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
		</div>

		<div class="column four">
			<a href=""><img src="images/photo1.png" alt="laptop"></a>
			<h4>Colonne 1</h4>
			<p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
		</div>

		<div class="column four">
			<a href=""><img src="images/photo2.png" alt="html code"></a>
			<h4>Colonne 2</h4>
			<p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
		</div>

		<div class="column four last">
			<a href=""><img src="images/photo3.png" alt="statistiques"></a>
			<h4>Colonne 3</h4>
			<p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
		</div>

		</section>

		<aside>

			<div class="widget">
				<h4>Actualités</h4>
				<h5>05 octobre 2018</h5>
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>


			<div class="widget socials">
				<h4>Suivez-nous</h4>
				<a href="" target="_blank"><img src="images/fb.png" alt="Suivez-nous sur Facebook"></a>
				<a href="" target="_blank"><img src="images/twitter.png" alt="Suivez-nous sur Twitter"></a>
				<a href="" target="_blank"><img src="images/youtube.png" alt="Suivez-nous sur Youtube"></a>
			</div>

		</aside>


	</div>

<!-- /content -->


<!-- second cta -->

	<div id="secondary-cta" class="container clearfix">
		<div>
			<h4>Recevez les dernières nouvelles de notre société</h4>

			<form>
				<input type="email" placeholder="email@address.com">
				<input type="submit" value="S'inscrire">
			</form>
		</div>
	</div>

<!-- /second cta -->

<footer>
	<div  class="container clearfix">
		<p id="copyright">Copyright © 2018</p>
		<nav>
			<ul>
				<li><a href="#logo">Accueil</a></li>
				<li><a href="">Société</a></li>
				<li><a href="">Services</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</nav>
	</div>
</footer>

</body>


</html>