2024-05-15 19:06:04 +00:00
|
|
|
body, html {
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
text-align: center;
|
2024-05-12 06:36:22 +00:00
|
|
|
}
|
2024-05-12 11:50:05 +00:00
|
|
|
/* Nastavení stylu pro všechny obrázky na stránce */
|
2024-05-12 06:36:22 +00:00
|
|
|
img {
|
2024-05-12 11:50:05 +00:00
|
|
|
display: block; /* Zobrazení jako blok pro možnost centrování */
|
|
|
|
margin-left: auto; /* Automatický levý okraj pro centrování */
|
|
|
|
margin-right: auto; /* Automatický pravý okraj pro centrování */
|
2024-05-15 19:06:04 +00:00
|
|
|
width: 150px; /* Pevná šířka obrázku */
|
|
|
|
border-radius: 85px; /* Velké zaoblení rohů */
|
2024-05-12 11:50:05 +00:00
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lehký stín pro lepší vizuální efekt */
|
|
|
|
}
|
|
|
|
|
2024-05-15 19:06:04 +00:00
|
|
|
.flex-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
gap: 10px;
|
2024-05-12 11:50:05 +00:00
|
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
|
2024-05-15 19:06:04 +00:00
|
|
|
.flex-item {
|
|
|
|
width: 150px;
|
|
|
|
padding: 10px;
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
border-radius: 5px;
|
2024-05-12 11:50:05 +00:00
|
|
|
text-align: center;
|
2024-05-15 19:06:04 +00:00
|
|
|
color: black;
|
|
|
|
text-decoration: none;
|
|
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
2024-05-12 11:50:05 +00:00
|
|
|
}
|
|
|
|
|
2024-05-15 19:06:04 +00:00
|
|
|
.flex-item:hover {
|
|
|
|
background-color: #e0e0e0;
|
2024-05-12 11:50:05 +00:00
|
|
|
}
|
|
|
|
|
2024-05-15 19:06:04 +00:00
|
|
|
footer {
|
|
|
|
margin-top: 20px;
|
|
|
|
padding: 10px;
|
|
|
|
background-color: #f1f1f1;
|
2024-05-12 12:02:30 +00:00
|
|
|
}
|
2024-05-15 19:40:33 +00:00
|
|
|
.flex-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
gap: 20px; /* Mezery mezi položkami */
|
|
|
|
padding: 20px; /* Okraj kolem kontejneru */
|
|
|
|
}
|
|
|
|
|
|
|
|
.flex-item {
|
|
|
|
width: 150px;
|
|
|
|
padding: 10px;
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
border-radius: 5px;
|
|
|
|
text-align: center;
|
|
|
|
color: black;
|
|
|
|
text-decoration: none;
|
|
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
|
|
margin: 5px; /* Menší okraj kolem každé položky pro jemnější nastavení */
|
|
|
|
}
|
|
|
|
body, html {
|
|
|
|
height: 100%; /* Zajišťuje, že HTML a BODY pokrývají celou výšku stránky */
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column; /* Nastaví flex items ve sloupci */
|
|
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
|
|
flex: 1; /* Zajišťuje, že hlavní obsah zaujme všechno dostupné místo */
|
|
|
|
}
|
|
|
|
|
|
|
|
footer {
|
|
|
|
text-align: center; /* Centruje text ve zápatí */
|
|
|
|
padding: 10px 0; /* Přidává padding na horní a dolní části zápatí */
|
|
|
|
background-color: #f1f1f1; /* Nastaví barvu pozadí zápatí */
|
|
|
|
box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Přidává stín, který ohraničuje zápatí od zbytku stránky */
|
|
|
|
}
|
|
|
|
.flex-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center; /* Zarovná položky horizontálně na střed */
|
|
|
|
align-items: center; /* Zarovná položky vertikálně na střed */
|
|
|
|
flex-wrap: wrap; /* Umožní položkám zalamovat na nový řádek, pokud není dost místa */
|
|
|
|
height: 100vh; /* Zajistí, že kontejner zaujme minimálně celou výšku obrazovky */
|
|
|
|
padding: 20px;
|
|
|
|
gap: 20px; /* Vytvoří mezery mezi položkami */
|
|
|
|
}
|
|
|
|
.flex-item {
|
|
|
|
width: 200px; /* Fixní šířka rámečků */
|
|
|
|
margin: 10px; /* Okraje kolem každého rámečku */
|
|
|
|
padding: 20px; /* Vnitřní padding rámečků */
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
border-radius: 5px;
|
|
|
|
text-align: center;
|
|
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
|
|
}
|
|
|
|
#dynamic-content {
|
2024-05-16 17:53:30 +00:00
|
|
|
min-height: 10vh; /* Minimální výška obsahu, zajišťuje, že obsah neklesne příliš nízko */
|
2024-05-15 19:40:33 +00:00
|
|
|
margin-top: 50px; /* Horní okraj pro oddělení od ostatních elementů */
|
|
|
|
}
|
2024-05-16 17:53:30 +00:00
|
|
|
.flex-item {
|
|
|
|
background-color: #f0f2f5; /* světlé šedá pro neutrální vzhled */
|
|
|
|
color: #333; /* tmavě šedá pro text */
|
|
|
|
border: 2px solid #ccc; /* lehký šedý rámeček */
|
|
|
|
}
|
|
|
|
.button {
|
|
|
|
background-color: #28a745; /* zelená pro tlačítka akce */
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button:hover {
|
|
|
|
background-color: #218838; /* tmavší zelená pro efekt při najetí myší */
|
|
|
|
}
|
|
|
|
.button {
|
|
|
|
background-color: #28a745; /* zelená pro tlačítka akce */
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button:hover {
|
|
|
|
background-color: #218838; /* tmavší zelená pro efekt při najetí myší */
|
|
|
|
}
|
2024-05-19 19:20:32 +00:00
|
|
|
footer a {
|
|
|
|
text-decoration: none; /* Odstraňuje podtržení odkazu */
|
|
|
|
color: inherit; /* Dědí barvu textu od rodiče */
|
|
|
|
}
|
|
|
|
footer i {
|
|
|
|
margin-left: 5px; /* Přidává malý prostor mezi textem a ikonou */
|
|
|
|
}
|
2024-05-20 05:26:57 +00:00
|
|
|
/* Základní styly pro desktopová zařízení */
|
|
|
|
.flex-item {
|
|
|
|
font-size: 16px; /* Základní velikost písma */
|
|
|
|
padding: 10px;
|
|
|
|
}
|
|
|
|
/* Základní styly pro rámečky */
|
|
|
|
.flex-item {
|
|
|
|
width: 200px; /* Základní šířka pro desktop */
|
|
|
|
margin: 10px;
|
|
|
|
padding: 20px;
|
|
|
|
font-size: 16px; /* Základní velikost písma */
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Media query pro malá zařízení */
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.flex-item {
|
|
|
|
width: 120%; /* Zvětší rámečky na celou šířku kontejneru */
|
|
|
|
padding: 20px;
|
|
|
|
font-size: 20px; /* Větší písmo pro lepší čitelnost */
|
|
|
|
margin: 10px 0; /* Vertikální marginy, horizontální zrušeny */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* Media query pro malá zařízení */
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.button {
|
|
|
|
font-size: 22px; /* Zvětší písmo tlačítka */
|
|
|
|
padding: 15px 30px; /* Větší padding pro snadnější ovládání */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* Media query pro malá zařízení */
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
body {
|
|
|
|
font-size: 18px; /* Zvětší základní velikost písma pro lepší čitelnost */
|
|
|
|
}
|
|
|
|
|
|
|
|
h1, h2, h3 {
|
|
|
|
font-size: 20px; /* Zvětší nadpisy pro lepší viditelnost */
|
|
|
|
}
|
|
|
|
|
|
|
|
.button, a {
|
|
|
|
font-size: 18px; /* Větší písmo pro tlačítka a odkazy */
|
|
|
|
padding: 15px 30px; /* Větší padding pro snadnější ovládání */
|
|
|
|
}
|
|
|
|
|
|
|
|
.flex-item {
|
|
|
|
padding: 20px; /* Větší padding uvnitř flex-itemů */
|
|
|
|
margin: 10px 0; /* Upravený margin pro lepší vzhled */
|
|
|
|
width: 100%; /* Flex-itemy zaujímají celou dostupnou šířku */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.flex-item {
|
|
|
|
font-size: 18px; /* Zvětší velikost písma pro lepší čitelnost */
|
|
|
|
font-weight: bold; /* Ztuční text pro lepší viditelnost */
|
|
|
|
color: #333; /* Tmavě šedá pro lepší kontrast */
|
|
|
|
padding: 20px; /* Ujistěte se, že je dostatek paddingu kolem textu */
|
|
|
|
margin: 10px; /* Dostatek prostoru mezi rámečky */
|
|
|
|
background-color: #f4f4f4; /* Světlé pozadí pro kontrast s textem */
|
|
|
|
border: 1px solid #ccc; /* Subtilní okraje mohou také pomoci definovat rámečky */
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stín dodává hloubku */
|
|
|
|
border-radius: 10px; /* Zaoblené rohy pro modernější vzhled */
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.flex-item {
|
|
|
|
font-size: 20px; /* Ještě větší font na malých zařízeních */
|
|
|
|
padding: 25px; /* Více prostoru kolem textu */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* Větší tlačítka na malých zařízeních */
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.button {
|
|
|
|
padding: 15px 30px; /* Větší padding pro snadnější ovládání */
|
|
|
|
font-size: 20px; /* Větší font pro lepší čitelnost */
|
|
|
|
}
|
|
|
|
}
|
2024-05-20 06:27:49 +00:00
|
|
|
footer a.name-link {
|
|
|
|
color: #007BFF; /* Modrá barva odkazu */
|
|
|
|
text-decoration: none; /* Žádné podtržení jako výchozí */
|
|
|
|
font-weight: bold; /* Tučné písmo */
|
|
|
|
transition: color 0.3s ease; /* Plynulá změna barvy */
|
|
|
|
}
|
2024-05-20 05:26:57 +00:00
|
|
|
|
2024-05-20 06:27:49 +00:00
|
|
|
footer a.name-link:hover {
|
|
|
|
color: #0056b3; /* Tmavší modrá při najetí myši */
|
|
|
|
text-decoration: underline; /* Podtržení při najetí myši */
|
2024-06-10 19:28:27 +00:00
|
|
|
}
|