home page, style and content

content/pages/01_index.md

@@ -1,7 +1,88 @@
+toc_run: false
 Title: Accueil
-url:
+Url:
+Template: home
 save_as: index.html
 
-[TOC]
 
-# Bienvenue #
+<section class="titre">
+
+<h1>Gitoyen</h1>
+<h2>Opérateur réseau, LIR et dinosaures.</h2>
+
+</section>
+
+> " Pour qu'Internet reste neutre et décentralisé. "
+
+<div class="separateur"></div>
+
+Gitoyen est une association loi 1901, à but non lucratif. Notre objectif ? Un internet décentralisé et neutre, notamment en facilitant l'émergence et l'existence de petits opérateurs réseau.
+{: .presentation }
+
+<h3><span>Nos valeurs</span></h3>
+<div class="separateur"></div>
+
+<section>
+
+<div class="valeurs nonprofit">
+<img src="../images/nonprofit.jpg" alt="Pas de profits">
+<h4>Pas de profits</h4>
+<p>Construire un opérateur sans but lucratif et respectant la neutralité du réseau.</p>
+</div>
+
+<div class="valeurs partage">
+<img src="../images/partager.jpg" alt="Du partage">
+<h4>Du partage</h4>
+<p>Partager nos connaissances, nos expériences avec les autres bénévoles.</p>
+</div>
+
+<div class="valeurs entraide">
+<img src="../images/collaborer.jpg" alt="De l'entraide">
+<h4>De l'entraide</h4>
+<p>Aider d'autres opérateurs sans but lucratif à faire de même.</p>
+</div>
+
+<a href="gitoyen.html" class="bouton">Plus d'info sur Gitoyen</a>
+
+</section>
+
+<h3><span>Nos services</span></h3>
+<div class="separateur"></div>
+
+<section>
+
+<ul class="services">
+
+<li>
+<span>1.</span>
+<h4>Transit Internet</h4>
+<p>Gitoyen est un opérateur Internet disposant de ses propres liens de communication avec le reste d'Internet. Dans ce cadre nous sommes en mesure de fournir une vue complète d'Internet (du Transit) à nos membres ou nos clients.</p>
+</li>
+
+<li>
+<span>2.</span>
+<h4>LIR / obtention de ressources Internet</h4>
+<p>Gitoyen est un registre local d'Internet (LIR). Cela lui donne la possibilité d'assigner des ressources : blocs d'adresses IP ou numéros d'AS.</p>
+</li>
+
+
+<li>
+<span>3. </span>
+<h4>Commutation et routage</h4>
+<p>Nous proposons à nos membres la possibilité d'utiliser notre infrastructure de commutation et notre infrastructure de routage.</p>
+</li>
+
+<li>
+<span>4.</span>
+<h4>Hébergement d'équipement</h4>
+<p>Gitoyen dispose de deux points de présence basés à Paris avec notre propre espace d'hébergement d'équipement. L'un à Téléhouse - Paris Voltaire et l'autre à Paris Bourse.  </p>
+</li>
+
+</ul>
+
+<a href="services-de-gitoyen.html" class="bouton">Le détail de nos services</a>
+
+</section>
+
+<h3><span>Actualités</span></h3>
+<div class="separateur"></div>

theme/static/css/main.css

@@ -156,6 +156,19 @@ img.right, figure.right {float: right; margin: 0 0 2em 2em;}
 img.left, figure.left {float: left; margin: 0 2em 2em 0;}
 
 /*
+Global
+ *****************/
+a.bouton {
+	display: inline-block;
+	padding: 20px;
+	border: 3px solid #dc4807;
+	text-decoration: none;
+	font-size: 20px;
+	margin-top: 60px;
+}
+
+
+/*
 Header
  *****************/
 
@@ -355,6 +368,166 @@ Body
 }
 
 /*
+Home page
+ *****************/
+
+#content-home section.titre {
+	background-image: url(../images/pessin2.png);
+	background-repeat: no-repeat;
+	background-position: right top;
+	background-size: 50%;
+	padding-bottom: 200px;
+	margin-bottom: -40px;
+}
+
+#content-home h1 {
+	font-size: 56px;
+	font-family: 'Oswald', arial, serif;
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 7px;
+	margin-left: 20px;
+	text-align: left;
+}
+
+#content-home h2 {
+	font-size: 32px;
+	font-family: 'Lato', arial, serif;
+	font-weight: normal;
+	text-transform: none;
+	margin-top: 0;
+	text-align: left;
+	padding-top: 20px;
+	line-height: 1.25;
+	margin-left: 20px;
+}
+
+#content-home section {
+	padding: 80px 0;
+	text-align: center;
+}
+
+#content-home .separateur {
+	width: 100%;
+	height: 10px;
+	background-color: #EEE;
+	position: absolute;
+	left: 0;
+	right: 0;
+	z-index: -1;
+}
+
+#content-home blockquote {
+	background-color: #dc4807;
+	display: inline-block;
+	padding: 40px 20px;
+	color: #FFF;
+	font-size: 28px;
+	margin: 0;
+	-moz-box-shadow: 1px 1px 5px 0px #c0c0c0;
+	-webkit-box-shadow: 1px 1px 5px 0px #c0c0c0;
+	-o-box-shadow: 1px 1px 5px 0px #c0c0c0;
+	box-shadow: 1px 1px 5px 0px #c0c0c0;
+	filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=5);
+}
+
+#content-home blockquote + .separateur {
+	margin-top: -70px;
+}
+
+#content-home blockquote p {
+	width: 80%;
+	text-align: center;
+	margin: auto;
+}
+
+#content-home .presentation {
+	background-image: url(../images/deco-titre.png);
+	background-repeat: no-repeat;
+	padding: 40px 80px;
+	font-size: 24px;
+	width: 70%;
+	margin-top: 120px;
+	margin-bottom: 120px;
+	margin-left: 30%;
+}
+
+#content-home h3:nth-child(even) {
+	text-align: right;
+	padding-right: 50px;
+}
+
+#content-home h3:nth-child(odd) {
+	text-align: left;
+	padding-left: 50px;
+}
+
+#content-home h3 + .separateur {
+	margin-top: -40px;
+}
+
+#content-home h3 span {
+	background-color: #EEE;
+	display: inline-block;
+	padding: 20px 40px;
+	text-transform: uppercase;
+	color: #000;
+	font-size: 32px;
+	font-weight: lighter;
+}
+
+#content-home .valeurs {
+	width: 30%;
+	display: inline-block;
+}
+
+#content-home .valeurs img {
+	width: 70%;
+	text-align: center;
+}
+
+#content-home .valeurs.nonprofit img {
+	width: 50%;
+}
+
+#content-home .valeurs h4 {
+	font-size: 22px;
+	font-weight: bold;
+	font-family: Lato, Arial, sans-serif;
+}
+
+#content-home .valeurs p {
+	font-size: 18px;
+	padding: 0 40px;
+}
+
+#content-home .services li {
+	list-style: none;
+	display: inline-block;
+	width: 49%;
+	vertical-align: top;
+}
+
+#content-home .services li span {
+	font-family: Oswald, Arial, serif;
+	font-size: 100px;
+	color: #EEE;
+}
+
+#content-home .services li h4 {
+	font-family: Lato, Arial, sans-serif;
+	font-size: 24px;
+	font-weight: bold;
+	margin-top: 0;
+}
+
+#content-home .services li p {
+	font-size: 18px;
+	padding: 0 30px;
+}
+
+
+/*
 Extras
  *****************/
 #extras {margin: 0 auto 3em auto; overflow: hidden;}
@@ -454,7 +627,18 @@ About
 /*
 Footer
  *****************/
-#contentinfo {padding-bottom: 2em; text-align: right;}
+#contentinfo {
+	background-color: #000;
+	text-align: center;
+	padding: 50px 0 30px;
+}
+
+#contentinfo a {
+	color: #999;
+	text-decoration: none;
+}
+
+
 
 /***** Sections *****/
 /* Blog */

theme/templates/base.html

@@ -51,6 +51,9 @@
     {% endblock %}
     </div>
     <footer id="contentinfo" class="body">
+
+    <a href="#">Mentions légales</a>
+
     </footer>
 
     {% include 'analytics.html' %}

theme/templates/page.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% block title %}{{ page.title }}{% endblock %}
 {% block content %}
+
   <h1 class="entry-title"><span>{{ page.title }}</span></h1>
   {% if page.toc %}
   <nav id="side-nav">
@@ -16,5 +17,4 @@
   {% if page.toc %}
   </div>
   {% endif %}
-
 {% endblock %}