pedf
/
spolky
Archived
1
0
Fork 0
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

227 lines
9.7 KiB
Svelte

<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';
import Carousel from '@beyonk/svelte-carousel';
</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">
<Carousel>
<img src="https://source.unsplash.com/random/600x300?a" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?s" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?c" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?v" alt="" style="width: 100%">
</Carousel>
</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">
<Carousel>
<img src="https://source.unsplash.com/random/600x300?as" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?ss" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?cs" alt="" style="width: 100%">
<img src="https://source.unsplash.com/random/600x300?vs" alt="" style="width: 100%">
</Carousel>
</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="/#">Sport</a>
<a href="/#">Umění</a>
<a href="/#">Psychologie</a>
<a href="/#">Pedagogika</a>
<a href="/#">Logika</a>
<a href="/#">Filozofie</a>
<a href="/#">Společnost</a>
<a href="/#">Hudba</a>
<a href="/#">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 class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
</div>
<div class="col">
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
</div>
<div class="col">
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
</div>
<div class="col-1"></div>
</section>
</main>
<UpArrow/>