batrox2k.github.io/route.html at main · Batrox2k/batrox2k.github.io · 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
<!DOCTYPE html>
<html lang="fr">
<head>


<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ROUTE</title>
  <link rel="stylesheet" href="atw.css">
</head>
<body>

    <header></header>
        <nav>
            <ul>
                <li><a href="index.html" class="nav-link"><span class="circle"></span> Home</a></li>
                <li><a href="editions.html" class="nav-link"><span class="circle"></span> Éditions</a></li>
                <li><a href="affiches.html" class="nav-link"><span class="circle"></span> Affiches</a></li>
                <li><a href="typogrpahie.html" class="nav-link"><span class="circle"></span> Typographie</a></li>
                <li><a href="autres.html" class="nav-link"><span class="circle"></span> Autres</a></li>
                <li><a href="index.html#apropos" class="nav-link"><span class="circle"></span> À propos</a></li>
                <li><a href="contact.html" class="nav-link"><span class="circle"></span> Contact</a></li>
            </ul>
        </nav>
    </header>


  <!-- Conteneur principal -->
  <div class="gallery-container">
    <!-- Flèche gauche -->
    <div class="arrow left" onclick="moveLeft()">&lt;</div>

    <!-- Zone des images -->
    <div class="gallery">
      <!-- Grosse image -->
      <div class="large-image">
        <img id="main-image" src="IMG2/IMG_8183.JPG" alt="Large Image">
      </div>

      <!-- Images secondaires -->
      <div class="small-images">
        <img class="small-image" src="IMG2/IMG_8180.JPG" alt="Small Image 1">
        <img class="small-image" src="IMG2/7.jpg" alt="Small Image 2">
        <img class="small-image" src="IMG2/PLANCH2.jpg" alt="Small Image 3">
      </div>
    </div>

    <!-- Flèche droite -->
    <div class="arrow right" onclick="moveRight()">&gt;</div>
  </div>

  <!-- Liste d'informations -->
  <div class="project-details">
    <h2>ROUTE</h2>
    <ul>
      <li><strong>Matière :</strong> Photography</li>
      <li><strong>Projet :</strong> After/Before</li>
      <li><strong>Date :</strong> Mai 2024</li>
    </ul>
  </div>

  <main>
    <section>
        <h2></h2>
<section id="apropos">
    <h2>Description :</h2>
    <p>After/Before est un sujet photo libre avec une seule contrainte. parallèle du moment ou on se sent le plus vivre selon moi, derrière un volant, ici le Drift. Avec comme parallèle une de ses finalités : la mort. J’ai donc été dans un cimetière, qui se présente comme un parc. Ce qui amène un contraste entre la pratique du Takeover (Drift autour des gens de façon illégal) qui est agressive et qui peut amener une peur, alors que le cimetière est le calme qui règne après cela, après ce déchainement sonore et visuel qu’est le drift.

    </p>
</section>
</main>

  <!-- Footer -->
  <footer>
    <p>
      Ce projet a été réaliser à l'École Supérieur d'Art et de Design d'Amiens dans le cadre du cours de Photographie de première année diriger par David Rosenfeld.
    </p>
  </footer>

  <script src="atw.js"></script>
</body>
</html>