Process boxes
This commit is contained in:
		
							parent
							
								
									ca7ec37a9c
								
							
						
					
					
						commit
						ad8f05c3bc
					
				@ -36,3 +36,22 @@ title = "Librezo"
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<span class="slogan2">Et beaucoup, beaucoup d'autres...</span>
 | 
			
		||||
 | 
			
		||||
<span class="slogan1">Comment ça se passe ?</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>
 | 
			
		||||
 | 
			
		||||
@ -44,7 +44,7 @@ header {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#header-menu a:hover, #header-menu a:focus {
 | 
			
		||||
	border-bottom: 2px solid #ac44ff;
 | 
			
		||||
	text-shadow: 1px 2px 1px #ac44ff;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
main {
 | 
			
		||||
@ -93,6 +93,7 @@ a, a:visited {
 | 
			
		||||
	display: flex;
 | 
			
		||||
	align-items: stretch;
 | 
			
		||||
	justify-content: center;
 | 
			
		||||
	border-right: 32px solid #ac44ff;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.need_box {
 | 
			
		||||
@ -139,6 +140,10 @@ a, a:visited {
 | 
			
		||||
	text-decoration: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.service_box-link:hover, .service_box-link:focus {
 | 
			
		||||
	text-shadow: 1px 2px 1px #ac44ff;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.service_box-title {
 | 
			
		||||
	position: relative;
 | 
			
		||||
	top: 8px;
 | 
			
		||||
@ -146,3 +151,41 @@ a, a:visited {
 | 
			
		||||
	padding-bottom: 14px;
 | 
			
		||||
	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;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										5
									
								
								templates/shortcodes/process_box.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										5
									
								
								templates/shortcodes/process_box.html
									
									
									
									
									
										Normal 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>
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user