FalloutSite/index.html at main · FlorentHosteur/FalloutSite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="./styles/main.css" rel="stylesheet"/>
    <title>Fallout - Biography</title>
</head>
<body>

<header class="page-head">

    <a class="logo container" href="index.html">
        <img alt="band logo" src="./assets/Logo/Fallout-final-logo-2014-inv.png" width="120px">
    </a>
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__item active"><a class="nav__link" href="#">Biography</a></li>
            <li class="nav__item inactive "><a class="nav__link" href="/pages/shows.html">Shows</a></li>
        </ul>
    </nav>

</header>
<main>
    <section class="banner">
        <h1 class="banner__text container">Fallout</h1>
    </section>

    <section class="about container">
        <h2 class="about__header">About The Musicians</h2>

        <img alt="singer" class="about__img secondcontainer" src="./assets/Images/singer3.jpg">

        <article>
            <h3 class="about__top secondcontainer">
                <br>Fallout</br> French Metal Band
            </h3>
            <h3 class="about__bottom secondcontainer">Fallout</h3>
            <div class="about__content secondcontainer">
                <p class="about__first">
                    Bienvenue dans l'univers post-apocalyptique de Fallout, le groupe de post nuclear death metal originaire d'Aix-en-Provence !
                    Notre musique est inspirée par des groupes tels que Carcass, Samaël et Six Feet Under, et d'autres groupes de metal extrême, parfois teintée d’une dose de Ministry.
                    Nous aimons expérimenter avec différents styles pour créer un son unique et brut qui, avec des titres comme « Dead Planet » ou « One Second Holocaust »,
                    transporte l'auditeur dans un monde post-apocalyptique qui laisse peu de place à l’espoir mais avec un second degré toujours présent et absolument assumé comme dans « Inside Trump » ou « A Prophet to Tell the Truth. »
                    Nous sommes un groupe de musique passionné et dédié, formé en 2012 par quatre amis d’enfance. Florent et Morgan à la guitare, David à la basse et Aurélien au chant. À l'époque,
                     nous n'avions pas de batteur, mais en 2014, Gaëtan a rejoint le groupe pour donner une nouvelle dimension à notre son.
                    Puis Gaëtan a stoppé son voyage musical et quitté le groupe en 2020.
                    Nous n'avons cessé d'écrire de la musique et nous produire en concert à l'occasion.
                    Depuis, nous travaillons sur un nouvel EP de 5 titres à la boite à rythme comme à nos débuts.
                </p>
                <p class="about__second">
                    Début 2023, Julien nous a rejoint à la batterie pour que le groupe soit à nouveau au complet et enflamme de nouvelles scènes.
                    Notre scénographie est soigneusement travaillée pour créer une expérience visuelle et sonore immersive pour notre public.
                    Nous sommes fiers de notre premier EP intitulé Post Nuclear Gods, qui comprend 7 titres enregistrés à l'été 2016 au THD Studio - pochette dessinée par Augustin.
                    Nous jouons pour la scène et pour partager des expériences fortes avec notre public, qu'il y ait 5 ou 150 personnes dans la salle.
                </br>
                    Nous sommes impatients de vous entraîner dans notre univers post-apocalyptique lors de nos prochains concerts.
                </p>
            </div>
        </article>
    </section>
    <div class="gallery">
        <section class="container">
            <h2 class="gallery__header">Photo Gallery</h2>
            <div class="gallery__imgs">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-1.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-2.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-3.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-4.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-5.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-6.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-7.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-8.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-9.jpg">
            </div>
        </section>
    </div>
</main>
<footer class="footer">
    <section class="footer__top container">
        <h2 class="footer__head">Get In Touch</h2>
        <section class="footer__icons">
            <a href="https://www.facebook.com/fallout.metal.band"><img class="footer__icon" alt="facebook" src="./assets/Icons/SVG/Icon-facebook.svg"></a>
        </section>
        <div class="footer__logo">
            <img alt="logo" class="footer__brand" src="./assets/Logo/Logo-bandsite.svg">
        </div>
    </section>
    <section class="footer__content container">
        <div class="contactinfo ">
            <p class="contactinfo__name">Fallout</p>
            <p class="contactinfo__email"><a href="mailto:falloutmetalband@gmail.com">falloutmetalband@gmail.com</a></p>
        </div>
    </section>
    <div class="footer__copyright container">
        Copyright Fallout © 2023 All Rights Reserved
    </div>

</footer>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./scripts/index-page.js"></script>
</body>
</html>