This commit is contained in:
Adam Sramek 2024-04-21 15:05:15 +02:00
parent 9d87f50f7a
commit da4451cfad
3 changed files with 84 additions and 5 deletions

@ -1,4 +1,57 @@
<section id="hero"> <div class="grid-container">
<h1>Blog</h1> <div class="category">
<h2 id="Hry">Hry</h2> <h2>Horror</h2>
</section> <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>

@ -1,3 +1,29 @@
body { body {
background-image: url(https://w.wallha.com/ws/4/Vlw87L9q.png); 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;
}