This commit is contained in:
Adam Sramek 2024-04-21 19:14:17 +02:00
parent 2d2322c671
commit d2a7b5bf77
17 changed files with 42 additions and 24 deletions

@ -15,6 +15,11 @@ html, body {
background-size: cover; background-size: cover;
} }
body {
display: flex;
flex-direction: column;
}
li { li {
list-style: none; list-style: none;
} }
@ -54,7 +59,7 @@ header {
gap: 2rem; gap: 2rem;
} }
.navbar #toggle-btn { .navbar #toggle_btn {
display: none; display: none;
color: #fff; color: #fff;
font-size: 1.5rem; font-size: 1.5rem;
@ -128,7 +133,7 @@ section#hero {
/* RESPONSIVE DESIGN */ /* RESPONSIVE DESIGN */
@media(max-width: 992px) { @media(max-width: 992px) {
.navbar #toggle-btn { .navbar #toggle_btn {
display: block; display: block;
} }
@ -162,6 +167,7 @@ footer {
color: #fff; color: #fff;
padding: 20px 0; padding: 20px 0;
text-align: left; text-align: left;
width: 100%;
} }
.footer-content { .footer-content {
@ -261,6 +267,10 @@ main {
width: 80%; width: 80%;
left: 10%; left: 10%;
position: relative; position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
} }

@ -26,7 +26,7 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="mw3_image1.jpg" alt="Call of Duty: Modern Warfare 3 Screenshot"> <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/mw3/home/modes/top-features-img.png" alt="Call of Duty: Modern Warfare 3 Screenshot">
<article> <article>
<h2>Ohlasy</h2> <h2>Ohlasy</h2>
@ -38,5 +38,5 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="mw3_image2.jpg" alt="Call of Duty: Modern Warfare 3 Screenshot"> <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/intel-cards/mwiii/MWIII-CAMPAIGN-HOWTOPLAY-INTELCARD-001_Mobile.png" alt="Call of Duty: Modern Warfare 3 Screenshot">
</div> </div>

@ -26,7 +26,7 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="minecraft_image1.jpg" alt="Minecraft Screenshot"> <img src="https://static.planetminecraft.com/files/image/minecraft/project/2020/788/13631805_xl.webp" alt="Minecraft Screenshot">
<article> <article>
<h2>Ohlasy</h2> <h2>Ohlasy</h2>
@ -37,5 +37,5 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="minecraft_image2.jpg" alt="Minecraft Screenshot"> <img src="https://ftw.usatoday.com/wp-content/uploads/sites/90/2022/05/Minecraft-attacking-a-SkeletoN.jpg" alt="Minecraft Screenshot">
</div> </div>

@ -25,7 +25,7 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="scp_secret_lab_image1.jpg" alt="SCP: Secret Laboratory Screenshot"> <img src="https://pbs.twimg.com/media/FefXJhuX0AslilS.jpg:large" alt="SCP: Secret Laboratory Screenshot">
<article> <article>
<h2>Ohlasy</h2> <h2>Ohlasy</h2>
@ -36,5 +36,5 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="scp_secret_lab_image2.jpg" alt="SCP: Secret Laboratory Screenshot"> <img src="https://pbs.twimg.com/media/Fr23CZMWcAITl3a.jpg:large" alt="SCP: Secret Laboratory Screenshot">
</div> </div>

@ -28,7 +28,7 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="skyrim_image1.jpg" alt="Skyrim Screenshot"> <img src="https://i.guim.co.uk/img/media/c15da9438dd16a3563e80b799f65554295b81769/40_0_1200_720/master/1200.jpg?width=1200&quality=85&auto=format&fit=max&s=325a929c44a1bd1a21b98f0f5ed31f9e" alt="Skyrim Screenshot">
<article> <article>
<h2>Ohlasy</h2> <h2>Ohlasy</h2>
@ -40,5 +40,5 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="skyrim_image2.jpg" alt="Skyrim Screenshot"> <img src="https://images.saymedia-content.com/.image/ar_4:3%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTg1ODkyNDE1NzYzMTMwMDUx/elder-scrolls-v-skyrim-overpowered-knight-build-guide.jpg" alt="Skyrim Screenshot">
</div> </div>

@ -27,7 +27,7 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="subnautica_image1.jpg" alt="Subnautica Screenshot"> <img src="https://img.etimg.com/thumb/width-1600,height-900,imgsize-9352,resizemode-75,msid-96253066/news/international/us/subnautica-2-0-version-borrowed-features-from-below-zero-and-resolves-over-800-bugs.jpg" alt="Subnautica Screenshot">
<article> <article>
<h2>Ohlasy</h2> <h2>Ohlasy</h2>
@ -39,5 +39,5 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="subnautica_image2.jpg" alt="Subnautica Screenshot"> <img src="https://cdn.mos.cms.futurecdn.net/zzjRSEWk7VhtBTqeTrZs8k-1200-80.jpg" alt="Subnautica Screenshot">
</div> </div>

@ -28,7 +28,7 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="titanfall2_image1.jpg" alt="Titanfall 2 Screenshot"> <img src="https://assetsio.gnwcdn.com/Titanfall-2-Monarch.jpg?width=1200&height=630&fit=crop&enable=upscale&auto=webp" alt="Titanfall 2 Screenshot">
<article> <article>
<h2>Ohlasy</h2> <h2>Ohlasy</h2>
@ -40,5 +40,5 @@
</article> </article>
<!-- Placeholder for Image --> <!-- Placeholder for Image -->
<img src="titanfall2_image2.jpg" alt="Titanfall 2 Screenshot"> <img src="https://m.media-amazon.com/images/I/91gPnR90n9L._AC_UF1000,1000_QL80_.jpg" alt="Titanfall 2 Screenshot">
</div> </div>

@ -2,8 +2,9 @@
<h1>Zaklínač 3</h1> <h1>Zaklínač 3</h1>
<section id="story"> <section id="story">
<h2>Príbeh</h2> <h2>Príbeh</h2>
<p>Zaklínač 3: Divoký hon sleduje príbeh Geralta z Rivie, lovca príšer, ktorý pátra po svojich nezvestných. <p>Zaklínač 3: Divoký hon sleduje príbeh Geralta z Rivie, lovca príšer, ktorý pátra po svojich nezvestných.
adoptívna dcéra Ciri, ktorú prenasleduje Divoký hon, skupina bojovníkov z iného sveta.</p> adoptívna dcéra Ciri, ktorú prenasleduje Divoký hon, skupina bojovníkov z iného sveta.
</p>
</section> </section>
<section id="characters"> <section id="characters">
@ -19,6 +20,9 @@
rozsiahly otvorený svet a urobte rozhodnutia, ktoré ovplyvnia výsledok príbehu.</p> rozsiahly otvorený svet a urobte rozhodnutia, ktoré ovplyvnia výsledok príbehu.</p>
</section> </section>
<img src="https://i.ytimg.com/vi/xx8kQ4s5hCY/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBxrLxUXsICGUEE-47vV0TKtl0FiA" width="400">
<img src="https://www.games.ch/img/the-witcher-3-wild-h.1003.564.hajac.1.jpg" width="400">
<section id="Visuals"> <section id="Visuals">
<h2>Vizuály</h2> <h2>Vizuály</h2>
<p>Zaklínač 3 je známy pre svoje ohromujúce vizuálne prvky s detailnými modelmi postáv, sviežim prostredím a <p>Zaklínač 3 je známy pre svoje ohromujúce vizuálne prvky s detailnými modelmi postáv, sviežim prostredím a

@ -5,7 +5,7 @@
<h2 id="Úvod">Úvod</h2> <h2 id="Úvod">Úvod</h2>
<p>V GameHub sme nadšení z hrania. Či už ste hardcore hráč, príležitostný hráč alebo len zvedavý na svet videohier, ste na správnom mieste. Naším poslaním je poskytovať vám najnovšie správy, hĺbkové recenzie, užitočné funkcie a všetko ostatné, čo potrebujete, aby ste zostali informovaní a bavili sa</p> <p>V GameHub sme nadšení z hrania. Či už ste hardcore hráč, príležitostný hráč alebo len zvedavý na svet videohier, ste na správnom mieste. Naším poslaním je poskytovať vám najnovšie správy, hĺbkové recenzie, užitočné funkcie a všetko ostatné, čo potrebujete, aby ste zostali informovaní a bavili sa</p>
</section> </section>
<section> <section id="gamesection">
<h2 id="Top_Hry">Top Hry</h2> <h2 id="Top_Hry">Top Hry</h2>
<div class="game"> <div class="game">
<h3>1. Witcher 3</h3> <h3>1. Witcher 3</h3>

@ -18,6 +18,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 400px;
border-radius: 10px; border-radius: 10px;
} }

@ -27,6 +27,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 600;
border-radius: 10px; border-radius: 10px;
} }

@ -17,6 +17,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 400;
border-radius: 10px; border-radius: 10px;
} }

@ -17,6 +17,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 400;
border-radius: 10px; border-radius: 10px;
} }

@ -17,6 +17,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 400;
border-radius: 10px; border-radius: 10px;
} }

@ -18,6 +18,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 400;
border-radius: 10px; border-radius: 10px;
} }

@ -17,6 +17,6 @@ img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
height: auto; height: 400;
border-radius: 10px; border-radius: 10px;
} }

@ -5,4 +5,8 @@ html, body {
.Top_Hry { .Top_Hry {
text-align: center; text-align: center;
align-items: center; align-items: center;
}
#gamesection {
text-align: center;
} }