batrox2k.github.io/typomag.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
<!DOCTYPE html>
<html lang="fr">
<head>


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

    <header></header>
        <nav>
            <ul>
                <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_8110.JPG" alt="Large Image">
      </div>

      <!-- Images secondaires -->
      <div class="small-images">
        <img class="small-image" src="IMG2/IMG_8137.JPG" alt="Small Image 1">
        <img class="small-image" src="IMG2/PLANCHE 2-1.jpg" alt="Small Image 2">
        <img class="small-image" src="IMG2/PLANHCE 5-1.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>360 Mag Vol.1 : Integra Type-R DC2</h2>
    <ul>
      <li><strong>Matière :</strong> Typographie</li>
      <li><strong>Projet :</strong> Typographie Mag</li>
      <li><strong>Date :</strong> Juin 2024</li>
    </ul>
  </div>

  <main>
    <section>
        <h2></h2>
<section id="apropos">
    <h2>Description :</h2>
    <p>Ce magasine typographique est le premier volet d’une série de magasine centré sur une voiture des années 90. Ce premier volet lui, est centré sur l’Honda Integra Type R. Le texte, la plupart des photos, les interviews… Ont toutes été réalisé par moi même. Il casse les codes des revues automobiles classiques en y intégrant des jeux typographiques. Le sujet de ce projet été libre, la seule contrainte était de faire un magasine quel qu’il soit et qu’il respecte des normes typographiques. Ce sujet avait pour but de nous introduire les contraintes typographiques auxquels nous sommes constamment confronté.

    </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 Typographie de première année diriger par Éloisa Perez.
    </p>
  </footer>

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