121 lines
No EOL
3.3 KiB
HTML
121 lines
No EOL
3.3 KiB
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/branches-et-canopee.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="main-page" class="container">
|
|
|
|
<header>
|
|
<nav class="nav">
|
|
<div class="nav-left">
|
|
<a id="logo" href="#">Deuxfleurs</a>
|
|
</div>
|
|
<div class="nav-right">
|
|
<div class="tabs">
|
|
<a>Services</a>
|
|
<a class="active">Infrastructure</a>
|
|
<a>Logiciels</a>
|
|
<a>Vision</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<img src="assets/images/illustration-ronce_1200x765px.png">
|
|
</header>
|
|
|
|
<main>
|
|
<section class="row">
|
|
<div class="col-12">
|
|
<h1>Bienvenue chez Deuxfleurs !</h1>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<p>
|
|
Nous sommes une association pour<br>
|
|
une informatique <b>écologique</b> et <b>humaine</b>,<br>
|
|
et nous sommes en <b>colère</b>.<br>
|
|
<small>Nous avons donc pris le maquis.</small>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="row">
|
|
<div class="col-12-sm col-6-md">
|
|
<h2>Nous hébergeons</h2>
|
|
<p>
|
|
Celles et ceux qui ont besoin d'<b>outils libres</b><br>
|
|
pour discuter, collaborer, s'organiser, se divertir...
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-2-md"></div> <!-- vertical space -->
|
|
|
|
<div class="canopee right col-12-sm col-4-md">
|
|
<h2><small>Sans parasite !</small></h2>
|
|
<p>
|
|
Toutes nos constructions loufoques<br>
|
|
sont garanties <b>sans ver espion</b>.<br>
|
|
<small>Nous préférons le bon goût d'un logiciel bien fait.</small>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="row">
|
|
<div class="canopee left col-12-sm col-4-md">
|
|
<h2><small>Infrastructure raisonnée</small></h2>
|
|
<p>
|
|
On essaye d'héberger nos ordinateurs <b>à la maison</b>.<br>
|
|
<small>Et c'est pas si facile !</small>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-2-md"></div> <!-- vertical space -->
|
|
|
|
<div class="col-12-sm col-6-md">
|
|
<h2>Nous créons</h2>
|
|
<p>
|
|
Des logiciels pour améliorer<br>
|
|
et <b>interconnecter nos cabanes</b>.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="row">
|
|
<div class="col-2-md"></div> <!-- vertical space -->
|
|
<div class="col-12-sm col-10-md">
|
|
<h2>Nous recrutons</h2>
|
|
|
|
<p>
|
|
Des bâtisseuses de cabanes ou <b>des évadés</b>...
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="branche row">
|
|
<div class="col-3-md"></div> <!-- vertical space -->
|
|
<div class="col-12-sm col-6-md">
|
|
<p>... des mondes d'en bas.</p>
|
|
</div>
|
|
<div class="col-3-md"></div> <!-- vertical space -->
|
|
</div> <!-- .branche -->
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="is-right">
|
|
<small>Tous droits réservés à notre pangolin alcoolique.</small>
|
|
</footer>
|
|
|
|
</div> <!-- #main-page -->
|
|
</body>
|
|
|
|
</html> |