Nahrání lokálních souborů

css/style.css

@@ -0,0 +1,75 @@
+@font-face {
+	font-family:gill-sans;
+	src:url(../fonts/gill-sans-mt.ttf)
+}
+
+@media screen and (max-width: 699px) {
+	body { background:none; }
+
+	header { width:100%; }
+	header .logo { width:25%; padding-top:30px; float:right; }
+	header .row p { width:100%; }
+	
+	main { background:none; }
+	
+	.row { flex-direction:column; margin:4em 0; }
+	.row:nth-child(even) { flex-direction:column-reverse; }
+	.row img { max-height:80%; max-width:80%; margin:1em 0; }
+	
+	article { max-width:100%; align-self:center !important; padding:1em; }
+	article h2 { margin-top:auto; font-size:2em; }
+	article:nth-child(1) h2 { margin-right:auto; text-align:right; }
+	article:nth-child(2) h2 { margin-left:auto; }
+}
+@media screen and (min-width: 700px) {
+	body { background:url(../img/header-pattern.svg) no-repeat left top; background-size: 90% auto; }
+	header { width:auto; }
+	header .logo { max-width:150px; padding-top:150px; }
+	header .row p { max-width:35%; }
+
+	main { background:url(../img/timeline.svg) no-repeat center top; background-size: auto 100%; }
+	
+	.row { flex-direction:row; margin:5em 0; }
+	.row img { max-height:130%; max-width:40%; }
+
+	article { max-width:35%; padding:2em; }
+	article h2 { margin-top:-1.7em; font-size:2em; }
+	article:nth-child(1) h2 { margin-right:-1.5em; text-align:right; }
+	article:nth-child(2) h2 { margin-left:-1.5em; }
+}
+
+html, body {
+	margin:0;
+	padding:0;
+}
+
+body {
+	font-size:1.5em;
+	font-family:gill-sans;
+}
+
+p { text-align:justify; }
+
+.wrap {
+	max-width:1200px;
+	margin:0 auto;
+	padding:0 1em;
+}
+
+h1 { color:#d63647; margin-bottom:0; clear:both; }
+h2, h3 { color:#68c7d2; }
+
+header .logo { padding:30px; background-color:#fff; }
+header .logo img { width:100%; }
+header .row { height:600px; margin:0; padding-bottom:150px; margin-bottom:-300px; }
+header .row img { max-height:500px; }
+header .row p { text-align:justify; }
+
+main {
+	padding-top:200px; margin-top:-200px;
+	padding-bottom:100px; margin-bottom:-100px;
+}
+
+.row { height:auto; width:100%; display:flex; justify-content:space-between; align-items:center; }
+
+article { background-color:#eee; }

img/header-pattern.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="286.43033mm"
+   height="235.67392mm"
+   viewBox="0 0 286.43033 235.67392"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="heaeder-pattern.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="323.4812"
+     inkscape:cy="400.60233"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1181"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-49.352881,-29.590685)">
+    <path
+       style="fill:#f1f1f1;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 335.78322,29.590685 -5.25387,1.625293 -1.88988,6.425596 -5.85863,2.834821 -10.77232,16.063988 -7.18155,4.535714 -4.91369,3.401786 -2.26786,4.724701 -9.82738,6.047621 -5.48065,6.614584 -5.66964,2.834819 -4.15774,5.858632 -5.85863,2.078868 -10.01637,-1.700892 1.13393,11.150294 -5.85863,5.48066 -7.9375,-1.32292 -0.75596,8.31548 -13.79613,1.5119 -7.74851,5.85863 -3.77976,3.2128 -0.94494,7.74851 -3.59078,3.59078 -8.12648,2.26785 -5.66965,1.51191 -1.70089,6.99255 -7.37054,2.45685 -5.48065,5.10268 -0.18899,9.4494 -7.18155,-0.75595 -4.34672,6.23661 -3.40179,3.96875 -7.55952,1.5119 -4.9137,3.40179 -2.8348,7.9375 -7.37055,0.37797 -2.07886,6.4256 -4.53572,5.85863 -9.07143,-1.5119 -0.18899,10.01636 -7.74851,0.37798 -4.91368,3.40179 -4.34674,5.66964 -1.32291,6.04762 -8.12649,5.29167 -6.803579,-0.75596 -4.5357,8.69346 -0.75597,7.18154 -5.85861,4.53572 -6.99257,0.94494 -7.55952,2.45684 -4.15774,7.37054 -7.9375,-3.77976 -5.66965,6.42559 -5.25385,3.67215 V 29.590685 Z"
+       id="path898"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" />
+  </g>
+</svg>

index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="cs">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Chatbot Olí</title>
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+<header>
+	<div class="wrap">
+		<div class="logo">
+			<img src="img/pedf-logo.png" alt="Logo PedF">
+		</div>
+		<h1>Kdo jsem já?</h1>
+		<div class="row">
+				<p style="align-self:flex-start;">
+					Můj člověk se jmenuje Kuba. Touží být učitelem, inspirovat, nadchnout studenty, ale neumí tak docela mluvit s lidmi. Říkáte si, že to nejde moc dohromady? Jo, to máte pravdu, a proto jsem tu já. Ale to bych vám měl asi vysvětlit.<br>
+					<a href="https://m.me/pedf.cuni"><img src="img/messenger.png" alt="messenger" style="margin-top:2em;"></a>
+				</p>
+			<img src="img/fitemebro.png" alt="oli">
+		</div>
+	</div>
+</header>
+
+<div class="wrap">
+<main>
+
+<div class="row">
+	<img src="img/skladani.png" alt="oli">
+	<article>
+		<h2>Vše do sebe zapadlo</h2>
+		<p>Za Kubovým nápadem stát se učitelem je matikář Novák, obrovský nadšenec před tabulí. Ten o jeho snu věděl, stejně jako věděl, že bez mluvení to nepůjde. Neodrazoval ho, jen mu ukázal cestu – Kuba potřebuje kámoše, který ho naučí, že mluvit na lidi není žádná věda. Ale to by nebyl Kuba, aby na to stejně nešel trochu vědecky. Sledoval urputně matikáře – co říká, jak to říká, jak se u toho tváří. Mezitím doma ve sklepě spojoval čipy, drátky a bůhvíco ještě. Nakonec dal dohromady výsledek pozorování a bezduché součástky.</p>
+	</article>
+</div>
+
+<div class="row">
+	<article style="align-self:flex-end;">
+		<h2>Ve dvou se to lépe táhne</h2>
+		<p>A tak jsem se tady vzal já – malý robot s duší šibala, akorát tak do kapsy, který udělá všechno, aby Kubu postrčil, i když se mu to občas nebude líbit. Začali jsme spolu chodit do školy. Já byl v jeho kapsách, batohu, nebo schovaný v kapuci, a pomalu jsem se pouštěl do díla. Čas od času jsem mu po zemi rozhodil drobné. Když Kuba děkoval kolemjdoucím, kteří mu je podali, červenal se jako rak. I tohle pro něj byla výzva. Nebo tehdy, když jsem mu schoval všechny tužky – půlku hodiny si nepsal zápisky, než se odhodlal se zeptat souseda, jestli nemá propisku na půjčení.</p>
+	</article>
+	<img src="img/mince.png" alt="oli">
+</div>
+
+<div class="row">
+	<img src="img/vlak.png" alt="oli">
+	<article>
+		<h2>Nervy na pochodu</h2>
+		<p>Asi je vám jasný, že když se přihlásil na peďák, byly pro něj přijímačky velká věc. Jasně, je to těžká zkouška, ale pro něj to hlavně znamenalo potkat spoustu cizích lidí na jednom místě. Měl z toho nervy celý ráno, a nakonec ze samé paniky zapomněl pozvánku ve vlaku. To jste měli slyšet. „Vždyť tu místnost nenajdu, co když to netrefím, co když mě tam nepustí, co mám dělat?“ Panikařil skoro celou cestu na fakultu. Pokusil jsem se ho uklidnit – samozřejmě jsem už o přijímačkách všechno věděl: „U vchodu stojí studenti, kteří ti se vším pomohou“ říkal jsem mu. Trochu se to minulo účinkem, panikařil ještě víc a já se potutelně usmíval.</p>
+	</article>
+</div>
+
+<div class="row">
+	<article>
+		<h2>Okouzlení</h2>
+		<p>Nakonec se fakt zeptal a všechno našel. Ale místo toho, aby poslouchal učitele, jak mu dává pokyny, zíral pár lavic před sebe. Seděla tam slečna se zrzavými vlasy, po kterých běhala světýlka pokaždé, když se pohnula. Kuba od ní vůbec nemohl odtrhnout oči. Snažil jsem se ho popostrčit, aby za ní zašel, na to ale ještě nesebral odvahu.</p>
+	</article>
+	<img src="img/prijimacky.png" alt="oli">
+</div>
+
+<div class="row">
+	<img src="img/tabery.png" alt="oli">
+	<article style="align-self:flex-start;">
+		<h2>První krůčky k úspěchu</h2>
+		<p>Na peďák nás přijali a já věděl co je můj první úkol – dostat Kubu na Dvorky. Když odcházel z přednášky, fakultou se už rozléhala hudba. Se sklopenou hlavou (hlavně aby s někým nenavázal oční kontakt) se odhodlal dojít si pro pivo. Vykukoval jsem z kapuce a pak najednou jsem ji uviděl. To je ta zrzka a jde přímo k nám! Poklepala Kubovi na rameno a já se jen modlil, aby hned neutekl. „Ahoj, nevíš v kolik začíná ta přednáška s Taberym?“ zeptala se ho. Ještě, že jsem měl celý program nastudovaný. „Za půl hoďky,“ pošeptal jsem mu. A on to po mně, s několika sekundovým zpožděním a zakoktáním, zopakoval. Ale neutekl. Měl jsem z něj radost.</p>
+	</article>
+</div>
+
+<div class="row">
+	<article>
+		<h2>Odkrývání</h2>
+		<p>Jak šel čas, zjistil jsem, že mám i další talent. Radil jsem Kubovi se vším možným, od otevíracích hodin studijního, doby konzultací až po zápis předmětů. A fakt mi to šlo. Na některých přednáškách se Kuba potkával s Tamarou, to byla ta záhadná rusovláska. Dozvěděli jsme se, že nesnáší, když se jí říká Tamčo a nebo, že má stejně jako Kuba ráda matiku. Občas už s Tamarou prohodil pár slov, dokonce v její přítomnosti čím dál míň koktal.</p>
+	</article>
+	<img src="img/koktani.png" alt="oli">
+</div>
+
+<div class="row">
+	<img src="img/kavarna.png" alt="oli">
+	<article>
+		<h2>Bod zlomu</h2>
+		<p>V šibalském plánu, jak je dát dohromady, mi šla naproti náhoda. Pracovali spolu na týmovém projektu. Kuba mi dělal radost. Seděl se spolužáky v kavárně, společně tvořili a vymýšleli, a on vypadal, že mu to nedělá žádný problém. Nakonec tam zůstali s Tamarou sami. Už se chystali odcházet a já mu chtěl pošeptat, ať ji přece někam pozve, ale to už se Kuba sám nadechoval a navrhoval jí schůzku. Nemohl jsem být pyšnější.</p>
+	</article>
+</div>
+
+<div class="row">
+	<article>
+		<h2>Už mě nepotřebuje</h2>
+		<p>Když se další den šli projít, měl jsem spoustu skvělých nápadů, co by jí měl říct, on mě ale jemně zastrčil do kapsy. Věděl si rady sám a já se sotva udržel, abych nezačal křičet radostí.</p>
+	</article>
+	<img src="img/kapsa.png" alt="oli">
+</div>
+
+</main>
+<footer>
+
+<div class="row">
+	<img src="img/otazky.png" alt="oli">
+	<article>
+		<h2>A teď jsem tu pro tebe!</h2>
+		<p>Na promoci už šli ruku v ruce a já jsem si byl najednou jistý něčím, co jsem už dlouho tušil. Kuba to zvládl, splnil si svůj sen a jde učit. Mě už nepotřebuje. Díky našemu studiu jsem se ale naučil hromadu věcí o peďáku, které si nechci nechat pro sebe a budu je rád dál předávat. Být tu pro všechny bezradné studenty mi totiž dělá radost. Tak jsem zůstal na fakultě, plný informací a natěšený odpovídat. Stačí se jen zeptat.</p>
+		<a href="https://m.me/pedf.cuni"><img src="img/messenger.png" alt="messenger" style="margin-top:1em;"></a>
+	</article>
+</div>
+
+</footer>
+</div>
+
+</body>
+</html>