html {
  height: 100%;
  background: 50% 50% no-repeat
    url('data:image/svg+xml,<svg viewBox="-20 -5 60 40" width="140" xmlns="http://www.w3.org/2000/svg" opacity="0.2"><path d="M1 8l11-7 11 7v8l-11 7-11-7zm0 0l11 8 11-8m0 8L12 8 1 16M12 1v7m0 8v7" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"/><text x="-12" y="32" font-size="5" font-family="monospace" fill="currentColor">Built on CodePen</text></svg>');
}
{ box-sizing: border-box; } /* Zabráníme vodorovnému posouvání stránky na malých obrazovkách. */ html, body { width: 100%; overflow-x: hidden; } /* Celá stránka */ body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f4f1ea; color: #222; text-align: center; } /* ================================================== HLAVNÍ OBAL ================================================== */ .web { width: 100%; /* Maximální šířka stránky na velkých monitorech. */ max-width: 900px; /* Automatické vystředění stránky. */ margin: 0 auto; /* Vnitřní okraje. */ padding: 45px 25px 50px; } /* ================================================== HLAVIČKA ================================================== */ .hlavicka { width: 100%; margin-bottom: 35px; } /* Název firmy */ .hlavicka h1 a { display: inline-block; max-width: 100%; margin: 0 0 25px; padding: 18px 35px; background-color: #c9a227; color: #ffffff; border-radius: 6px; font-size: 40px; line-height: 1.2; font-weight: bold; } /* Název služby */ .hlavicka h2 { margin: 0 auto; max-width: 750px; font-size: 28px; line-height: 1.35; color: #333; text-decoration: #c9a227 underline; } /* ================================================== TLAČÍTKA ================================================== */ .tlacitka { /* Flexbox umožní tlačítkům automaticky reagovat na velikost obrazovky. */ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; width: 100%; margin: 35px 0; } /* Jednotlivé tlačítko */ .tlacitko { display: flex; justify-content: center; align-items: center; min-height: 52px; /* Tlačítko se může zmenšovat, ale nebude příliš úzké. */ min-width: 180px; padding: 14px 20px; background-color: #deb11f; color: #ffffff; border-radius: 6px; text-decoration: none; font-size: 17px; font-weight: bold; transition: background-color 0.2s, transform 0.2s; } /* Efekt při najetí myší */ .tlacitko:hover { background-color: #c9a227; font-size: 19px; transform: translateY(-2px); } /* ================================================== OBLAST PŮSOBNOSTI ================================================== */ .oblast { width: 100%; margin: 35px 0; padding: 18px 10px; border-top: 1px solid #c9a227; border-bottom: 1px solid #c9a227; } .oblast p { margin: 0; font-size: 26px; line-height: 1.3; font-weight: bold; color: #333; } /* ================================================== KONTAKT ================================================== */ .kontakt { width: 100%; margin-top: 40px; } .kontakt h2, .udaje h2 { margin: 0 0 18px; font-size: 27px; color: #333; } /* Telefon */ .telefon { margin: 0; } .telefon a { display: inline-block; padding: 5px 10px; color: #222; text-decoration: none; font-size: 32px; line-height: 1.3; font-weight: bold; } /* Telefon při najetí myší */ .telefon a:hover { color: #c9a227; } /* ================================================== KONTAKTNÍ ÚDAJE ================================================== */ .udaje { width: 100%; margin-top: 40px; padding-top: 30px; border-top: 1px solid #ccc; } .udaje p { margin: 10px 0; font-size: 18px; line-height: 1.55; overflow-wrap: anywhere; } /* E-mail a další odkazy */ .udaje a { color: #333; font-weight: bold; text-decoration: none; } .udaje a:hover { color: #c9a227; } /* Korespondenční adresa */ .adresa { margin-top: 28px !important; } /* ================================================== TABLETY ================================================== */ /* Toto nastavení se použije například na tabletech na výšku. */ @media (max-width: 768px) { .web { padding: 35px 20px 45px; } .hlavicka h1 { font-size: 35px; padding: 16px 25px; } .hlavicka h2 { font-size: 25px; } .tlacitko { min-width: 160px; font-size: 16px; } .oblast p { font-size: 24px; } .telefon a { font-size: 29px; } } /* ================================================== MOBILNÍ TELEFONY ================================================== */ @media (max-width: 600px) { /* Menší okraje po stranách. */ .web { padding: 25px 15px 40px; } /* Název firmy */ .hlavicka h1 { display: block; width: 100%; margin-bottom: 20px; padding: 14px 8px; font-size: clamp(26px, 8vw, 32px); line-height: 1.2; } /* Název služby */ .hlavicka h2 { font-size: clamp(20px, 5.5vw, 24px); line-height: 1.35; } /* Tlačítka */ .tlacitka { flex-direction: column; gap: 12px; margin: 30px 0; } /* Na telefonu budou tlačítka pod sebou. */ .tlacitko { width: 100%; max-width: 360px; min-height: 54px; font-size: 17px; } /* Oblast působnosti */ .oblast { margin: 30px 0; padding: 15px 5px; } .oblast p { font-size: clamp(20px, 6vw, 23px); line-height: 1.35; } /* Nadpis Kontakt */ .kontakt h2, .udaje h2 { font-size: 24px; } /* Telefon */ .telefon a { font-size: clamp(25px, 8vw, 30px); padding: 5px 0; } /* Kontaktní údaje */ .udaje p { font-size: 17px; line-height: 1.5; } } /* ================================================== VELMI MALÉ TELEFONY ================================================== */ /* Toto nastavení pomůže například na telefonech s velmi malou obrazovkou. */ @media (max-width: 380px) { .web { padding-left: 10px; padding-right: 10px; } .hlavicka h1 { font-size: 25px; } .hlavicka h2 { font-size: 20px; } .tlacitko { max-width: 100%; } .oblast p { font-size: 20px; } .udaje p { font-size: 16px; } }