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
| <!DOCTYPE html>
<html>
<head>
<title>Duo Impair</title>
<link rel="icon" type="image/x-icon" href="images/favimpair.png">
<meta charset="UTF-8" />
<meta name="Author" content="Duo Impair">
<meta name="Description" content="Duo Impair, french graphic design studio.">
<meta name="Keywords" content="Graphic Design, Art Direction, Typography, Research, Photography">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' id='style-css' href='styles/style.css' type='text/css' media='all' />
</head>
<body>
<!--------------------------------------------- Haut de Page --------------------------------------------->
<header role="header">
<nav class="menu" role="sections">
<div clas="inner">
<div class="m-left">
<h1 class="logo">DUO IMPAIR   Graphic Design Studio</h1>
</div>
<div class="m-right">
<a href="index.html" class="m-link" style="color: blue">Projects</a>
<a href="info.html" class="m-link">About</a>
</div>
</div>
</header>
<!--------------------------------------------- Images et légendes --------------------------------------------->
<div class="row">
<div class="column">
<img class="carrousel" src="images/Image1.jpg" width="400" height="auto" />
<div></div>
</div>
<div class="column">
<img class="carrousel" src="images/Images2.jpg" width="400" height="auto" />
<div></div>
</div>
</div>
<div>
<a class="prev arrow"></a>
<a class="next arrow"></a>
</div>
<!--------------------------------------------- Script --------------------------------------------->
<script>
const slides = [
{ nameimg: "HutteSite1.jpg", info: "<p>Hutte Mono (Regular & Swash), Type Design, 2023.</br>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</p>" },
{ nameimg: "HutteSite2.jpg", info: "<p>Hutte Mono (Regular & Swash), Type Design, 2023.</br>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</p>" },
{ nameimg: "Bushel3.jpg", info: "<p>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]<br/>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</p>" },
{ nameimg: "Bushel4.jpg", info: "<p>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]<br/>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</p>" },
{ nameimg: "SupaVenezia1.jpg", info: "<p>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]<br/>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</p>" },
{ nameimg: "SupaVenezia2.jpg", info: "<p>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]<br/>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</p>" }
]
let arrows = document.querySelectorAll('.arrow'),
imgA = document.getElementsByClassName("carrousel")[0],
imgB = document.getElementsByClassName("carrousel")[1],
i = 0
function actualisation() {
imgA.src = `images/${slides[i].nameimg}`
imgA.nextElementSibling.innerHTML = slides[i].info
if (!window.matchMedia("(max-width: 960px)").matches) {
if (i + 1 >= slides.length) i -= 1
imgB.parentElement.style.display = "block"
imgB.src = `images/${slides[i + 1].nameimg}`
imgB.nextElementSibling.innerHTML = slides[i + 1].info
} else {
imgB.parentElement.style.display = "none"
}
}
for (const arrowSelect of arrows) {
arrowSelect.addEventListener("click", () => {
let ii
// ici une condition if else ('?' -> 'alors' et ':' -> 'sinon')
// Si matches -> ii = 1 sinon ii = 2
window.matchMedia("(max-width: 960px)").matches ? ii = 1 : ii = 2
arrowSelect.classList.contains('prev') == true ? slides[i - ii] ? i -= ii : i = slides.length - ii : slides[i + ii] ? i += ii : i = 0
actualisation()
})
}
window.onresize = actualisation;
actualisation()
</script>
</body>
</html> |
Police non prise en compte
Répondre avec citation
Envoyé par ASCIIDEFOND
... il serait bon de ne pas tout mélanger 
Partager