pedf
/
domu-nevidis
1
0
Fork 0
Code Releases Activity

Remake section backgrounds

Browse Source
master
Emil Miler 2 years ago
parent 693c6a10f2
commit ae5e940738
9 changed files with 355 additions and 322 deletions
Show Stats Download Patch File Download Diff File

36
index.html
Unescape Escape View File

@ -109,10 +109,10 @@
</div> </div>
<div class="source">*Údaje pocházejí ze zdrojů MPSV z&nbsp;roku 2021.</div> <div class="source">*Údaje pocházejí ze zdrojů MPSV z&nbsp;roku 2021.</div>
</section> </section>
<section class="wrap" id="jak-postupovat"> <section class="principles" id="jak-postupovat">
<h1>Jak postupovat</h1> <h1>Jak postupovat</h1>
<p class="narrow text-center">Ačkoli je každá situace jiná,existují obecné zásady, které nám pomohou za všech okolností. Zahrnují všechny fáze procesu od vzniku problému až po jeho vyřešení.</p> <p class="wrap narrow text-center">Ačkoli je každá situace jiná,existují obecné zásady, které nám pomohou za všech okolností. Zahrnují všechny fáze procesu od vzniku problému až po jeho vyřešení.</p>
<div class="principles"> <div class="principles-list wrap">
<div class="dropdown"> <div class="dropdown">
<!-- Used on mobile --> <!-- Used on mobile -->
<select name="principles" id="principles-dropdown"> <select name="principles" id="principles-dropdown">
@ -165,12 +165,12 @@
</div> </div>
</div> </div>
</section> </section>
<section id="krok-po-kroku"> <section id="krok-po-kroku" class="checklist">
<div class="wrap"> <div class="wrap">
<h1>Krok po kroku</h1> <h1>Krok po kroku</h1>
<p class="narrow text-center">Plán pomoci je tady od toho, aby nás krok po kroku provedl různými situacemi, se kterými se u&nbsp;žáků můžeme setkat. Když je budeme následovat, můžeme si na konci procesu v&nbsp;klidu oddechnout – nic důležitého jsme totiž neopomenuli.</p> <p class="narrow text-center">Plán pomoci je tady od toho, aby nás krok po kroku provedl různými situacemi, se kterými se u&nbsp;žáků můžeme setkat. Když je budeme následovat, můžeme si na konci procesu v&nbsp;klidu oddechnout – nic důležitého jsme totiž neopomenuli.</p>
</div> </div>
<div class="checklist"> <div class="checklist-cards">
<div class="card" data-tilt> <div class="card" data-tilt>
<img src="/static/img/checklist-1.jpg" alt="Checklist 1"> <img src="/static/img/checklist-1.jpg" alt="Checklist 1">
<div class="title"> <div class="title">
@ -254,10 +254,10 @@
<a href="pribehy" class="button">Podívat se na všechny příběhy</a> <a href="pribehy" class="button">Podívat se na všechny příběhy</a>
</div> </div>
</section> </section>
<section class="wrap" id="kontakty"> <section class="contacts" id="kontakty">
<h1>Na koho se obrátit</h1> <h1>Na koho se obrátit</h1>
<p class="narrow text-center">Ve chvílích, kdy si nevíte rady, nebojte se obrátit na organizace a instituce, které se zabývají danou problematikou a mohou vám pomoct situaci vyřešit, případně s&nbsp;vámi prokonzultují jednotlivé kroky. Níže najdete tipy na organizace, které vám poskytnout odbornou pomoc.</p> <p class="wrap narrow text-center">Ve chvílích, kdy si nevíte rady, nebojte se obrátit na organizace a instituce, které se zabývají danou problematikou a mohou vám pomoct situaci vyřešit, případně s&nbsp;vámi prokonzultují jednotlivé kroky. Níže najdete tipy na organizace, které vám poskytnout odbornou pomoc.</p>
<div class="contact-list"> <div class="contact-list wrap">
<div class="row"> <div class="row">
<div class="contact"> <div class="contact">
<div class="title">Linka pro rodinu a školu</div> <div class="title">Linka pro rodinu a školu</div>
@ -324,12 +324,12 @@
</div> </div>
</div> </div>
</section> </section>
<section id="faq"> <section id="faq" class="faq">
<div class="wrap"> <div class="wrap">
<h1>NEJČASTĚJŠÍ DOTAZY</h1> <h1>NEJČASTĚJŠÍ DOTAZY</h1>
</div> </div>
<div class="faq-list wrap"> <div class="faq-list wrap">
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -340,7 +340,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -351,7 +351,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -362,7 +362,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -373,7 +373,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -384,7 +384,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -395,7 +395,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -406,7 +406,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -417,7 +417,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">

69
sass/style.scss
Unescape Escape View File

@ -271,7 +271,7 @@ body.noscroll {
margin-top: 2rem; margin-top: 2rem;
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
background-image: url("/static/img/bg/1.svg"); background-image: url("/static/img/bg/facts.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top center; background-position: top center;
background-size: 100% auto; background-size: 100% auto;
@ -347,6 +347,12 @@ body.noscroll {
} }
.principles { .principles {
background-image: url("/static/img/bg/principles.svg");
background-repeat: no-repeat;
background-position: -60rem top;
background-size: auto 100%;
.principles-list {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-column-gap: 8rem; grid-column-gap: 8rem;
@ -461,8 +467,17 @@ body.noscroll {
} }
} }
} }
}
.checklist { .checklist {
display: flex;
flex-direction: column;
background-image: url("/static/img/bg/checklist.svg");
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
.checklist-cards {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: 1em; gap: 1em;
@ -546,12 +561,13 @@ body.noscroll {
} }
} }
} }
}
.stories { .stories {
padding-top: 5rem; // To clear the image padding-top: 5rem; // To clear the image
background-image: url("/static/img/bg/2.svg"); background-image: url("/static/img/bg/stories.svg");
background-size: 90rem auto; background-size: auto 110%;
background-position: center top; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
&:before { &:before {
@ -675,8 +691,15 @@ body.noscroll {
} }
} }
.contacts {
margin-top: 8rem;
background-image: url("/static/img/bg/contacts.svg");
background-repeat: no-repeat;
background-position: -40rem center;
background-size: auto 100%;
.contact-list { .contact-list {
margin: 5rem 0 8rem 0; margin: 5rem auto 8rem auto;
.row { .row {
display: flex; display: flex;
@ -751,6 +774,13 @@ body.noscroll {
} }
} }
} }
}
.faq {
background-image: url("/static/img/bg/faq.svg");
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
.faq-list { .faq-list {
width: 100%; width: 100%;
@ -760,7 +790,7 @@ body.noscroll {
padding: 0; padding: 0;
} }
.faq { .faq-card {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: 1em auto; grid-template-columns: 1em auto;
@ -835,6 +865,7 @@ body.noscroll {
} }
} }
}
footer { footer {
$logo-radius: 4.5em; $logo-radius: 4.5em;
@ -916,9 +947,7 @@ footer {
} }
} }
.facts { .facts .fact-list {
.fact-list {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
@ -939,9 +968,8 @@ footer {
} }
} }
} }
}
.principles { .principles .principles-list {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
.dropdown{ .dropdown{
@ -958,19 +986,12 @@ footer {
} }
} }
.checklist {
.card {
width: 17em;
}
}
.stories .stories-list { .stories .stories-list {
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.contact-list .row { .contacts .contact-list .row {
flex-direction: row; flex-direction: row;
margin-bottom: 4rem; margin-bottom: 4rem;
@ -987,7 +1008,15 @@ footer {
} }
.checklist { .checklist {
justify-content: center; align-items: center;
.checklist-cards .card {
width: 17em;
}
}
.faq {
background-position: 170% center;
} }
footer .grid { footer .grid {

1
static/img/bg/2.svg
Unescape Escape View File

@ -1 +0,0 @@
<svg width="3810.539" height="1338.541" viewBox="0 0 1008.205 354.156" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.151" y="-.551" width="1.301" height="2.101"><feGaussianBlur stdDeviation="48.5949 38.6129" result="blur"/></filter></defs><path style="fill:#1d3141;fill-opacity:.6;stroke:#000;stroke-width:.264583;filter:url(#a)" d="M87.482 20.208c102.344 41.807 135.723 74.637 195.481 71.304 94.652-5.278 175.889-61.989 272.074-74.265 39.171-5 166.306 34.533 200.077 50.303 38.427 17.944 52.439 94.204-10.168 84.648-62.607-9.556-226.467-35.829-261.778-28.304-11.425 2.435-119.583 71.729-273.403 53.814-29.015-3.38-243.197-18.942-187.239-92.86 21.538-28.45-11.594-95.91 64.956-64.64z" transform="translate(103.514 80.69)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 785 B

1
static/img/bg/checklist.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1298.119" height="899.547" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="b" x="-.157" y="-.246" width="1.314" height="1.493"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter><filter style="color-interpolation-filters:sRGB" id="a" x="-.122" y="-.214" width="1.244" height="1.427"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M1166.877 285.884s-77.348 181.645-612.332 152.188c-534.984-29.457-110.818 352 323.23 353.472 434.048 1.472 289.102-505.66 289.102-505.66z" fill="#415546" style="fill:#415546;fill-opacity:.5;filter:url(#a)"/><path d="M195.386 108.486c-40.843 13.96-128.633-8.548-64.888 242.016 63.745 250.564 621.712 221.456 663.6 128.51 41.886-92.946-557.869-384.488-598.712-370.527z" fill="#845368" style="fill:#845368;fill-opacity:.5;filter:url(#b)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

1
static/img/bg/contacts.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1681.859" height="924.495" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.074" y="-.152" width="1.147" height="1.305"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M354.969 423.43s100.126 146.213 514.28-156.088c414.156-302.301 597.796-96.83 696.328-12.975 98.532 83.855-704.292 866.429-1229.04 431.278-524.748-435.151 18.432-262.214 18.432-262.214z" fill="#463660" style="filter:url(#a);fill:#463660;fill-opacity:.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 522 B

0
static/img/bg/1.svg → static/img/bg/facts.svg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/img/bg/faq.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="2030.912" height="1870.815" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.074" y="-.088" width="1.147" height="1.176"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M2391.695 6872s-994.633 80.767-963.587-518.257c31.046-599.024 110.947-115.8 940-601.83 829.053-486.03 471.064 916.908 307.336 1008.83C2511.716 6852.665 2391.695 6872 2391.695 6872z" transform="rotate(-17 -16234.9 7431.093)" fill="#3b2141" style="fill:#3b2141;fill-opacity:.5;filter:url(#a)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

1
static/img/bg/principles.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1820.343" height="650.462" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.067" y="-.249" width="1.135" height="1.497"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M1524.834 109.238C1186.826 88 522.51 347.138 186.38 340.351c-336.13-6.787 485.2 327.463 1017.781 150.226 532.581-177.237 658.682-360.109 320.674-381.339z" fill="#504169" style="fill:#504169;fill-opacity:.5;filter:url(#a)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

1
static/img/bg/stories.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="2391.488" height="839.564" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.05" y="-.173" width="1.099" height="1.346"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M190.929 345.063s454.5 163.074 967.161-43.955 675.884-224.758 831.193-159.264c155.309 65.494 378.161 83.075 261.826 247.175-116.335 164.1-938.737-20.512-1129.209 259.775C931.428 929.081 108 407.627 108 407.627z" fill="#1d3141" style="fill:#1d3141;fill-opacity:.5;filter:url(#a)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 547 B

Write Preview
Loading…
Cancel
Save