Start About Us Section

Structure
This commit is contained in:
Massimo Di Lullo 2019-06-20 12:45:38 -04:00
parent a76fbeaab4
commit 819bbf29cf
6 changed files with 51 additions and 2 deletions

File diff suppressed because one or more lines are too long

BIN
public/img/learn.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/img/medal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/img/remote.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -36,6 +36,12 @@ header.logo-container {
section {
h2 {
font-size: 3rem;
font-weight: bold;
}
h3 {
font-size: 2rem;
font-weight: bold;
}
}
@ -68,6 +74,22 @@ section#splashscreen {
}
}
section#apropos {
padding: 40px 50px;
* {
text-align: center;
}
.columns {
margin-top: 50px;
img.is-quarter {
width: 25%;
}
}
}
section#activites {
height: 200vh;
padding: 0;

View File

@ -54,7 +54,34 @@
<div class="border-seperator"></div>
</div>
</section>
<section class="section" id="apropos"></section>
<section class="section" id="apropos">
<h2>Qui sommes-nous ?</h2>
<div class="columns is-centered is-vcentered">
<div class="column is-one-third-tablet is-full-mobile">
<img class="is-quarter" src="../../public/img/learn.png" alt="Apprendre">
<h3>Apprendre</h3>
<p></p>
</div>
<div class="column is-one-third-tablet is-full-mobile">
<img class="is-quarter" src="../../public/img/remote.png" alt="Équippement">
<h3>Équippement</h3>
<p></p>
</div>
<div class="column is-one-third-tablet is-full-mobile">
<img class="is-quarter" src="../../public/img/medal.png" alt="Compétitions">
<h3>Compétitions</h3>
<p></p>
</div>
</div>
<div class="columns is-centered is-vcentered">
<div class="column is-half-tablet is-full-mobile">
<h3>Contactez-nous</h3>
</div>
<div class="column is-half-tablet is-full-mobile">
<h3>Membres</h3>
</div>
</div>
</section>
<section class="section" id="activites">
<div class="full-height full-width columns is-full sub-section">
<div class="bg-img gala-img full-height full-width"></div>