From 00f31273f969da10997d17796fed132727b18f00 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Fri, 17 Feb 2023 16:33:15 +0100
Subject: [PATCH] Prepare checklist cards

---
 index.html      | 20 ++++++++++++++++----
 sass/style.scss | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index d3dce5a..6734778 100644
--- a/index.html
+++ b/index.html
@@ -34,15 +34,27 @@
 		<section>
 			<h1>Učitleský checklist</h1>
 			<p>Phasellus porta, velit sit amet varius laoreet, libero ex hendrerit diam, et commodo magna est non odio. Donec lacinia fringilla egestas. Nullam quis urna sit amet eros dignissim varius in non justo. In hac habitasse platea dictumst. Maecenas quis nisi mollis, fringilla justo et, eleifend purus. Donec convallis fringilla sem.</p>
-			<div class="checklist-cards">
+			<div class="checklist">
 				<div class="card">
-					...
+					<img src="static/pedf-logo-white.svg" alt="">
+					<div class="title">
+						Pěstounská péče
+					</div>
+					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
 				</div>
 				<div class="card">
-					...
+					<img src="static/pedf-logo-white.svg" alt="">
+					<div class="title">
+						Pěstounská péče
+					</div>
+					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
 				</div>
 				<div class="card">
-					...
+					<img src="static/pedf-logo-white.svg" alt="">
+					<div class="title">
+						Pěstounská péče
+					</div>
+					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
 				</div>
 			</div>
 		</section>
diff --git a/sass/style.scss b/sass/style.scss
index 2a926e4..f5cca73 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -45,6 +45,47 @@ section {
 
 /* Specific */
 
+.checklist {
+	display: flex;
+	gap: 1em;
+	overflow: scroll;
+	margin-top: 3em;
+	padding: 0 2em;
+
+	.card {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		width: 15em;
+		border: .15em solid $col-accent;
+		border-radius: 1em;
+		padding: 2em;
+		background-color: $col-bg;
+
+		img {
+			width: 100%;
+		}
+
+		.title {
+			position: relative;
+			font-weight: bold;
+			font-size: 1.138rem;
+			padding: 1em 0;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 25%;
+				height: 1px;
+				background-color: #fff;
+			}
+		}
+	}
+}
+
 .partners {
 	display: flex;
 	justify-content: center;