aboutsummaryrefslogtreecommitdiff
path: root/lab/top-nav.html
blob: a37986f6108a80280aa48318dc77f9f5e298df37 (plain) (blame)
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Deuxfleurs</title>

  <link rel="stylesheet" href="assets/css/normalize.css">
  <!-- <link rel="stylesheet" href="assets/css/chota.css"> -->
  <link rel="stylesheet" href="assets/css/top-nav.css">
</head>

<body>
  <nav class="nav">

    <div class="nav-left">
      <h1>
        <a class="home" href="#">Deuxfleurs</a>
      </h1>
    </div>

    <div class="nav-right">
      <ul>
        <li>
          <a href="#">Documentation</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
        <li>
          <a href="#">Mon compte</a>
        </li>
      </ul>
    </div>
  </nav>

  <header>
    <p>
      Nous sommes un hébergeur associatif expérimental.<br>
      Avec nos machines et nos logiciels, <br>
      nous créons un numérique plus sobre et humain.<br>
      <em>Sortez des sentiers battus avec nous !</em>
    </p>
  </header>

  <main class="container">
    <section>
      <h2>Nos services</h2>
      <p>
        Aujourd'hui, les grandes plateformes numériques ont pour objectif de maximiser le temps que nous passons dessus, de collecter et recouper des données à notre insu pour nous influencer, de limiter nos possibilités d'expression au-delà du cadre légal et de créer de nouveaux monopoles. Ces effets nous montrent que la technologie n'est pas neutre et a un réel impact sur nos vies.<br><br>

        En choisissant et en hébergeant nos propres services, sans but lucratif ni hégémonique, nous espérons nous affranchir de ces nuisances et préserver nos libertés.<br><br>

        Nous proposons actuellement :
      </p>

      <figure></figure>

    </section>

    <section>
      <h2>Nos infrastructures</h2>

      <p>
        Nous hébergeons nous-même notre infrastructure matérielle.<br>
        On aime bien le ronronnement des ventilateurs d'ancienne génération.<br>
        Et ça réchauffe nos soirées d'hiver.
      </p>

      <figure></figure>
    </section>

    <section>
      <h2>Nous rejoindre</h2>

      <p>
        Nous pensons qu'une personne souhaitant rejoindre un hébergeur indépendant a besoin d'un accompagnement. D'abord parce que nos logiciels sont inhabituels et différents, ensuite parce que nous souhaitons garder le dialogue et si possible vous donner la possibilité de prendre part à nos choix. C'est pourquoi les inscriptions se font par cooptation.
      </p>

      <div id="niveaux" class="row">
        <section class="col">
          <h3>Ami⋅e</h3>

          <p>
            En tant qu'<em>ami⋅e</em> de l'association, vous avez toute notre affection !<br>

            Et aussi accès à nos salons de discussion, pour qu'on puisse vous exprimer notre amour. Quand même.
          </p>
        </section>

        <section class="col">
          <h3>Membre</h3>

          <p>
            En tant que <em>membre</em>, vous participez à la vie de l'association, et bénéficiez de tous nos services !
          </p>
        </section>

        <section class="col">
          <h3>Hébergeur⋅euse</h3>

          <p>
            Les <em>hébergeur⋅euses</em> mettent des ordinateurs à disposition de l'association.<br>

            <q>De grands pouvoirs impliquent de grandes reponsabilités !</q>
          </p>
        </section>
      </div>

      <div id="trombinoscope" class="row">
        <figure class="col-6 col-3-md">
          <!-- <img src=""> -->
          <figcaption>
            <h4>Esther</h4>
            Magicienne des images
          </figcaption>
        </figure>

        <figure class="col-6 col-3-md">
          <!-- <img src=""> -->
          <figcaption>
            <h4>Quentin</h4>
            Bidouilleur d'ordinateurs
          </figcaption>
        </figure>

        <figure class="col-6 col-3-md">
          <!-- <img src=""> -->
          <figcaption>
            <h4>Adrien</h4>
            Généraliste
          </figcaption>
        </figure>

        <figure class="col-6 col-3-md">
          <!-- <img src=""> -->
          <figcaption>
            <h4>Maximilien</h4>
            Ordinateurologue
          </figcaption>
        </figure>

        <figure class="col-6 col-3-md">
          <!-- <img src=""> -->
          <figcaption>
            <h4>Alex</h4>
            Bâtisseur d'empires
          </figcaption>
        </figure>
      </div>
    </section>
  </main>

  <footer>
    <p>Brodé avec amour par Deuxfleurs.</p>

    <p class="is-right">Il y a sans doute un copyright.</p>
  </footer>
</body>
</html>