Prepare FAQ section

index.html

@@ -46,7 +46,7 @@
 				</div>
 			</div>
 		</section>
-		<section>
+		<!--<section>
 			<h1>Vzorové příběhy</h1>
 			<p>Donec dapibus quis dui at interdum. Vivamus vel libero lorem. Suspendisse eu hendrerit lorem. Suspendisse nec nisi quis sem venenatis sagittis. Etiam ut porttitor dolor. Integer in tristique quam.</p>
 		</section>
@@ -71,11 +71,54 @@
 			<img src="/static/placeholder-logo.svg" alt="Placeholder">
 			<img src="/static/placeholder-logo.svg" alt="Placeholder">
 			<img src="/static/placeholder-logo.svg" alt="Placeholder">
-		</section>
+		</section>-->
 		<section>
 			<h1>FAQ</h1>
 			<div class="faq-list">
-				accordion
+				<div class="faq">
+					<div class="mark">+</div>
+					<div>
+						<div class="question">
+							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
+						</div>
+						<div class="answer">
+							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
+						</div>
+					</div>
+				</div>
+				<div class="faq active">
+					<div class="mark">+</div>
+					<div>
+						<div class="question">
+							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
+						</div>
+						<div class="answer">
+							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
+						</div>
+					</div>
+				</div>
+				<div class="faq">
+					<div class="mark">+</div>
+					<div>
+						<div class="question">
+							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
+						</div>
+						<div class="answer">
+							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
+						</div>
+					</div>
+				</div>
+				<div class="faq">
+					<div class="mark">+</div>
+					<div>
+						<div class="question">
+							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
+						</div>
+						<div class="answer">
+							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
+						</div>
+					</div>
+				</div>
 			</div>
 		</section>
 

sass/style.scss

@@ -20,6 +20,7 @@ body {
 	color: $col-white;
 
 	line-height: 1.5;
+	font-size: 16pt;
 	font-family: "moderat", sans-serif;
 }
 
@@ -40,14 +41,75 @@ section {
 	padding-top: 3rem;
 }
 
+
 /* Specific */
 
+.partners {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+
+	img {
+		width: clamp(20rem, 80vw, 0);
+		padding: 1.5em;
+	}
+}
+
+.faq-list {
+	width: 100%;
+
+	.faq {
+		position: relative;
+		display: grid;
+		grid-template-columns: auto auto;
+		column-gap: 1em;
+		width: 100%;
+		padding: 2em;
+		cursor: pointer;
+
+		// Hide bottom border.
+		// It is -2px to avoid float rounding errors
+		// which cause the border to appear in some widths.
+		margin-bottom: -2px;
+
+		&:before,
+		&:last-child:after {
+			content: "";
+			position: absolute;
+			left: 10%;
+			width: 80%;
+			border-width: 1px 0 0 0;
+			border-style: solid;
+			border-color: #8392a3;
+		}
+		&:before { top: 0 }
+		&:last-child:after { bottom: 0 }
+
+		&.active {
+			background-color: $col-accent;
+			border-radius: 2rem;
+			z-index: 1;
+
+			&:before { border: 0 }
+		}
+
+		.mark {
+			text-align: right;
+		}
+
+		.question {
+			margin-bottom: 1em;
+			font-size: 1.5048rem;
+		}
+	}
+}
+
 footer {
 	$logo-radius: 4.5em;
 	position: relative;
 	text-align: center;
 	padding: $logo-radius+1 2em 2em 2em;
-	margin-top: $logo-radius+4;
+	margin-top: $logo-radius+6;
 
 	border-top: 1px solid #5d6e81;
 
@@ -68,14 +130,3 @@ footer {
 		background-color: $col-bg;
 	}
 }
-
-section.partners {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-
-	img {
-		width: clamp(20rem, 80vw, 0);
-		padding: 1.5em;
-	}
-}