diff --git a/public/stylesheets/cover.css b/public/stylesheets/cover.css
index 9af4f31..3c71f70 100644
--- a/public/stylesheets/cover.css
+++ b/public/stylesheets/cover.css
@@ -26,7 +26,6 @@ a:hover {
html,
body {
- height: 100%;
background-color: #333;
}
body {
@@ -37,25 +36,36 @@ body {
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
- display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
-.site-wrapper-inner {
- display: table-cell;
- vertical-align: top;
+
+
+section {
+ margin: 0;
+ min-height: 100vh;
+ position: relative;
}
+
.cover-container {
- margin-right: auto;
- margin-left: auto;
+ max-width: 940px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ height: 500px;
}
+
+
/* Padding for spacing */
.inner {
- padding: 30px;
+ padding: 15px 30px;
}
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index e60b5d6..7d3e0fc 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,5 +1,20 @@
body {
- background: #333333 url(/img/fond2.png) repeat 0% 0%;
+ background: #333333 url(/img/fond2.png) fixed repeat 0% 0%;
+}
+
+.btn-link {
+ color: #fff;
+}
+
+.glyphicon {
+ margin: 0 10px;
+ font-size: 2em;
+ top: 8px;
+}
+
+.card-body {
+ text-align: left;
+ line-height: 2;
}
/* Section home */
@@ -10,4 +25,5 @@ body {
margin: auto;
background: transparent url(/img/bowtie.png) no-repeat scroll center center;
background-size: contain;
-}
\ No newline at end of file
+}
+
diff --git a/routes/index.js b/routes/index.js
index 470d747..cf8b7eb 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -3,7 +3,7 @@ var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
- res.render('index', { title: 'Accueil' });
+ res.render('index', { title: 'Monnéthic' });
})
.get("/about", function(req, res) {
diff --git a/views/index.pug b/views/index.pug
index 59ed567..391b8fb 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,9 +1,83 @@
extends layout
block content
- .inner.cover
- h1.cover-heading #{title}
- |
- div.bowtie
- |
- p.lead L'éthique, c'est chic
+ section.inner.cover.home
+ .cover-container
+ h1.cover-heading #{title}
+ |
+ .bowtie
+ |
+ p.lead L'éthique, c'est chic
+
+ section.inner.cover.cloud
+ .cover-container
+ h2 Dématérialisez facilement votre monnaie d'échange
+ |
+ .bowtie
+ |
+ p
+ a.btn.btn-link(data-toggle='collapse' href='#collapseCloud' role='button' aria-expanded='false' aria-controls='collapseCloud')
+ +icon("plus")
+ | Mais comment ?
+ #collapseCloud.collapse
+ .card.card-body
+ p
+ +icon("screenshot")
+ | Une application simple pour centraliser tous vos besoins : achat de monnaie d'échange, virements, paiements entre particuliers et professionnels.
+ p
+ +icon("phone")
+ | Utilisable sur smartphones, tablettes et ordinateurs. Compatible avec tous les appareils et OS.
+ p
+ +icon("wrench")
+ | Un paramétrage et déploiement rapide et facile, encadré par une équipe d'experts
+ p
+ +icon("user")
+ | S'adapte à tous vos besoins : monnaie locale, évènements en cashless, devises internes d'entreprises et d'associations...
+
+ section.inner.cover.blockchain
+ .cover-container
+ h2 Bénéficiez de la transparence et de la sécurité de la blockchain
+ |
+ .bowtie
+ |
+ p
+ a.btn.btn-link(data-toggle='collapse' href='#collapseBlockchain' role='button' aria-expanded='false' aria-controls='collapseBlockchain')
+ +icon("plus")
+ | La quoi ?
+ #collapseBlockchain.collapse
+ .card.card-body
+ P
+ +icon("link")
+ | Un système basé sur la blockchain : une technologie d'avenir à la pointe de la sécurité.
+ p
+ +icon("eye-open")
+ | Plus besoin de tiers de confiance : les transactions sont vérifiées par l'intégralité du réseau en toute transparence.
+ p
+ +icon("lock")
+ | L'anonymat garanti pour chaque participant, via des méthodes cryptographiques innovantes.
+
+ section.inner.cover.decentralise
+ .cover-container
+ h2 Bâtissez le système de paiement de demain : décentralisé, citoyen et participatif
+ |
+ .bowtie
+ |
+ p
+ a.btn.btn-link(data-toggle='collapse' href='#collapseDecentralise' role='button' aria-expanded='false' aria-controls='collapseDecentralise')
+ +icon("plus")
+ | Et l'avenir, ça ressemble à quoi ?
+ #collapseDecentralise.collapse
+ .card.card-body
+ P
+ +icon("user")
+ | Un réseau de paiement construit par ses membres, auquel chacun peut participer à la hauteur de ses ambitions
+ p
+ +icon("cloud")
+ | Inutile de se reposer entièrement sur une seule entité et des machines coûteuses : la charge est répartie entre tous
+ p
+ +icon("leaf")
+ | Un système économique et écologique, aux processus de sécurité peu gourmands en énergie
+ p
+ +icon("piggy-bank")
+ | Pas de cryptomonnaie ou de spéculation : restez maîtres de votre monnaie
+
diff --git a/views/layout.pug b/views/layout.pug
index 13c12e8..6d4c4e5 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -8,7 +8,7 @@ append styles
block body
.site-wrapper
.site-wrapper-inner
- .cover-container
+ // Barre supérieure
.masthead.clearfix
.inner
h3.masthead-brand Monnéthic
@@ -18,8 +18,10 @@ block body
a(href="#home") Accueil
li
a(href="#contact") Contact
+ // ici le contenu
block content
+ //footer
.mastfoot
.inner
- p Cover template for Bootstrap , by @mdo.
\ No newline at end of file
+ p © Monnéthic 2018