superpositions/index.html at main · AtelierNum/superpositions · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Superpositions</title>
    <!-- Google Fonts - Montserrat -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1 class="red-title">SUPERPOSITION(s)</h1>
        <p> Ce projet a été créé en 2024 pour le cours "Réalités et Représentation" en graphisme 3ème année.</p>
        <p> Partagez votre parcours et vos découvertes sur les réseaux sociaux en utilisant la mention
            @ateliernum et les hashtags #superpositions #arjs #aframe</p>
        <h2 class="red-title">Les projets</h2>
    </header>

    <main>
        <section>
            <h3 class="red-title">En descente</h3>
            <div class="card-container">
                <a href="#" class="card">
                    <img src="./Projet_ApresNousLeSilence/192509_I complet Ju.jpg" alt="Image du projet Après nous le silence">
                    <div class="card-content">
                        <h2 class="red-title">Après nous le silence</h2>
                        <p>Plonger dans un monde où l’activité humaine a détruit tout ce que la nature avait a offrir.
                            L’industrie, la pollution, les traitements chimiques ont ravagé la nature pourtant si paisible.
                            Cette exposition vous propose de plonger dans une réalité qui pourrait être la notre.</p>
                        <p class="project-info"><i>Exposition dystopique créé par Lou-Anne Pettenati, Lorène Toubeaux et Justine Némès.
                                Projet de réalité augmentée, janvier 2025, Graphisme 3ème année.</i></p>
                        <button class="launch-button" onclick="openNewPage('./Projet_ApresNousLeSilence/index.html')">Launch Experiment</button>
                    </div>
                </a>
            </div>
        </section>

        <section>
            <h3 class="red-title">En montée</h3>
            <div class="card-container">
                <a href="#" class="card">
                    <img src="./Projet_LeSecretDeLycaon/192270_fond-pres.jpg" alt="Image du projet Le Secret de Lycaon">
                    <div class="card-content">
                        <h2 class="red-title">Le Secret de Lycaon</h2>
                        <p>Voyagez en Grèce Antique pour résoudre le mystère qui plane sur Lycaon et sa famille.
                            À deux, suivez Etra, votre guide, en rassemblant les indices pour révéler la vérité.
                            Le secret de Lycaon est un jeu d’enquête immersif, qui nécessite deux joueurs.
                            Ces derniers doivent communiquer et croiser les éléments de l’enquête, découverts par chacun au fil
                            de l’histoire</p>
                        <p class="project-info"><i>Projet créé par Keziah Camy-Portenabe, Cylian Guibert et Emy Morel, janvier 2025, Graphisme 3ème
                                année.</i></p>
                         <button class="launch-button" onclick="openNewPage('./Projet_LeSecretDeLycaon/index.html')">Launch Experiment</button>
                    </div>
                </a>

                <a href="#" class="card">
                    <img src="./Projet_UneHistoire/192294_visuel pre╠üsentation.jpg" alt="Image du projet Une histoire ...">
                    <div class="card-content">
                        <h2 class="red-title">Une histoire ...</h2>
                        <p>Au fil du parcours, laissez-vous guider par ces indices visuels et sensoriels. Observez, associez, devinez, une histoire que vous connaissez surement traverse cette exposition.
                            À mi-chemin, tout va s’éclairer et vous découvrirez la révélation.
                            Mais l’expérience ne s’arrête pas là. Entre parallaxe et pop art, la deuxième partie vous invite à redécouvrir cet univers sous un tout nouvel angle.
                            Ouvrez grand les yeux et laissez-vous surprendre.</p>
                        <p class="project-info"><i>Projet créé par Marie Dassonneville, Alice Sauvetre et Charlotte Seyeux, janvier 2025, Graphisme 3ème
                                année.</i></p>
                         <button class="launch-button" onclick="openNewPage('./Projet_UneHistoire/index.html')">Launch Experiment</button>
                    </div>
                </a>

                <a href="#" class="card">
                    <img src="./Projet_LExtinctionDuSoleil/192243_imagepr├®sentationGroupe2.jpg" alt="Image du projet L'extinction du soleil">
                    <div class="card-content">
                        <h2 class="red-title">L'extinction du soleil</h2>
                        <p>Le scientifique Docteur Strauss cause l'extinction du soleil, par ses recherches et expériences scientifiques, cherchant à récupérer son énergie nucléaire.
                            Le scientifique a accéléré malgré lui l'extinction de la vie humaine sur terre. Nous arrivons en 2025 dans sa maison désaffectée et découvrons comment la
                            flore et la faune se sont adaptées à la vie plongée dans le noir. </p>
                        <p class="project-info"><i>Projet créé par Marion Launay, Jeanne Launay, Solène Le Corfec et Léna Pigeard, janvier 2025, Graphisme 3ème
                                année.</i></p>
                        <button class="launch-button" onclick="openNewPage('./Projet_LExtinctionDuSoleil/index.html')">Launch Experiment</button>
                    </div>
                </a>
            </div>
        </section>
    </main>


    <script>
        function openNewPage(pageURL) {
            window.open(pageURL, '_blank').focus(); // Open in a new tab/window and focus it
        }
    </script>
</body>

</html>