Add the “Features” part of the landing page

This commit is contained in:
gregoirenovel 2017-04-04 14:41:49 +02:00
parent 663cd18364
commit 58a7f399c0
5 changed files with 79 additions and 0 deletions

View file

@ -0,0 +1 @@
<svg width="96" height="92" viewBox="0 0 96 92" xmlns="http://www.w3.org/2000/svg"><title>08D2E231-4C84-4B79-AC9D-982A43B5F62D</title><g fill="none" fill-rule="evenodd"><path d="M0-2h96v96H0z"/><path d="M35 85.679c3.208 3.278 7.675 5.32 12.624 5.32 4.95 0 9.417-2.043 12.625-5.321-.922-3.106-3.123-6.105-8.248-6.105 0 0-1.634 1.592-4.377 1.592-2.744 0-4.376-1.592-4.376-1.592-5.125 0-7.326 2.999-8.248 6.106zM47.624 74.63c3.783 0 6.854-3.05 6.854-6.811 0-3.768-3.07-6.82-6.854-6.82-3.782 0-6.854 3.052-6.854 6.82 0 3.76 3.073 6.812 6.854 6.812zM1 42.679c3.208 3.278 7.675 5.32 12.625 5.32 4.949 0 9.417-2.043 12.625-5.321-.922-3.106-3.124-6.105-8.249-6.105 0 0-1.634 1.592-4.376 1.592-2.745 0-4.376-1.592-4.376-1.592-5.126 0-7.327 2.999-8.249 6.106zM13.624 31.63c3.783 0 6.854-3.05 6.854-6.811 0-3.768-3.07-6.82-6.854-6.82-3.783 0-6.854 3.052-6.854 6.82 0 3.76 3.074 6.812 6.854 6.812zM69 42.679c3.207 3.278 7.675 5.32 12.624 5.32 4.95 0 9.418-2.043 12.626-5.321-.922-3.106-3.124-6.105-8.249-6.105 0 0-1.635 1.592-4.377 1.592-2.743 0-4.375-1.592-4.375-1.592-5.126 0-7.328 2.999-8.25 6.106zM81.624 31.63c3.784 0 6.855-3.05 6.855-6.811 0-3.768-3.072-6.82-6.855-6.82-3.782 0-6.853 3.052-6.853 6.82 0 3.76 3.073 6.812 6.853 6.812zm-4.089-18.51C69.795 5.622 59.253 1 47.625 1s-22.17 4.622-29.91 12.12m50.143 68.825c10.966-5.859 19.089-16.33 21.788-28.825m-84.043 0c2.736 12.67 11.055 23.255 22.255 29.064" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1 @@
<svg width="96" height="80" viewBox="0 0 96 80" xmlns="http://www.w3.org/2000/svg"><title>BB9A4BB9-1A5D-4E79-92B9-D2AF8B16FCF3</title><g fill="none" fill-rule="evenodd"><path d="M0-8h96v96H0z"/><path d="M17 17h63" stroke="#F8F8F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22.423 13.029a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0m5.001.001a1.5 1.5 0 1 1-3.001-.001 1.5 1.5 0 0 1 3 0" fill="#FFF"/><path d="M69 36H29m40 8H29m23-16H29m51 23V12c0-1.657-1.843-3-3.5-3h-57c-1.657 0-2.5 1.343-2.5 3v39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M95 62.023a3.918 3.918 0 0 1-3.912 3.923H4.908A3.914 3.914 0 0 1 1 62.023v-56.6A3.914 3.914 0 0 1 4.908 1.5h86.18A3.918 3.918 0 0 1 95 5.423v56.6zM66.998 78.5c-5.837-1.744-10.642-2.479-11.383-8.78v-3.774H38.08v3.386c-.582 6.664-5.468 7.388-11.423 9.168h40.341zM2 51h93" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1 @@
<svg width="77" height="95" viewBox="0 0 77 95" xmlns="http://www.w3.org/2000/svg"><title>48989501-DD47-4082-8A9E-1AFAB7A24CFE</title><g fill="none" fill-rule="evenodd"><path d="M-10-1h96v96h-96z"/><path d="M65.917 16a4.917 4.917 0 1 1-9.834 0 4.917 4.917 0 0 1 9.834 0z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M74.74 13.84h-3.718a10.153 10.153 0 0 0-1.41-3.395l2.631-2.631a1.26 1.26 0 0 0 0-1.784l-1.272-1.272a1.264 1.264 0 0 0-1.785 0l-2.63 2.632a10.202 10.202 0 0 0-3.395-1.412V2.262C63.161 1.566 62.596 1 61.9 1h-1.798c-.696 0-1.26.566-1.26 1.262v3.716a10.216 10.216 0 0 0-3.396 1.412l-2.632-2.632a1.261 1.261 0 0 0-1.783 0L49.76 6.03a1.26 1.26 0 0 0 0 1.784l2.63 2.63a10.196 10.196 0 0 0-1.412 3.396h-3.717a1.26 1.26 0 0 0-1.26 1.262V16.9a1.26 1.26 0 0 0 1.26 1.26h3.717c.265 1.23.75 2.375 1.411 3.396l-2.63 2.632a1.258 1.258 0 0 0 0 1.782l1.271 1.274a1.261 1.261 0 0 0 1.783 0l2.632-2.631a10.256 10.256 0 0 0 3.395 1.41v3.716c0 .696.565 1.263 1.261 1.263H61.9c.697 0 1.262-.567 1.262-1.263v-3.715a10.242 10.242 0 0 0 3.394-1.411l2.631 2.63a1.264 1.264 0 0 0 1.785 0l1.272-1.273a1.258 1.258 0 0 0 0-1.782l-2.63-2.632a10.153 10.153 0 0 0 1.41-3.395h3.717A1.26 1.26 0 0 0 76 16.9v-1.798a1.26 1.26 0 0 0-1.26-1.262z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M45 2H3.727A2.727 2.727 0 0 0 1 4.726v86.545A2.727 2.727 0 0 0 3.727 94h69.546A2.727 2.727 0 0 0 76 91.272V31M1 12h39" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.256 7.028a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001m6 0a2 2 0 1 1-4.002-.001 2 2 0 0 1 4.002.001" fill="#FFF"/><path d="M66 39H11m55 9H11m55 8H11m55 9H11m31-35H11m31 44H11" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -62,3 +62,49 @@
text-decoration: none;
}
}
.landing-panel-title {
font-size: 30px;
font-weight: normal;
text-align: center;
margin-bottom: 40px;
margin-top: 0;
}
.features-panel {
background-color: $blue;
}
.features-panel-title {
color: #FFFFFF;
}
.features {
@extend %horizontal-list;
}
$feature-width: 320px;
$features-count: 3;
.feature {
@extend %horizontal-list-item;
width: $feature-width;
margin-right: calc((#{$page-width} - (#{$feature-width} * #{$features-count})) / (#{$features-count} - 1));
}
.feature-text {
text-align: center;
color: #FFFFFF;
font-size: 20px;
}
.feature-text-em {
font-weight: bold;
font-style: normal;
}
.feature-image {
display: block;
margin: 0 auto;
margin-bottom: 24px;
}

View file

@ -15,3 +15,33 @@
%img{ :src => image_url("landing/hero/dematerialiser.svg") }
.clearfix
.landing-panel.features-panel
.landing-panel-inner-content
%h2.landing-panel-title.features-panel-title Un outil dédié aux organismes publics
%ul.features
%li.feature
%img.feature-image{ :src => image_url("landing/features/creer.svg") }
%p.feature-text
%em.feature-text-em Créer
%br
des procédures en ligne
%br
en toute simplicité
%li.feature
%img.feature-image{ :src => image_url("landing/features/gerer.svg") }
%p.feature-text
%em.feature-text-em Gérer
%br
les demandes des usagers
%br
sur la plateforme
%li.feature
%img.feature-image{ :src => image_url("landing/features/collaborer.svg") }
%p.feature-text
%em.feature-text-em Collaborer
%br
pour instruire les demandes
%br
à plusieurs