domu-nevidis/index.html

<!DOCTYPE html>
<html lang="cs">
	<head>
		<title>Domů nevidíš</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/static/css/style.css" rel="stylesheet">
		<link rel="icon" type="image/png" href="/static/img/favicon.png">
	</head>
	<body>
		<div class="intro">
			<header>
				<div class="wrap">
					<div class="border-container">
						<div class="logo">
							<img src="/static/img/logo.svg" alt="Logo" class="logo">
						</div>
						<nav id="nav">
							<a href="#zasady">Obecné zásady</a>
							<a href="#checklist">Učitelský checklist</a>
							<a href="#pribehy">Příběhy</a>
							<a href="#kontakty">Na koho se obrátit</a>
							<a href="#faq">FAQ</a>
						</nav>
						<div class="menu-button" id="menu-button">
							<div class="image"></div>
						</div>
					</div>
				</div>
			</header>

			<section class="wrap">
				<div class="grid">
					<div class="text">
						<div class="title">To, co se děje u&nbsp;nich doma, nevidíte&nbsp;&hellip;</div>
						<p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>
					</div>
					<div class="player">
						<video>
							<source src="/static/vid/pestouni.mp4" type="video/mp4">
						</video>
					</div>
					<div class="video-list">
						<img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" class="active">
						<img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/tyrani.mp4">
						<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4">
					</div>
					<a href="" class="button">Vyhledat pomoc</a>
				</div>
			</section>
		</div>
		<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>
			<p class="narrow text-center">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>
		</section>
		<section id="checklist">
			<div class="wrap">
				<h1>Učitelský checklist</h1>
				<p class="narrow text-center">Phasellus porta, velit sit amet varius laoreet, libero ex hendrerit diam, et commodo magna est non odio. Donec lacinia fringilla egestas. Nullam quis urna sit amet eros dignissim varius in non justo. In hac habitasse platea dictumst. Maecenas quis nisi mollis, fringilla justo et, eleifend purus. Donec convallis fringilla sem.</p>
			</div>
			<div class="checklist">
				<div class="card" data-tilt>
					<img src="static/img/pedf-logo-white.svg" alt="">
					<div class="title">
						Pěstounská péče
					</div>
					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
					<a class="download">
						<div class="title">
							Stáhnout
						</div>
						<div class="meta">
							(PDF 2,8MB)
						</div>
					</a>
				</div>
				<div class="card" data-tilt>
					<img src="static/img/pedf-logo-white.svg" alt="">
					<div class="title">
						Pěstounská péče
					</div>
					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
					<a class="download">
						<div class="title">
							Stáhnout
						</div>
						<div class="meta">
							(PDF 2,8MB)
						</div>
					</a>
				</div>
				<div class="card" data-tilt>
					<img src="static/img/pedf-logo-white.svg" alt="">
					<div class="title">
						Pěstounská péče
					</div>
					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
					<a class="download">
						<div class="title">
							Stáhnout
						</div>
						<div class="meta">
							(PDF 2,8MB)
						</div>
					</a>
				</div>
			</div>
		</section>
		<section class="wrap" id="pribehy">
			<h1>Vzorové příběhy</h1>
			<p class="narrow text-center">Donec dapibus quis dui at interdum. Vivamus vel libero lorem. Suspendisse eu hendrerit lorem. Suspendisse nec nisi quis sem venenatis sagittis. Etiam ut porttitor dolor. Integer in tristique quam.</p>
		</section>
		<section class="wrap" id="kontakty">
			<h1>Na koho se obrátit</h1>
			<p class="narrow text-center">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.</p>
			<div class="contact-list">
				<div class="contact">
					...
				</div>
				<div class="contact">
					...
				</div>
				<div class="contact">
					...
				</div>
			</div>
		</section>
		<section class="wrap partners">
			<img src="/static/img/placeholder-logo.svg" alt="Placeholder">
			<img src="/static/img/placeholder-logo.svg" alt="Placeholder">
			<img src="/static/img/placeholder-logo.svg" alt="Placeholder">
			<img src="/static/img/placeholder-logo.svg" alt="Placeholder">
			<img src="/static/img/placeholder-logo.svg" alt="Placeholder">
		</section>
		<section id="faq">
			<div class="wrap">
				<h1>FAQ</h1>
				<p class="narrow text-center">Possimus totam officia unde odit voluptate sint iste. At explicabo sunt et iusto sint. Enim ipsam aliquam eos quos aspernatur beatae. Nostrum architecto sed excepturi eaque et. </p>
				
			</div>
			<div class="faq-list narrow">
				<div class="faq">
					<div class="mark"></div>
					<div>
						<div class="question">
							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
						</div>
						<div class="answer">
							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
						</div>
					</div>
				</div>
				<div class="faq">
					<div class="mark"></div>
					<div>
						<div class="question">
							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
						</div>
						<div class="answer">
							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
						</div>
					</div>
				</div>
				<div class="faq">
					<div class="mark"></div>
					<div>
						<div class="question">
							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
						</div>
						<div class="answer">
							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
						</div>
					</div>
				</div>
				<div class="faq">
					<div class="mark"></div>
					<div>
						<div class="question">
							Co mám dělat, pokud by student/ka měl/a zvláštní chování?
						</div>
						<div class="answer">
							Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.
						</div>
					</div>
				</div>
			</div>
		</section>

		<footer class="text-center">
			<p>&copy; 2023 Domů nevidíš</p>
			<p class="text-bold">Neziskový projekt Pedagogické fakulty Univerzity Karlovy.</p>
		</footer>

	<script type="text/javascript" src="/static/js/nav.js"></script>
	<script type="text/javascript" src="/static/js/accordion.js"></script>
	<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
	</body>
</html>
Upload local files 2 years ago			`<!DOCTYPE html>`
			`<html lang="cs">`
			`<head>`
			`<title>Domů nevidíš</title>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Better handling of initial setup 2 years ago			`<link href="/static/css/style.css" rel="stylesheet">`
Move images to a dedicated folder 2 years ago			`<link rel="icon" type="image/png" href="/static/img/favicon.png">`
Upload local files 2 years ago			`</head>`
			`<body>`
			`<div class="intro">`
			`<header>`
Prepare header and nav 2 years ago			`<div class="wrap">`
			`<div class="border-container">`
Restyle nav for mobile view 2 years ago			`<div class="logo">`
Move images to a dedicated folder 2 years ago			`<img src="/static/img/logo.svg" alt="Logo" class="logo">`
Restyle nav for mobile view 2 years ago			`</div>`
Make menu interactive 2 years ago			`<nav id="nav">`
Link to sections from nav and smooth scroll 2 years ago			`<a href="#zasady">Obecné zásady</a>`
			`<a href="#checklist">Učitelský checklist</a>`
			`<a href="#pribehy">Příběhy</a>`
			`<a href="#kontakty">Na koho se obrátit</a>`
			`<a href="#faq">FAQ</a>`
Prepare header and nav 2 years ago			`</nav>`
Make menu interactive 2 years ago			`<div class="menu-button" id="menu-button">`
			`<div class="image"></div>`
Prepare header and nav 2 years ago			`</div>`
			`</div>`
			`</div>`
Upload local files 2 years ago			`</header>`

Prepare responsive layout for video section 2 years ago			`<section class="wrap">`
Center video section positioning 2 years ago			`<div class="grid">`
			`<div class="text">`
			`<div class="title">To, co se děje u nich doma, nevidíte …</div>`
			`<p>… ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>`
			`</div>`
			`<div class="player">`
			`<video>`
			`<source src="/static/vid/pestouni.mp4" type="video/mp4">`
			`</video>`
			`</div>`
			`<div class="video-list">`
			`<img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" class="active">`
			`<img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/tyrani.mp4">`
			`<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4">`
			`</div>`
			`<a href="" class="button">Vyhledat pomoc</a>`
Upload local files 2 years ago			`</div>`
			`</section>`
			`</div>`
Add facts 2 years ago			`<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 Č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>`
Upload local files 2 years ago			`</section>`
Link to sections from nav and smooth scroll 2 years ago			`<section class="wrap" id="zasady">`
Upload local files 2 years ago			`<h1>Obecné Zásady</h1>`
Narrow content wrapper and text centering 2 years ago			`<p class="narrow text-center">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>`
Upload local files 2 years ago			`</section>`
Enable checklist card scrolling 2 years ago			`<section id="checklist">`
			`<div class="wrap">`
			`<h1>Učitelský checklist</h1>`
			`<p class="narrow text-center">Phasellus porta, velit sit amet varius laoreet, libero ex hendrerit diam, et commodo magna est non odio. Donec lacinia fringilla egestas. Nullam quis urna sit amet eros dignissim varius in non justo. In hac habitasse platea dictumst. Maecenas quis nisi mollis, fringilla justo et, eleifend purus. Donec convallis fringilla sem.</p>`
			`</div>`
Prepare checklist cards 2 years ago			`<div class="checklist">`
Add tilt effect to checklist cards 2 years ago			`<div class="card" data-tilt>`
Move images to a dedicated folder 2 years ago			`<img src="static/img/pedf-logo-white.svg" alt="">`
Prepare checklist cards 2 years ago			`<div class="title">`
			`Pěstounská péče`
			`</div>`
			`<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>`
Add download button to checklist cards 2 years ago			`<a class="download">`
			`<div class="title">`
			`Stáhnout`
			`</div>`
			`<div class="meta">`
			`(PDF 2,8MB)`
			`</div>`
			`</a>`
Upload local files 2 years ago			`</div>`
Add tilt effect to checklist cards 2 years ago			`<div class="card" data-tilt>`
Move images to a dedicated folder 2 years ago			`<img src="static/img/pedf-logo-white.svg" alt="">`
Prepare checklist cards 2 years ago			`<div class="title">`
			`Pěstounská péče`
			`</div>`
			`<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>`
Add download button to checklist cards 2 years ago			`<a class="download">`
			`<div class="title">`
			`Stáhnout`
			`</div>`
			`<div class="meta">`
			`(PDF 2,8MB)`
			`</div>`
			`</a>`
Upload local files 2 years ago			`</div>`
Add tilt effect to checklist cards 2 years ago			`<div class="card" data-tilt>`
Move images to a dedicated folder 2 years ago			`<img src="static/img/pedf-logo-white.svg" alt="">`
Prepare checklist cards 2 years ago			`<div class="title">`
			`Pěstounská péče`
			`</div>`
			`<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>`
Add download button to checklist cards 2 years ago			`<a class="download">`
			`<div class="title">`
			`Stáhnout`
			`</div>`
			`<div class="meta">`
			`(PDF 2,8MB)`
			`</div>`
			`</a>`
Upload local files 2 years ago			`</div>`
			`</div>`
			`</section>`
Link to sections from nav and smooth scroll 2 years ago			`<section class="wrap" id="pribehy">`
Upload local files 2 years ago			`<h1>Vzorové příběhy</h1>`
Narrow content wrapper and text centering 2 years ago			`<p class="narrow text-center">Donec dapibus quis dui at interdum. Vivamus vel libero lorem. Suspendisse eu hendrerit lorem. Suspendisse nec nisi quis sem venenatis sagittis. Etiam ut porttitor dolor. Integer in tristique quam.</p>`
Upload local files 2 years ago			`</section>`
Link to sections from nav and smooth scroll 2 years ago			`<section class="wrap" id="kontakty">`
Upload local files 2 years ago			`<h1>Na koho se obrátit</h1>`
Narrow content wrapper and text centering 2 years ago			`<p class="narrow text-center">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.</p>`
Upload local files 2 years ago			`<div class="contact-list">`
			`<div class="contact">`
			`...`
			`</div>`
			`<div class="contact">`
			`...`
			`</div>`
			`<div class="contact">`
			`...`
			`</div>`
			`</div>`
			`</section>`
Gap, alignment and text transform 2 years ago			`<section class="wrap partners">`
Move images to a dedicated folder 2 years ago			`<img src="/static/img/placeholder-logo.svg" alt="Placeholder">`
			`<img src="/static/img/placeholder-logo.svg" alt="Placeholder">`
			`<img src="/static/img/placeholder-logo.svg" alt="Placeholder">`
			`<img src="/static/img/placeholder-logo.svg" alt="Placeholder">`
			`<img src="/static/img/placeholder-logo.svg" alt="Placeholder">`
Gap, alignment and text transform 2 years ago			`</section>`
Link to sections from nav and smooth scroll 2 years ago			`<section id="faq">`
Move images to a dedicated folder 2 years ago			`<div class="wrap">`
			`<h1>FAQ</h1>`
			`<p class="narrow text-center">Possimus totam officia unde odit voluptate sint iste. At explicabo sunt et iusto sint. Enim ipsam aliquam eos quos aspernatur beatae. Nostrum architecto sed excepturi eaque et. </p>`

			`</div>`
Narrow content wrapper and text centering 2 years ago			`<div class="faq-list narrow">`
Prepare FAQ section 2 years ago			`<div class="faq">`
Script for accordion 2 years ago			`<div class="mark"></div>`
Prepare FAQ section 2 years ago			`<div>`
			`<div class="question">`
			`Co mám dělat, pokud by student/ka měl/a zvláštní chování?`
			`</div>`
			`<div class="answer">`
			`Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.`
			`</div>`
			`</div>`
			`</div>`
Script for accordion 2 years ago			`<div class="faq">`
			`<div class="mark"></div>`
Prepare FAQ section 2 years ago			`<div>`
			`<div class="question">`
			`Co mám dělat, pokud by student/ka měl/a zvláštní chování?`
			`</div>`
			`<div class="answer">`
			`Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.`
			`</div>`
			`</div>`
			`</div>`
			`<div class="faq">`
Script for accordion 2 years ago			`<div class="mark"></div>`
Prepare FAQ section 2 years ago			`<div>`
			`<div class="question">`
			`Co mám dělat, pokud by student/ka měl/a zvláštní chování?`
			`</div>`
			`<div class="answer">`
			`Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.`
			`</div>`
			`</div>`
			`</div>`
			`<div class="faq">`
Script for accordion 2 years ago			`<div class="mark"></div>`
Prepare FAQ section 2 years ago			`<div>`
			`<div class="question">`
			`Co mám dělat, pokud by student/ka měl/a zvláštní chování?`
			`</div>`
			`<div class="answer">`
			`Tempore qui et consequatur adipisci aut et neque dolorum. Ab et illo quo est. Vel praesentium voluptas sint.`
			`</div>`
			`</div>`
			`</div>`
Upload local files 2 years ago			`</div>`
			`</section>`

			`<footer class="text-center">`
			`<p>© 2023 Domů nevidíš</p>`
Build footer 2 years ago			`<p class="text-bold">Neziskový projekt Pedagogické fakulty Univerzity Karlovy.</p>`
Upload local files 2 years ago			`</footer>`
Add tilt effect to checklist cards 2 years ago
Make menu interactive 2 years ago			`<script type="text/javascript" src="/static/js/nav.js"></script>`
Script for accordion 2 years ago			`<script type="text/javascript" src="/static/js/accordion.js"></script>`
Make menu interactive 2 years ago			`<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>`
Upload local files 2 years ago			`</body>`
			`</html>`