diff --git a/index.html b/index.html
index 8568389..28b82f0 100644
--- a/index.html
+++ b/index.html
@@ -143,13 +143,46 @@
Na koho se obrátit a kde najít pomoc? Níže najdete stručný seznam kontaktů na organizace a instituce, které se touto problematikou zabývají a mohou vám poskytnout odbornou výpomoc.
diff --git a/sass/style.scss b/sass/style.scss
index 98ec1e1..909af0d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -407,6 +407,66 @@ body.noscroll {
}
}
+.contact-list {
+ display: flex;
+ flex-direction: column;
+ margin: 5rem 0;
+
+ .contact {
+ padding: 3rem 0;
+ border-bottom: 1px solid #8493A4;
+ flex: 1;
+
+ &:last-child {
+ border: none;
+ }
+
+ .title {
+ font-weight: bold;
+ font-size: 1.25em;
+ }
+
+ .meta {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ font-weight: bold;
+
+ &>div {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ &:before {
+ content: "";
+ height: 2rem;
+ width: 2rem;
+ border: 1px solid #8493A4;
+ border-radius: .5rem;
+ background-size: 50%;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .phone:before {
+ background-image: url("/static/img/icons/phone.svg");
+ }
+ .website:before {
+ background-image: url("/static/img/icons/web.svg");
+ }
+ .email:before {
+ background-image: url("/static/img/icons/email.svg");
+ }
+
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+ }
+ }
+}
+
.partners {
display: flex;
justify-content: center;
@@ -580,6 +640,16 @@ footer {
}
}
+ .contact-list {
+ flex-direction: row;
+
+ .contact {
+ padding: 0 3rem;
+ border-bottom: none;
+ border-right: 1px solid #8493A4;
+ }
+ }
+
.faq-list .faq {
&:before,
&:last-child:after {
diff --git a/static/img/icons/email.svg b/static/img/icons/email.svg
new file mode 100644
index 0000000..196c9bd
--- /dev/null
+++ b/static/img/icons/email.svg
@@ -0,0 +1 @@
+