69 lines
1.8 KiB
CSS
69 lines
1.8 KiB
CSS
/* 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 */
|
|
}
|
|
|
|
/* 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 */
|
|
}
|
|
|
|
.block-link a {
|
|
display: block; /* Odkaz pokryje celý prvek */
|
|
text-decoration: none; /* Bez podtržení odkazu */
|
|
color: white; /* Bílá barva textu */
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.contact-item {
|
|
background-color: #f4f4f4; /* Základní barva čtverečku */
|
|
text-align: center;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
transition: transform 0.3s ease, background-color 0.3s ease; /* Animace pro transformaci a změnu barvy */
|
|
}
|
|
|
|
.contact-item a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
/* Hover efekt a animace */
|
|
.contact-item:hover {
|
|
transform: translateY(-5px); /* Pohyb nahoru při najetí myši */
|
|
background-color: #007bff; /* Změna barvy při najetí myši */
|
|
}
|
|
|
|
.contact-item a:hover {
|
|
color: #fff; /* Změna barvy textu při najetí myši */
|
|
}
|
|
|
|
|
|
/* Přidáte další styly podle potřeby */
|