|
|
|
|
<style>
|
|
|
|
|
main {
|
|
|
|
|
background: none !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Logo from '../components/logo.svelte';
|
|
|
|
|
import UpArrow from '../components/up.svelte';
|
|
|
|
|
import MenuBtn from '../components/menu-btn.svelte';
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<MenuBtn/>
|
|
|
|
|
|
|
|
|
|
<main id="root">
|
|
|
|
|
<section class="row fullheight">
|
|
|
|
|
<Logo/>
|
|
|
|
|
<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)">❮</a>
|
|
|
|
|
<a class="next" onclick="plusSlides(1)">❯</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')">❮</a>
|
|
|
|
|
<a class="next" onclick="plusSlides(1, 'mySlides2')">❯</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>
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<UpArrow/>
|
