1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta content="text/html" charset="utf-8" http-equiv="Content-Type">
<title>devoir css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- header -->
<header>
<h1>Le globule</h1>
<nav class="main-menu espace-section">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Tous Nos Choix</a></li>
<li><a href="#">Nos Triangles Ronds</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</header>
<!-- fin header -->
<!-- bloc article -->
<section class="vignettes-container">
<article class="vignette">
<div class="boxy">
<h2>Semi circle</h2>
<div class="box box-5">
</div>
</div>
<h2>Globule globe</h2>
<p class="italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros et elit maximus efficitur. Vivamus pharetra vehicula dignissim. Suspendisse at urna venenatis, lobortis justo at, faucibus turpis. Phasellus egestas turpis sit amet mi scelerisque iaculis. Integer dictum suscipit luctus. Integer purus nunc, gravida nec faucibus eu, tempus non tortor. Suspendisse velit est, interdum ac pellentesque quis, dignissim nec odio. Praesent at tellus lectus.
Etiam blandit bibendum justo a rutrum. Morbi ac vulputate massa. Sed pharetra, elit eget elementum porttitor, metus nibh bibendum mi, non tempus est nibh id turpis. Sed nec purus sollicitudin, fringilla odio ac, fringilla purus. Nam convallis facilisis iaculis. Phasellus blandit, orci id condimentum cursus, lectus turpis ultricies metus, ut feugiat lacus enim id nunc. Integer et nibh vitae risus laoreet mattis. Ut orci nunc, tempus quis orci vitae, gravida mollis magna.
</p>
<h2>Globule pas globe</h2>
<p>
Nullam non risus mauris. Donec eu pulvinar ex. Vestibulum a rutrum libero. Mauris vel leo ipsum. Nam pharetra felis a nunc sagittis ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at arcu quis nisi convallis vestibulum. Vestibulum auctor, nisl sit amet efficitur dignissim, sapien tellus maximus sapien, non aliquet nisl orci at urna. Donec et tortor non enim volutpat ornare. Donec eget volutpat mi. Fusce ullamcorper augue et massa hendrerit posuere. Nullam molestie neque eros, sit amet ullamcorper lorem interdum quis.</p>
<p class="margintop">
Praesent eleifend, purus sit amet elementum fermentum, elit orci semper felis, non dignissim dui dui eu arcu. Mauris id euismod tellus. Morbi porttitor, ligula porttitor semper viverra, dolor ipsum eleifend libero, aliquam molestie lorem dolor at velit. Vivamus vitae semper lectus, nec ullamcorper ex. Phasellus id finibus justo. Donec ullamcorper enim at tristique bibendum. Proin laoreet convallis nunc. Nam mollis semper elit, et interdum arcu maximus at. Cras lacinia neque ac ipsum posuere placerat. Pellentesque nec gravida enim, eget varius ex. In finibus nunc et ex mattis ultricies. Donec efficitur dui et pharetra eleifend. Ut dolor urna, convallis in tincidunt in, pulvinar vitae justo. Phasellus auctor nibh quis lobortis ullamcorper. Nulla convallis aliquam leo, at varius massa lobortis vitae. Cras maximus urna purus, sed convallis massa euismod sed.</p>
<p class="margintop">
Fusce quis quam sed elit egestas porta. Etiam ac efficitur odio, at porttitor purus. Phasellus in ex suscipit, convallis sapien sed, vulputate massa. In ornare diam mi, in venenatis sem pellentesque vitae. Nullam cursus elit dui, pulvinar lobortis felis faucibus convallis. Vivamus non arcu turpis. Pellentesque arcu ligula, rutrum id mauris nec, tempus dictum lorem. Phasellus varius aliquam sem at blandit. Proin tristique feugiat tempor. Nunc gravida vel lacus eu pharetra. Etiam quis iaculis enim. Vivamus sit amet tincidunt est. Maecenas vel euismod turpis. Duis condimentum ut urna a sodales.</p>
<h2>Tip globule au top du blog</h2>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin euismod dictum tortor, nec molestie dui. Donec porttitor est magna, non eleifend lorem interdum et. Nunc varius mollis ex ut placerat. Etiam egestas dictum metus, ac porta orci auctor in. Vivamus blandit, lorem ut dignissim gravida, elit neque auctor mi, non semper ligula magna sed nisi. Integer faucibus lorem lectus, quis posuere felis accumsan ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius, tellus fringilla varius ultricies, nibh neque sodales nisl, id iaculis tellus nunc dignissim velit. Vestibulum ac tortor tincidunt ante vestibulum eleifend. Proin viverra, purus nec efficitur tristique, massa dui ornare dolor, sed congue nisi nunc ac metus. Nunc aliquam lorem non dui ullamcorper porta.
Suspendisse sed congue sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus laoreet suscipit nunc. Ut eu metus eget sem viverra maximus. Duis sit amet porta libero, at convallis felis. Integer blandit a eros vitae tristique. Vestibulum quis est eu lacus sagittis volutpat sit amet ut nibh. Fusce fringilla neque eu enim viverra volutpat. Morbi ante erat, fermentum id mattis congue, faucibus a elit. Etiam posuere congue tristique. Pellentesque sit amet felis accumsan, tempus enim et, dictum lacus. Maecenas vehicula posuere ante, vitae gravida mauris commodo sit amet. Proin vel blandit libero, nec tempus justo. Nulla et ex in lectus ullamcorper faucibus. Aliquam non metus fermentum, ultrices nunc at, fringilla urna. Aliquam dapibus lorem maximus, laoreet quam ac, semper augue.
</p>
</article>
<article class="vignette">
<h2>Pas globe</h2>
<p class="italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac eros et elit maximus efficitur. Vivamus pharetra vehicula dignissim. Suspendisse at urna venenatis, lobortis justo at, faucibus turpis. Phasellus egestas turpis sit amet mi scelerisque iaculis. Integer dictum suscipit luctus. Integer purus nunc, gravida nec faucibus eu, tempus non tortor. Suspendisse velit est, interdum ac pellentesque quis, dignissim nec odio. Praesent at tellus lectus.
</p>
<h2>Pas blog</h2>
<p>
Nullam non risus mauris. Donec eu pulvinar ex. Vestibulum a rutrum libero. Mauris vel leo ipsum. Nam pharetra felis a nunc sagittis ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec at arcu quis nisi convallis vestibulum. Vestibulum auctor, nisl sit amet efficitur dignissim, sapien tellus maximus sapien, non aliquet nisl orci at urna. Donec et tortor non enim volutpat ornare. Donec eget volutpat mi.
</p>
</article>
</section>
</div>
</body>
</html> |
