More space under h1/H2

This commit is contained in:
otthorn 2021-05-23 18:33:53 +02:00
parent 18f475a9c5
commit d50e6e0f4b

View file

@ -19,12 +19,16 @@
border-image-slice: 1 border-image-slice: 1
} }
col-lg-3 > h2 { .btn-margin-left {
margin-top: 10px; margin-left:2rem
} }
.btn-margin-left { .padding-top {
margin-left:4rem margin-top: 1rem;
}
.padding-bottom {
margin-bottom: 2rem;
} }
</style> </style>
@ -75,7 +79,7 @@
<div class="py-5"> <div class="py-5">
<div class="container"> <div class="container">
<div class="py-lg-5"> <div class="py-lg-5">
<h1>Nous</h1> <h1 class="padding-bottom">Nous</h1>
In publishing and graphic design, Lorem ipsum is a In publishing and graphic design, Lorem ipsum is a
placeholder text commonly used to demonstrate the visual placeholder text commonly used to demonstrate the visual
form of a document or a typeface without relying on form of a document or a typeface without relying on
@ -117,14 +121,14 @@
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
@ -132,14 +136,14 @@
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
@ -155,7 +159,7 @@
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
@ -163,7 +167,7 @@
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
@ -171,14 +175,14 @@
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
<div class="col-lg-3 text-center"> <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> <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>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> <p><a class="btn btn-secondary" href="#">View details »</a></p>
</div> </div>
@ -189,7 +193,7 @@
<div class="py-5 bg-light"> <div class="py-5 bg-light">
<div class="container"> <div class="container">
<div class="py-lg-5"> <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 In publishing and graphic design, Lorem ipsum is a
placeholder text commonly used to demonstrate the visual placeholder text commonly used to demonstrate the visual
form of a document or a typeface without relying on form of a document or a typeface without relying on