Add content

Colladia · Jun 14, 2016 · 366ae9b · 366ae9b
1 parent d6b477f
commit 366ae9b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -102,7 +102,8 @@ <h1 class="brand-heading">Colladia</h1>
         <div class="row">
             <div class="col-lg-8 col-lg-offset-2">
                 <h2>Le projet</h2>
-                <p>BLA BLA BLA</p>
+                <p>On dit souvent qu’un dessin vaut mieux qu’un long discours. Partant de ce principe, l’objectif de Colladia est de proposer aux utilisateurs une expérience leur permettant de pouvoir dessiner, ensemble, chacun sur leur propre appareil mobile.</p>
+                <p>Les utilisateurs peuvent ainsi modifier le document simultanément, et profiter des interactions tactiles qu’offrent ces supports. Que ce soit en déplacement ou en réunion, il n’est pas toujours possible d’avoir un ordinateur avec soi. Dans ce genre de situation, Colladia se révèle particulièrement intéressant.</p>
             </div>
         </div>
     </section>
@@ -112,10 +113,21 @@ <h2>Le projet</h2>
         <div class="row">
             <div class="col-lg-8 col-lg-offset-2">
                 <h2>Fonctionnalités</h2>
-                <p>BLA BLA BLA</p>
-                <h4><i class="fa fa-youtube-play fa-fw"></i> Vidéo de présentation</h4>
-                <div class="video-wrapper">
-                    <iframe class="feature-video" src="https://www.youtube.com/embed/1xX70e88ro8"></iframe>
+
+                <div class="feature-explanation cell">
+                    <div class="feature-screenshot"><img src="rapport/img/screen/new/colladia_connexion.png"/></div>
+
+                    <div class="feature-text">
+                        <h4>Ecran de connexion</h4>
+                        <p>La connexion au serveur avec un pseudo a été correctement réalisée : l’utilisateur a la possibilité d’entrer un pseudo et de préciser l’adresse du serveur auquel il faut se connecter pour créer et éditer des diagrammes. Il lui est aussi permis de sélectionner une couleur personnalisée.</p>
+                    </div>
+                </div>
+
+                <div class="feature-explanation">
+                    <h4><i class="fa fa-youtube-play fa-fw"></i> Vidéo de présentation</h4>
+                    <div class="video-wrapper">
+                        <iframe class="feature-video" src="https://www.youtube.com/embed/1xX70e88ro8"></iframe>
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/resources/css/custom.css b/resources/css/custom.css
@@ -87,6 +87,31 @@ hr {
     -moz-animation-timing-function: linear;
 }
 
+.feature-explanation {
+	padding: 5px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.feature-explanation.cell {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.feature-explanation .feature-screenshot img {
+	width: 100%;
+}
+
+.feature-explanation .feature-text {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.feature-explanation .feature-screenshot {
+	display: table-cell;
+	width: 35%;
+}
+
 .video-wrapper {
 	position: relative;
 	padding-bottom: 56.25%; /* 16:9 */