From e58e8a689935a6f694cb9744edd10a5069e1cf06 Mon Sep 17 00:00:00 2001 From: Emil Miler Date: Sun, 26 Feb 2023 19:40:14 +0100 Subject: [PATCH] Add facts --- index.html | 28 ++++++++++++- sass/style.scss | 94 +++++++++++++++++++++++++++++++++++++++++- static/img/stats-1.svg | 1 + static/img/stats-2.svg | 1 + static/img/stats-3.svg | 1 + static/img/stats-4.svg | 1 + 6 files changed, 124 insertions(+), 2 deletions(-) create mode 100644 static/img/stats-1.svg create mode 100644 static/img/stats-2.svg create mode 100644 static/img/stats-3.svg create mode 100644 static/img/stats-4.svg diff --git a/index.html b/index.html index 1544b00..9a4ffb0 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,33 @@ Vyhledat pomoc -
+
+
+ Pár slov na začátek +
+

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.

+
+
+ 1 +
Až 18%
+

obětí domácího násilí se to snaží zamaskovat.

+
+
+ 2 +
31%
+

dětí do 16 let má problémy se spánkem.

+
+
+ 3 +
Víze než 72 000
+

nových případů ponižování doma je hlášeno každý rok v České republice.

+
+
+ 4 +
251%
+

Ut vel mattis leo. Ut rutrum id urna eget congue.

+
+

Obecné Zásady

diff --git a/sass/style.scss b/sass/style.scss index ed69e10..07b5b02 100644 --- a/sass/style.scss +++ b/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 { diff --git a/static/img/stats-1.svg b/static/img/stats-1.svg new file mode 100644 index 0000000..85a68ac --- /dev/null +++ b/static/img/stats-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/stats-2.svg b/static/img/stats-2.svg new file mode 100644 index 0000000..13f84b2 --- /dev/null +++ b/static/img/stats-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/stats-3.svg b/static/img/stats-3.svg new file mode 100644 index 0000000..11d81e3 --- /dev/null +++ b/static/img/stats-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/stats-4.svg b/static/img/stats-4.svg new file mode 100644 index 0000000..3b9fc83 --- /dev/null +++ b/static/img/stats-4.svg @@ -0,0 +1 @@ + \ No newline at end of file