You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

224 lines
9.5 KiB

<!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>