path: root/blueprint/index.html



<!DOCTYPE html>
<html>

<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.min.css">
  <link rel="stylesheet" href="assets/css/blueprint.css">
</head>

<body>
  <header>
    <nav class="nav">
      <div class="nav-left">
        <a href="#" class="home"><h1>Deuxfleurs</h1></a>
      </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>

    <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>


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

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

</html>
<!DOCTYPE html>
<html>

<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.min.css">
  <link rel="stylesheet" href="assets/css/blueprint.css">
</head>

<body>
  <header>
    <nav class="nav">
      <div class="nav-left">
        <a href="#" class="home"><h1>Deuxfleurs</h1></a>
      </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>

    <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>


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

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

</html>