-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (126 loc) · 6.84 KB
/
index.html
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/ico" href="../assets/logo/logo.ico">
<link rel="stylesheet" href="./src/styles/knacss.css">
<link rel="stylesheet" href="./src/styles/style.css">
<title>CCH - Home</title>
</head>
<body>
<header>
<a href=".">
<h1 id="logo-title">
<img id="logo-img" src="./assets/logo/logo-light.svg" alt="Ching Chong Store">
</h1>
</a>
<div id="hamburger-container">
<!-- With JS, I could use aria-expended to enhance accessibility. -->
<input type="checkbox" id="toggle-nav" aria-label="toggle navigation" aria-controls="toggle-nav">
<label id="hamburger-label" aria-hidden="true" for="toggle-nav">
<svg id="hamburger-img" width="32" height="32" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="hamburger-line" d="M6 22L34.5 22" stroke="black" stroke-width="4" stroke-linecap="round"/>
<path class="hamburger-line" d="M6 8C15.6297 8.05451 33.4991 8 34.7097 8C36.068 8 35.9952 8.20351 35.9952 9.2647C36.006 18.6857 35.9952 33.1463 35.9952 34.3647C35.9952 34.9099 34.7496 35.2331 34.2812 34.797L6 9.2647" stroke="black" stroke-width="4" stroke-linecap="round"/>
<path class="hamburger-line" d="M6 35C15.6297 34.9455 33.4991 35 34.7097 35C36.068 35 35.9952 34.7965 35.9952 33.7353C36.006 24.3143 35.9952 9.85372 35.9952 8.63526C35.9952 8.09013 34.7496 7.76695 34.2812 8.20305L6 33.7353" stroke="black" stroke-width="4" stroke-linecap="round"/>
</svg>
</label>
<nav>
<ol id="nav-list">
<li class="nav-li">
<a href=".">home</a>
</li>
<li class="nav-li">
<a href="./src/pages/collections.html">collections</a>
</li>
<li class="nav-li">
<a href="./src/pages/history.html">historique</a>
</li>
<li class="nav-li">
<a href="./src/pages/about.html">à-propos</a>
</li>
</ol>
</nav>
</div>
</header>
<main>
<section id="header-hero">
<h2>le meilleur du made in china</h2>
<h3>voulez-vous en voir plus ?</h3>
<a href="#for-you-title">
<img src="./assets/home/arrow.svg" alt="flèche vers le bas">
</a>
</section>
<section id="for-you">
<h2 id="for-you-title">notre sélection, pour vous.</h2>
<ul id="for-you-list">
<li class="for-you-li">
<a href="./src/pages/collections/tnac/teddy_tnac.html">
<img src="./assets/products/teddy-tnac.jpg" alt="Un ours en peluche avec un t-shirt TNAC.">
<h3>teddy tnac</h3>
</a>
</li>
<li class="for-you-li">
<a href="./src/pages/collections/tnac/t_shirt_tnac.html">
<img src="./assets/products/t-shirt-tnac.jpg" alt="T-shirt noir qui fait de la propagande anti-Taiwan">
<h3>t-shirt tnac</h3>
</a>
</li>
<li class="for-you-li">
<a href="./src/pages/collections/bing_chilling/pillow_bc.html">
<img src="./assets/products/pillow-bc.jpg" alt="Oreiller avec un gros plan sur la tête de John Xina">
<h3>oreiller bing-chilling</h3>
</a>
</li>
<li class="for-you-li">
<a href="./src/pages/collections/quiche_mold/quiche_mold.html">
<img src="./assets/home/for-you-quiche-mold.webp" alt="Un simple moule à quiche... Rien de plus">
<h3>moule à quiche</h3>
</a>
</li>
</ul>
</section>
<section id="bing-chilling">
<div id="bing-chilling-container">
<div id="bing-chilling-infos">
<h3 id="bing-chilling-title">Collection Bing-Chilling</h3>
<p id="bing-chilling-description">Avec sa technologie Bing’N’Chilling, vous permettant de vous sentir rafraîchis peu importe la chaleur, peu importe l'habitacle. Approuvée par un laboratoire indépendant.</p>
<div class="primary-btn-container">
<a class="primary-btn" href="./src/pages/collections/bing_chilling/bing_chilling.html">Explorer la collection</a>
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lsPnp-qqqmQ?si=qjP0b77L6Tl0j3WL" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<section id="history">
<div id="history-background" role="img" aria-label="Image de fond représentant la Cité interdite"></div>
<div id="history-main-container">
<h3 id="history-title">Historique Chinois</h3>
<p id="history-text">Vous voulez connaître l’histoire de notre grande Chine, garantie 100% épique et époustouflant, voulez-vous apprendre de nouvelles choses à montrer à tous vos copains ?</p>
<div class="primary-btn-container">
<a class="primary-btn" href="./src/pages/history.html">En savoir plus</a>
</div>
</div>
</section>
<section id="collections-slider">
</section>
</main>
<footer>
<a aria-label="Charte de politique et de confidentialité" target="_blank" rel="noreferrer noopener" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Politique & Confidentialité</a>
<span>© Colle Joulian</span>
<ul>
<li>
<a aria-label="Mon profile Linkedin" target="_blank" rel="noreferrer noopener" href="https://www.linkedin.com/in/joulian-colle-84405b310/">
<img class="footer-icon" src="./assets/linkedin.svg" alt="Linkedin's logo">
</a>
</li>
<li>
<a aria-label="Mon profile Github" target="_blank" rel="noreferrer noopener" href="https://github.com/KoruJuriSan">
<img class="footer-icon" src="./assets/github.svg" alt="Github's logo">
</a>
</li>
</ul>
</footer>
</body>
</html>
<!-- Code by Colle Joulian -->