aktualizovan html kd a styly

index.html

@@ -70,15 +70,24 @@
         <p>Krátký odstavec popisující tebe a tvou práci.</p>
     </section>
     <section>
-        <h2>Kontakt</h2>
+        <!-- HTML - Upravená část pro Kontakty -->
-        <p>E-mail: <a href="mailto:archos@archoslinux.cz">archos@archoslinux.cz</a></p>
+<section>
-        <p>E-mail: <a href="mailto:archos@arch-linux.cz">archos@arch-linux.cz</a></p>
+   <!-- Sekce kontaktů s mřížkovým layoutem -->
-        <p>Telefon: +420739274900</p>
+<section class="box-grid-container">
-        <p>Matrix: <a href="https://matrix.to/#/@archos:mxchat.cz">archos:mxchat.cz</a></p>
+    <!-- Každý kontakt je block-link s obrázkem na pozadí a textem -->
-        <p>Pixelfed: <a href="https://pixelfed.cz/i/web/profile/441194050239729665">Sleduj mě na Pixelfed</a></p>
+    <div class="block-link" style="background-image: url('path/to/your/image.jpg');">
-        <p>Mastodon: <a href="https://mastodon.arch-linux.cz/@archos">Sleduj mě na Mastodon</a></p>
+        <a href="mailto:archos@archoslinux.cz">
-        <p>Keyoxide: <a href="https://keyoxide.org/archos%40archoslinux.cz">Archos</a></p>
+            <div class="block-link-wrapper">
-    </section>
+                <img src="path/to/your/icon.svg" alt="Ikona E-mailu">
+                <p class="link-title">E-mail</p>
+            </div>
+        </a>
+    </div>
+    <!-- Opakujte pro další kontakty -->
+</section>
+
+</section>
+
     <footer>
         <p>© [2023], archos</p>
     </footer>

styles.css

@@ -1,39 +1,38 @@
-body {
+/* Základní styly pro mřížkový layout */
-    font-family: Arial, sans-serif;
+.box-grid-container {
-    color: #333333;
+    display: grid;
-    line-height: 1.6;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Automatické rozložení sloupců */
+    gap: 10px; /* Mezera mezi prvky */
 }
 
-h1 {
+/* Styly pro jednotlivé bloky odkazů */
-    color: #123456;
+.block-link {
-    font-size: 24px;
+    background-size: cover; /* Obrázek pokryje celý prvek */
+    border-radius: 10px; /* Zaoblené rohy */
+    overflow: hidden; /* Skryje přebytečný obsah */
+    position: relative; /* Pro umístění textu */
 }
 
-p {
+.block-link a {
-    font-size: 16px;
+    display: block; /* Odkaz pokryje celý prvek */
-}
+    text-decoration: none; /* Bez podtržení odkazu */
-.container {
+    color: white; /* Bílá barva textu */
-    width: 80%;
-    margin: auto;
-    overflow: hidden;
-}
-@media (max-width: 600px) {
-    body {
-        background-color: lightblue;
-    }
-}
-a {
-    color: #0066cc;
-    text-decoration: none;
 }
 
-a:hover {
+.block-link-wrapper {
-    text-decoration: underline;
+    position: absolute;
+    bottom: 10px; /* Umístění textu u spodního okraje */
+    left: 10px; /* Umístění textu u levého okraje */
 }
 
-img {
+.block-link img {
-    width: 150px; /* nebo jiná požadovaná velikost */
+    width: 30px; /* Šířka ikony */
-    height: 150px;
+    height: auto; /* Automatická výška ikony */
-    border-radius: 50%; /* Toto vytvoří kruhový tvar */
 }
 
+.link-title {
+    margin-top: 5px; /* Horní okraj pro text */
+    font-weight: bold; /* Tučný text */
+}
+
+/* Přidáte další styly podle potřeby */