Process boxes

This commit is contained in:
ZettaScript 2022-09-26 16:05:08 +02:00
parent ca7ec37a9c
commit ad8f05c3bc
No known key found for this signature in database
GPG Key ID: 3504BC6D362F7DCA
3 changed files with 68 additions and 1 deletions

View File

@ -36,3 +36,22 @@ title = "Librezo"
</div> </div>
<span class="slogan2">Et beaucoup, beaucoup d'autres...</span> <span class="slogan2">Et beaucoup, beaucoup d'autres...</span>
<span class="slogan1">Comment ça se passe&#8239;?</span>
<div class="process-title"><span>Autonomisation de l'infrastructure réseau</span></div>
<div class="process_boxes">
{{ process_box(number="1", title="Étude", description="Définition du besoin et propositions de solutions adaptées.") }}
{{ process_box(number="2", title="Installation", description="Montage du serveur à domicile et installation du système et des composants logiciels.") }}
{{ process_box(number="3", title="Configuration", description="Réglages sur mesure et configurations de sécurité.") }}
{{ process_box(number="4", title="Acquisition", description="Votre serveur GNU/Linux est prêt et 100% entre vos mains. Tests.") }}
</div>
<div class="process-title"><span>Formations optionnelles</span></div>
<div class="process_boxes">
{{ process_box(number="5", title="Accompagnement utilisateur", description="Apprenez en quelques heures à utiliser vos outils.") }}
{{ process_box(number="6", title="Accompagnement administrateur", description="Devenez administrateur-système de votre propre infrastructure (plusieurs semaines).") }}
{{ process_box(number="7", title="Autonomie", description="Vous êtes capable de gérer votre système et vos applications : vous êtes autonome et n'avez plus besoin de tiers de confiance.") }}
</div>

View File

@ -44,7 +44,7 @@ header {
} }
#header-menu a:hover, #header-menu a:focus { #header-menu a:hover, #header-menu a:focus {
border-bottom: 2px solid #ac44ff; text-shadow: 1px 2px 1px #ac44ff;
} }
main { main {
@ -93,6 +93,7 @@ a, a:visited {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
border-right: 32px solid #ac44ff;
} }
.need_box { .need_box {
@ -139,6 +140,10 @@ a, a:visited {
text-decoration: none; text-decoration: none;
} }
.service_box-link:hover, .service_box-link:focus {
text-shadow: 1px 2px 1px #ac44ff;
}
.service_box-title { .service_box-title {
position: relative; position: relative;
top: 8px; top: 8px;
@ -146,3 +151,41 @@ a, a:visited {
padding-bottom: 14px; padding-bottom: 14px;
font-size: 24px; font-size: 24px;
} }
.process-title {
font-family: Amatic;
font-size: 42px;
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
color: #fff;
}
.process_boxes {
flex: 62%;
text-align: center;
font-family: LunaSans;
}
.process_box {
display: inline-block;
width: 256px;
padding-top: 4px;
vertical-align: top;
}
.process_box-number {
display: inline-block;
width: 64px;
height: 64px;
font-size: 48px;
background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
color: #fff;
border-radius: 32px;
}
.process_box-title {
position: relative;
top: 8px;
display: inline-block;
padding-bottom: 14px;
font-size: 32px;
}

View File

@ -0,0 +1,5 @@
<div class="process_box">
<span class="process_box-number">{{number|safe}}</span><br/>
<span class="process_box-title">{{title|safe}}</span>{% if description %}<br/>
<span class="process_box-description">{{description|safe}}</span>{% endif %}
</div>