diff options
| -rw-r--r-- | src/component/ImageBackground.astro | 0 | ||||
| -rw-r--r-- | src/pages/index.astro | 26 | ||||
| -rw-r--r-- | src/scss/style.scss | 40 |
3 files changed, 61 insertions, 5 deletions
diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/component/ImageBackground.astro diff --git a/src/pages/index.astro b/src/pages/index.astro index a0ff658..ea79d11 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,6 @@ --- import "../scss/style.scss"; +import ImageBackground from "../component/ImageBackground.astro"; --- <html lang="fr"> @@ -26,4 +27,29 @@ import "../scss/style.scss"; </div> </header> </body> + <main> + <article class="batteur"> + <ImageBackground /> + <div class="content"> + <div class="content__header"> + <h2>Batteur</h2> + <h3>Studio & Live</h3> + </div> + <p> + A tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans + que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos + séances des meilleures « rythmiques » possibles. + </p> + <p> + Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de + mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et + festivals et des dizaines de titres déjà enregistrés en studio. + </p> + <p> + Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques ou + enregistrés. Contactez-moi pour en parler ! + </p> + </div> + </article> + </main> </html> diff --git a/src/scss/style.scss b/src/scss/style.scss index 42f5727..060fc28 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,28 +1,33 @@ @use "reset"; body { - font-size: 24px; + font-size: 22px; font-family: sans-serif; } h1 { - font-size: 3rem; + font-size: 3em; font-weight: bold; margin-bottom: 1rem; font-family: serif; } h2 { - font-size: 2rem; + font-size: 2em; font-weight: bold; + margin-bottom: 1rem; } h3 { - font-size: 1.5rem; + font-size: 1.5em; } h4 { - font-size: 1.25rem; + font-size: 1.25em; +} + +p { + line-height: 1.15em; } header { @@ -40,3 +45,28 @@ header { gap: 1rem; font-size: 1.75rem; } + +article { + min-height: 100vh; +} + +.content { + position: relative; + display: flex; + flex-direction: column; + gap: 1rem; + background: black; + color: white; + max-width: 800px; + margin: auto; + padding: 2rem; + + &__header { + text-align: center; + margin-bottom: 2rem; + + &:last-child { + margin-bottom: 0; + } + } +} |