Add facts

index.html

@@ -47,7 +47,33 @@
 				<a href="" class="button">Vyhledat pomoc</a>
 			</section>
 		</div>
-		<section>
+		<section class="wrap facts">
+			<div class="title">
+				Pár slov na začátek
+			</div>
+			<p class="narrow">Ut vel mattis leo. Ut rutrum id urna eget congue. Vestibulum sed lobortis magna, eget hendrerit tortor. Nulla tempus viverra neque, in egestas quam aliquet eu. Curabitur tempor eros ac ante bibendum, quis hendrerit odio vehicula. Cras consectetur tellus sit amet ante semper, pharetra gravida nisl laoreet. Donec vel condimentum nisi. Aliquam lorem est, consequat eget diam et, sollicitudin tincidunt risus.</p>
+			<div class="fact-list">
+				<div class="item">
+					<img src="/static/img/stats-1.svg" alt="1">
+					<div class="heading">Až 18%</div>
+					<p>obětí domácího násilí se to snaží zamaskovat.</p>
+				</div>
+				<div class="item">
+					<img src="/static/img/stats-2.svg" alt="2">
+					<div class="heading">31%</div>
+					<p>dětí do 16 let má problémy se spánkem.</p>
+				</div>
+				<div class="item">
+					<img src="/static/img/stats-3.svg" alt="3">
+					<div class="heading">Víze než 72 000</div>
+					<p>nových případů ponižování doma je hlášeno každý rok v&nbsp;České republice.</p>
+				</div>
+				<div class="item">
+					<img src="/static/img/stats-4.svg" alt="4">
+					<div class="heading">251%</div>
+					<p>Ut vel mattis leo. Ut rutrum id urna eget congue.</p>
+				</div>
+			</div>
 		</section>
 		<section class="wrap" id="zasady">
 			<h1>Obecné Zásady</h1>

sass/style.scss

@@ -229,6 +229,73 @@ body.noscroll {
 	}
 }
 
+.facts {
+	text-align: center;
+
+	.title {
+		display: block;
+		position: relative;
+		font-size: 1.953rem;
+		font-weight: bold;
+		padding-bottom: 1em;
+		margin-bottom: 1em;
+
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			left: 50%;
+			bottom: 0;
+			width: 5rem;
+			height: 1px;
+			transform: translatex(-2.5rem);
+			background-color: #E6F3FA;
+		}
+	}
+
+	.fact-list {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+		padding: 5rem 0;
+
+		.item {
+			position: relative;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			max-width: 13rem;
+			padding: 1em 0;
+
+			img {
+				height: 5em;
+			}
+
+			.heading {
+				font-weight: bold;
+				margin: 2em 0 1em 0;
+			}
+
+			p {
+				margin: 0;
+			}
+
+			&:after {
+				content: "";
+				display: block;
+				width: 75%;
+				height: 1px;
+				background-color: #8493A4;
+				margin-top: 4em;
+			}
+			&:last-child:after {
+				display: none;
+			}
+		}
+	}
+}
+
 .checklist {
 	display: flex;
 	justify-content: flex-start;
@@ -344,7 +411,7 @@ body.noscroll {
 			width: 80%;
 			border-width: 1px 0 0 0;
 			border-style: solid;
-			border-color: #8392a3;
+			border-color: #8493A4;
 		}
 		&:before { top: 0 }
 		&:last-child:after { bottom: 0 }
@@ -441,6 +508,31 @@ footer {
 		}
 	}
 
+	.facts {
+
+		.fact-list {
+			flex-direction: row;
+			justify-content: center;
+			align-items: stretch;
+			gap: 3rem;
+
+			.item {
+				border-right: 1px solid #8493A4;
+				justify-content: center;
+				padding: 0 3rem 0 0;
+				max-width: 16rem;
+
+				&:after {
+					display: none;
+				}
+
+				&:last-child {
+					border: none;
+				}
+			}
+		}
+	}
+
 	.faq-list .faq {
 		&:before,
 		&:last-child:after {

static/img/stats-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="103" height="86"><defs><clipPath id="a"><path fill="none" d="M0 0h103v86H0z"/></clipPath></defs><g clip-path="url(#a)"><path d="M45.383 18.71C45.106 8.862 37.979.974 29.222.974c-7.571 0-13.914 5.9-15.674 13.865a15.09 15.09 0 0 0 2.526 29.969h10.783l13.08 10.715V44.808h3.237a13.142 13.142 0 0 0 2.214-26.1" fill="#845368"/><path d="M102.279 50.653c0-10.715-2.39-16.843-1.948-20.456.714-5.841 2.312-10.879.974-12.663-.848-1.132-3.592-1.273-7.049-.911a3.479 3.479 0 0 1 1.2.911c1.125 1.5-.845 8.681-2.877 13.729a6.491 6.491 0 0 0 .416 5.679c1.557 2.684 3.436 6.026 3.436 13.711 0 10.715-5.881 14.651-5.438 18.264.714 5.841 5.8 12.953 4.464 14.738a2.771 2.771 0 0 1-1.643.864c3.664.422 6.6.315 7.488-.864 1.338-1.785-.26-6.823-.974-12.663-.442-3.614 1.948-9.624 1.948-20.339" fill="#fff"/><path d="M48.305 18.71C48.027 8.862 40.901.974 32.144.974a14.51 14.51 0 0 0-1.461.082c8.075.821 14.438 8.361 14.7 17.654a13.142 13.142 0 0 1-2.214 26.1h2.922a13.142 13.142 0 0 0 2.214-26.1M40 45h3v11h-3z" fill="#0e1523"/><path d="M23.485 85.725c-3.668 0-4.4-.979-4.783-1.485-1.187-1.583-.685-4.448.01-8.411.264-1.508.564-3.216.776-4.955a24.011 24.011 0 0 0-.587-5.944 80.6 80.6 0 0 1-1.368-14.277c0-1.982.078-3.9.239-5.859a.974.974 0 1 1 1.942.16 68.79 68.79 0 0 0-.233 5.7 77.805 77.805 0 0 0 1.34 13.954 24.837 24.837 0 0 1 .6 6.5c-.219 1.789-.522 3.524-.792 5.056-.54 3.084-1.051 6-.37 6.9.287.381 2.5 2.088 18.072-1.748 2.62-.647 6.9-.369 11.858-.05 3.156.2 6.734.434 10.2.434s7.046-.231 10.2-.434c4.956-.319 9.239-.6 11.858.05 15.575 3.839 17.787 2.131 18.072 1.747.681-.907.17-3.819-.37-6.9-.269-1.532-.573-3.267-.792-5.056a24.844 24.844 0 0 1 .6-6.5 77.9 77.9 0 0 0 1.34-13.954 79.166 79.166 0 0 0-1.339-14.017 25.28 25.28 0 0 1-.6-6.557c.219-1.79.523-3.525.792-5.056.541-3.083 1.051-6 .37-6.9-.286-.381-2.5-2.089-18.072 1.748-2.619.646-6.9.371-11.858.05-3.156-.2-6.734-.434-10.2-.434s-7.012.229-9.865.413a.974.974 0 1 1-.126-1.944c2.882-.186 6.468-.417 9.991-.417s7.142.233 10.326.438c4.8.311 8.938.577 11.268 0 17.611-4.341 19.416-1.932 20.1-1.025 1.187 1.581.686 4.445-.009 8.408-.265 1.508-.565 3.217-.777 4.956a24.456 24.456 0 0 0 .589 6 81.864 81.864 0 0 1 1.367 14.337 80.588 80.588 0 0 1-1.369 14.277 24.01 24.01 0 0 0-.587 5.944c.212 1.739.512 3.447.777 4.955.695 3.964 1.2 6.828.009 8.41-.679.906-2.485 3.314-20.1-1.026-2.33-.573-6.472-.307-11.268 0-3.184.206-6.8.438-10.326.438s-7.142-.233-10.327-.438c-4.8-.31-8.938-.576-11.267 0-7.745 1.909-12.434 2.512-15.313 2.512" fill="#fff"/><path d="M86.698 27.762a.975.975 0 0 1-.883-.559c-.034-.069-4.072-7.721-24.628-7.721a.974.974 0 0 1 0-1.948c21.978 0 26.22 8.478 26.391 8.839a.974.974 0 0 1-.881 1.389M61.185 83.654c-21.978 0-26.22-8.478-26.392-8.839a.974.974 0 0 1 1.759-.839c.063.126 4.142 7.729 24.632 7.729 20.754 0 24.59-7.644 24.626-7.721a.975.975 0 0 1 1.764.83c-.17.36-4.413 8.839-26.39 8.839M42.859 56.5h-2.922a.974.974 0 0 1 0-1.948h1.948v-9.744a.973.973 0 0 1 .974-.974h3.232a12.168 12.168 0 0 0 2.05-24.164.973.973 0 0 1-.809-.932c-.267-9.415-6.937-16.79-15.188-16.79h-1.948a.974.974 0 0 1 0-1.948h1.948c9.078 0 16.463 7.8 17.099 17.9a14.116 14.116 0 0 1-3.152 27.877h-2.258v9.741a.973.973 0 0 1-.974.974" fill="#fff"/><path d="M34.093 35.067h-12.6a.974.974 0 0 1-.761-1.583l11.98-14.976h-9.334a.974.974 0 1 1 0-1.948h11.361a.974.974 0 0 1 .761 1.583L23.518 33.119h10.575a.974.974 0 0 1 0 1.948M45.777 35.067h-6.352a.974.974 0 0 1-.762-1.583l5.748-7.184h-3.5a.974.974 0 1 1 0-1.948h5.527a.974.974 0 0 1 .761 1.583l-5.747 7.184h4.325a.974.974 0 1 1 0 1.948M15.585 35.067H7.362a.974.974 0 0 1-.762-1.583l8.865-11.08H9.741a.974.974 0 1 1 0-1.948h7.752a.974.974 0 0 1 .761 1.583l-8.865 11.08h6.2a.974.974 0 1 1 0 1.948" fill="#fff"/><path d="M39.937 56.5a.972.972 0 0 1-.618-.221l-12.81-10.497H16.072A16.064 16.064 0 0 1 12.746 14c2.09-8.276 8.784-14 16.476-14 9.08 0 16.463 7.8 17.1 17.9a14.116 14.116 0 0 1-3.152 27.877h-2.259v9.741a.972.972 0 0 1-.557.88.954.954 0 0 1-.417.094M29.222 1.948c-6.964 0-13.019 5.387-14.723 13.1a.976.976 0 0 1-.79.751 14.116 14.116 0 0 0 2.363 28.034h10.784a.971.971 0 0 1 .618.221l11.489 9.412v-8.658a.973.973 0 0 1 .974-.974h3.232a12.168 12.168 0 0 0 2.05-24.164.973.973 0 0 1-.809-.932c-.267-9.415-6.937-16.79-15.188-16.79" fill="#845368"/></g></svg>

static/img/stats-4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="67.402" height="86"><defs><clipPath id="a"><path fill="none" d="M0 0h67.402v86H0z"/></clipPath></defs><path fill="#845368" d="m17.924 69.119 22.428-66.02 3.01 1.023-22.429 66.02z"/><g clip-path="url(#a)"><path d="M59.248 46.346a30.033 30.033 0 1 1-18.8-38.087 30.034 30.034 0 0 1 18.8 38.087" fill="#845368"/><path d="M19.249 64.422a.3.3 0 0 0 .421-.283 6.891 6.891 0 0 0-.693-3.029c-.813-1.439-.25-2.44-.689-3.317s-1.189-.876-2.065-2.253 1.127-1.877 1.816-2.566.813-1.314.688-1.44 0 0-.751.376a1.03 1.03 0 0 1-1.439-.442 10.36 10.36 0 0 1 .375-2.879 5.657 5.657 0 0 0-.877-3.317 5.422 5.422 0 0 0-1.94-2.315c-.563-.25-2.315.563-3.254.625s-.877-.563-1.377-1.126-.375-1.564-1.815-1.564-.689.438-1.44.938-.625.188-1.5.126-2.129-2.188-2.943-2.563a.776.776 0 0 0-.849.231 30.042 30.042 0 0 0 18.332 24.8M51.209 30.693c-1.564-.188-.438.376-2 .062a6.98 6.98 0 0 1-3.067-1.189c-.939-.626-1.816-1.69-2.629-1.94s-1.252.813-2.44.313-2.191-1.94-3.755-1.94-1 .689-2.879 1.065-1.5-.689-3.254-.564-1.5 2.128-1.815 2.5-1-.062-1.44-.062-1 .751-1.815.689a1.82 1.82 0 0 1-1.565-.877 19.755 19.755 0 0 1-.563-2.253c-.062-.5-1.564.188-2.065.313s-.188-1.689.25-2.691-.689-.877-.689-.877-2.5 3.38-3.379 3.693-1.565-.813-1.752-1.815a15.517 15.517 0 0 1 .573-3.98.291.291 0 0 1 .267-.225c.53-.036 1.89-.176 2.289-.677a4.719 4.719 0 0 1 3.254-1c.939.126 1.5 2.065 1.5 2.065s.751-.876.751-1.314-.563-3 0-3.5a4.783 4.783 0 0 0 1.314-2.941c.063-1.189 1.127-1.878 1.377-2.379a5.713 5.713 0 0 1 2.012-1.167.3.3 0 0 0 .122-.455c-.283-.375-.7-.984-.57-1.194.188-.314 1.628.25 3.442.125s1.064-.313.375-.938a7.164 7.164 0 0 0-1.5-.838.324.324 0 0 0-.129-.03 30.109 30.109 0 0 0-21.411 8.358 2.817 2.817 0 0 1 .2.27c.376.626 0 .5-.876 1.878a6.087 6.087 0 0 0-1.127 3.943c.188 1.064-.125 1.252 1.628 1.564s1.94 2.691 3.067 3.88a7.038 7.038 0 0 0 2.879 2.191c1.752.877 2-.313 2.817-.563s.5.25 1.94.689a10.519 10.519 0 0 1 3.38 1.627 4.3 4.3 0 0 0 3.442.5c.563-.187 1.064-.876 1.5-.876s.813.876 1 2.378-.564 1.314-1.565 2.691.438.689.752 1.189-.752 1.564-.063 2.128 3.755 4.569 5.132 5.007 2.253.188 3.129.563 1.064 6.2 1.064 7.01a16.36 16.36 0 0 1-.563 4.318c-.438 1.189.689 1.815 1.377 3.567s2.378.689 2.378.689a16.719 16.719 0 0 1-1.44-1.752c-.125-.314.814-.188 1.065-.376s.125-.625.125-1.126.5-.25.751-.751-.188-1.5 0-1.5a4.981 4.981 0 0 0 1.314-.877 9.015 9.015 0 0 0 2-2.065 14.865 14.865 0 0 1 1.225-1.514.3.3 0 0 0-.186-.5l-2.416-.3c-1.5-.188.126-1.189.126-1.878s1.439-.25 2.44-.25 1.69-.188 1.628-1.189 1.189-1.376 1.877-2a1.957 1.957 0 0 0 .751-2c-.188-.688.689-2.816.939-3.942s-1.189-1.127.689-1.816 1.564-3.379 1.314-3.818a3.135 3.135 0 0 0-2.5-1.314M43.082 80.608H30.806v4.622h14.635v-2.262a2.36 2.36 0 0 0-2.359-2.359" fill="#fff"/><path d="M30.459 73.64a37.178 37.178 0 0 1-18.39-4.9.772.772 0 0 1-.349-.917l.5-1.482a.77.77 0 0 1 1.117-.418 34.189 34.189 0 0 0 6.2 2.82 33.892 33.892 0 0 0 41.28-47.096A33.672 33.672 0 0 0 41.309 4.55a34.152 34.152 0 0 0-6.638-1.534A.772.772 0 0 1 34.038 2l.5-1.481a.778.778 0 0 1 .833-.516A36.969 36.969 0 0 1 65.442 48.52a37.041 37.041 0 0 1-34.983 25.12M18.185 69.9q.43.159.863.305A35.433 35.433 0 0 0 62.2 20.965 35.2 35.2 0 0 0 41.8 3.091q-.376-.127-.756-.246.38.119.756.246a35.433 35.433 0 0 1 4.305 65.33A35.194 35.194 0 0 1 19.048 70.2c-.289-.1-.576-.2-.863-.305" fill="#fff"/><path d="M33.117 81.378a.77.77 0 0 1-.77-.77v-7.7a.77.77 0 1 1 1.541 0v7.7a.77.77 0 0 1-.77.77M28.495 81.378a.77.77 0 0 1-.77-.77v-7.7a.77.77 0 1 1 1.541 0v7.7a.77.77 0 0 1-.77.77" fill="#fff"/><path d="M45.441 86H16.17a.77.77 0 0 1-.77-.77v-2.262a3.132 3.132 0 0 1 3.129-3.13h24.553a3.133 3.133 0 0 1 3.13 3.13v2.262a.77.77 0 0 1-.77.77m-28.5-1.541h27.73v-1.492a1.59 1.59 0 0 0-1.589-1.589H18.529a1.59 1.59 0 0 0-1.588 1.589zM30.781 67.507a30.8 30.8 0 1 1 29.2-20.914 30.678 30.678 0 0 1-29.2 20.914m.049-60.066a29.269 29.269 0 1 0 9.37 1.548 29.314 29.314 0 0 0-9.37-1.548" fill="#fff"/></g></svg>