Realizační team

index.html

@@ -22,7 +22,9 @@
 		</a>
 	</header>
 	<main id="main">
+
 		<section class="phases">
+			<div class="wrap">
 				<h2>Fáze projektu</h2>
 				<figure>
 					<h3>Tandemová výuka</h3>
@@ -48,8 +50,11 @@
 					<h3>Výzkum</h3>
 					<p>Posledním, ale neméně důležitým cílem je <strong>výzkumně ověřit dopady</strong>, tedy zjistit, zda projekt přináší synergii, inovaci a osvětu do výuky na vysoké škole, kterou studenti považují v&nbsp;kontextu dnešních nároků na učitele za smysluplnou a přínosnou, a zdali tyto inovace přispívají k&nbsp;tomu, aby absolventi pedagogických fakult odcházeli do školství a ve své profesi dlouhodobě působili.</p>
 				</figure>
+			</div>
 		</section>
+
 		<section class="quotations">
+			<div class="wrap">
 				<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>
@@ -68,7 +73,41 @@
 						říká jeden ze studentů, který se účastnil předmětu inovovaného v&nbsp;rámci projektu SPIN.
 					</figcaption>
 				</figure>
+			</div>
 		</section>
+
+		<section class="team">
+			<div class="wrap">
+				<h2>Realizační team</h2>
+				<div class="list">
+					<figure>
+						<img src="img/team/jana-slezakova.jpg" alt="Jana Slezáková">
+						<label class="name">
+							Jana Slezáková
+						</label>
+					</figure>
+					<figure>
+						<img src="img/team/petra-vallin.jpg" alt="Jana Slezáková">
+						<label class="name">
+							Petra Vallin
+						</label>
+					</figure>
+					<figure>
+						<img src="img/team/darina-jirotkova.jpg" alt="Jana Slezáková">
+						<label class="name">
+							Darina Jirotková
+						</label>
+					</figure>
+					<figure>
+						<img src="img/team/jana-poche-kargerova.jpg" alt="Jana Slezáková">
+						<label class="name">
+							Jana Poche Kargerová
+						</label>
+					</figure>
+				</div>
+			</div>
+		</section>
+
 	</main>
 </body>
 </html>

style.css

@@ -11,6 +11,11 @@
 * { box-sizing: border-box }
 html { scroll-behavior: smooth }
 
+.wrap {
+	max-width: var(--width);
+	margin: 0 auto;
+}
+
 body {
 	margin: 0;
 	line-height: 1.5;
@@ -19,8 +24,6 @@ body {
 	font-family: montserrat, sans;
 }
 
-h2 { text-align: center }
-
 header, main { min-height: 100vh }
 
 header {
@@ -43,19 +46,18 @@ header .arrow {
 }
 header .arrow:hover { transform: scale(1.3) }
 
-main {
+
-	max-width: var(--width);
+main section {
-	margin: 0 auto;
+	margin-bottom: 10rem;
 	padding: 1em;
 }
 
-main section { margin-bottom: 10rem }
-
 main .phases, main .quotations {
 	display: flex;
 	flex-direction: column;
 }
 
+main .phases h2 { text-align: center }
 main .phases figure {
 	background-color: #324c9c;
 	color: #fff;
@@ -81,3 +83,28 @@ main .quotations figure figcaption {
 	text-align: right;
 }
 
+main .team {
+	background-color: #324c9c;
+	padding: 4em 1em;
+}
+main .team h2 {
+	color: #fff;
+	margin: 0 0 2em;
+}
+main .team .list {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	column-gap: 2em;
+}
+main .team figure {
+	background-color: #fff;
+	padding: 1em;
+	margin: 0;
+}
+main .team figure img { width: 100% }
+main .team figure label {
+	display: block;
+	margin-top: 1rem;
+	font-weight: bold;
+}
+