Add an events.html page which lists all events.
A new button pointing to this new page was added to index.html.
This commit is contained in:
Daru13
parent
37313821e2
commit
c63562b8dc
4 changed files with 261 additions and 13 deletions
182
css/style.css
182
css/style.css
|
|
@ -62,7 +62,6 @@ a,
|
||||||
a:hover,
|
a:hover,
|
||||||
a:active,
|
a:active,
|
||||||
a:visited {
|
a:visited {
|
||||||
color: #FFAAAA;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -158,6 +157,28 @@ section h2 {
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section p {
|
||||||
|
padding: 0 0 20px 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
section p.stand-out {
|
||||||
|
font-style: italic;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .underline-links a:hover,
|
||||||
|
section .underline-links a:active {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
|
||||||
section.red h2 {
|
section.red h2 {
|
||||||
color: #EA6C61;
|
color: #EA6C61;
|
||||||
border-bottom-color: #f7cbc0;
|
border-bottom-color: #f7cbc0;
|
||||||
|
|
@ -188,18 +209,46 @@ section.pink h2 {
|
||||||
border-bottom-color: #f3cad2;
|
border-bottom-color: #f3cad2;
|
||||||
}
|
}
|
||||||
|
|
||||||
section p {
|
section.red a,
|
||||||
padding: 0 0 20px 0;
|
section.red a:hover,
|
||||||
font-size: 1rem;
|
section.red a:active,
|
||||||
|
section.red a:visited {
|
||||||
|
color: #EA6C61;
|
||||||
}
|
}
|
||||||
|
|
||||||
section strong {
|
section.orange a,
|
||||||
font-weight: 600;
|
section.orange a:hover,
|
||||||
|
section.orange a:active,
|
||||||
|
section.orange a:visited {
|
||||||
|
color: #e6a04f;
|
||||||
}
|
}
|
||||||
|
|
||||||
section p.stand-out {
|
section.green a,
|
||||||
font-style: italic;
|
section.green a:hover,
|
||||||
text-align: center;
|
section.green a:active,
|
||||||
|
section.green a:visited {
|
||||||
|
color: #5fb574;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.blue a,
|
||||||
|
section.blue a:hover,
|
||||||
|
section.blue a:active,
|
||||||
|
section.blue a:visited {
|
||||||
|
color: #2896ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.purple a,
|
||||||
|
section.purple a:hover,
|
||||||
|
section.purple a:active,
|
||||||
|
section.purple a:visited {
|
||||||
|
color: #9e60ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.pink a,
|
||||||
|
section.pink a:hover,
|
||||||
|
section.pink a:active,
|
||||||
|
section.pink a:visited {
|
||||||
|
color: #e4678c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -611,3 +660,118 @@ section.orange .button:hover {
|
||||||
|
|
||||||
color: #6B6666;
|
color: #6B6666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*--------------------------------------------------------*/
|
||||||
|
/* DESCRIPTION DES EVENEMENTS
|
||||||
|
/*--------------------------------------------------------*/
|
||||||
|
|
||||||
|
#events-toc {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 4fr;
|
||||||
|
grid-template-rows: 1.5rem 1rem 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 2;
|
||||||
|
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time {
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 1;
|
||||||
|
justify-self: end;
|
||||||
|
|
||||||
|
margin: 0 20px 0 0;
|
||||||
|
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time .start,
|
||||||
|
.event-time .end {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time .start::after {
|
||||||
|
content: "–";
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-location {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 2;
|
||||||
|
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-description {
|
||||||
|
grid-row: 3;
|
||||||
|
grid-column: 2;
|
||||||
|
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
padding: 20px 0;
|
||||||
|
line-height: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------*/
|
||||||
|
|
||||||
|
@media only screen and (max-width: 750px) {
|
||||||
|
.event {
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 650px) {
|
||||||
|
.event {
|
||||||
|
grid-template-columns: 2fr 5fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
#events-toc {
|
||||||
|
line-height: 250%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 550px) {
|
||||||
|
.event {
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.event {
|
||||||
|
grid-template-rows: 2rem 1.5rem 1rem 1fr;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time {
|
||||||
|
grid-row: 1;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-location {
|
||||||
|
grid-row: 3;
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-description {
|
||||||
|
grid-row: 4;
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
66
events.html
Normal file
66
events.html
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,">
|
||||||
|
|
||||||
|
<meta name="description" content="Les 48h des Arts 2019 — festival artistique annuel de l'Ecole normale supérieure.">
|
||||||
|
<meta name="keywords" content="ENS 48h arts 2019 école normale supérieure">
|
||||||
|
|
||||||
|
<title>Programme · Les 48h des Arts 2019</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/normalize.css">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="main-header">
|
||||||
|
<canvas id="main-header-background"></canvas>
|
||||||
|
<img id="main-header-title" src="img/header/title.svg" alt="Les 48h des Arts">
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="orange underline-links">
|
||||||
|
<p>Cette page répertorie tous les événements qui auront lieu au cours des 48h des Arts 2019. Si vous souhaitez retourner sur la page principale, <a href="index.html">cliquez ici</a>.<p>
|
||||||
|
|
||||||
|
<ul id="events-toc">
|
||||||
|
<a href="#evenements-en-continu"><li>Événements en continu</li></a>
|
||||||
|
<a href="#evenements-vendredi"><li>Événements du vendredi 3 mai</li></a>
|
||||||
|
<a href="#evenements-samedi"><li>Événements du samedi 4 mai</li></a>
|
||||||
|
<a href="#evenements-dimanche"><li>Événements du dimanche 5 mai</li></a>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="evenements-en-continu" class="orange">
|
||||||
|
<h2>En continu</h2>
|
||||||
|
|
||||||
|
<div class="event">
|
||||||
|
<h3 class="event-title"></h3>
|
||||||
|
<div class="event-time">
|
||||||
|
<span class="start"></span>
|
||||||
|
<span class="end"></span>
|
||||||
|
</div>
|
||||||
|
<span class="event-location"></span>
|
||||||
|
<p class="event-description">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="evenements-vendredi" class="orange">
|
||||||
|
<h2>Vendredi 3</h2>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="evenements-samedi" class="orange">
|
||||||
|
<h2>Samedi 4</h2>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="evenements-dimanche" class="orange">
|
||||||
|
<h2>Dimanche 5</h2>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/triangles-mask.js"></script>
|
||||||
|
</html>
|
||||||
8
img/icons/info.svg
Normal file
8
img/icons/info.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
|
||||||
|
<path fill="#D78D38" d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10C22,6.48,17.52,2,12,2z M13,17h-2v-6h2
|
||||||
|
V17z M13,9h-2V7h2V9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 625 B |
18
index.html
18
index.html
|
|
@ -42,20 +42,30 @@
|
||||||
<h2>Programme</h2>
|
<h2>Programme</h2>
|
||||||
<p>Les activités débutent le <strong>vendredi 3 mai à 18h</strong> et se terminent le <strong>dimanche 5 mai à 18h</strong>.</p>
|
<p>Les activités débutent le <strong>vendredi 3 mai à 18h</strong> et se terminent le <strong>dimanche 5 mai à 18h</strong>.</p>
|
||||||
|
|
||||||
<a href="content/planning-48g-arts.png">
|
|
||||||
|
<a href="events.html">
|
||||||
<div class="button">
|
<div class="button">
|
||||||
<img src="img/icons/calendar.svg" alt="Calendrier">
|
<img src="img/icons/info.svg" alt="Calendrier">
|
||||||
<span>Afficher le planning</span>
|
<span>Détails des événements</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a href="content/planning-48h-arts.png">
|
||||||
|
<div class="button">
|
||||||
|
<img src="img/icons/calendar.svg" alt="Calendrier">
|
||||||
|
<span>Planning du week-end</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<p class="stand-out">Attention : certains spectacles requierent de <strong>réserver vos places</strong> en avance !</p>
|
||||||
<a href="https://48h.arts.ens.fr/resa" target="_blank">
|
<a href="https://48h.arts.ens.fr/resa" target="_blank">
|
||||||
<div class="button">
|
<div class="button">
|
||||||
<img src="img/icons/ticket.svg" alt="Ticket">
|
<img src="img/icons/ticket.svg" alt="Ticket">
|
||||||
<span>Réserver vos places</span>
|
<span>Réserver vos places</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<p class="stand-out">Attention : certains spectacles requierent de <strong>réserver vos places</strong> en avance !</p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="green">
|
<section class="green">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue