Structure services page

This commit is contained in:
Timothée Floure 2021-01-07 11:01:58 +01:00
parent 32ff7b6703
commit 9429ced222
Signed by: tfloure
GPG key ID: 4502C902C00A1E12
2 changed files with 139 additions and 7 deletions

View file

@ -5,10 +5,18 @@ body {
margin: auto; margin: auto;
} }
h2 {
display: inline-block;
}
.blue { .blue {
color: #003366; color: #003366;
} }
.bottom-20 {
margin-bottom: 20px;
}
#section-manifesto .row { #section-manifesto .row {
margin-top: 20px; margin-top: 20px;
} }
@ -59,9 +67,16 @@ body {
width: 50px; width: 50px;
} }
h2 .service-logo {
width: 35px;
}
.service-description { .service-description {
height: 100px; height: 100px;
} }
.service-description-large {
height: 200px;
}
#section-hero { #section-hero {
background-image: linear-gradient(to right, #003366, #5d0066); background-image: linear-gradient(to right, #003366, #5d0066);
@ -87,6 +102,15 @@ body {
font-weight: bold; font-weight: bold;
} }
.btn-green {
background-color: #015659 !important;
color: #fff !important;
}
.btn-green:hover, .btn-green:active {
background-color: #01878c !important;
}
#section-services { #section-services {
padding-bottom: 20px; padding-bottom: 20px;
color: #003366; color: #003366;
@ -189,3 +213,7 @@ hr {
background-image: linear-gradient(to right, #003366, #5d0066); background-image: linear-gradient(to right, #003366, #5d0066);
height: 2px; height: 2px;
} }
.center {
text-align: center;
}

View file

@ -2,19 +2,123 @@
<h1>Services</h1> <h1>Services</h1>
</div> </div>
<div class="h2-blue"> <div class="h2-blue section">
<h2>
<img src="assets/images/web.svg" class="service-logo" /> <img src="assets/images/web.svg" class="service-logo" />
<h2>Web Hosting - Static, Wordpress, Generic</h2> Web Hosting - Static, Wordpress, Generic
</h2>
<hr /> <hr />
<img src="assets/images/nas.svg" class="service-logo" /> <div class="row center bottom-20">
<h2>Storage - Backup and file sharing</h2> <div class="col">
<hr /> <h3>Static Website</h3>
<img src="assets/images/server.svg" class="service-logo" /> <p class="service-description-large">
<h2>Generic Hosting - Virtual Machines</h2> Low-footprint, pre-generated website hosting. You can use tools such as
<hr /> 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>
<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 />
<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 id="section-contact">
<div class="container"> <div class="container">
<div class="row"> <div class="row">