Cataclysme/index.html at main · cle0L/Cataclysme · 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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cataclysm </title>
    <!-- <meta
    name="description"
    content="Actuellement étudiant en BUT Métiers du Multimédia et de
    l'Internet (MMI) à l'IUT Bordeaux Montaigne, je crée ce portfolio
    afin de regrouper les résultats de projets réalisés dans le cadre
    de ma formation, ainsi que mes projets personnels."
    /> -->
    <link rel="shortcut icon"  type="image/webp" href="./médias/icons/logo 220 wav.svg">
    <link rel="stylesheet" href="./assets/CSS/reset.css">
    <link rel="stylesheet" href="./assets/CSS/style.css">
    <link rel="stylesheet" href="./assets/CSS/medias queries/style.css">
</head>
<body>
    <header>
        <img src="./médias/icons/logo CATACLYSM.svg" alt="logo-cataclysm" class="logo-cataclysm">
    </header>
    <main>
        <h1>cataclysme</h1>
        <section class="text">
            <p>
                Et si demain, tous les habitants de notre chère planète décidaient de ne plus trier leurs mails ? Et si la durée de vie de nos appareils électroniques s'amenuisaient de plus en plus ? Et si nous continuions à préférer le progrès à la sobriété ? Un futur ou la décroissance ne serait plus un choix est un futur dans lequel nous pourrions bien périr.
                <br><br>
                Cataclysme, c'est une websérie qui traite des conséquences de l'inaction face à l'impact écologique du numérique et de la crise climatique. Elle se projette dans des scénarios futuristes, voir même catastrophiques, afin de mettre en scène la pire version de ce qui pourrait nous arriver.
                <br><br>
                Chaque scénario catastrophe, aussi exagéré soit-il pour vous aujourd'hui, pourrait tout à fait devenir le votre demain.
            </p>
            <a href="./solutions.html"> <button>Solutions</button></a>
        </section>

        <section class="season-1">
            <a href="#">
                <button>
                    Saison 1 <img src="./médias/icons/Chevron Down.svg" alt="chevrons vers le bas">
                </button>
            </a>
            <div class="list-episode">
                <div class="episode-1">
                    <article class="video-container">
                        <a href="https://www.youtube.com/watch?v=mBdNfZlrUjc"><img src="./médias/icons/miniature_ferry.svg" alt="miniature"></a>
                        <!-- <iframe  src="https://www.youtube.com/watch?v=lz8D3VryaN0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> -->
                    </article>
                    <h3>Épisode 1 : Le ferry</h3>
                    <p>
                    </br>
                    </br>
                        Dans la France de 2050, la situation est critique ; le réchauffement climatique a fait monter le niveau de la mer de plus de 100 mètres ! C’est dans cet univers que nos trois personnages principaux, Eric, Alexandra et Lilia, vont voir leur destin se lier. Entre action et drame, nous découvrirons leur histoire à travers des appels téléphoniques et nous serons plongés dans ce monde dystopique, où l’écologie se retrouve au cœur de toutes les destinées.
                    </p>
                </div>
                <!-- <div class="episode-2">
                    <article class="video-container">
                        <iframe  src="https://www.youtube.com/embed/lz8D3VryaN0?si=QHqfI657jhCrU9IV_&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </article>
                    <p>Épisode 2 : Le ferry</p>
                </div> -->
            </div>
        </section>
        <section id="creator">
            <h3>par le studio 200.WAV <img src="./médias/icons/logo 220 wav.svg" alt="logo 220.WAV"></h3>
            <div class="links">
                <a href="https://www.linkedin.com/in/cleolaffargue/">Cléo Lafargue</a>
                <a href="https://www.linkedin.com/in/no%C3%A9mie-nunez-b4698b294/">Noémie Nunez</a>
                <a href="https://www.linkedin.com/in/na%C3%AFka-j-607778224/">Naïka Jan</a>
                <a href="https://www.linkedin.com/in/gwena%C3%ABlle-yau-chun-wan-3a3826299/">Gwenaelle Yau Chun Wan</a>
                <a href="https://www.linkedin.com/in/thomas-merlaud-857331232/">Thomas Merlaud</a>
                <a href="https://www.linkedin.com/in/edgar-quemere/">Edgar Quemere</a>
                <a href="https://www.linkedin.com/in/martin-alibert-597605252/">Martin Alibert</a>
                <a href="https://www.linkedin.com/in/mathias-petit-44a947252/">Mathias Petit</a>
                <a href="https://www.linkedin.com/in/mathis-vandewalle-a0098a252/">Mathis Vandewalle</a>
                <a href="https://www.linkedin.com/in/billel-tighidet-76b292234/">Billel Tighidet</a>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-links">
            <div class="legal">
                <a href="./legal.html">
                    <p>mentions légales</p>
                </a>
            </div>
            <div>
                <a href="https://www.youtube.com/channel/UChK7ed4-RI2BfKPjT3JRKEg" class="youtube">
                    <img src="./médias/icons/youtube icon.svg" alt="icône Youtube">
                    <p>Youtube</p>
                </a>
            </div>
        </div>
        <a href="#" class="logo-220-WAV">
            <img src="./médias/icons/logo 220 wav footer.svg" alt="logo 220.WAV">
        </a>
    </footer>
</body>
<script src="./assets/JS/script.js"></script>
</html>