diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..38797016d4333daa3daa6413ab8e697cd1678f81
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+workshop
\ No newline at end of file
diff --git a/css/dark.css b/css/dark.css
new file mode 100644
index 0000000000000000000000000000000000000000..f285e9c7f301642fbd16102e3d49c31cbe8c9808
--- /dev/null
+++ b/css/dark.css
@@ -0,0 +1,16 @@
+body.dark {
+ color: #fff;
+}
+
+body.dark::before {
+ filter: invert(1);
+}
+
+.dark main {
+ background: #222227;
+}
+
+.dark .dayName {
+ color: #ddd;
+ background-color: #444;
+}
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000000000000000000000000000000000000..305da7973359d0b27cb989a5cae75dec2671e75d
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,46 @@
+/* Minden elemen beállítjuk ezeket */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box; /* Máshogy fog számolódni a Width és Height */
+}
+body {
+ min-height: 100vh; /* függőleges középhez kell */
+ display: flex; /* egyszerű lesz az elrendezés */
+ align-items: center; /* Függőlegesen középre rendezés */
+ justify-content: center; /* Vízszintesen középre rendezés */
+}
+main {
+ display: flex; /* Tudjon reszponzívan nyúlni */
+ min-width: 0; /* Vékony kijelzőn nem lesz levágva az eleje */
+}
+.time {
+ width: 60px;
+}
+.day {
+ width: 180px;
+}
+.dayName {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.dayTimes, .dayEvents {
+ display: grid; /* Egyszerűen fogunk tudni 2D-ben dolgokat elhelyezni */
+ /* 14 darab 60px magas sorunk lesz */
+ grid-template-rows: repeat(14, 60px); /* Sorminta */
+}
+.event {
+ margin: 1px; /* Minden irányban 1px margó, így 2px-es rések jönnek létre */
+ padding: 15px 20px; /* Alul-felül 15px, jobbra-balra 20px kitöltés */
+ /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
+ max-width: 178px;
+}
+.eventSubdivide {
+ /* Szeretjük a flexet */
+ display: flex;
+}
+.eventSubdivide .event {
+ max-width: 88px; /* Ha valami oknál fogva tovább akarna nyúlni, akkor ne */
+}
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000000000000000000000000000000000000..e6979879058749aa822b40714f1961c95bb8afe1
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,46 @@
+@media only screen and (max-width: 1380px) {
+ main {
+ display: block; /* blokként jelenjen meg a tartalma */
+ max-width: 800px; /* Maximum eddig nyoljon szét a tartalom */
+ /* Helyezzük középre, de most használjunk valami régit */
+ margin-left: auto;
+ margin-right: auto;
+ }
+ body {
+ display: block; /* flexel nem fog működni, így visszatérünk blockra */
+ }
+ .time {
+ display: none; /* Nem fog megjelenni */
+ }
+ /* Ez mindennek a konténere, ha nem nyúlik szét, akkor semmi sem fog */
+ .day {
+ width: 100%; /* Reszponzívan próbáld kitölteni a szabad helyet */
+ }
+ /* gridről térjünk át flexre, de oszlopos legyen a megjelenés */
+ .dayEvents {
+ display: flex;
+ flex-direction: column;
+ }
+ .event {
+ margin: 5px 10px;
+ max-width: 100%; /* Használjuk fel az összes szabad helyet */
+ }
+ /* Csak az ütköző eseményekre alkalmazzuk */
+ .eventSubdivide .event {
+ /* Ezzel fogják fele-fele arányban elfoglalni a helyet */
+ min-width: calc(50% - 15px); /* Kiszámoljuk, mennyi legyen a minimális szélesség */
+ }
+ /* Elég csak az elsőnek a belső margoját módosítani */
+ .eventSubdivide .event:first-child {
+ margin-right: 0;
+ }
+}
+
+@media only screen and (max-width: 1380px) {
+ main {
+ background: white;
+ }
+ .day {
+ border-left: none;
+ }
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..368f5854e18ccd9a437b0b21a574d4615bd037d6
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,86 @@
+@font-face {
+ font-family: "Roboto"; /* Ezen a néven fogunk tudni rá hivatkozni */
+ src: url("../font/Roboto-Regular.ttf") format("truetype"); /* Hol található és típusa */
+ /* Figyeljünk a címzésre!!! */
+}
+body {
+ font-family: "Roboto"; /* A fentebb 'létrehozott' betűtípust használjuk fel */
+}
+
+main {
+ background-color: white; /* legyen fehér a háttér */
+ /* Ezt csak másoljuk le */
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+.dayName {
+ background-color: rgb(234, 234, 234); /* szürke háttérszín */
+ font-size: large; /* betű méret */
+ color: rgb(110, 110, 110); /* szövegszín */
+}
+.dayTime {
+ font-size: medium;
+ color: rgb(110, 110, 110);
+ text-align: center; /* Középre igazítjuk a szöveget */
+}
+.event {
+ background-color: rgb(23, 166, 151);
+ border-radius: 5px; /* lekerekítjük a négy sarkát */
+ color: white;
+ /* Fogadjuk el, hogy ez van */
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+.eventTitle {
+ font-size: medium;
+ font-weight: 400; /* Mennyire legyen félkövér */
+ word-wrap: break-word; /* Ha kell, akkor törd szét a szót, hogy ne lógjon túl */
+}
+.eventSubdivide .eventTitle,
+.length--1 .eventTitle {
+ overflow: hidden; /* Elrejtjük a görgetősávat */
+ white-space: nowrap; /* Szóköznél nem kezdünk új sort ha nincs elég hely */
+}
+.eventTime {
+ font-size: small; /* Az idő legyen kisebb */
+ font-weight: 300; /* Ne legyen annyira vastag */
+}
+.length--1 {
+ /* Mennyi cellát foglaljon el */
+ grid-row-end: span 1; /* 1, azaz 1 cellát foglaljon el */
+}
+.length--2 {
+ grid-row-end: span 2; /* 2, azaz 2 cellát foglaljon el */
+}
+.length--4 {
+ grid-row-end: span 4; /* 4, azaz 4 cellát foglaljon el */
+}
+
+/* Unortodox csíkozás */
+main {
+ background: repeating-linear-gradient(
+ 0deg,
+ white,
+ white 59px,
+ rgb(234, 234, 234) 1px,
+ rgb(234, 234, 234) 60px
+ );
+}
+.day {
+ border-left: 1px solid rgb(234, 234, 234);
+}
+
+/* New stuff */
+
+main {
+ position: relative;
+}
+
+body::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ background-image: url("../img/rough_bg.jpg");
+}
diff --git a/font/Roboto-Regular.ttf b/font/Roboto-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..2b6392ffe8712b9c5450733320cd220d6c0f4bce
Binary files /dev/null and b/font/Roboto-Regular.ttf differ
diff --git a/img/rough_bg.jpg b/img/rough_bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a81643cf24ade62b2ddab2ada32e6b05e153c07e
Binary files /dev/null and b/img/rough_bg.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..dcfd26e4b589bb1a8d12a0190a1e0109057f9e75
--- /dev/null
+++ b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Naptár</title>
+ <link rel="stylesheet" href="css/layout.css" />
+ <link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/responsive.css" />
+ <link rel="stylesheet" href="css/dark.css" />
+ </head>
+ <body class="dark">
+ <main>
+ <div class="time">
+ <div class="dayName"></div>
+ <div class="dayTimes">
+ <div class="dayTime">07:00</div>
+ <div class="dayTime">08:00</div>
+ <div class="dayTime">09:00</div>
+ <div class="dayTime">10:00</div>
+ <div class="dayTime">11:00</div>
+ <div class="dayTime">12:00</div>
+ <div class="dayTime">13:00</div>
+ <div class="dayTime">14:00</div>
+ <div class="dayTime">15:00</div>
+ <div class="dayTime">16:00</div>
+ <div class="dayTime">17:00</div>
+ <div class="dayTime">18:00</div>
+ <div class="dayTime">19:00</div>
+ <div class="dayTime">20:00</div>
+ </div>
+ </div>
+ <div class="day">
+ <div class="dayName">Hétfő</div>
+ <div class="dayEvents">
+ <div class="event length--4" style="grid-row-start: 4">
+ <div class="eventTitle">Kommunikációs hálózatok 2</div>
+ <div class="eventDetails">
+ <div class="eventTime">10:00-14:00</div>
+ </div>
+ </div>
+ <div class="eventSubdivide length--2" style="grid-row-start: 8">
+ <div class="event length--2" style="grid-row-start: 1">
+ <div class="eventTitle">Algoritmus elmélet</div>
+ <div class="eventDetails">
+ <div class="eventTime">12:00-14:00</div>
+ </div>
+ </div>
+ <div class="event length--2" style="grid-row-start: 1">
+ <div class="eventTitle">Kotlin alapú szoftverfejlesztés</div>
+ <div class="eventDetails">
+ <div class="eventTime">12:00-14:00</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="day">
+ <div class="dayName">Kedd</div>
+ <div class="dayEvents"></div>
+ </div>
+ <div class="day">
+ <div class="dayName">Szerda</div>
+ <div class="dayEvents"></div>
+ </div>
+ <div class="day">
+ <div class="dayName">Csütörtök</div>
+ <div class="dayEvents"></div>
+ </div>
+ <div class="day">
+ <div class="dayName">Péntek</div>
+ <div class="dayEvents"></div>
+ </div>
+ <div class="day">
+ <div class="dayName">Szombat</div>
+ <div class="dayEvents"></div>
+ </div>
+ <div class="day">
+ <div class="dayName">Vasárnap</div>
+ <div class="dayEvents"></div>
+ </div>
+ </main>
+ <script type="text/javascript" src="js/index.js"></script>
+ </body>
+</html>
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391