From 02e4ed264236ae79487fc79931e45e84becd2251 Mon Sep 17 00:00:00 2001
From: Emil Miler <emil.miler@pedf.cuni.cz>
Date: Wed, 23 Jun 2021 15:29:49 +0200
Subject: [PATCH] Sekce s citacemi

---
 index.html | 21 ++++++++++++++++++++-
 style.css  | 19 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 89d5bf7..d05d0e6 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,26 @@
 		</a>
 	</header>
 	<main id="main">
-		<h2>Lorem Ipsum</h2>
+		<section class="quotations">
+			<figure>
+				<blockquote>
+					<p>Projekt jsme iniciovaly zejména proto, abychom studentům umožnily setkávat se se skutečnými dětmi a učiteli nejen v&nbsp;rámci praxí, ale i v&nbsp;teoretických předmětech, a abychom zefektivnily vzájemnou spolupráci mezi vysokoškolskými učiteli a učiteli základních škol, učily se od sebe navzájem a tím se profesně rozvíjely.</p>
+				</blockquote>
+				<figcaption>
+					vysvětlují iniciátorky projektu SPIN<br>
+					<strong>Jana Poche Kargerová</strong> z&nbsp;Katedry preprimární a primární pedagogiky<br>
+					a <strong>Darina Jirotková</strong> z&nbsp;Katedry matematiky a didaktiky matematiky PedF UK.
+				</figcaption>
+			</figure>
+			<figure>
+				<blockquote>
+					<p>Nejvíce bych ocenil přístup obou vyučujících, který jakýmsi elegantním způsobem zbořil bariéru mezi studentskou a univerzitní sférou, kdy jsem se najednou cítil <q>na jedné učitelské lodi</q>, což bylo velice příjemné,</p>
+				</blockquote>
+				<figcaption>
+					říká jeden ze studentů, který se účastnil předmětu inovovaného v&nbsp;rámci projektu SPIN.
+				</figcaption>
+			</figure>
+		</section>
 	</main>
 </body>
 </html>
diff --git a/style.css b/style.css
index 2998481..06e8b1a 100644
--- a/style.css
+++ b/style.css
@@ -46,4 +46,23 @@ main {
 	margin: 0 auto;
 	padding: 1em;
 }
+main .quotations {
+	display: flex;
+	flex-direction: column;
+}
+main .quotations figure blockquote {
+	font-style: italic;
+	margin-top: -5em; /* Fix overflowing space above quotation marks */
+}
+main .quotations figure blockquote:before {
+	content: "\201E";
+	display: block;
+	margin-bottom: -0.1em;
+	font-size: 8em;
+}
+main .quotations figure figcaption {
+	max-width: 80%;
+	margin-left: auto;
+	text-align: right;
+}