From d50e6e0f4bb58839cd0e71a466aac22f794af7ed Mon Sep 17 00:00:00 2001
From: Otthorn <otthorn@crans.org>
Date: Sun, 23 May 2021 18:33:53 +0200
Subject: [PATCH] More space under h1/H2

---
 index.html | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 1026e36..12740b1 100644
--- a/index.html
+++ b/index.html
@@ -19,12 +19,16 @@
 				border-image-slice: 1
 			}
 
-			col-lg-3 > h2 {
-				margin-top: 10px;
+			.btn-margin-left {
+				margin-left:2rem
 			}
 
-			.btn-margin-left {
-				margin-left:4rem
+			.padding-top {
+				margin-top: 1rem;
+			}
+
+			.padding-bottom {
+				margin-bottom: 2rem;
 			}
 
 		</style>
@@ -75,7 +79,7 @@
 			<div class="py-5">
 			<div class="container">
 				<div class="py-lg-5">
-				<h1>Nous</h1>
+				<h1 class="padding-bottom">Nous</h1>
 					In publishing and graphic design, Lorem ipsum is a
 					placeholder text commonly used to demonstrate the visual
 					form of a document or a typeface without relying on
@@ -117,14 +121,14 @@
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Diffusion du savoir</h2>
+						<h2 class="padding-top">Diffusion du savoir</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Accès à Internet</h2>
+						<h2 class="padding-top">Accès à Internet</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
@@ -132,14 +136,14 @@
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Services web</h2>
+						<h2 class="padding-top">Services web</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Évenementiel</h2>
+						<h2 class="padding-top">Évenementiel</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
@@ -155,7 +159,7 @@
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Contact</h2>
+						<h2 class="padding-top">Contact</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 						
@@ -163,7 +167,7 @@
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Inscription</h2>
+						<h2 class="padding-top">Inscription</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
@@ -171,14 +175,14 @@
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>Connexion</h2>
+						<h2 class="padding-top">Connexion</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
 					<div class="col-lg-3 text-center">
 						<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
 
-						<h2>En savoir plus</h2>
+						<h2 class="padding-top">En savoir plus</h2>
 						<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
 						<p><a class="btn btn-secondary" href="#">View details »</a></p>
 					</div>
@@ -189,7 +193,7 @@
 		<div class="py-5 bg-light">
 			<div class="container">
 				<div class="py-lg-5">
-				<h1>Envie de participer</h1>
+				<h1 class="padding-bottom">Envie de participer</h1>
 					In publishing and graphic design, Lorem ipsum is a
 					placeholder text commonly used to demonstrate the visual
 					form of a document or a typeface without relying on