mvp

css/main.css

@@ -124,6 +124,12 @@ body > canvas {
   padding: 3rem 9rem;
   font-size: calc(var(--font-size) * 0.7);
 }
+.smol-button {
+  background-color: #fff !important;
+  border: solid 0.5vh var(--color-primary);
+  color: #000 !important;
+  padding: 1rem 3rem;
+}
 .horizontal-menu {
   font-size: calc(var(--font-size) / 2);
   position: absolute;
@@ -232,6 +238,12 @@ body > canvas {
 .row {
   width: 100vw;
 }
+.hover-man {
+  transition: 0.3s;
+}
+.hover-man:hover {
+  filter: brightness(0.7) contrast(0.7);
+}
 .down {
   display: flex;
   flex-direction: column;
@@ -241,3 +253,6 @@ body > canvas {
   display: flex;
   flex-direction: row;
 }
+.no-underline a {
+  text-decoration: none !important;
+}

css/main.styl

@@ -114,6 +114,12 @@ body > canvas
 	padding: 3rem 9rem
 	font-size: calc(var(--font-size) * 0.7)
 
+.smol-button
+	background-color: #fff !important
+	border: solid 0.5vh var(--color-primary)
+	color: #000 !important
+	padding: 1rem 3rem
+
 .horizontal-menu
 	font-size calc(var(--font-size) / 2)
 	position: absolute
@@ -214,6 +220,11 @@ body > canvas
 .row
 	width: 100vw
 
+.hover-man
+	transition: .3s
+	&:hover
+		filter brightness(.7) contrast(.7)
+
 .down
 	display flex
 	flex-direction column
@@ -222,3 +233,7 @@ body > canvas
 	align-items center
 	display flex
 	flex-direction row
+
+.no-underline
+	a
+		text-decoration none !important

index.html

@@ -33,6 +33,10 @@
 			</ul>
 		</nav>
 	</div>
+	<div class="cross menu-btn">
+		<img src="svg/menu1.svg" class="idle">
+		<img src="svg/menu2.svg" class="active">
+	</div>
 
 	<main id="root">
 	</main>
@@ -42,11 +46,15 @@
 	</div>
 
 	<code style="display: none">
-		clicking on ".cross-og" removes class "open-nav" on ".navigation-overlay"
+		clicking on ".cross-og" toggles class "open-nav" on ".navigation-overlay"
-		clicking on ".cross-og" removes class "darken" on "#root"
+		clicking on ".cross-og" toggles class "darken" on "#root"
-		clicking on ".menu-link" removes class "open-nav" on ".navigation-overlay" no-prevent
+		clicking on ".cross-og" toggles class "darken" on ".menu-btn"
-		clicking on ".menu-btn" adds class "open-nav" on ".navigation-overlay"
+		clicking on ".menu-link" toggles class "open-nav" on ".navigation-overlay" no-prevent
-		clicking on ".menu-btn" adds class "darken" on "#root"
+		clicking on ".menu-link" toggles class "darken" on "#root" no-prevent
+		clicking on ".menu-link" toggles class "darken" on ".menu-btn" no-prevent
+		clicking on ".menu-btn" toggles class "open-nav" on ".navigation-overlay"
+		clicking on ".menu-btn" toggles class "darken" on "#root"
+		clicking on ".menu-btn" toggles class "darken" on ".menu-btn"
 	</code>
 
 	<script src="https://unpkg.com/@riotjs/dom-bindings/dist/umd.dom-bindings.js"></script>
@@ -58,7 +66,7 @@
 	<script src="js/particles.js"></script>
 	<script src="js/router.js"></script>
 	<script src="js/script.js"></script>
-	<script src="/js/carousel.js"></script>
+	<script src="js/carousel.js"></script>
 	<script>
 const {	initDomListeners, setBase, router } = route;
 

js/carousel.js

@@ -17,18 +17,19 @@ var slideIndex = 1;
 
 
 // Next/previous controls
-function plusSlides(n) {
+function plusSlides(n, className = "mySlides") {
-  showSlides(slideIndex += n);
+  console.log("changing slides");
+  showSlides(slideIndex += n, className);
 }
 
 // Thumbnail image controls
-function currentSlide(n) {
+function currentSlide(n, className = "mySlides") {
-  showSlides(slideIndex = n);
+  showSlides(slideIndex = n, className);
 }
 
-function showSlides(n) {
+function showSlides(n, className = "mySlides") {
   var i;
-  var slides = document.getElementsByClassName("mySlides");
+  var slides = document.getElementsByClassName(className);
   var dots = document.getElementsByClassName("dot");
   if (n > slides.length) {slideIndex = 1}
   if (n < 1) {slideIndex = slides.length}
@@ -47,3 +48,28 @@ checkElement('.mySlides') //use whichever selector you want
 	console.log("sldaldsaldsa");
 	showSlides(slideIndex);
 });
+
+checkElement('.mySlides2') //use whichever selector you want
+.then((element) => {
+	console.log("sldaldsaldsa");
+	showSlides(slideIndex, "mySlides2");
+});
+
+checkElement('.mySlides3') //use whichever selector you want
+.then((element) => {
+	console.log("sldaldsaldsa");
+	showSlides(slideIndex, "mySlides3");
+});
+
+checkElement('.mySlides4') //use whichever selector you want
+.then((element) => {
+	console.log("sldaldsaldsa");
+	showSlides(slideIndex, "mySlides4");
+});
+
+checkElement('.mySlides5') //use whichever selector you want
+.then((element) => {
+	console.log("sldaldsaldsa");
+	showSlides(slideIndex, "mySlides5");
+});
+

page/prebiram.html

@@ -1,6 +1,199 @@
 <section class="row fullheight">
-	<div class="cross menu-btn">
+	<div class="logo">
-		<img src="svg/menu1.svg" class="idle">
+		<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="img/logo.png"></a>
-		<img src="svg/menu2.svg" class="active">
+	</div>
+	<div class="row" style="width: 100%">
+		<section class="col-1"></section>
+		<section class="col-5">
+			<div style="margin-top: 23vh">
+				<h1 style="margin-bottom: 5vh">Přebírám spolek</h1>
+				<hr class="gay-hr">
+				<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.75)">
+					Většinou se stává, že minulý předseda tomu současnému hodně do začátku pomůže a provede ho všemi náležitostmi,
+					které z toho vyplývají. Ale někdy se tak nestane, a proto jsme s ostatními předsedi dali hlavy dohromady a vytvořili
+					návod toho, co bys měl/a určitě dělat.
+				</h6>
+				<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
+					↓  Zjisti více
+				</button>
+			</div>
+		</section>
+	</div>
+</section>
+<section class="row" style="margin-top: 9rem">
+	<div class="col-1"></div>
+	<div class="col-5 bg-square">
+		<h3>Přebírám formální spolek</h3>
+		<hr class="gay-hr">
+		<p style="font-size: calc(var(--font-size) / 2); margin-top: 5vh; text-align: left">
+			Většinou se stává, že minulý předseda tomu současnému hodně do začátku pomůže a provede ho všemi náležitostmi,
+			které z toho vyplývají. Ale někdy se tak nestane, a proto jsme s ostatními předsedi dali hlavy dohromady a vytvořili
+			návod toho, co bys měl/a určitě dělat.
+		</p>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col-3 side-line" style="line-height: 1">
+		<div>
+		<h6 style="margin-bottom: 0"><b>Postup přebírání</b></h6>
+		<div>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col">
+		<div class="number-gay">
+			<div class="down">
+			<span>1.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Seznam se s terminologií</b></h6>
+				<p>Formální spolek je spolek s IČem a volenými orgány.
+				Má vlastní účet atp. Neformální spolek je sdružení kamarádů,
+				které hrozně baví dělat různé věci. Nemá IČO a většinou ani žádné orgány.
+				Studentská oborová rada pomáhá studentům v komunikaci s katedrou. Hlavní předpisy,
+				kterými je třeba se řídit jsou tady.</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>4.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Přístup ke spolkovému účtu</b></h6>
+				<p>
+					Peníze nejsou všechno, ale je dobré mít přístup ke spolkovému účtu.
+					Sežeň si co nejdříve údaje k němu.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>7.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Inspiruj se u podobných organizací</b></h6>
+				<p>
+					Doporučujeme se podívat, jak to vypadá i v jiných organizacích a spolcích - doporučujeme spolky na UK,
+					dobře zpracované to má VŠE, v zahraničí (německy: Verbindung, Burschenshaft, anglicky: student society, sorority, fraternity)
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>10.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nastav fungování týmu</b></h6>
+				<p>
+					Nastav si fungování nejbližšího týmu (většinou se mu říká rada). Neboj se ozvat dalším spolkům,
+					které dobře fungují. Pravděpodobně řešili to samé.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>13.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Rady od starších</b></h6>
+				<p>
+					A aby toho nebylo málo, tady máš rady od bývalých a současných předsedů.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div style="height: 6vh"></div>
+		<div class="number-gay">
+			<div class="down">
+			<span>2.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Napiš na soud</b></h6>
+				<p>
+					Napiš na soud, že se změnil statutární orgán.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>5.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve zkontroluj finanční dokumenty</b></h6>
+				<p>
+					Zkontroluj si, zda byla na daňový úřad podána daňová přiznání za minulé roky,
+					ať první, co budeš řešit, není návštěva berňáku.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>8.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Přečti si pravidla spolkovky</b></h6>
+				<p>
+					Asi víš, že máte přístup do spolkovky, tak je dobré si přečíst její pravidla, aby na tebe nebyly ostatní spolky
+					naštvané.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>11.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Kdo je kdo na fakultě</b></h6>
+				<button
+					type="button"
+					class="button primary cool-button smol-button"
+					style="margin-top: 1vh; border-radius: 4vw;"
+				>
+					↓  Zjisti více
+				</button>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div style="height: 12vh"></div>
+		<div class="number-gay">
+			<div class="down">
+			<span>3.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlas to fakultě</b></h6>
+				<p>
+					Když budeš v tom, je to třeba nahlásit i na fakultě, abychom věděli, s kým jednat.
+					<a href="javascript:void(0)">stačí vyplnit tohle</a>
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>6.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve zkontroluj finanční dokumenty</b></h6>
+				<p>
+					Zkontroluj si, zda byla podána daňová přiznání za minulé roky, ať první, co budeš
+					řešit, není návštěva berňáku.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>9.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
+				<p>
+					Tohle asi víc, ale pro jistotu: nahlašování akcí, které budeš se spolkem dělat se dělá tady:
+					<a href="javascript:void(0)">formulář nahlašování akcí</a>
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>12.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
+				<p>
+					Hodně doporučujeme si udělat základní SWOT analýzu, která ti prozradí, jak na tom váš spolek j
+					a kam je možné ho směřovat dál. O tom, jak udělat SWOTku najdeš info třeba tady:
+					<a href="https://managementmania.com/cs/swot-analyza">https://managementmania.com/cs/swot-analyza</a>
+					<a href="https://www.marketingmind.cz/swot-analyza">https://www.marketingmind.cz/swot-analyza</a>
+					<a href="https://mladypodnikatel.cz/co-to-je-swot-analyza-t2797">https://mladypodnikatel.cz/co-to-je-swot-analyza-t2797</a>
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-1"></div>
+</section>
+<section class="row" style="margin-top: 9rem">
+	<div class="col-1"></div>
+	<div class="col-5 bg-circle" style="background-position: top center">
+		<h4>Přebírám neformální spolek</h4>
+		<hr class="gay-hr">
+		<p style="font-size: calc(var(--font-size) / 1.3); margin-top: 5vh; text-align: justify">
+			Zde odpadá většina formálních náležitostí. Je třeba nahlásit na fakultě změnu předsedy.
+		</p>
 	</div>
 </section>

page/predseda.html

@@ -1,8 +1,4 @@
 <section class="row fullheight">
-	<div class="cross menu-btn">
-		<img src="svg/menu1.svg" class="idle">
-		<img src="svg/menu2.svg" class="active">
-	</div>
 	<div class="logo">
 		<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="img/logo.png"></a>
 	</div>
@@ -222,7 +218,7 @@
 		  <span class="dot" onclick="currentSlide(4)"></span>
 		</div>
 	</section>
-	<script src="/js/carousel.js"></script>
+	<script src="js/carousel.js"></script>
 </section>
 <section class="row" style="margin-top: 9rem">
 	<div class="col-1"></div>

page/zalozit_spolek.html

@@ -1,6 +1,142 @@
 <section class="row fullheight">
-	<div class="cross menu-btn">
+	<div class="logo">
-		<img src="svg/menu1.svg" class="idle">
+		<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="img/logo.png"></a>
-		<img src="svg/menu2.svg" class="active">
 	</div>
+	<div class="row" style="width: 100%">
+		<section class="col-1"></section>
+		<section class="col-5">
+			<div style="margin-top: 23vh">
+				<h1 style="margin-bottom: 5vh">Přebírám spolek</h1>
+				<hr class="gay-hr">
+				<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.75)">
+					Většinou se stává, že minulý předseda tomu současnému hodně do začátku pomůže a provede ho všemi náležitostmi,
+					které z toho vyplývají. Ale někdy se tak nestane, a proto jsme s ostatními předsedi dali hlavy dohromady a vytvořili
+					návod toho, co bys měl/a určitě dělat.
+				</h6>
+				<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
+					↓  Zjisti více
+				</button>
+			</div>
+		</section>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col-10 side-line" style="line-height: 1">
+		<div>
+		<h6 style="margin-bottom: 0"><b>Informace k založení neformálního spolku</b></h6>
+		<div>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col">
+		<div class="number-gay">
+			<span>1.</span>
+			<p>Je třeba sehnat tolik a tolik lidí a zaregistrovat se tady - <a href="javascript:void(0)">formulář</a></p>
+		</div>
+	</div>
+	<div class="col">
+		<div style="height: 6vh"></div>
+		<div class="number-gay">
+			<span>2.</span>
+			<p>O granty můžeš žádat tady, až bude venku výzva (dáme ti vědět na email)</p>
+		</div>
+	</div>
+	<div class="col">
+		<div style="height: 12vh"></div>
+		<div class="number-gay">
+			<span>3.</span>
+			<p>Pamatuj ale, že všechny akce musíš nahlašovat tady - <a href="javascript:void(0)">odkaz</a></p>
+		</div>
+	</div>
+	<div class="col-1"></div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col-10" style="line-height: 1">
+		<div class="side-line">
+			<h6 style="margin-bottom: 0"><b>Informace k založení formálního spolku</b></h6>
+		</div>
+		<p style="font-size: calc(var(--font-size) / 1.8); margin-left:1.15vw; margin-top: 0.5vw">
+			Tady je to už trochu složitější, ale neboj se, zas tak hrozné to není
+		</p>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col">
+		<div class="number-gay">
+			<div class="down">
+			<span>1.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nejdříve potřebuješ přípravný výbor, ten se musí skládat z alespoň 3 osob</b></h6>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>4.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po registraci může článek oficiálně začít fungovat.</b></h6>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>7.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Základní předpisy</b></h6>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div style="height: 6vh"></div>
+		<div class="number-gay">
+			<div class="down">
+			<span>2.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Je třeba sepsat osnovy</b></h6>
+				<p>
+					Jak to má Agora se můžeš podívat tady, Drosophila tady a Emil tady. Otevřeno má pobočkovou strukturu,
+					takže je to složitější, ale co kdyby.
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>5.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Zajít do banky založit transparentní účet</b></h6>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>8.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Povinnosti a práva spolku</b></h6>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div style="height: 12vh"></div>
+		<div class="number-gay">
+			<div class="down">
+			<span>3.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Po tomhle všem musíš vyplnit</b></h6>
+				<p>
+					<a href="javascript:void(0)">tenhle formulář</a>
+				</p>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>6.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Registrace jako fakultní spolek - <a href="javascript:void(0)">zde</a></b></h6>
+			</div>
+		</div>
+		<div class="number-gay">
+			<div class="down">
+			<span>9.</span>
+				<h6 style="font-size: calc(var(--font-size) / 1.8)"><b>Nahlašování akcí</b></h6>
+				<p>
+					Tohle asi víc, ale pro jistotu: nahlašování akcí, které budeš se spolkem dělat se dělá tady:
+					<a href="javascript:void(0)">formulář nahlašování akcí</a>
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class="col-1"></div>
 </section>

page/zapojit_se.html

@@ -1,6 +1,282 @@
 <section class="row fullheight">
-	<div class="cross menu-btn">
+	<div class="logo">
-		<img src="svg/menu1.svg" class="idle">
+		<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="img/logo.png"></a>
-		<img src="svg/menu2.svg" class="active">
 	</div>
+	<div class="row" style="width: 100%">
+		<section class="col-1"></section>
+		<section class="col-5">
+			<div style="margin-top: 23vh">
+				<h1 style="margin-bottom: 5vh">Chci se zapojit</h1>
+				<hr class="gay-hr">
+				<h6 style="line-height: 1.4; margin-top: 5vh">
+					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce wisi. Duis bibendum, lectus ut viverra rhoncus.
+				</h6>
+				<button type="button" class="button primary cool-button" style="margin-top: 1vh; border-radius: 4vw">
+					↓  Zjisti více
+				</button>
+			</div>
+		</section>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col-5" style="line-height: 1">
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh+">
+			<h6 style="margin-bottom: 0"><b>Co jsou vlastně studentské organizace?</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+	</div>
+	<div class="col-5" style="line-height: 1">
+		<div style="height: 8vh"></div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh">
+			<h6 style="margin-bottom: 0"><b>Proč bych se měl do toho pouštět?</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+<div class="col flexy-boi">
+	<h5 style="color: var(--color-primary)"><b>Jak se v tom všem vyznat?</b></h5>
+</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col-5" style="line-height: 1">
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh+">
+			<h6 style="margin-bottom: 0"><b>Formální spolek</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh+">
+			<h6 style="margin-bottom: 0"><b>SORka</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh+">
+			<h6 style="margin-bottom: 0"><b>Univerzitní spolek</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+	</div>
+	<div class="col-5" style="line-height: 1">
+		<div style="height: 8vh"></div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh">
+			<h6 style="margin-bottom: 0"><b>Neformální spolky</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+		<div class="down" style="margin-right: 3vw">
+			<div class="side-line" style="margin-bottom: 1vh">
+			<h6 style="margin-bottom: 0"><b>Fakultní spolek</b></h6>
+			</div>
+			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+				incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+				eu fugiat nulla pariatur.
+			</p>
+		</div>
+	</div>
+</section>
+<section class="row" style="margin-top: 14vh">
+	<div class="col-1"></div>
+	<div class="col-6" style="background-position: top center">
+		<h5>Zkušenosti členů a bývalých členů</h5>
+		<hr class="gay-hr">
+	</div>
+</section>
+<section class="row" style="margin-top: 4vh">
+	<section class="col">
+		<link rel="stylesheet" href="/css/carousel.css">
+		 <!-- Slideshow container -->
+		<div class="slideshow-container">
+
+		  <!-- Full-width images with number and caption text -->
+		  <div class="mySlides fade">
+		    <div class="numbertext">1 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Text</div>
+		  </div>
+
+		  <div class="mySlides fade">
+		    <div class="numbertext">2 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Two</div>
+		  </div>
+
+		  <div class="mySlides fade">
+		    <div class="numbertext">3 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Three</div>
+		  </div>
+
+		  <div class="mySlides fade">
+		    <div class="numbertext">3 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Three</div>
+		  </div>
+
+		  <!-- Next and previous buttons -->
+		  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+		  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+		</div>
+		<br>
+
+		<!-- The dots/circles -->
+		<div style="text-align:center">
+		  <span class="dot" onclick="currentSlide(1)"></span>
+		  <span class="dot" onclick="currentSlide(2)"></span>
+		  <span class="dot" onclick="currentSlide(3)"></span>
+		  <span class="dot" onclick="currentSlide(4)"></span>
+		</div>
+	</section>
+</section>
+<section class="row" style="margin-top: 14vh">
+	<div class="col-1"></div>
+	<div class="col-6" style="background-position: top center">
+		<h5>Proč bys měl jít právě k nám?</h5>
+		<hr class="gay-hr">
+	</div>
+</section>
+<section class="row" style="margin-top: 4vh">
+	<section class="col">
+		<link rel="stylesheet" href="/css/carousel.css">
+		 <!-- Slideshow container -->
+		<div class="slideshow-container">
+
+		  <!-- Full-width images with number and caption text -->
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">1 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Text</div>
+		  </div>
+
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">2 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Two</div>
+		  </div>
+
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">3 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Three</div>
+		  </div>
+
+		  <div class="mySlides2 fade">
+		    <div class="numbertext">3 / 3</div>
+		    <img src="img/trump.jpg" style="width:100%">
+		    <div class="text">Caption Three</div>
+		  </div>
+
+		  <!-- Next and previous buttons -->
+		  <a class="prev" onclick="plusSlides(-1, 'mySlides2')">&#10094;</a>
+		  <a class="next" onclick="plusSlides(1, 'mySlides2')">&#10095;</a>
+		</div>
+		<br>
+
+		<!-- The dots/circles -->
+		<div style="text-align:center">
+		  <span class="dot" onclick="currentSlide(1, 'mySlides2')"></span>
+		  <span class="dot" onclick="currentSlide(2, 'mySlides2')"></span>
+		  <span class="dot" onclick="currentSlide(3, 'mySlides2')"></span>
+		  <span class="dot" onclick="currentSlide(4, 'mySlides2')"></span>
+		</div>
+	</section>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col flexy-boi" style="background-position: top center">
+		<h5>Seznam spolků a studentských oborových rad</h5>
+		<hr class="gay-hr">
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col flexy-boi">
+		<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
+	</div>
+</section>
+<section class="row" style="margin-top: 5vh">
+	<div class="col-1"></div>
+	<div class="col flexy-boi">
+		<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900">
+			<a href="javascript:void(0)">Sport</a>
+			<a href="javascript:void(0)">Umění</a>
+			<a href="javascript:void(0)">Psychologie</a>
+			<a href="javascript:void(0)">Pedagogika</a>
+			<a href="javascript:void(0)">Logika</a>
+			<a href="javascript:void(0)">Filozofie</a>
+			<a href="javascript:void(0)">Společnost</a>
+			<a href="javascript:void(0)">Hudba</a>
+			<a href="javascript:void(0)">Dějiny</a>
+		</div>
+	</div>
+	<div class="col-1"></div>
+</section>
+<section class="row" style="margin-top: 3vh">
+	<div class="col-1"></div>
+	<div class="col">
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+	</div>
+	<div class="col">
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+	</div>
+	<div class="col">
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+		<a href="javascript:void(0)" class="hover-man"><img src="img/trump.jpg"></a>
+	</div>
+	<div class="col-1"></div>
 </section>
+