Copiez-collez le code HTML ci-dessous dans votre éditeur de code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Positioning: Responsive Web Design</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: rgb(245, 245, 248);
color: rgb(38, 38, 38);
}
header {
background-color: rgb(38, 38, 38);
color: rgb(245, 245, 248);
text-align: center;
}
nav {
background-color: rgb(218, 217, 227);
color: rgb(38, 38, 38);
}
nav ul {
text-align: center;
}
nav li {
list-style-type: none;
list-style-position: inside;
display: inline-block;
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
section {
float: left;
width: 30%;
margin-right: 5%;
text-align: justify;
}
section:last-of-type {
margin-right: 0;
}
footer {
clear:both;
background-color: rgb(38, 38, 38);
color: rgb(245, 245, 248);
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>The Awesome Company</h1>
<h2>Everything is awesome in our team</h2>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Shops</li>
<li>Jobs</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h2>No, motherfucker</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
<h2>No, motherfucker</h2>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
<h2>No man, I don't eat pork</h2>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
<h2>Is she dead, yes or no?</h2>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand? </p>
<!-- please do not remove this line -->
<div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a></div>
<!-- end slipsum code -->
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem magna, tristique bibendum metus vitae, mattis interdum nunc. Phasellus eget ultricies nisi. Curabitur maximus, nisi vel vehicula dignissim, dolor turpis mollis augue, sit amet lacinia ex velit et urna. Nullam vitae tempus risus, id blandit est. Integer eget lacinia ipsum, feugiat bibendum urna. Praesent magna odio, feugiat eget nulla et, venenatis laoreet felis. Curabitur congue pellentesque eros non pretium. Nam viverra orci sit amet arcu gravida aliquet. Aenean malesuada, libero sit amet rhoncus molestie, magna nibh imperdiet ligula, id sollicitudin mauris odio quis erat. Fusce sit amet efficitur massa. Nullam nec egestas diam.
</p>
<p>
Integer ut nulla dapibus dolor lacinia varius. Vestibulum aliquet erat at est vulputate, dignissim vestibulum erat condimentum. Phasellus lacus nisi, dictum eget turpis nec, rhoncus bibendum lacus. Quisque tincidunt fringilla arcu, a placerat lorem. Fusce ipsum tellus, egestas in pretium sed, rutrum vitae ipsum. Nullam hendrerit est malesuada, consectetur metus vitae, euismod lacus. In hac habitasse platea dictumst. Nunc leo sem, iaculis nec molestie sed, venenatis vel lorem. Suspendisse fermentum tellus sit amet metus feugiat placerat. Pellentesque lacus turpis, blandit in magna varius, vehicula maximus elit. Vivamus ornare erat eu imperdiet commodo. Vestibulum ac dolor facilisis, lobortis eros imperdiet, dapibus libero. Nunc nec eros vel justo porttitor porta id in sem. Sed nec justo eros. Sed consequat maximus odio.
</p>
<p>
Nunc a sapien ligula. Ut ornare aliquet dui quis finibus. Nam volutpat sem eget ultricies accumsan. Nunc hendrerit purus nec sem imperdiet feugiat. Nullam in accumsan libero, eget aliquam metus. Curabitur varius diam quis neque convallis, id bibendum libero viverra. Cras volutpat non tellus non vestibulum. Aliquam lobortis lobortis ante, ac eleifend massa varius sed. Phasellus orci dui, aliquet porttitor ex ac, vulputate eleifend nibh. Donec pretium, sem a sodales congue, urna neque hendrerit odio, venenatis tincidunt libero est in velit. Nam pharetra vehicula accumsan.
</p>
</section>
<section>
<!-- start slipsum code -->
<h2>Are you ready for the truth?</h2>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand? </p>
<h2>We happy?</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>
<h2>I can do that</h2>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
<!-- please do not remove this line -->
<div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a>
</div>
<!-- end slipsum code -->
</section>
<footer>
<p>
The Awesome Compagny © 2014
</p>
</footer>
</body>
</html>