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