commit f8b7c56ae50a26f701851e39f791142117ca0a7b
Author: jakub <jakub@soukup.xyz>
Date:   Fri May 31 11:24:52 2024 +0200

    První commit

diff --git a/components/footer.php b/components/footer.php
new file mode 100644
index 0000000..a55d3ef
--- /dev/null
+++ b/components/footer.php
@@ -0,0 +1,8 @@
+<footer>
+        <div><p>Tehnický Server KNKS - Jakub Soukup</p></div>
+        <div>
+            <p>
+                Zdrojový Kód | Discord | Naše Zásady
+            </p>
+        </div>
+</footer>
\ No newline at end of file
diff --git a/components/navbar.php b/components/navbar.php
new file mode 100644
index 0000000..905203a
--- /dev/null
+++ b/components/navbar.php
@@ -0,0 +1,26 @@
+<div class="nav-container">
+        <ul>
+            <a href="/index.php">
+                
+                <p>Domov</p>
+                <div class="underline"></div>
+            </a>
+            <a>
+                <p>Novinky</p>
+                <div class="underline"></div>
+            </a>
+            <a href="/modpack.php">
+                <p>Modpack</p>
+                <div class="underline"></div>
+            </a>
+
+            <a>
+                <p>Pravidla</p>
+                <div class="underline"></div>
+            </a>
+            <a href="eco">
+                <p>Ekonomika</p>
+                <div class="underline"></div>
+            </a>
+        </ul>
+    </div>
\ No newline at end of file
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..8247f96
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,260 @@
+.warning-block {
+  background: rgb(255, 53, 53);
+  box-shadow: 0 10px 0 rgb(182, 1, 1);
+  margin-bottom: 40px;
+  margin-top: 20px;
+  text-align: center;
+  padding: 15px;
+  font-weight: bold;
+}
+
+body {
+  color: whitesmoke;
+  background-color: rgb(31, 31, 31);
+  background-size: cover, 150px 150px;
+  margin: 0;
+  padding: 0;
+  font-family: Raleway;
+}
+
+input[type=text] {
+  font-size: 15px;
+  border: none;
+  border-radius: 0px;
+  padding: 10px;
+  transition: 0.2s;
+  font-family: Raleway;
+  color: black;
+  display: block;
+  font-weight: bold;
+  box-shadow: 0 10px 0 rgb(209, 209, 209);
+}
+input[type=text]:hover {
+  box-shadow: 0 15px 0 rgb(209, 209, 209);
+  cursor: pointer;
+  translate: 0 -5px;
+}
+input[type=text]:focus {
+  outline: none;
+  box-shadow: 0 5px 0 rgb(143, 143, 143);
+  background: rgb(223, 223, 223);
+  cursor: text;
+  translate: 0 5px;
+  scale: 1;
+}
+
+.button, button {
+  text-decoration: none;
+  color: white;
+  display: block;
+  font-family: Raleway;
+  font-size: 15px;
+  background: rgb(255, 165, 0);
+  font-weight: bold;
+  padding: 10px;
+  text-align: center;
+  width: -moz-fit-content;
+  width: fit-content;
+  box-shadow: 0 10px 0 rgb(192, 125, 0);
+  transition: 0.2s;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+}
+.button:hover, button:hover {
+  box-shadow: 0 15px 0 rgb(192, 125, 0);
+  translate: 0 -5px;
+}
+.button:active, button:active {
+  box-shadow: 0 5px 0 rgb(192, 125, 0);
+  translate: 0 5px;
+  scale: 1.1;
+}
+
+@font-face {
+  font-family: PSP;
+  src: url("../fonts/PressStart2P.ttf");
+}
+@font-face {
+  font-family: Freeman;
+  src: url("../fonts/Freeman-Regular.ttf");
+}
+@font-face {
+  font-family: Raleway;
+  src: url("../fonts/Raleway-VariableFont_wght.ttf");
+}
+h1 {
+  text-align: center;
+  font-family: Freeman;
+  font-size: 80px;
+  padding: 20px;
+  margin: 0;
+}
+
+h2 {
+  text-align: center;
+  margin: 0;
+  font-size: 25px;
+}
+
+.content-container {
+  width: 1200px;
+  z-index: 0;
+  padding: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+}
+
+.title-container {
+  background: url("../images/bg-alt1.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  background-size: cover;
+  padding: 20px;
+  padding-left: 60px;
+  box-shadow: 0 0px 30px rgb(22, 22, 22) inset;
+}
+.title-container h1 {
+  font-family: PSP;
+  text-align: center;
+  font-size: 80px;
+  margin: 0;
+  text-shadow: 4px 4px black, -4px -4px black, 4px -4px black, -4px 4px black;
+}
+.title-container h1 span {
+  color: orange;
+}
+
+
+.logo {
+  font-family: PSP;
+  font-size: 160px;
+  margin: 0;
+  text-shadow: 5px 5px black, -5px -5px black, 5px -5px black, -5px 5px black, 0px 0px 20px;
+}
+.logo span {
+  color: orange;
+}
+.logo:nth-child(2) {
+  translate: 165px 0;
+  margin-top: -60px;
+}
+
+.nav-container {
+  background: rgb(80, 80, 80);
+  height: -moz-fit-content;
+  height: fit-content;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 10px 0 rgb(53, 53, 53);
+}
+.nav-container ul {
+  list-style: none;
+  transition: 0.2s;
+  padding: 0;
+  margin: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+.nav-container ul a {
+  transition: 0.3s;
+  color: white;
+  text-decoration: none;
+  display: inline-block;
+  margin-left: 20px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.nav-container ul a div {
+  height: 4px;
+  width: 0px;
+  margin-left: auto;
+  margin-right: auto;
+  background: orange;
+  transition: 0.3s;
+}
+.nav-container ul a p {
+  font-size: 17px;
+  margin: 10px;
+  transition: 0.3s;
+  font-weight: bold;
+}
+.nav-container ul a:hover {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+.nav-container ul a:hover div {
+  width: 100%;
+}
+
+footer {
+  background: rgb(194, 126, 0);
+  box-shadow: 0 -8px 0 rgb(109, 71, 0);
+  margin-top: 100px;
+  display: inline-flex;
+  width: 100%;
+}
+footer div {
+  display: block;
+  flex-basis: 100%;
+}
+footer div:last-of-type p {
+  text-align: right;
+}
+footer p {
+  text-align: left;
+  margin-left: 20px;
+  margin-right: 30px;
+  font-weight: bold;
+}
+
+table {
+  width: 100%;
+  background-color: rgb(80, 80, 80);
+  box-shadow: 0 10px 0 rgb(53, 53, 53);
+  box-shadow: 0 10px 0 rg;
+  border-spacing: 0;
+}
+table tr:nth-child(odd) {
+  background-color: rgb(100, 100, 100);
+}
+table tr:first-child {
+  background: rgb(192, 125, 0);
+  text-align: left;
+  border: none;
+}
+table tr a {
+  opacity: 0;
+  color: rgb(255, 165, 0);
+  font-weight: bold;
+  -webkit-text-decoration: solid;
+          text-decoration: solid;
+  transition: 0.1s;
+}
+table tr:hover a {
+  transition: 0.1s;
+  opacity: 1;
+}
+table th {
+  padding: 15px;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding-left: 30px;
+  padding-right: 30px;
+  font-weight: bold;
+  text-transform: uppercase;
+  border: none;
+  border-bottom: 10px solid rgb(109, 71, 0);
+  border-collapse: collapse;
+}
+table td {
+  padding: 15px;
+  padding-left: 30px;
+  padding-right: 30px;
+  border: none;
+}/*# sourceMappingURL=base.css.map */
\ No newline at end of file
diff --git a/css/base.css.map b/css/base.css.map
new file mode 100644
index 0000000..12c64e4
--- /dev/null
+++ b/css/base.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["base.scss","base.css"],"names":[],"mappings":"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","file":"base.css"}
\ No newline at end of file
diff --git a/css/base.scss b/css/base.scss
new file mode 100644
index 0000000..965aa2c
--- /dev/null
+++ b/css/base.scss
@@ -0,0 +1,275 @@
+
+.warning-block{
+    background: rgb(255, 53, 53);
+    box-shadow: 0 10px 0 rgb(182, 1, 1);
+    margin-bottom: 40px;
+    margin-top: 20px;
+    text-align: center;
+    padding: 15px;
+    font-weight: bold;
+    
+}
+body{
+    //background-image: linear-gradient(0deg, rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.8)), url('../images/dirt.png');
+    color: whitesmoke;
+    background-color: rgb(31, 31, 31);
+    background-size: cover, 150px 150px;
+    margin: 0;
+    padding: 0;
+    
+    font-family: Raleway;
+}
+input[type=text]{
+    font-size: 15px;
+    border: none;
+    border-radius: 0px;
+    padding: 10px;
+    transition: 0.2s;
+    font-family: Raleway;
+    color: black;
+    display: block;
+    font-weight: bold;
+    box-shadow: 0 10px 0 rgb(209, 209, 209);
+    &:hover{
+        box-shadow: 0 15px 0 rgb(209, 209, 209);
+        cursor: pointer;
+        translate: 0 -5px;
+    }
+    &:focus{
+        outline: none;
+        box-shadow: 0 5px 0 rgb(143, 143, 143);
+        background: rgb(223, 223, 223);
+        cursor: text;
+        translate: 0 5px;
+        scale: 1;
+
+    }
+}
+.button, button{
+    text-decoration: none;
+    color: white;
+    display: block;
+    font-family: Raleway;
+    font-size: 15px;
+    background: rgb(255,165,0);
+    font-weight: bold;
+    padding: 10px;
+    text-align: center;
+    width: fit-content;
+    box-shadow: 0 10px 0 rgb(192, 125, 0);
+    transition: 0.2s;
+    text-transform: uppercase;
+    border: none;
+    cursor: pointer;
+    &:hover{
+        box-shadow: 0 15px 0 rgb(192, 125, 0);
+        translate: 0 -5px;
+        
+    }
+    &:active{
+        box-shadow: 0 5px 0 rgb(192, 125, 0);
+        translate: 0 5px;
+        scale: 1.1;
+        
+    }
+}
+@font-face {
+    font-family: PSP;
+    src: url("../fonts/PressStart2P.ttf");
+}
+@font-face {
+    font-family: Freeman;
+    src: url('../fonts/Freeman-Regular.ttf');
+}
+@font-face {
+    font-family: Raleway;
+    src: url('../fonts/Raleway-VariableFont_wght.ttf');
+}
+h1{
+    text-align: center;
+    font-family: Freeman;
+    font-size: 80px;
+    padding: 20px;
+    margin: 0;
+}
+h2{
+    text-align: center;
+    margin: 0;
+    font-size: 25px;
+}
+.content-container{
+    width: 1200px;
+        z-index: 0;
+    
+    padding: 20px;
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+}
+.title-container{
+    background: url("../images/bg-alt1.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+    padding: 20px;
+    padding-left: 60px;
+    box-shadow: 0 0px 30px rgb(22, 22, 22) inset;
+    h1{
+        font-family: PSP ;
+        text-align: center;
+        font-size: 80px;
+        margin: 0;
+        text-shadow: 4px 4px black, -4px -4px black, 4px -4px black, -4px 4px black;
+        span{
+            color: orange; 
+        }
+    }
+}
+/*# sourceMappingURL=base.css.map */
+.logo{
+    font-family: PSP ;
+    font-size: 160px;
+    margin: 0;
+    text-shadow: 5px 5px black, -5px -5px black, 5px -5px black, -5px 5px black, 0px 0px 20px;
+    span{
+       color: orange; 
+    }
+    &:nth-child(2){
+        translate: 165px 0;
+        margin-top: -60px;
+        
+    }
+}
+.nav-container{
+    background: rgb(80, 80, 80);
+    height: fit-content;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 10px 0 rgb(53, 53, 53);
+    ul{
+        list-style: none;
+        transition: 0.2s;
+        padding: 0;
+        margin: 0;
+        width: fit-content;
+        margin-left: auto;
+        margin-right: auto;
+        a{
+            transition: 0.3s;
+            color: white;
+            text-decoration: none;
+            display: inline-block;
+            
+            margin-left: 20px;
+            margin-right: 20px;
+            cursor:pointer;
+            div{
+                height: 4px;
+                width: 0px;
+                margin-left: auto;
+                margin-right: auto;
+                background: orange;
+                transition: 0.3s;
+                
+            }
+            p{
+                font-size: 17px;
+                margin: 10px;
+                transition: 0.3s;
+                font-weight: bold;
+
+            }
+            &:hover{
+                margin-left: 40px;
+                margin-right: 40px;
+                div{
+                    width: 100%;
+                    
+                }
+                
+            }
+
+        }
+        
+    }
+ 
+
+}
+footer{
+    
+    background: rgb(194, 126, 0);
+    box-shadow: 0 -8px 0 rgb(109, 71, 0);
+    margin-top: 100px;
+    display: inline-flex;
+    width: 100%;
+    div{
+        display: block;
+        flex-basis: 100%;
+        &:last-of-type{
+            p{
+                text-align: right
+            }
+        }
+    }
+    p{
+        text-align: left;
+        margin-left: 20px;
+        margin-right: 30px;
+        font-weight: bold;
+    
+    }
+
+}
+table{
+    width: 100%;
+    background-color: rgb(80, 80, 80);
+    box-shadow: 0 10px 0 rgb(53, 53, 53);
+    box-shadow: 0 10px 0 rg;
+    border-spacing: 0;
+    
+    tr{
+        &:nth-child(odd){
+            background-color: rgb(100, 100, 100);
+        }
+        &:first-child{
+            background: rgb(192, 125, 0);
+            text-align: left;
+            border: none;
+        }
+        a{
+            opacity: 0;
+            color: rgb(255,165,0);
+            font-weight: bold;
+            text-decoration: solid;
+            transition: 0.1s;
+        }
+        &:hover{
+            a{
+                transition: 0.1s;
+                opacity: 1;
+            }
+        }
+    }
+    
+    th{
+        padding:15px;
+        width: fit-content;
+        padding-left: 30px;
+        padding-right: 30px;
+        font-weight: bold;
+        text-transform: uppercase;
+        border: none;
+        border-bottom: 10px solid rgb(109, 71, 0);
+        border-collapse: collapse
+    }
+    td{
+        padding: 15px;
+        padding-left: 30px;
+        padding-right: 30px;
+        border: none;
+        
+    }
+    
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..16296b1
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,270 @@
+@keyframes scrolling {
+  0% {
+    left: 100%;
+  }
+  100% {
+    left: -100%;
+  }
+}
+@keyframes scrolling-reverse {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+.logo-container {
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  padding-right: 150px;
+}
+
+.bg-container {
+  background: url("../images/bg-alt1.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  background-size: cover;
+  padding: 60px;
+  box-shadow: 0 0px 60px rgb(22, 22, 22) inset;
+  z-index: 20;
+  display: block;
+} 
+.postup-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  height: 360px;
+  position: relative;
+}
+.postup-container > img {
+  position: absolute;
+}
+.postup-container .discord {
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+}
+.postup-container .download {
+  left: 30px;
+  top: 50%;
+  translate: 0 -50%;
+}
+.postup-container .play {
+  right: 30px;
+  top: 50%;
+  translate: 0 -50%;
+}
+.postup-container .arrow1 {
+  left: 200px;
+  top: 20px;
+}
+.postup-container .arrow2 {
+  rotate: 180deg;
+  transform: rotateY(180deg);
+  right: 230px;
+  bottom: 20px;
+}
+
+.start-play {
+  margin-top: 50px;
+  width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.postup-text-container {
+  width: 100%;
+  display: inline-flex;
+}
+.postup-text-container > div {
+  display: block;
+  flex: auto;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 0;
+  margin: 0;
+  flex-basis: 100%;
+  padding: 10px;
+  padding-top: 0;
+}
+.postup-text-container > div p {
+  font-size: 20px;
+  text-align: center;
+}
+.postup-text-container > div h1 {
+  text-overflow: hidden;
+  font-size: 35px;
+  width: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px;
+}
+
+.postup-button-container {
+  width: 100%;
+  display: inline-flex;
+}
+.postup-button-container > div {
+  flex-basis: 100%;
+}
+.postup-button-container > div .button {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mods {
+  width: 100vw;
+  display: block;
+  position: relative;
+}
+.mods .scroll {
+  overflow-x: hidden;
+  position: relative;
+  height: 240px;
+}
+.mods .scroll.scroll-reverse > div {
+  width: -100% !important;
+}
+.mods .scroll.scroll-reverse > div.part-one {
+  animation-direction: reverse;
+}
+.mods .scroll.scroll-reverse > div.part-two {
+  animation-direction: reverse;
+}
+.mods .scroll > div {
+  white-space: nowrap;
+  position: absolute;
+  justify-content: space-around;
+  top: 50%;
+  display: flex;
+  width: 100%;
+  left: 100%;
+  translate: 0 -50%;
+}
+.mods .scroll > div.part-one {
+  animation: scrolling 40s linear infinite;
+  animation-delay: -20s;
+}
+.mods .scroll > div.part-two {
+  animation: scrolling 40s linear infinite;
+}
+.mods .scroll > div > div {
+  white-space: initial;
+  background: rgb(80, 80, 80);
+  box-shadow: 0 10px 0 rgb(53, 53, 53);
+  display: inline-flex;
+  width: 400px;
+}
+.mods .scroll > div > div:nth-child(odd) {
+  background: rgb(194, 126, 0);
+  box-shadow: 0 10px 0 rgb(109, 71, 0);
+}
+.mods .scroll > div > div > div {
+  display: inline-block;
+  padding: 20px;
+}
+.mods .scroll > div > div > div:last-of-type {
+  padding-top: 30px;
+  padding-left: 0;
+  position: relative;
+}
+.mods .scroll > div > div > div h1 {
+  width: -moz-fit-content;
+  width: fit-content;
+  position: absolute;
+  top: 50%;
+  translate: 0 -50%;
+  width: 210px;
+  font-size: 25px;
+  margin: 0;
+  text-align: left;
+  padding: 0;
+}
+.mods .scroll > div > div > div p {
+  font-size: 20px;
+  display: none;
+  margin: 0;
+  margin-top: 20px;
+}
+.mods .scroll > div > div > div img {
+  aspect-ratio: 1/1;
+  width: 130px;
+}
+
+.technic-image-container {
+  width: 1200px;
+  height: 600px;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+}
+.technic-image-container img {
+  position: absolute;
+  aspect-ratio: 670/400;
+  -o-object-fit: cover;
+     object-fit: cover;
+  height: 400px;
+  border: 10px solid white;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
+  translate: -50% -50%;
+  top: 50%;
+  left: 50%;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.technic-image-container img:hover {
+  scale: 1.05;
+}
+.technic-image-container .img1 {
+  left: 30%;
+  height: 350px;
+  z-index: 9;
+  rotate: -2deg;
+}
+.technic-image-container .img2 {
+  left: 50%;
+  z-index: 10;
+  cursor: default;
+}
+.technic-image-container .img2:hover {
+  scale: 1;
+}
+.technic-image-container .img3 {
+  left: 17%;
+  z-index: 8;
+  height: 200px;
+  rotate: -4deg;
+}
+.technic-image-container .img5 {
+  left: 83%;
+  height: 200px;
+  rotate: 4deg;
+  z-index: 8;
+}
+.technic-image-container .img6 {
+  z-index: 9;
+  left: 70%;
+  height: 350px;
+  rotate: 2deg;
+}
+
+.vote-container {
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 100px;
+}
+.vote-container button, .vote-container input {
+  display: inline-block;
+  margin: 7px;
+}
+.vote-container input {
+  width: 300px;
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/css/index.css.map b/css/index.css.map
new file mode 100644
index 0000000..dfefd8e
--- /dev/null
+++ b/css/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file
diff --git a/css/index.scss b/css/index.scss
new file mode 100644
index 0000000..38f04f4
--- /dev/null
+++ b/css/index.scss
@@ -0,0 +1,287 @@
+@keyframes scrolling{
+  0%{
+    left: 100%;
+  }
+  100%{
+    left: -100%;
+  }
+}
+@keyframes scrolling-reverse{
+  0%{
+    left: -100%;
+  }
+  100%{
+    left: 100%;
+  }
+}
+
+.logo-container {
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+    padding-right: 150px;
+  }
+  
+  .bg-container {
+    background: url("../images/bg-alt1.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    background-size: cover;
+    padding: 60px;
+    box-shadow: 0 0px 60px rgb(22, 22, 22) inset;
+    z-index: 20;
+    display: block;
+  }/*# sourceMappingURL=index.css.map */
+  .postup-container{
+
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    height: 360px;
+    position: relative;
+    >img{
+      position:absolute;
+    }
+
+    .discord{
+      left: 50%;
+      top: 50%;
+      translate: -50% -50%;
+      
+    }
+    .download{
+      left: 30px;
+      top: 50%;
+      translate: 0 -50%;
+    }
+    .play{
+      right: 30px;
+      top: 50%;
+      translate: 0 -50%;
+    }
+    .arrow1{
+        left: 200px;
+        top: 20px;
+    }
+    .arrow2{
+      rotate: 180deg;
+      transform:rotateY(180deg);
+      right: 230px;
+      bottom: 20px;
+    }
+  
+  }
+  .start-play{
+    margin-top: 50px;
+    width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .postup-text-container{
+    width: 100%;
+    
+    display: inline-flex;
+    
+    >div{
+      display: block;
+      flex: auto;
+      height: fit-content;
+      padding: 0;
+      margin: 0;
+      flex-basis: 100%;
+      padding: 10px;
+      padding-top: 0;
+      p{
+        font-size: 20px;
+        text-align: center;
+      }
+      h1{
+        text-overflow: hidden;
+        font-size: 35px;
+        width: auto;
+
+        width: fit-content;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 10px;
+      }
+    }
+  }
+  .postup-button-container{
+    width: 100%;
+    display: inline-flex;
+    >div{
+        flex-basis: 100%;
+        .button{
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+  }
+  .mods{
+
+    width: 100vw;
+    display: block;
+    position: relative;
+    
+    .scroll{
+      &.scroll-reverse{
+        >div{
+          width: -100% !important;
+          &.part-one{
+            animation-direction: reverse;
+          }
+          &.part-two{
+            animation-direction: reverse;
+          }
+        }
+        
+      }
+      overflow-x: hidden;
+      position: relative;
+      height: 240px;
+      >div{
+        
+        white-space: nowrap;
+        position: absolute;
+        justify-content: space-around;
+        top:50%;
+        display: flex;
+        
+        width: 100%;
+        left: 100%;
+        translate: 0 -50%;
+        &.part-one{
+          
+          animation: scrolling 40s linear infinite;
+
+          animation-delay: -20s;
+        }
+        &.part-two{
+          animation: scrolling 40s linear infinite;
+          
+        }
+        >div{
+          white-space:initial;
+          background: rgb(80, 80, 80);
+          box-shadow: 0 10px 0 rgb(53, 53, 53);
+          display: inline-flex;
+          width: 400px;
+          &:nth-child(odd){
+            background: rgb(194, 126, 0);
+            box-shadow: 0 10px 0 rgb(109, 71, 0);
+          }
+          >div{
+            display: inline-block;
+ 
+            padding: 20px;
+            &:last-of-type{
+              padding-top: 30px;
+              padding-left: 0;
+              position: relative;
+            }
+            h1{
+              width: fit-content;
+              position: absolute;
+              top: 50%;
+              translate: 0 -50%;
+              width: 210px;
+
+              font-size: 25px;
+              margin: 0;
+              text-align: left;
+              padding: 0;
+
+            }
+            p{
+              font-size: 20px;
+              display: none;
+              margin: 0;
+              margin-top: 20px;
+            }
+            img{
+              aspect-ratio: 1/1;
+              width: 130px;
+              
+              
+            }
+          }
+          
+        }
+      }
+    }
+  }
+  .technic-image-container{
+    width: 1200px;
+    height: 600px;
+
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    
+    img{
+      position: absolute;
+      aspect-ratio: 670/400;
+      object-fit: cover;
+      height: 400px;
+      border: 10px solid white;
+      box-shadow: 0 0 20px rgba(0,0,0,0.9);
+      translate: -50% -50%;
+      top: 50%;
+      left: 50%;
+      transition: 0.3s;
+      cursor: pointer;
+      &:hover{
+        scale: 1.05;
+      }
+      
+    }
+    .img1{
+      left: 30%;
+      height: 350px;
+      z-index: 9;
+      rotate: -2deg;
+    }
+    .img2{
+      left: 50%;
+      z-index: 10;
+      cursor: default;
+      &:hover{
+        scale: 1;
+      }
+    }
+    .img3{
+      left: 17%;
+      z-index: 8;
+      height: 200px;
+      rotate: -4deg;
+    }
+    .img5{
+      left: 83%;
+      height: 200px;
+      rotate: 4deg;
+      z-index: 8;
+    }
+    .img6{
+      z-index: 9;
+      left: 70%;
+      height: 350px;
+      rotate: 2deg;
+      
+    }
+  }
+  .vote-container{
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 100px;
+      button, input{
+      display: inline-block;
+      margin: 7px;
+    }
+    input{
+      width: 300px;
+    }
+  }
\ No newline at end of file
diff --git a/css/modpack.css b/css/modpack.css
new file mode 100644
index 0000000..2e67d93
--- /dev/null
+++ b/css/modpack.css
@@ -0,0 +1,54 @@
+.modpack-container {
+  margin-top: 30px;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+.modpack-container > div {
+  transition: 0.3s;
+  display: inline-block;
+  margin-left: 40px;
+  margin-right: 40px;
+  background: rgb(80, 80, 80);
+  box-shadow: 0 10px 0 rgb(53, 53, 53);
+  width: -moz-fit-content;
+  width: fit-content;
+  display: inline-block;
+}
+.modpack-container > div:hover {
+  scale: 1.05;
+}
+.modpack-container > div h1 {
+  font-size: 25px;
+  background: rgb(194, 126, 0);
+  box-shadow: 0 7px 0 rgb(109, 71, 0);
+  padding: 10px;
+  text-transform: uppercase;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+.modpack-container > div img {
+  aspect-ratio: 1/1;
+  height: 230px;
+  margin: 10px;
+  margin-bottom: 30px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.modpack-container > div > div {
+  padding: 20px;
+}
+.modpack-container > div > div > div {
+  position: relative;
+}
+.modpack-container > div > div > div .button {
+  margin-bottom: 20px;
+  width: 220px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.modpack-container > div > div > div .button:active {
+  scale: 1;
+}/*# sourceMappingURL=modpack.css.map */
\ No newline at end of file
diff --git a/css/modpack.css.map b/css/modpack.css.map
new file mode 100644
index 0000000..a328899
--- /dev/null
+++ b/css/modpack.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["modpack.scss","modpack.css"],"names":[],"mappings":"AAAA;EACI,gBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,iBAAA;EACA,kBAAA;ACCJ;ADCA;EAII,gBAAA;EACA,qBAAA;EACA,iBAAA;EACA,kBAAA;EAUA,2BAAA;EACA,oCAAA;EACA,uBAAA;EAAA,kBAAA;EACA,qBAAA;ACXJ;ADRI;EACI,WAAA;ACUR;ADJI;EACI,eAAA;EACA,4BAAA;EACA,mCAAA;EACA,aAAA;EACA,yBAAA;EACA,iBAAA;EACA,kBAAA;ACMR;ADAI;EACI,iBAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,cAAA;EACA,iBAAA;EACA,kBAAA;ACER;ADCI;EACI,aAAA;ACCR;ADAQ;EAEI,kBAAA;ACCZ;ADAY;EACI,mBAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACEhB;ADDgB;EACI,QAAA;ACGpB","file":"modpack.css"}
\ No newline at end of file
diff --git a/css/modpack.scss b/css/modpack.scss
new file mode 100644
index 0000000..20ee912
--- /dev/null
+++ b/css/modpack.scss
@@ -0,0 +1,57 @@
+.modpack-container{
+    margin-top: 30px;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+
+>div{
+    &:hover{
+        scale: 1.05;
+    }
+    transition: 0.3s;
+    display: inline-block;
+    margin-left: 40px;
+    margin-right: 40px;
+    h1{
+        font-size: 25px;
+        background: rgb(194, 126, 0);
+        box-shadow: 0 7px 0 rgb(109, 71, 0);
+        padding: 10px;
+        text-transform: uppercase;
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+    background: rgb(80, 80, 80);
+    box-shadow: 0 10px 0 rgb(53, 53, 53);
+    width: fit-content;
+    display: inline-block;
+    img{
+        aspect-ratio: 1/1;
+        height: 230px;
+        margin: 10px;
+        margin-bottom: 30px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+
+    }
+    >div{
+        padding: 20px;
+        >div{
+        
+            position: relative;
+            .button{
+                margin-bottom: 20px;
+                width: 220px;
+                margin-left: auto;
+                margin-right: auto;
+                &:active{
+                    scale: 1;
+                }
+                
+            }
+        }
+    }
+    
+}
+}
\ No newline at end of file
diff --git a/fonts/Freeman-Regular.ttf b/fonts/Freeman-Regular.ttf
new file mode 100644
index 0000000..3b07d33
Binary files /dev/null and b/fonts/Freeman-Regular.ttf differ
diff --git a/fonts/PressStart2P.ttf b/fonts/PressStart2P.ttf
new file mode 100644
index 0000000..2442aff
Binary files /dev/null and b/fonts/PressStart2P.ttf differ
diff --git a/fonts/Raleway-VariableFont_wght.ttf b/fonts/Raleway-VariableFont_wght.ttf
new file mode 100644
index 0000000..33969e8
Binary files /dev/null and b/fonts/Raleway-VariableFont_wght.ttf differ
diff --git a/images/arrow.svg b/images/arrow.svg
new file mode 100644
index 0000000..b211b97
--- /dev/null
+++ b/images/arrow.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="205" height="82" fill="none" viewBox="0 0 205 82">
+  <g clip-path="url(#a)">
+    <mask id="b" width="205" height="82" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+      <path fill="#fff" d="m202.654 81.334 1.358-77.797L1.358 0 0 77.796l202.654 3.537Z"/>
+    </mask>
+    <g mask="url(#b)">
+      <path fill="#F90" d="M1.73 55.368c-1.608-1.814-1.485-4.423.283-5.835C45.996 14.547 111.82 19.01 157.524 38.377L170.373 2.95c4.528 23.973 18.717 54.899 32.298 77.423-24.96-9.72-58.581-18.8-83.696-19.634l31.855-16.303C107.807 27.4 48.002 24.176 7.85 56.11c-1.758 1.404-4.501 1.072-6.12-.743Z"/>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="m204.012 3.538-1.358 77.796L0 77.796 1.358 0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/images/bg-alt1.png b/images/bg-alt1.png
new file mode 100644
index 0000000..db0a842
Binary files /dev/null and b/images/bg-alt1.png differ
diff --git a/images/bg.png b/images/bg.png
new file mode 100644
index 0000000..bca2182
Binary files /dev/null and b/images/bg.png differ
diff --git a/images/dirt.png b/images/dirt.png
new file mode 100644
index 0000000..64d5112
Binary files /dev/null and b/images/dirt.png differ
diff --git a/images/discord.svg b/images/discord.svg
new file mode 100644
index 0000000..924f498
--- /dev/null
+++ b/images/discord.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="268" height="269" fill="none" viewBox="0 0 268 269">
+  <path fill="#fff" d="M194.779 62.213a163.002 163.002 0 0 0-42.537-7.875 120.407 120.407 0 0 0-3.91 11.563 151.754 151.754 0 0 0-45.389 5.573 115.731 115.731 0 0 0-6.65-10.266 162.741 162.741 0 0 0-39.398 17.935A173.92 173.92 0 0 0 42.64 198.39a157.856 157.856 0 0 0 52.332 18.974 125.26 125.26 0 0 0 8.584-19.038 106.458 106.458 0 0 1-17.944-6.159 84.193 84.193 0 0 0 3.745-3.795 116.638 116.638 0 0 0 100.426-12.331 108.1 108.1 0 0 0 4.552 2.776c-5 3.919-10.338 7.375-15.958 10.342a125.715 125.715 0 0 0 12.934 16.396 164.599 164.599 0 0 0 47.1-31.928 172.854 172.854 0 0 0-43.633-111.413Zm-90.593 104.389a19.403 19.403 0 0 1-20.358-18.104 19.3 19.3 0 0 1 15.37-22.511 19.184 19.184 0 0 1 13.961 4.815 19.188 19.188 0 0 1 6.4 13.309 19.287 19.287 0 0 1-15.373 22.491Zm65.944-8.097a19.403 19.403 0 0 1-20.358-18.104 19.3 19.3 0 0 1 15.372-22.511 19.192 19.192 0 0 1 20.36 18.124 19.302 19.302 0 0 1-15.374 22.491Z"/>
+</svg>
diff --git a/images/download.svg b/images/download.svg
new file mode 100644
index 0000000..fc10783
--- /dev/null
+++ b/images/download.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="268" height="268" fill="none" viewBox="0 0 268 268">
+  <path fill="#fff" fill-rule="evenodd" d="m144.691 126.512 8.714-70.967a10 10 0 0 0-19.851-2.437l-8.714 70.967-18.651-30.26a10.01 10.01 0 0 0-6.216-4.707 10 10 0 0 0-10.791 15.214l33.608 54.502a10.013 10.013 0 0 0 3.112 3.161 10.021 10.021 0 0 0 4.174 1.504 10.011 10.011 0 0 0 8.198-2.764l45.795-44.753a10.003 10.003 0 0 0 3.24-7.093 10 10 0 0 0-17.2-7.215l-25.418 24.848Z" clip-rule="evenodd"/>
+  <path fill="#fff" fill-rule="evenodd" d="m105.753 169.326-19.316-31.328-23.404-2.874a20.001 20.001 0 0 0-22.288 17.414L35.87 192.24a19.997 19.997 0 0 0 17.413 22.288L192.24 231.59a19.998 19.998 0 0 0 22.288-17.414l4.875-39.702a20 20 0 0 0-17.414-22.288l-23.404-2.873-26.331 25.722a30.003 30.003 0 0 1-24.622 8.319 29.991 29.991 0 0 1-21.879-14.028Zm72.729 10.199a10 10 0 0 0-2.437 19.851l.099.012a9.997 9.997 0 0 0 11.144-8.706 9.997 9.997 0 0 0-8.706-11.145l-.1-.012Z" clip-rule="evenodd"/>
+</svg>
diff --git a/images/modpacks/curseforge.png b/images/modpacks/curseforge.png
new file mode 100644
index 0000000..adba1d1
Binary files /dev/null and b/images/modpacks/curseforge.png differ
diff --git a/images/modpacks/modrinth.png b/images/modpacks/modrinth.png
new file mode 100644
index 0000000..71793a8
Binary files /dev/null and b/images/modpacks/modrinth.png differ
diff --git a/images/modpacks/prism.png b/images/modpacks/prism.png
new file mode 100644
index 0000000..936c818
Binary files /dev/null and b/images/modpacks/prism.png differ
diff --git a/images/mods/create-steam-n-rails.png b/images/mods/create-steam-n-rails.png
new file mode 100644
index 0000000..05ed86f
Binary files /dev/null and b/images/mods/create-steam-n-rails.png differ
diff --git a/images/mods/create.png b/images/mods/create.png
new file mode 100644
index 0000000..099f8fb
Binary files /dev/null and b/images/mods/create.png differ
diff --git a/images/mods/expanded-storage.png b/images/mods/expanded-storage.png
new file mode 100644
index 0000000..4221b5a
Binary files /dev/null and b/images/mods/expanded-storage.png differ
diff --git a/images/mods/flux-networks.png b/images/mods/flux-networks.png
new file mode 100644
index 0000000..84ed742
Binary files /dev/null and b/images/mods/flux-networks.png differ
diff --git a/images/mods/mekanism.png b/images/mods/mekanism.png
new file mode 100644
index 0000000..56f5ab8
Binary files /dev/null and b/images/mods/mekanism.png differ
diff --git a/images/mods/moving-elevators.png b/images/mods/moving-elevators.png
new file mode 100644
index 0000000..56f4523
Binary files /dev/null and b/images/mods/moving-elevators.png differ
diff --git a/images/mods/mrcrayfishs-gun-mod.png b/images/mods/mrcrayfishs-gun-mod.png
new file mode 100644
index 0000000..6c71f75
Binary files /dev/null and b/images/mods/mrcrayfishs-gun-mod.png differ
diff --git a/images/mods/security-craft.png b/images/mods/security-craft.png
new file mode 100644
index 0000000..92c436a
Binary files /dev/null and b/images/mods/security-craft.png differ
diff --git a/images/mods/simple-storage-network.png b/images/mods/simple-storage-network.png
new file mode 100644
index 0000000..b47b492
Binary files /dev/null and b/images/mods/simple-storage-network.png differ
diff --git a/images/mods/sophisticated-backpacks.png b/images/mods/sophisticated-backpacks.png
new file mode 100644
index 0000000..56730fc
Binary files /dev/null and b/images/mods/sophisticated-backpacks.png differ
diff --git a/images/mods/stabx-moderrn-guns.png b/images/mods/stabx-moderrn-guns.png
new file mode 100644
index 0000000..9e7ea07
Binary files /dev/null and b/images/mods/stabx-moderrn-guns.png differ
diff --git a/images/mods/storage-drawers.png b/images/mods/storage-drawers.png
new file mode 100644
index 0000000..5b0f691
Binary files /dev/null and b/images/mods/storage-drawers.png differ
diff --git a/images/mods/tinkers-construct.png b/images/mods/tinkers-construct.png
new file mode 100644
index 0000000..9304658
Binary files /dev/null and b/images/mods/tinkers-construct.png differ
diff --git a/images/mods/xaeros-world-map.png b/images/mods/xaeros-world-map.png
new file mode 100644
index 0000000..c7505b2
Binary files /dev/null and b/images/mods/xaeros-world-map.png differ
diff --git a/images/play.svg b/images/play.svg
new file mode 100644
index 0000000..115bccb
--- /dev/null
+++ b/images/play.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="246" height="246" fill="none" viewBox="0 0 246 246">
+  <g clip-path="url(#a)">
+    <path fill="#fff" fill-rule="evenodd" d="m117.776 59.15-1.964 7.877c-.723 2.897.892 5.794 3.606 6.47l29.485 7.352c2.714.676 5.5-1.124 6.222-4.02l1.964-7.878c48.131 16.207 73.448 40.371 75.371 32.661 1.996-8.006-39.479-48.824-78.163-63.333l.154-.618c.722-2.897-.892-5.794-3.606-6.47l-9.828-2.451c-2.714-.677-5.5 1.123-6.222 4.02l-.154.614c-40.968-5.347-96.75 11.222-98.747 19.23-1.922 7.709 31.776-1.741 81.882 6.546Zm22.731 27.458-16.38-4.084a5.628 5.628 0 0 0-6.822 4.1L89.397 198.555c-1.88 7.539 2.708 15.175 10.247 17.054 7.539 1.88 15.174-2.708 17.054-10.247L144.606 93.43a5.627 5.627 0 0 0-4.099-6.822Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M245.575 49.01 49.009 0 0 196.565l196.566 49.01z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/images/server/p1.png b/images/server/p1.png
new file mode 100644
index 0000000..789be54
Binary files /dev/null and b/images/server/p1.png differ
diff --git a/images/server/p2.png b/images/server/p2.png
new file mode 100644
index 0000000..be5fdc2
Binary files /dev/null and b/images/server/p2.png differ
diff --git a/images/server/p3.png b/images/server/p3.png
new file mode 100644
index 0000000..4a9f899
Binary files /dev/null and b/images/server/p3.png differ
diff --git a/images/server/p4.png b/images/server/p4.png
new file mode 100644
index 0000000..64e9966
Binary files /dev/null and b/images/server/p4.png differ
diff --git a/images/server/p5.png b/images/server/p5.png
new file mode 100644
index 0000000..7b9408b
Binary files /dev/null and b/images/server/p5.png differ
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..77c2fd8
--- /dev/null
+++ b/index.php
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Domů | KNKS</title>
+    <link rel="stylesheet" href="./css/base.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+    <?php
+    require "./components/navbar.php";
+    ?>
+    <div class="bg-container">
+        <div class="logo-container">
+            <h1 class="logo"><span>K</span>N</h1>
+            <h1 class="logo"><span>K</span>S</h1>
+        </div>
+    </div>
+    <section class="content-container">
+        <h1>Jsme Technický Server...</h1>
+        <h2>... Místo, kde můžeš budovat svoje impérium, obchodovat a bavit se.</h2>
+        <section class="technic-image-container">
+                <img src="./images/server/p1.png" alt="" class="img1" onclick="swapImages(this)">
+                <img src="./images/server/p2.png" alt="" class="img2" onclick="swapImages(this)">
+                <img src="./images/server/p3.png" alt="" class="img3" onclick="swapImages(this)">
+                <img src="./images/server/p5.png" alt="" class="img5" onclick="swapImages(this)">
+                <img src="./images/server/p4.png" alt="" class="img6" onclick="swapImages(this)">
+        </section>
+        <script>
+            function swapImages(img){
+                const classesClickedImg = img.classList;
+                const imgTwoList = document.getElementsByClassName("img2");
+                const imgTwoClasses = imgTwoList[0].classList;
+                if(!classesClickedImg.contains("img2")){
+                    imgTwoClasses.add(classesClickedImg[0]);
+                    imgTwoClasses.remove("img2");
+                    classesClickedImg.remove(classesClickedImg[0])
+                    classesClickedImg.add("img2")
+                }
+            }
+        </script>
+    </section>    
+    <section class="mods">
+            <h1>Máme módy, které máš rád</h1>
+            <h2>A ty, které nemáme můžeš vždy navrhnout!</h2>
+            <div class="scroll">
+                <div class="part-one">
+                    <div>
+                        <div><img src="./images/mods/mekanism.png" alt=""></div>
+                        <div>
+                            <h1>Mekanism</h1>
+                            <p>Aidancbrady, Thommy101, Thiakil, pupnewfster, dizzyd</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/create.png" alt=""></div>
+                        <div>
+                            <h1>Create</h1>
+                            <p>simibubi</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/security-craft.png" alt=""></div>
+                        <div>
+                            <h1>Security Craft</h1>
+                            <p>Geforce132, bl4ckscor3, Redstone_Dubstep</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/mrcrayfishs-gun-mod.png" alt=""></div>
+                        <div>
+                            <h1>MrCrayfish's gun mod</h1>
+                            <p>MrCrayfish</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="part-two">
+                    <div>
+                        <div><img src="./images/mods/simple-storage-network.png" alt=""></div>
+                        <div>
+                            <h1>Simple Storage Network</h1>
+                            <p>Lothrazar, MrRiegel</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/tinkers-construct.png" alt=""></div>
+                        <div>
+                            <h1>Tinkers Construct</h1>
+                            <p>Slime Knights</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/create-steam-n-rails.png" alt=""></div>
+                        <div>
+                            <h1>Create: Steam 'n' rails</h1>
+                            <p>The Railways Team</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/sophisticated-backpacks.png" alt=""></div>
+                        <div>
+                            <h1>Sophisticated Backpack</h1>
+                            <p>P3pp3rF1y, Ridanisaurus</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="scroll scroll-reverse">
+                <div class="part-one">
+                    <div>
+                        <div><img src="./images/mods/storage-drawers.png" alt=""></div>
+                        <div>
+                            <h1>Storage Drawers</h1>
+                            <p>Texelsaur</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/mekanism.png" alt=""></div>
+                        <div>
+                            <h1>Mekanism: Additions</h1>
+                            <p>Aidancbrady, Thommy101, Thiakil, pupnewfster, dizzyd</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/moving-elevators.png" alt=""></div>
+                        <div>
+                            <h1>Moving Elevators</h1>
+                            <p>SuperMartijn642</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/expanded-storage.png" alt=""></div>
+                        <div>
+                            <h1>Expanded Storage</h1>
+                            <p>Compasses</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="part-two">
+                    <div>
+                        <div><img src="./images/mods/flux-networks.png" alt=""></div>
+                        <div>
+                            <h1>Flux Networks</h1>
+                            <p>Sonar Sonic, BloCamLimb</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/stabx-moderrn-guns.png" alt=""></div>
+                        <div>
+                            <h1>Stabx Modern Guns</h1>
+                            <p>Stabilizer King</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/mekanism.png" alt=""></div>
+                        <div>
+                            <h1>Mekanism: Generators</h1>
+                            <p>Aidancbrady, Thommy101, Thiakil, pupnewfster, dizzyd</p>
+                        </div>
+                    </div>
+                    <div>
+                        <div><img src="./images/mods/xaeros-world-map.png" alt=""></div>
+                        <div>
+                            <h1>Xaero's World Map</h1>
+                            <p>xaero96</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            </div>
+    </section>
+    <section class="content-container">
+        <section class="start-play">
+            <h1>Začni u nás hrát</h1>
+        <div class="postup-container" id="postup-container">
+            <img src="./images/discord.svg" alt="discord" class="discord">
+            <img src="./images/download.svg" alt="download" class="download">
+            <img src="./images/play.svg" alt="play" class="play">
+            <img src="./images/arrow.svg" alt="arrow1" class="arrow1">
+            <img src="./images/arrow.svg" alt="arrow2" class="arrow2">
+        </div>
+        <div class="postup-text-container">
+            <div class="download">
+                <h1>Stáhni si modpack</h1>
+                <p>Náš server je módovaný, takže se bez našeho modpacku opravdu neobejdeš. Stáhnout ho je jednoduché, stačí se držet instrukcí.</p>
+            </div>
+            <div class="discord">
+                <h1>Ověř se na discordu</h1>
+                <p>Pro větší bezpečnost má náš server whitelist. Na ten se však můžeš jednoduše dostat automatickým procesem na našem discordu.</p>
+            </div>
+            <div class="play">
+                <h1>Připoj se na server!</h1>
+                <p>Vše hotovo? Výborně! Nyní už se jen stačí připojit a začít hrát. Zkušenější hráči ti rádi do začátku pomohou. Vždy tu pro tebe bude i wiki.</p>
+            </div>
+        </div>
+        <div class="postup-button-container">
+            <div><a class="button">STAHNOUT MODPACK</a></div>
+            <div><a  class="button">PŘIPOJIT SE</a></div>
+            <div><a  class="button">ZKOPÍROVAT IP</a></div>
+        </div>
+        </section>
+        
+        <section class="vote-container">
+            <h1>Hlasuj pro nás</h1>
+            
+            <div class="form-container">
+                <input type="text" name="nick" id="nick" placeholder="Tvůj nick">
+                <button>czech craft</button>
+                <button>minectaft list</button>
+                <button>craftlist</button>
+                <button>minecraft servery</button>
+            </div>
+        </section>
+        
+    </section>
+    <?php
+    require "./components/footer.php"
+    ?>
+    
+
+</body>
+</html>
\ No newline at end of file
diff --git a/modpack.php b/modpack.php
new file mode 100644
index 0000000..a32977b
--- /dev/null
+++ b/modpack.php
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modpack | KNKS</title>
+    <link rel="stylesheet" href="./css/base.css">
+    <link rel="stylesheet" href="./css/modpack.css">
+</head>
+<body>
+    <?php
+    include "./components/navbar.php";
+    ?>
+    <div class="title-container">
+        <h1><span>M</span>odpack</h1>
+    </div>
+    <section class="content-container">
+        <h1>Vyber si pack pro svůj launcher</h1>
+        <div class="modpack-container">
+            <div class="modpack">
+                <h1>prism launcher</h1>
+                <div>
+                    <img src="./images/modpacks/prism.png" alt="">
+                    <p></p>
+                    <div>
+                        <a class="button">stáhnout</a>
+                        <a  class="button">archiv verzí</a>
+                        <a  class="button">návod</a>
+                    </div>
+                </div>
+            </div> 
+            <div class="modpack">
+                <h1>curseforge launcher</h1>
+                <div>
+                    <img src="./images/modpacks/curseforge.png" alt="">
+                    <p></p>
+                    <div>
+                        <a class="button">stáhnout</a>
+                        <a  class="button">archiv verzí</a>
+                        <a  class="button">návod</a>
+                    </div>
+                </div>
+            </div>
+            <div class="modpack">
+                <h1>modrinth app</h1>
+                <div>
+                    <img src="./images/modpacks/modrinth.png" alt="">
+                    <p></p>
+                    <div>
+                        <a class="button">stáhnout</a>
+                        <a  class="button">archiv verzí</a>
+                        <a  class="button">návod</a>
+                    </div>
+                </div>
+            </div>    
+        </div>
+            
+        
+
+    </section>
+    <?php
+    require "./components/footer.php"
+    ?>
+</body>
+</html>
\ No newline at end of file
diff --git a/modpack/archive.php b/modpack/archive.php
new file mode 100644
index 0000000..3834463
--- /dev/null
+++ b/modpack/archive.php
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modpack - Archiv | KNKS</title>
+    <link rel="stylesheet" href="../css/base.css">
+</head>
+<body>
+    <?php
+    include "../components/navbar.php";
+    ?>
+    <div class="title-container">
+        <h1><span>M</span>odpack</h1>
+    </div>
+    <div class="content-container">
+        <h1>Archiv modpacků pro CurseForge</h1>
+        <div class="warning-block">
+            Pro hraní na serveru je nutné mít vždy nejnovější verzi modpacku!
+        </div>
+        <table>
+            <tr>
+                <th>Název</th>
+                <th>Poznámka</th>
+                <th>Datum</th>
+                <th></th>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+            <tr>
+                <td>CurseForge v1</td>
+                <td>Nové mody</td>
+                <td>6.9.2024</td>
+                <td><a href="" class="download-link">stáhnout</a></td>
+            </tr>
+        </table>
+    </div>
+
+    </section>
+    <?php
+    require "../components/footer.php"
+    ?>
+</body>
+</html>
\ No newline at end of file
diff --git a/template.php b/template.php
new file mode 100644
index 0000000..37c17a2
--- /dev/null
+++ b/template.php
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Template | KNKS</title>
+    <link rel="stylesheet" href="./css/base.css">
+</head>
+<body>
+    <?php
+    include "./components/navbar.php";
+    ?>
+    <div class="title-container">
+        <h1><span>T</span>emplate</h1>
+    </div>
+    <div class="content-container">
+
+    </div>
+            
+    </section>
+    <?php
+    require "./components/footer.php"
+    ?>
+</body>
+</html>
\ No newline at end of file