Modal s medailonky realizátorů

img/logo-pedf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.589 75.589" xmlns:v="https://vecta.io/nano"><path d="M38.51 54.527V34.562l31.409-13.795c1.014 1.906 7.06 12.968 2.715 27.443-10.683-7.395-23.517-5.863-34.125 6.317m27.764 5.854H44.556c-.336 2.544-2.436 4.643-6.761 4.643s-6.425-2.1-6.762-4.643H9.316a36.34 36.34 0 0 1-5.903-10.755c4.65-3.26 10.774-5.77 18.462-3.76 5.026 1.315 11.161 5.225 15.92 11.95h0c4.758-6.725 10.894-10.635 15.92-11.95 7.688-2.01 13.811.5 18.463 3.76-1.345 3.894-3.341 7.531-5.905 10.755M51.988 71.274l-5.608-9.462h18.695c-3.602 4.091-8.073 7.324-13.087 9.462m-14.193 2.885a36.18 36.18 0 0 1-12.85-2.347l5.383-9.083c.827 1.477 2.808 3.724 7.467 3.724s6.64-2.247 7.467-3.724l5.383 9.083a36.18 36.18 0 0 1-12.85 2.347m-27.28-12.347h18.694l-5.607 9.462a36.54 36.54 0 0 1-13.088-9.462M5.671 20.767L37.08 34.562v19.965C26.472 42.347 13.638 40.815 2.955 48.21c-4.346-14.475 1.7-25.537 2.715-27.443m8.685-10.748c.75 5.042 3.778 6.822 7.036 7.856-1.872 3.868-1.223 6.956-1.178 7.717L6.37 19.512a36.4 36.4 0 0 1 7.986-9.493m12.627 3.061c8.186 1.633 9.67 6.724 9.964 10.555.112 1.467.137 2.71.137 3.326-.685-1.132-1.54-2.264-3.951-3.055-.771-3.793-3.235-5.423-8.626-6.673-4.229-.981-8.292-2.141-8.876-8.333 1.248.86 2.938 2.503 11.352 4.18M37.795 1.43A36.04 36.04 0 0 1 58.71 8.068c-2.57 1.911-6.222 2.713-10.151 3.574-3.108-2.023-6.827-3.092-10.757-3.092h-.015c-3.93 0-7.647 1.07-10.756 3.092-3.93-.86-7.582-1.663-10.152-3.574 6.113-4.333 13.423-6.654 20.916-6.639m9.352 18.544c.538-.259 1.094-.477 1.664-.653 1.352 1.989.508 4.062-.835 4.998-1.244.885-2.917.863-4.137-.054.148-.754.315-1.261.697-1.931.651 1.043 1.781 1.03 2.456.436.797-.738.865-1.974.155-2.796m-18.194-7.812c2.629-1.43 5.653-2.182 8.836-2.182h.013c3.18 0 6.206.753 8.834 2.182-3.905 1.17-7.394 3.112-8.841 8.3-1.447-5.188-4.937-7.13-8.842-8.3m-.356 10.608c.676.595 1.805.607 2.456-.436.383.67.55 1.177.698 1.93-1.22.917-2.893.939-4.137.055-1.343-.936-2.187-3.01-.835-4.998a12.1 12.1 0 0 1 1.664.653c-.81.96-.521 2.201.154 2.796m-2.03 2.563c2.134 1.618 4.817 1.119 6.199-.044 2.127.507 3.764 2.573 5.029 5.525 1.264-2.952 2.902-5.018 5.03-5.525 1.38 1.163 4.064 1.662 6.196.044 1.828-1.385 2.532-4.049 1.227-6.418l2.546-.637c1.694 2.943 1.403 6.847.989 8.015l-15.988 7.023-15.988-7.023c-.415-1.168-.705-5.072.988-8.015l2.547.637c-1.306 2.37-.601 5.033 1.226 6.418m24.515-8.1c-5.391 1.25-7.855 2.881-8.626 6.674-2.411.79-3.266 1.923-3.95 3.055 0-.616.023-1.859.136-3.326.293-3.831 1.778-8.922 9.964-10.555 8.414-1.677 10.103-3.32 11.35-4.18-.582 6.192-4.646 7.352-8.874 8.333m18.137 2.28l-13.844 6.08c.044-.762.694-3.85-1.18-7.718 3.26-1.034 6.288-2.814 7.038-7.856 3.186 2.685 5.887 5.896 7.986 9.494M37.795 0C16.955 0 0 16.954 0 37.794s16.954 37.795 37.795 37.795 37.794-16.955 37.794-37.795S58.635.002 37.795 0" fill="#b52637"/></svg>

index.html

@@ -80,35 +80,104 @@
 			<div class="wrap">
 				<h2>Realizační team</h2>
 				<div class="list">
-					<figure>
+					<figure onclick="modal_toggle('slezakova')">
 						<img src="img/team/jana-slezakova.jpg" alt="Jana Slezáková">
 						<label class="name">
 							Jana Slezáková
 						</label>
+						<div class="modal" id="slezakova">
+							<div class="content">
+								<p><strong>PhDr. Jana Slezáková, Ph.D.</strong> vystudovala PedF UK a doktorát získala na téže fakultě. Vyučuje na Pedagogické fakultě UK v&nbsp;Praze, kde se zabývá především didaktikou matematiky 1.&nbsp;stupně ZŠ a vede pedagogickou praxi studentů. Je spoluautorkou učebnic matematiky pro 1.&nbsp;stupeň ZŠ, které vyšly v&nbsp;letech 2018&ndash;2020 (učebnice pro 1.&nbsp;až 3.&nbsp;ročník Hejný a kol., další ročníky se připravují). Též je spoluautorkou Předmatematiky &mdash; Metodiky pro učitele mateřských škol (Hejného metoda), která vyšla v&nbsp;roce 2020. Je lektorkou a tutorkou (připravuje k&nbsp;lektorování budoucí lektory) ve společnosti H-mat, o.p.s. (<a href="https://www.h-mat.cz">www.h-mat.cz</a>). Poskytuje jak na PedF UK, tak ve společnosti H-mat, o.p.s kolegiální podporu učitelům v&nbsp;oblasti vyučování matematice.</p>
+								<p>V projektu SPIN má na starost na katedře KMDM garantování aktivit výuky, podílí se na tandemové výuce a vedení absolventských kaváren. Též se podílí na propojování spolupráce PedF UK a H-mat, o.p.s.</p>
+							</div>
+						</div>
 					</figure>
-					<figure>
+					<figure onclick="modal_toggle('vallin')">
-						<img src="img/team/petra-vallin.jpg" alt="Jana Slezáková">
+						<img src="img/team/petra-vallin.jpg" alt="Petra Vallin">
 						<label class="name">
 							Petra Vallin
 						</label>
+						<div class="modal" id="vallin">
+							<div class="content">
+								<p><strong>PhDr. Petra Vallin, Ph.D.</strong> vystudovala Učitelství pro 1.&nbsp;stupeň se specializací angličtina, kterou pak 10 let vyučovala. Aktuálně se věnuje lektorování seminářů a workshopů o&nbsp;inovacích ve vzdělávání, pilotování inovativních programů na ZŠ a koordinaci rozvojových projektů. Spolupracuje s&nbsp;International Training Center, Educentrem, NPI ČR, MŠMT a dalšími institucemi. Na Pedagogické fakultě UK vyučuje několik kurzů pro zahraniční studenty, podílí se na tandemové výuce didaktiky 1. stupně ZŠ a je zapojena do několika projektů týkajících se formativního hodnocení a propojování teorie a praxe. Působí jako metodik a lektor CLIL. Je spoluautorkou publikace <i>CLIL: Inovativní přístup nejen k&nbsp;výuce cizích jazyků.</i></p>
+								<p>V projektu SPIN zastává roli projektového manažera.</p>
+							</div>
+						</div>
 					</figure>
-					<figure>
+					<figure onclick="modal_toggle('jirotkova')">
-						<img src="img/team/darina-jirotkova.jpg" alt="Jana Slezáková">
+						<img src="img/team/darina-jirotkova.jpg" alt="Darina Jirotková">
 						<label class="name">
 							Darina Jirotková
 						</label>
+						<div class="modal" id="jirotkova">
+							<div class="content">
+								<p><strong>doc. RNDr. Darina Jirotková, Ph.D.</strong> vystudovala MFF UK v&nbsp;Praze. Docenturu získala v&nbsp;oboru didaktika matematiky na Pedagogické fakultě UK v&nbsp;Praze, kde vyučuje na Katedře matematiky a didaktiky matematiky.</p>
+								<p>Je členkou oborové rady didaktiky matematiky pro doktorská studia, školí doktorandy. Podílela se na koncepci geometricky zaměřených předmětů v&nbsp;přípravě učitelů 1.&nbsp;st. ZŠ a v&nbsp;poslední době se orientuje zejména na oblast didaktiky matematiky 1. stupně ZŠ. Podílí se na rozvoji Hejného metody vyučování matematice. Je spoluautorkou sady učebnic matematiky Hejného metodou a doprovodných materiálů pro 1.&nbsp;stupeň ZŠ a 6.&nbsp;a 7.&nbsp;roč. 2.&nbsp;st.&nbsp;ZŠ. Je lektorkou a tutorkou Hejného metody, školí lektory Hejného metody ve společnosti H-mat, o.p.s. Zde je též zapojena do projektu Kolegiální podpora jako tuto a lektor. Je členkou národního kabinetu Matematika a její aplikace v&nbsp;projektu SYPO - Systém podpory profesního rozvoje učitelů a ředitelů, NPI ČR,  kde se podílí i na tvorbě metodických materiálů. Je též členkou jádrového týmu ESF projektu PPUČ, NPI ČR - Podpora práce učitelů.</p>
+								<p>V projektu SPIN má na starost na katedře KMDM garantování výukových aktivit, koordinaci tandemové výuky a vedení absolventských kaváren. Přispívá rozvoji spolupráce PedF UK s&nbsp;H-mat, o.p.s. zejména v&nbsp;oblasti propojování teorie a praxe.</p>
+							</div>
+						</div>
 					</figure>
-					<figure>
+					<figure onclick="modal_toggle('kargerova')">
-						<img src="img/team/jana-poche-kargerova.jpg" alt="Jana Slezáková">
+						<img src="img/team/jana-poche-kargerova.jpg" alt="Jana Poche Kargerová">
 						<label class="name">
 							Jana Poche Kargerová
 						</label>
+						<div class="modal" id="kargerova">
+							<div class="content">
+								<p><strong>PhDr. Jana Poche Kargerová, Ph.D.</strong> vystudovala FF UK v&nbsp;Praze, doktorát získala na PedF UK. Vyučuje na Pedagogické fakultě UK v&nbsp;Praze, kde se zabývá především didaktikou 1.&nbsp;stupně ZŠ a organizací pedagogických praxí včetně kurzu mentoringu pro fakultní učitele. Je lektorkou vzdělávacího programu Začít spolu a spoluautorkou <i>Metodického průvodce pro 1.&nbsp;stupeň základní školy tohoto programu</i>. Je také autorkou publikace <i>Spolupráce s&nbsp;rodinou a komunitou v&nbsp;programu Začít spolu</i>. Prostřednictvím lektorské činnosti a skupinové reflexe WANDA poskytuje pedagogům podporu v&nbsp;rozvoji jejich profesních kompetencí. Zaměřuje se na implementaci vzájemné kolegiální podpory v&nbsp;základních i mateřských školách.</p>
+								<p>V projektu SPIN má na starost garantování tandemové výuky na KPPP, vedení absolventských kaváren a propojování spolupráce PedF UK a Step by Step, o.p.s.</p>
+							</div>
+						</div>
 					</figure>
 				</div>
 			</div>
 		</section>
 
+		<section class="articles">
+			<div class="wrap">
+				<div class="header">
+					<h2>Články</h2>
+					<p>Zde jsou odkazy na články, ve kterých byl projekt zmíněn.</p>
+				</div>
+				<div class="list">
+					<article>
+						<a href="#">
+							<h3>Lorem Ipsum</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p>
+						</a>
+					</article>
+					<article>
+						<a href="#">
+							<h3>Lorem Ipsum</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p>
+						</a>
+					</article>
+					<article>
+						<a href="#">
+							<h3>Lorem Ipsum</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Et leo duis ut diam quam. A scelerisque purus semper eget duis at.</p>
+						</a>
+					</article>
+				</div>
+			</div>
+		</section>
+
+		<footer>
+			<a href="https://pedf.cuni.cz">
+				<img src="img/logo-pedf.svg" alt="PedF" class="pedf">
+			</a>
+			<a href="https://www.nadacecs.cz">
+				<img src="img/logo-nadacecs.svg" alt="Nadace České spořitelny">
+			</a>
+		</footer>
+
 	</main>
+
+	<script>
+		function modal_toggle(target) {
+			document.getElementById(target).classList.toggle("visible");
+		}
+	</script>
 </body>
 </html>
 

style.css

@@ -32,7 +32,7 @@ header {
 	align-items: center;
 	justify-content: center;
 
-	padding: 1rem;
+	padding: 1em;
 	font-size: 1.5rem;
 }
 header p {
@@ -94,13 +94,14 @@ main .team h2 {
 main .team .list {
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
-	column-gap: 2em;
+	grid-column-gap: 2em;
 }
 main .team figure {
 	background-color: #fff;
 	padding: 1em;
 	margin: 0;
 }
+main .team figure, main .team figure * { cursor: pointer }
 main .team figure img { width: 100% }
 main .team figure label {
 	display: block;
@@ -108,3 +109,72 @@ main .team figure label {
 	font-weight: bold;
 }
 
+main .articles .header {
+	display: grid;
+	grid-template-columns: 1fr 4fr;
+	align-items: baseline;
+	margin-bottom: 4em;
+	border-bottom: 1px solid #324c9c;
+}
+main .articles .list {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-column-gap: 2em;
+	grid-row-gap: 2em;
+}
+main .articles .list article a {
+	color: inherit;
+	text-decoration: none;
+	cursor: pointer;
+}
+main .articles .list article:hover h3 { text-decoration: underline }
+
+footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+
+	margin: 15em auto;
+	padding: 1em;
+}
+footer img {
+	width: 18em;
+	margin: 2em;
+	transition: transform .2s ease-out;
+}
+footer img.pedf { width: 10em }
+footer img:hover { transform: scale(1.1) }
+
+.modal {
+	visibility: hidden;
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100vh;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	background-color: rgba(0,0,0,0.5);
+
+	transition: opacity .2s ease-out;
+	opacity: 0;
+}
+.modal .content {
+	max-width: var(--width);
+	padding: 3em;
+	background-color: #fff;
+	transform: translate(0, -2em);
+	transition: transform .2s ease-out;
+}
+.modal.visible {
+	visibility: visible;
+	opacity: 1;
+}
+.modal.visible .content {
+	transform: translate(0);
+}
+