-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
171 lines (162 loc) · 7.15 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="site.css" />
<title>La Dame Du Plateau - Calibri Compagnie</title>
<meta name="description" content="La Dame Du Plateau, pièce de théâtre tragique et légèrement futuriste,
est mise en scène par Pierre Sanchis et présentée par la Calibri Compagnie." />
<link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
</head>
<body>
<header>
<div id="banner">
<img src="images/logo.png" id="logo" />
<img src="images/Banner.png" />
<div></div>
</div>
<nav id="select">
<ul>
<li class="button buttonActive" id="homeButton" onclick="ChooseTab('home')">
Accueil
</li>
<li class="button" id="resumeButton" onclick="ChooseTab('resume')">
Présentation
</li>
<li class="button" id="teamButton" onclick="ChooseTab('team')">
L'Équipe
</li>
<li class="button" id="contactButton" onclick="ChooseTab('contact')">
Contact
</li>
</ul>
</nav>
</header>
<div id="contenu">
<a id="submit" target="blank" href="https://calibricompagnie.s2.yapla.com/fr/event-13633">Réservez votre place !</a>
<section>
<div id="tabcontent">
<div id="home" class="tab tab-active">
<div id="flexcontainer">
<div class="imgcontainer">
<img src="images/Flyer.png" alt="Affiche du spectacle" title="Affiche" />
</div>
<aside>
<h2>La Dame Du Plateau, présentée par la <strong>Calibri Compagnie</strong></h2>
<p>
Dans une ère de révolution industrielle où la technologie s'est développée très vite, Henri souhaite
s'acheter
un humanoïde, une créature façonnée de toute pièce destinée à faire les tâches ménagères. Mais son ami
Bernard
n'est pas du même avis, surtout lorsque Henri décide de façonner le visage de celle-ci avec les traits
d'une
amie lointaine qui semble avoir vécu quelque chose que seul nos deux hommes connaissent. Mais que
cachent
les
deux protagonistes ? Pourquoi l'humanoïde ravive-t-elle autant de souvenirs ?
</p>
</aside>
</div>
</div>
<div id="resume" class="tab" hidden>
<h2>La Dame Du Plateau</h2>
<p>
[Résumé de la pièce]
<br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam
dolorem perspiciatis odio ipsa illum vitae non quos dicta
dignissimos, recusandae vero et a facilis voluptatum ad, dolore
voluptates porro blanditiis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis atque id ab suscipit tempora molestiae a
nobis iste velit nesciunt illo totam doloremque similique dolor, aspernatur adipisci quia odit hic? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Eum debitis vero voluptas doloremque alias saepe sapiente
laboriosam illo soluta natus velit asperiores facere placeat omnis excepturi, autem, provident
exercitationem dolor. Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati voluptatibus in
veritatis blanditiis natus laudantium reiciendis nisi unde, officiis recusandae, quis quas vero dolor at.
Sunt nostrum animi hic similique. Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident sunt
accusamus voluptatibus voluptas eligendi, molestiae dolor totam, optio blanditiis ab est veritatis iure quos
ipsa, perferendis sapiente? A, maxime ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Atque odio blanditiis cupiditate beatae, cum rem reiciendis totam reprehenderit excepturi, distinctio
dolorum necessitatibus veritatis, laborum et id culpa officia accusamus ad.
</p>
</div>
<div id="team" class="tab" hidden>
<table>
<tr>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
</tr>
<tr>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
<td>
<img src="./images/comediens/anonyme.jpeg" alt="Un comédien anonyme" title="Un comédien anonyme" />
<h3>John Smith</h3>
<p><em>Etudiant troubadour</em></p>
</td>
</tr>
</table>
</div>
<div id="contact" class="tab" hidden>
<h2>Nous Contacter :</h2>
<p>Nous envoyer un mail : <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</section>
</div>
<footer>
<p>Calibri Compagnie 2020 - Tous Droits Réservés</p>
</footer>
</body>
</html>
<script>
function ChooseTab(name) {
var tab = document.getElementById(name);
var activeTab = document.querySelectorAll(".tab-active");
var button = document.getElementById(`${name}Button`)
var activeButton = document.querySelector(".buttonActive")
if (activeTab[0] != tab) {
activeTab.forEach(actTab => {
actTab.className = "tab";
actTab.hidden = true;
});
tab.className = "tab-active";
tab.hidden = false;
activeButton.className = "button"
button.className += " buttonActive"
}
}
</script>