From 6162484d2de204d09deb1841ad32887892a15b8b Mon Sep 17 00:00:00 2001
From: Daru13 <daru14@gmail.com>
Date: Sun, 28 Apr 2019 03:31:33 +0200
Subject: [PATCH] Add planning and seat booking buttons to the program section.

This addition also includes two new SVG icons.
---
 css/style.css          | 26 ++++++++++++++++++++------
 img/icons/calendar.svg | 14 ++++++++++++++
 img/icons/ticket.svg   | 10 ++++++++++
 index.html             | 17 ++++++++++++++---
 4 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 img/icons/calendar.svg
 create mode 100644 img/icons/ticket.svg

diff --git a/css/style.css b/css/style.css
index aba0db0..0024d6f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -258,11 +258,9 @@ section p.stand-out {
 	margin: 20px auto 0 auto;
 	padding: 15px 20px;
 
-	background-color: #fce8e2;
+	border-width: 2px;
+	border-style: solid;
 
-	border: 2px solid #EA6C61;
-
-	color: #EA6C61;
 	font-size: 1.4rem;
 	font-weight: 700;
 	text-transform: uppercase;
@@ -271,8 +269,24 @@ section p.stand-out {
 	line-height: 32px;
 }
 
-.button:hover {
-	background-color: #fadad0	;
+section.red .button {
+	background-color: #fbe5df;
+	border-color: #EA6C61;
+	color: #EA6C61;
+}
+
+section.orange .button {
+	background-color: #fbefe0;
+	border-color: #ebaa5b;
+	color: #ebaa5b;
+}
+
+section.red .button:hover {
+	background-color: #f7cbc0;
+}
+
+section.orange .button:hover {
+	background-color: #f8dfc2;
 }
 
 .button img {
diff --git a/img/icons/calendar.svg b/img/icons/calendar.svg
new file mode 100644
index 0000000..f95112d
--- /dev/null
+++ b/img/icons/calendar.svg
@@ -0,0 +1,14 @@
+<?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 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Calque_2"
+	 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" xml:space="preserve">
+<g>
+	<path fill="#EBAA5B" d="M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6
+		C21,4.9,20.1,4,19,4z M19,20H5V9h14V20z"/>
+	<rect x="6.667" y="13.537" fill="#EBAA5B" width="10.695" height="2"/>
+	<rect x="6.667" y="16.537" fill="#EBAA5B" width="10.695" height="2"/>
+	<rect x="6.667" y="10.538" fill="#EBAA5B" width="10.695" height="2"/>
+</g>
+</svg>
diff --git a/img/icons/ticket.svg b/img/icons/ticket.svg
new file mode 100644
index 0000000..ce69d71
--- /dev/null
+++ b/img/icons/ticket.svg
@@ -0,0 +1,10 @@
+<?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 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" 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" xml:space="preserve">
+<path fill="#EBAA5B" d="M20,12c0-1.1,0.9-2,2-2V6c0-1.1-0.9-2-2-2H4C2.9,4,2.01,4.9,2.01,6v4C3.11,10,4,10.9,4,12c0,1.1-0.89,2-2,2
+	v4c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2v-4C20.9,14,20,13.1,20,12z M15.58,16.8L12,14.5l-3.58,2.3l1.08-4.12L6.21,9.99l4.24-0.25
+	L12,5.8l1.54,3.95L17.779,10l-3.289,2.689L15.58,16.8z"/>
+</svg>
diff --git a/index.html b/index.html
index fa6c140..b29ee3a 100644
--- a/index.html
+++ b/index.html
@@ -43,10 +43,21 @@
 		<section class="orange">
 			<h2>Programme</h2>
 			<p>Les activités débutent le <strong>vendredi 3 mai à 20h00</strong> et se terminent le <strong>dimanche 5 mai à 21h00</strong>.</p>
+			<p>Attention : pour certains spectacles, il est nécessaire de <strong>réserver vos places</strong> en avance (en utilisant le lien ci-dessous).</p>
 
-			<p class="stand-out">
-				Le programme des activités sera prochainement disponible !
-			</p>
+			<a href="" target="_blank">
+				<div class="button">
+					<img src="img/icons/calendar.svg" alt="Calendrier">
+					<span>Afficher le planning</span>
+				</div>
+			</a>
+			
+			<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>
 		</section>
 
 		<section class="green">