diff --git a/index.html b/index.html
index ed4c705..fd318f0 100644
--- a/index.html
+++ b/index.html
@@ -70,15 +70,24 @@
Krátký odstavec popisující tebe a tvou práci.
+
+
+
diff --git a/styles.css b/styles.css
index baae0cb..d3c27cd 100644
--- a/styles.css
+++ b/styles.css
@@ -1,39 +1,38 @@
-body {
- font-family: Arial, sans-serif;
- color: #333333;
- line-height: 1.6;
+/* Základní styly pro mřížkový layout */
+.box-grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Automatické rozložení sloupců */
+ gap: 10px; /* Mezera mezi prvky */
}
-h1 {
- color: #123456;
- font-size: 24px;
+/* Styly pro jednotlivé bloky odkazů */
+.block-link {
+ 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 {
- font-size: 16px;
-}
-.container {
- width: 80%;
- margin: auto;
- overflow: hidden;
-}
-@media (max-width: 600px) {
- body {
- background-color: lightblue;
- }
-}
-a {
- color: #0066cc;
- text-decoration: none;
+.block-link a {
+ display: block; /* Odkaz pokryje celý prvek */
+ text-decoration: none; /* Bez podtržení odkazu */
+ color: white; /* Bílá barva textu */
}
-a:hover {
- text-decoration: underline;
+.block-link-wrapper {
+ position: absolute;
+ bottom: 10px; /* Umístění textu u spodního okraje */
+ left: 10px; /* Umístění textu u levého okraje */
}
-img {
- width: 150px; /* nebo jiná požadovaná velikost */
- height: 150px;
- border-radius: 50%; /* Toto vytvoří kruhový tvar */
+.block-link img {
+ width: 30px; /* Šířka ikony */
+ height: auto; /* Automatická výška ikony */
}
+.link-title {
+ margin-top: 5px; /* Horní okraj pro text */
+ font-weight: bold; /* Tučný text */
+}
+
+/* Přidáte další styly podle potřeby */