-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
150 lines (139 loc) · 7.95 KB
/
Copy pathindex.html
File metadata and controls
150 lines (139 loc) · 7.95 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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="#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>
<div class="image-container">
<div class="slideshow">
<h1 class="title">BATROX2K</h1>
<div id="customCursor"></div>
<img src="IMG2/1.jpg" alt="Image 1">
<img src="IMG2/2.jpg" alt="Image 2">
<img src="IMG2/3.jpg" alt="Image 3">
<img src="IMG2/4.jpg" alt="Image 4">
<img src="IMG2/5.jpg" alt="Image 5">
<img src="IMG2/9.jpg" alt="Image 6">
<img src="IMG2/13.jpg" alt="Image 7">
<img src="IMG2/22.jpg" alt="Image 8">
<img src="IMG2/18.jpg" alt="Image 11">
<img src="IMG2/10.jpg" alt="Image 12">
<img src="IMG2/16.jpg" alt="Image 13">
<img src="IMG2/20.jpg" alt="Image 15">
<img src="IMG2/15.jpg" alt="Image 16">
<img src="IMG2/19.jpg" alt="Image 18">
<img src="IMG2/24.jpg" alt="Image 19">
<img src="IMG2/40.jpg" alt="Image 21">
<img src="IMG2/28.jpg" alt="Image 22">
<img src="IMG2/38.jpg" alt="Image 24">
<img src="IMG2/29.jpg" alt="Image 27">
<img src="IMG2/25.jpg" alt="Image 28">
<img src="IMG2/34.jpg" alt="Image 30">
<img src="IMG2/32.jpg" alt="Image 31">
<img src="IMG2/31.jpg" alt="Image 32">
<img src="IMG2/12.jpg" alt="Image 36">
<img src="IMG2/8.jpg" alt="Image 38">
<img src="IMG2/7.jpg" alt="Image 39">
<img src="IMG2/6.jpg" alt="Image 40">
</div>
</div>
<div class="blocks-container">
<!-- Bloc 1: Editions -->
<a href="editions.html" target="_blank">
<div class="block" id="block-editions">
<div class="block-text">Editions</div>
<div class="image-slider">
<div class="overlay"></div> <!-- Film jaune -->
<div class="text-overlay">
Éditions : <br class="custom-break">
Cet onglet regroupe toutes les éditons et projets éditoriaux que j'ai pu faire. Du coffret d'artiste à la simple édition photo, on peut y retrouver tout types d'éditons et de reliures.
</div> <!-- Texte à afficher sur le survol -->
<img src="IMG2/P1000227.jpg" alt="Edition 1" class="image-slide">
<img src="IMG2/24.jpg" alt="Edition 2" class="image-slide">
<img src="IMG2/26.jpg" alt="Edition 3" class="image-slide">
<div class="text-base">Éditions</div> <!-- Texte visible en permanence -->
</div>
</div>
</a>
<!-- Bloc 2: Affiches -->
<a href="affiches.html" target="_blank">
<div class="block" id="block-affiches">
<div class="block-text">Affiches</div>
<div class="image-slider">
<img src="IMG2/13.jpg" alt="Affiche 1" class="image-slide">
<img src="IMG2/16.jpg" alt="Affiche 2" class="image-slide">
<img src="IMG2/15.jpg" alt="Affiche 3" class="image-slide">
<div class="text-base">Affiches</div> <!-- Texte visible en permanence -->
<div class="overlay"></div> <!-- Film jaune -->
<div class="text-overlay">
Affiches : <br class="custom-break">
Ici se trouve les affiches que j'ai pu faire pour des événements, ou pour des projets scolaires.
</div> <!-- Texte à afficher sur le survol -->
</div>
</div>
</a>
<!-- Bloc 3: Volumes -->
<a href="typogrpahie.html" target="_blank">
<div class="block" id="block-volumes">
<div class="block-text">Typographie</div>
<div class="image-slider">
<img src="IMG2/1.jpg" alt="Volume 1" class="image-slide">
<img src="IMG2/10.jpg" alt="Volume 2" class="image-slide">
<img src="IMG2/5.jpg" alt="Volume 3" class="image-slide">
<div class="text-base">Typographie</div> <!-- Texte visible en permanence -->
<div class="overlay"></div> <!-- Film jaune -->
<div class="text-overlay">
Typographie : <br class="custom-break">
Les projets typographiques que j'ai pu expérimentés sont regroupés ici, du spéciemen, au magasine typographique on retrouve plusieurs type de supports.
</div> <!-- Texte à afficher sur le survol -->
</div>
</div>
</a>
<!-- Bloc 4: Autres -->
<a href="autres.html" target="_blank">
<div class="block" id="block-autres">
<div class="block-text">Autres</div>
<div class="image-slider">
<img src="IMG2/37_-.jpg" alt="Autre 1" class="image-slide">
<img src="IMG2/28.jpg" alt="Autre 2" class="image-slide">
<img src="IMG2/29.jpg" alt="Autre 3" class="image-slide">
<div class="text-base">Autres</div> <!-- Texte visible en permanence -->
<div class="overlay"></div> <!-- Film jaune -->
<div class="text-overlay">
Autres : <br class="custom-break">
Ici, il y a tout le reste, création d'objets, photos, courts métrage, dessin...
</div> <!-- Texte à afficher sur le survol -->
</div>
</div>
</div>
</a>
<div id="introText">
<strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE. <strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE. <strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE. <strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE.<strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE. <strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE. <strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE. <strong>● I'M A GRAPHIC DESIGN STUDENT AT ESAD IN AMIENS. FOR ME, ART IS AN EXCUSE TO PRODUCE AND SHOW MY OWN UNIVERSE.<strong>
</div>
<main>
<section>
<h2></h2>
<section id="apropos">
<h2>À propos</h2>
<p>Je suis étudiant à l'École Supérieur d'Art et de Design d'Amiens en 2ème année. Durant ce cursus, j'ai pu apprendre et développer ma vision de l'art. Cette formation m'a permis d'acquérir une polyvalence dans l'art numérique et manuel. Je suis curieux et ouvert à la découverte de nouvelles choses, de différentes façons de travailler et de développer ma vision artistique. Je suis spécilisé dans le Design Graphic, mais également dans la photo et la vidéo.
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>