From 9429ced222e3540330adf42d363a05f9fc3732c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Floure?= <timothee.floure@posteo.net>
Date: Thu, 7 Jan 2021 11:01:58 +0100
Subject: [PATCH] Structure services page

---
 assets/css/main.css |  28 +++++++++++
 services.part       | 118 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 139 insertions(+), 7 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 7464992..7932e60 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -5,10 +5,18 @@ body {
 	margin: auto;
 }
 
+h2 {
+	display: inline-block;
+}
+
 .blue {
 	color: #003366;
 }
 
+.bottom-20 {
+	margin-bottom: 20px;
+}
+
 #section-manifesto .row {
 	margin-top: 20px;
 }
@@ -59,9 +67,16 @@ body {
 	width: 50px;
 }
 
+h2 .service-logo {
+	width: 35px;
+}
+
 .service-description {
 	height: 100px;
 }
+.service-description-large {
+	height: 200px;
+}
 
 #section-hero {
 	background-image: linear-gradient(to right, #003366, #5d0066);
@@ -87,6 +102,15 @@ body {
 	font-weight: bold;
 }
 
+.btn-green {
+	background-color: #015659 !important;
+	color: #fff !important;
+}
+
+.btn-green:hover, .btn-green:active {
+	background-color: #01878c !important;
+}
+
 #section-services {
 	padding-bottom: 20px;
 	color: #003366;
@@ -189,3 +213,7 @@ hr {
 	background-image: linear-gradient(to right, #003366, #5d0066);
 	height: 2px;
 }
+
+.center {
+	text-align: center;
+}
diff --git a/services.part b/services.part
index 3cbb446..f429562 100644
--- a/services.part
+++ b/services.part
@@ -2,19 +2,123 @@
 	<h1>Services</h1>
 </div>
 
-<div class="h2-blue">
-	<img src="assets/images/web.svg" class="service-logo" />
-	<h2>Web Hosting - Static, Wordpress, Generic</h2>
+<div class="h2-blue section">
+	<h2>
+		<img src="assets/images/web.svg" class="service-logo" />
+		Web Hosting - Static, Wordpress, Generic
+	</h2>
 	<hr />
 
-	<img src="assets/images/nas.svg" class="service-logo" />
-	<h2>Storage - Backup and file sharing</h2>
+	<div class="row center bottom-20">
+		<div class="col">
+			<h3>Static Website</h3>
+
+			<p class="service-description-large">
+			Low-footprint, pre-generated website hosting.  You can use tools such as
+			Publii to manage your website. There is no management interface to edit
+			the website: it is your responsibility to provide a functional website.
+			</p>
+
+				<a href="contact.html" class="btn btn-bold btn-green">Contact us</a>
+		</div>
+		<div class="col">
+			<h3>Wordpress Website</h3>
+
+			<p class="service-description-large">
+			We deploy a dedicated wordpress instance, the most used Content
+			Management System (CMS) used on the web, for you. The website is
+			dynamically generated and can be managed via a web interface.
+			</p>
+
+			<a href="contact.html" class="btn btn-bold btn-green">Contact us</a>
+		</div>
+		<div class="col">
+			<h3>Generic PHP</h3>
+
+			<p class="service-description-large">
+			Generic PHP+MySQL/PGSQL hosting: doable on demand, please
+			contact us with your needs (storage, CPU, Memory, dependencies).
+			</p>
+
+			<a href="contact.html" class="btn btn-bold btn-green">Contact us</a>
+		</div>
+	</div>
+
+	<h2>
+		<img src="assets/images/nas.svg" class="service-logo" />
+		Storage - Backup and file sharing
+	</h2>
 	<hr />
 
-	<img src="assets/images/server.svg" class="service-logo" />
-	<h2>Generic Hosting - Virtual Machines</h2>
+	<div class="row center bottom-20">
+		<div class="col">
+			<h3>Borg Backups</h3>
+
+			<p class="service-description">
+			 We offer borg-based append-only backup on the recycled cloud.
+			 Managed backups can be offered by your local provider.
+			</p>
+
+			<a href="contact.html" class="btn btn-bold btn-green">Contact us</a>
+		</div>
+		<div class="col">
+			<h3>File Sharing</h3>
+
+			<p class="service-description">Nextcloud-based file sharing and syncing.</p>
+
+			<a href="contact.html" class="btn btn-bold btn-green">Contact us</a>
+		</div>
+	</div>
+
+	<h2>
+		<img src="assets/images/server.svg" class="service-logo" />
+		Generic Hosting - Virtual Machines
+	</h2>
 	<hr />
+
+	<div class="row center bottom-20">
+		<div class="col">
+			<h3>KVM Virtual Machine</h3>
+
+			<p class="service-description">
+			We offer unmanaged Virtual Machines (VMs), which can run either
+			one of our images our yor own. We currently have images ready for
+			Debian GNU/Linux, Ubuntu GNU/Linux and Alpine Linux, but other
+			distributions and *BSD can be defined on demand.
+
+			</p>
+
+			<a href="contact.html" class="btn btn-bold btn-green">Contact us</a>
+		</div>
+	</div>
 </div>
+
+<div id="section-hero">
+	<h2>Locations</h2>
+</div>
+
+<div class="section">
+	<div class="row center">
+		<div class="col">
+			<h3>Linthal GL, Switzerland</h3>
+
+			<p>
+			100 Mbps (burstable to 1Gbps) upstream, operated by e-Durable SA in ungleich's Datacenterlight.
+			</p>
+		</div>
+		<div class="col">
+			<h3>Lausanne VD, Switzerland</h3>
+
+			<p>100 Mbps upstream, operated by e-Durable SA.</p>
+		</div>
+		<div class="col">
+			<h3>Froideville VD, Switzerland</h3>
+
+			<p>1 Gbps upstream, operated by e-Durable SA.</p>
+		</div>
+	</div>
+</div>
+
 <div id="section-contact">
 	<div class="container">
 		<div class="row">