-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
167 lines (146 loc) · 9.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="sk-SK">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="build.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<title>KockatýKalendár.sk - prehľad M/F/I akcií a súťaží pre ZŠ a SŠ</title>
<meta name="theme-color" content="#4299e1">
<meta name="description" content="Všetky súťaže a akcie v oblasti matematiky, fyziky a informatiky na jednom mieste.">
<meta property="og:image" content="img/social.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="KockatýKalendár.sk" />
<meta property="og:description" content="Všetky súťaže a akcie v oblasti matematiky, fyziky a informatiky na jednom mieste." />
<script async src="homepage.js"></script>
</head>
<body class="antialiased max-h-screen h-screen flex flex-col">
<header class="bg-blue-500 text-white">
<nav class="px-4 md:px-6 flex justify-center md:justify-between items-center py-4 flex-col md:flex-row">
<a href="index.html" class="font-bold text-xl mb-1 md:mb-0">KockatýKalendár.sk</a>
<ul class="flex font-bold">
<li class="mr-3">
<a class="inline-block border border-blue-700 rounded py-1 px-3 bg-blue-700 text-white" href="index.html">O nás</a>
<a class="inline-block border border-white rounded py-1 px-3 bg-blue-500 text-white
hover:text-blue-500 hover:border-gray-200 hover:bg-gray-200" href="terminy.html">Akcie</a>
<a class="inline-block border border-white rounded py-1 px-3 bg-blue-500 text-white
hover:text-blue-500 hover:border-gray-200 hover:bg-gray-200" href="ical.html">Export</a>
</li>
</ul>
</nav>
</header>
<main class="overflow-y-scroll">
<div class="bg-blue-400 bg-cover bg-center relative">
<picture>
<source srcset="img/header.avif" type="image/avif">
<source srcset="img/header.webp" type="image/webp">
<img class="object-cover w-full h-full absolute" src="img/header.jpg">
</picture>
<div class="container mx-auto px-8 py-24 text-center relative">
<h1 class="font-bold text-3xl md:text-5xl">KockatýKalendár.sk</h1>
<p class="text-xl md:-mt-1 mb-4">
Prehľad akcií a súťaží v oblasti matematiky, fyziky a informatiky pre základné a stredné školy.
</p>
<a class="rounded bg-blue-600 hover:bg-blue-700 text-white text-2xl py-2 px-6 font-bold inline-flex items-center shadow-xl" href="terminy.html">
Prejsť na akcie <svg class="ml-3 w-6 h-6 svg"><circle cx="12" cy="12" r="10"/><path d="m12 16 4-4-4-4m-4 4h8"/></svg>
</a>
</div>
</div>
<div class="container mx-auto p-8">
<h2 class="font-bold mt-8 mb-6 text-center text-3xl">Čo je Kockatý Kalendár?</h2>
<div class="mx-auto max-w-2xl text-center">
<p class="mb-2">
Na Slovensku existuje množstvo organizácií ponúkajúcich súťaže a akcie pre
základoškolákov alebo stredoškolákov v oblasti matematiky, fyziky a informatiky.
Súťaží a akcií je tak veľa, že môže byť zložité vyznať sa vo všetkých.
</p>
<p class="mb-2">
Kockatý Kalendár je spoločná iniciatíva týchto organizácií, ktorá ponúka jednoduchý,
jasný a pochopiteľný prehľad organizovaných súťaží.
</p>
<p class="mb-2 font-bold">
Jediné miesto, kde sa dozvieš všetky termíny súťaží a akcií v oblasti M/F/I na Slovensku.
</p>
<p>
Uvádzame termíny súťaží a akcií organizácií, ktoré sa na tvorbe kalendára podieľajú.
Akcie sú dlhodobé aj jednodňové, pre žiakov od 4. ročníka základnej školy až po koniec strednej školy.
</p>
</div>
<h2 class="font-bold mt-12 mb-6 text-center text-3xl">Pre koho je?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center border shadow rounded-lg p-8">
<svg class="w-20 h-20 mx-auto mb-1 svg" viewBox="0 0 24 24"><path d="M4 20a3 3 0 0 1 3-3h13"/><path d="M7 2h13v20H7a3 3 0 0 1-3-2V5a3 3 0 0 1 3-3z"/></svg>
<div class="text-2xl font-bold mb-2">Žiak</div>
<p>
Maj prehľad o súťažiach pre tvoj ročník,
pozri si všetky termíny na jednom mieste a
objav nové možnosti rozvoja.
</p>
</div>
<div class="text-center border shadow rounded-lg p-8">
<svg class="w-20 h-20 mx-auto mb-1 svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9 9a3 3 0 0 1 6 1c0 2-3 3-3 3m0 4h0"/></svg>
<div class="text-2xl font-bold mb-2">Učiteľ</div>
<p>
Nájdi aktivity pre šikovných žiakov,
informuj sa o tých, ktoré už robia a
udržuj si prehľad z jedného miesta.
</p>
</div>
<div class="text-center border shadow rounded-lg p-8">
<svg class="w-20 h-20 mx-auto mb-1 svg" viewBox="0 0 24 24"><path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8zm4-7v3m4-3v3m4-3v3"/></svg>
<div class="text-2xl font-bold mb-2">Rodič</div>
<p>
Nájdi tú správnu súťaž pre tvoje dieťa,
pochop tej, ktorú už robí a maj
prehľad o termínoch, ktoré má dodržať.
</p>
</div>
</div>
<div class="text-center mt-8 mb-4">
<a class="rounded bg-blue-500 hover:bg-blue-600 text-white text-2xl py-2 px-6 font-bold inline-flex items-center" href="terminy.html">
Prejsť na akcie <svg class="ml-3 svg w-6 h-6"><circle cx="12" cy="12" r="10"/><path d="m12 16 4-4-4-4m-4 4h8"/></svg>
</a>
</div>
<div class="mx-auto max-w-2xl mt-8 border border-blue-500 rounded-md py-4 px-6 bg-blue-100 text-blue-800">
<p><b>Novinka!</b> Kockatý Kalendár už aj v tvojom kalendári!</p>
<p>
Ak si chceš pridať akcie z Kockatého Kalendára do svojho Google / Outlook kalendára alebo do mobilu, pripravili sme si pre teba
<a href="./ical.html" class="underline text-blue-900">kalendár vo formáte .ics</a>!
</p>
</div>
<h2 class="font-bold mt-12 mb-6 text-center text-3xl">Kto je za tým?</h2>
<p class="mx-auto max-w-2xl text-center mb-12">
KockatýKalendár.sk je spoločná iniciatíva viacerých organizátorov vzdelávacích akcii pre deti a mládež pod vedením P-mat n.o.
Cieľom projektu je prehľadne zobraziť všetky nadchádzajúce súťaže súvisiace z matematikou, fyzikou a informatikou.
</p>
<section id="organizations" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 justify-center"></section>
<h2 class="font-bold mt-16 mb-6 text-center text-3xl">Chcem pomôcť, opraviť chybu alebo mám otázku</h2>
<div class="flex justify-center items-center text-gray-600 mb-8">
<a href="mailto:[email protected]">
<svg viewBox="0 0 24 24" class="w-16 h-16 mx-4 hover:text-blue-500 svg"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
<a href="https://github.com/kockatykalendar">
<svg class="w-16 h-16 mx-4 hover:text-blue-500 svg" viewBox="0 0 24 24"><path d="M9 19c-5 2-5-2-7-3m14 6v-4a3 3 0 0 0-1-2c3-1 7-2 7-7a5 5 0 0 0-2-4 5 5 0 0 0 0-4s-1 0-4 1a13 13 0 0 0-7 0L5 1a5 5 0 0 0 0 4 5 5 0 0 0-1 4c0 5 3 6 6 7a3 3 0 0 0-1 2v4"/></svg>
</a>
</div>
<div class="mx-auto max-w-2xl text-center mb-12">
<p class="mb-2">
<b>Ak si našiel/-la chybu</b> môžeš nám napísať na
<a class="text-blue-500" href="mailto:[email protected]">[email protected]</a> a my sa ju pokúsime opraviť.
Ak si programátor/-ka, môžeš nám pomôcť aj na GitHub-e:
</p>
<p class="mb-2">
<b>Pomôcť</b> sa dá aj na GitHub-e. Celý <a class="text-blue-500" href="https://github.com/kockatykalendar">kód Kockatého Kalendára</a>
je open-source, stačí si niektorý z repozitárov forknúť a poslať nám PR.
</p>
<p>
<b>Ak máš inú otázku</b> napíš nám na <a class="text-blue-500" href="mailto:[email protected]">[email protected]</a>
a my sa ti ozveme.
</p>
</div>
</div>
</main>
<script async defer data-website-id="e76c1f53-9376-4047-8c8e-45cc01532075" src="https://stats.p-mat.sk/umami.js"></script>
</body>
</html>