update

stranky/Hry.html

@@ -1,4 +1,57 @@
-<section id="hero">
-    <h1>Blog</h1>
-        <h2 id="Hry">Hry</h2>
-</section>  
+<div class="grid-container">
+    <div class="category">
+        <h2>Horror</h2>
+        <div class="game">
+            <img src="https://store-images.s-microsoft.com/image/apps.61444.14362558931724774.37f43c0c-c8ea-416b-9b9a-ec2cd8aea963.cfbcfb08-518b-46b3-9145-726c2b7dfffb?q=90&w=480&h=270" alt="Horror Game 1">
+            <h3>Alien Isolation</h3>
+            <a href="/?Alien">Learn More</a>
+        </div>
+        <div class="game">
+            <img src="horror_game2.jpg" alt="Horror Game 2">
+            <h3>SCP Secret Laboratory</h3>
+            <a href="/?SCP">Learn More</a>
+        </div>
+    </div>
+    
+    <div class="category">
+        <h2>RPG</h2>
+        <div class="game">
+            <img src="rpg_game1.jpg" alt="RPG Game 1">
+            <h3>Witcher 3</h3>
+            <a href="/?Witcher3">Learn More</a>
+        </div>
+        <div class="game">
+            <img src="rpg_game2.jpg" alt="RPG Game 2">
+            <h3>Skyrim</h3>
+            <a href="/?Skyrim">Learn More</a>
+        </div>
+    </div>
+    
+    <div class="category">
+        <h2>FPS</h2>
+        <div class="game">
+            <img src="fps_game1.jpg" alt="FPS Game 1">
+            <h3>Titanfall 2 </h3>
+            <a href="/?Titanfall2">Learn More</a>
+        </div>
+        <div class="game">
+            <img src="fps_game2.jpg" alt="FPS Game 2">
+            <h3>Call of Duty MW3</h3>
+            <a href="/?COD">Learn More</a>
+        </div>
+    </div>
+    
+    <div class="category">
+        <h2>Survival</h2>
+        <div class="game">
+            <img src="survival_game1.jpg" alt="Survival Game 1">
+            <h3>Minecraft</h3>
+            <a href="/?Minecraft">Learn More</a>
+        </div>
+        <div class="game">
+            <img src="survival_game2.jpg" alt="Survival Game 2">
+            <h3>Subnautica</h3>
+            <a href="/?Subnautica">Learn More</a>
+        </div>
+    </div>
+</div>

styly/Hry.css

@@ -1,3 +1,29 @@
 body {
     background-image: url(https://w.wallha.com/ws/4/Vlw87L9q.png);
-}
+}
+
+main.grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 20px;
+    padding: 20px;
+}
+
+.category {
+    border: 1px solid #ccc;
+    padding: 20px;
+}
+
+.category h2 {
+    margin-top: 0;
+}
+
+.game {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.game img {
+    max-width: 100%;
+    height: auto;
+}