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:active,
|
||||
a:visited {
|
||||
color: #FFAAAA;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -158,6 +157,28 @@ section h2 {
|
|||
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 {
|
||||
color: #EA6C61;
|
||||
border-bottom-color: #f7cbc0;
|
||||
|
|
@ -188,18 +209,46 @@ section.pink h2 {
|
|||
border-bottom-color: #f3cad2;
|
||||
}
|
||||
|
||||
section p {
|
||||
padding: 0 0 20px 0;
|
||||
font-size: 1rem;
|
||||
section.red a,
|
||||
section.red a:hover,
|
||||
section.red a:active,
|
||||
section.red a:visited {
|
||||
color: #EA6C61;
|
||||
}
|
||||
|
||||
section strong {
|
||||
font-weight: 600;
|
||||
section.orange a,
|
||||
section.orange a:hover,
|
||||
section.orange a:active,
|
||||
section.orange a:visited {
|
||||
color: #e6a04f;
|
||||
}
|
||||
|
||||
section p.stand-out {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
section.green a,
|
||||
section.green a:hover,
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*--------------------------------------------------------*/
|
||||
/* 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>
|
||||
<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">
|
||||
<img src="img/icons/calendar.svg" alt="Calendrier">
|
||||
<span>Afficher le planning</span>
|
||||
<img src="img/icons/info.svg" alt="Calendrier">
|
||||
<span>Détails des événements</span>
|
||||
</div>
|
||||
</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">
|
||||
<div class="button">
|
||||
<img src="img/icons/ticket.svg" alt="Ticket">
|
||||
<span>Réserver vos places</span>
|
||||
</div>
|
||||
</a>
|
||||
<p class="stand-out">Attention : certains spectacles requierent de <strong>réserver vos places</strong> en avance !</p>
|
||||
</section>
|
||||
|
||||
<section class="green">
|
||||
|
|
|
|||
Loading…
Reference in a new issue