css-flexbox/index.htm at master · Raigyo/css-flexbox · GitHub

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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Boilerplate</title>
  <meta name="description" content="Grafikart.fr -Tutoriel CSS : Flexbox">
  <meta name="author" content="Raigyo & Grafikart">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/segment.min.css">
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <div class="page">
    <nav class="header">
      <a href="#">Accueil</a>
      <a href="#">Contact</a>
      <a href="#">Section 1</a>
      <a href="#">Section 2</a>
      <a href="#">Section 3</a>
      <a href="#">Section 4</a>
      <a href="#">Section 5</a>
    </nav>
    <aside class="sidebar">
      <p>Sidebar 1</p>
    </aside>
    <aside class="sidebar sidebar-secondary">
      <p>Sidebar 2</p>
    </aside>
    <section class="body">
      <article class="mosaic">
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
        <a><img class="image" src="https://via.placeholder.com/150" alt=""></a>
      </article>
    </section>
    <footer class="footer">
      <p>Footer</p>
    </footer>
  </div>
</body>
</html>