<!--
* @file index.html
* @brief Main page of the website
*
* This code includes data of the business together with structure and css design.
* On the bottom of the page is located a cookie bar setting.
-->
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Nabízíme širokou řadu přednášek a workshopů pro školy i učitele. Pomáháme rozvíjet potenciál jednotlivců."
/>
<title>Cesta k rovnováze</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
.rowSection {
min-height: 100vh;
}
.navbar-container {
position: fixed;
}
.navbar {
background-color: #f8f9fa; /* Light background for navbar */
padding: 0.4rem 0;
font-family: Arial, sans-serif;
}
.navbar .navLink {
text-align: center;
padding: 0.4rem;
font-size: 1.1rem;
cursor: pointer;
}
.navbar .navLink a {
color: #333;
text-decoration: none;
transition: color 0.1s ease;
}
.navbar .navLink a:hover {
color: #ff914d; /* Blue hover effect for non-dropdown items */
}
.extend {
position: relative; /* For positioning dropdown */
}
.dropdown-menu {
display: none; /* Hidden by default */
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
min-width: 250px;
z-index: 1000;
list-style: none;
padding: 0;
margin: 0;
}
.nonClick {
cursor: default;
}
.extend:hover .dropdown-menu {
display: block; /* Show dropdown on hover */
}
.dropdown-menu li {
padding: 0.5rem 1rem;
color: #333;
text-align: left;
transition: background-color 0.3s ease;
}
.dropdown-menu li:hover {
background-color: #f1f1f1; /* Hover effect for dropdown items */
color: #ff914d;
}
.dropdown-menu li a {
color: inherit;
text-decoration: none;
display: block;
}
.navLink a img {
width: 40px;
height: 35px;
margin-left: 10px;
}
.hideThisON1200 {
display: block;
}
.image-placeholder {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.curved-shape {
width: 100%;
height: 100%;
display: block;
}
.col-md-5 {
padding-left: 0; /* Remove any default padding */
}
.curved-shape image {
object-fit: cover;
}
.left-line {
border-left: 8px solid #ff914d;
padding-left: 10px;
}
h1 {
font-size: 65px;
font-weight: 600;
}
.spacer {
height: 40px;
}
.spacerBig {
height: 140px;
}
.divider {
width: 325px;
height: 3px;
background-color: #d5d5d5;
}
.lineStart {
width: 55px;
height: 15px;
background-color: #ff914d;
}
p {
font-size: 20px;
line-height: 1.5;
color: #555;
}
.btnInterest {
background-color: #ff914d;
color: white;
border-radius: 20px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
border: none;
}
.btnInterest:hover {
scale: 1.07;
transition: scale 0.1s ease;
}
.sectionDivider {
width: 100%;
height: 3px;
background-color: #d5d5d5;
}
.hidden-until-translated {
visibility: hidden;
}
/* pop up */
.popup-overlay {
display: none;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.popup-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 400px;
width: 100%;
position: relative;
border: 6px solid #000; /* Default border color */
transition: border-color 0.3s ease; /* Smooth border color transition */
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
background: none;
border: none;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn-submit {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-submit:hover {
scale: 1.05;
transition: scale 0.1s ease;
}
.btn-interest {
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
margin: 10px;
cursor: pointer;
}
/* Default: hide .settingSmallerScreen */
.settingSmallerScreen {
display: none;
}
/* Hide .settingNormalScreen and show .settingSmallerScreen between 1130px and 1200px */
@media (max-width: 1200px) {
.settingNormalScreen {
display: none;
}
.settingSmallerScreen {
display: block;
}
.image-placeholder {
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
.curved-shape {
width: 100%;
height: 100%;
display: block;
}
.hideThisON1200 {
display: none;
}
}
@media (max-width: 1050px) {
.curved-shape {
display: none !important;
}
.plain-img {
display: block !important;
width: 100%;
height: auto;
border-radius: 0 !important;
object-fit: cover;
}
.col-md-6,
.col-md-7,
.col-md-5 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.spacerPhone {
height: 60px;
}
}
@media (min-width: 1051px) {
.plain-img {
display: none !important;
}
}
@media (max-width: 768px) {
/* Remove viewport height constraint on mobile */
.rowSection {
min-height: unset;
padding-bottom: 20px;
padding-top: 20px;
}
/* Set reasonable fixed height for image containers */
.image-placeholder {
height: 250px; /* Fixed height instead of percentage */
max-height: 250px;
min-height: 200px;
overflow: hidden;
margin-bottom: 20px;
}
/* More responsive text sizing */
h1 {
font-size: 2.5rem; /* Instead of fixed 65px */
}
p {
font-size: 1.1rem; /* Instead of fixed 20px */
}
/* Adjust padding for mobile */
.p-5 {
padding: 1.5rem !important;
}
.ms-5,
.me-5 {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
}
</style>
</head>
<body class="hidden-until-translated">
<div class="container-fluid navbar-container">
<div class="row navbar">
<div class="col-2 navLink">
<a id="navText1" href="index.html">Domů</a>
</div>
<div class="col-3 navLink extend">
<a id="navText2" href="podnikavost.html#rozvijimepodnikavost"
>Rozvoj podnikavosti</a
>
<ul class="dropdown-menu">
<h5 id="navText3" class="p-2 nonClick">Workshopy a semináře</h5>
<li>
<a id="navText4" href="podnikavost.html#mojeprvnipodnikani"
>Moje první podnikání</a
>
</li>
<li>
<a id="navText5" href="podnikavost.html#mamnapad1"
>Mám nápad! A co dál?</a
>
</li>
<h5 id="navText6" class="p-2 nonClick">Kurzy a programy</h5>
<li>
<a id="navText7" href="podnikavost.html#umelcemnavolne"
>Umělcem na volné noze</a
>
</li>
<li>
<a id="navText8" href="podnikavost.html#startupovepodnikani"
>Startup podnikání</a
>
</li>
<li>
<a id="navText9" href="podnikavost.html#statupovyinkubator"
>Startupový inkubátor / akcelerátor</a
>
</li>
</ul>
</div>
<div class="col-3 navLink extend">
<a id="navText10" href="sebepoznani.html">Cesta sebepoznání</a>
<ul class="dropdown-menu">
<h5 id="navText3" class="p-2 nonClick">Workshopy a semináře</h5>
<li>
<a id="navText11" href="sebepoznani.html#mojepracesnu"
>Moje práce snů</a
>
</li>
<li>
<a id="navText12" href="sebepoznani.html#emocezpetnavazba"
>Emoce jako zpětná vazba</a
>
</li>
<li>
<a id="navText13" href="sebepoznani.html#navodnauspesnyzivot"
>Návod na úspěšný život</a
>
</li>
</ul>
</div>
<div class="col-2 navLink">
<a id="navText14" href="#kontakt">Kontakt</a>
</div>
<div class="col-2 navLink">
<a id="cz-flag" href=""><img src="media/czFlag.png" alt="" /></a>
<a id="en-flag" href=""><img src="media/enFlag.png" alt="" /></a>
</div>
</div>
</div>
<div class="container-fluid" id="hidePart">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-6">
<div class="p-5 ms-1">
<div class="spacer"></div>
<div class="lineStart"></div>
<div class="spacerBig"></div>
<div class="spacer"></div>
<h1 id="headingText24_1" class="text-start">
Cesta k <br />rovnováze z.s.
</h1>
<div class="divider"></div>
<div class="spacer"></div>
<h3 id="headingText25" class="ms-3">Rozvíjíme podnikavost</h3>
<h3 id="headingText26" class="ms-3">Podněcujeme k sebepoznání</h3>
<h3 id="headingText27" class="ms-3">Sdílíme a propojujeme</h3>
</div>
</div>
<!-- Right image placeholder (curved) -->
<div class="col-md-6 d-flex align-items-center">
<div class="image-placeholder">
<svg
class="curved-shape"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<image
href="media/intro0.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
alt="Moje první podnikání"
/>
</svg>
</div>
</div>
</div>
</div>
<div class="sectionDivider" id="domu"></div>
<div class="container-fluid">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-6">
<div class="p-5">
<div class="spacerPhone"></div>
<h1
id="headingText1"
class="text-start left-line"
style="font-size: 60px"
>
Cesta k rovnováze v moderním vzdělávání
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<div class="spacer"></div>
<p id="contentText1" class="mb-4">
Dnešní svět klade na mladé lidi stále větší nároky. Vedle
tradičních znalostí potřebují i
<strong> schopnost přemýšlet kreativně, jednat podnikavě </strong>
a <strong>porozumět sami sobě</strong>. Přinášíme ucelený přístup,
který propojuje rozvoj podnikavosti, sebepoznání a praktických
dovedností. Naše programy pomáhají žákům a studentům najít jejich
cestu k úspěchu a spokojenosti v rychle se měnícím světě.
</p>
<h5 id="headingText2"><strong>Klíčové oblasti:</strong></h5>
<p id="contentText2">
• Podnikavost jako nástroj seberealizace <br />
• Sebepoznání jako základ životních rozhodnutí <br />• Praktické
dovednosti pro budoucnost
</p>
</div>
</div>
<!-- Right image placeholder (curved) -->
<div class="col-md-6 d-flex align-items-center">
<div class="image-placeholder">
<svg
class="curved-shape"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<defs>
<clipPath id="cut-left-radius">
<path d="M100,0 H0 Q15,50 0,100 H100 Z" />
</clipPath>
</defs>
<image
href="media/intro1.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Moje první podnikání"
/>
</svg>
<img
src="media/intro1.jpg"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider" id="proc"></div>
<div class="container-fluid">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-6">
<div class="p-5">
<h1 id="headingText3" class="text-start left-line">
Proč je to pro školy důležité
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<div class="spacer"></div>
<p id="contentText3" class="mb-4">
Vzdělávání již dávno není jen o předávání faktů. Školy stojí před
výzvou připravit žáky na životní realitu, kde se prolínají
profesní výzvy, osobní růst a společenská odpovědnost. Naše
workshopy a kurzy, jako
<strong>Moje první podnikání, Mám nápad! A co dál?</strong> nebo
<strong>Moje práce snů</strong>, nabízejí učitelům nástroje, jak
žákům pomoci:
</p>
<p id="contentText4">
• Objevit jejich silné stránky a talenty. <br />
• Rozvíjet kritické myšlení a iniciativu. <br />• Překonat strach
z neznámého a budovat zdravé sebevědomí.
</p>
<h4 id="headingText4" class="mt-5">
<strong
>Společně vytváříme prostředí, kde se vzdělávání stává cestou k
rovnováze mezi poznáním a praxí.</strong
>
</h4>
</div>
</div>
<!-- Right image placeholder (curved) -->
<div class="col-md-6 d-flex align-items-center">
<div class="image-placeholder">
<svg
class="curved-shape"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<defs>
<clipPath id="cut-left-radius">
<path d="M100,0 H0 Q15,50 0,100 H100 Z" />
</clipPath>
</defs>
<image
href="media/intro2.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Moje první podnikání"
/>
</svg>
<img
src="media/intro2.jpg"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="inspirace">
<div class="row rowSection">
<!-- Left image placeholder (curved) -->
<div class="col-md-6 d-flex align-items-center">
<div class="image-placeholder hideThisON1200">
<svg
class="curved-shape"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<defs>
<clipPath id="cut-right-radius">
<path d="M0,0 H100 Q85,50 100,100 H0 Z" />
</clipPath>
</defs>
<image
href="media/intro3.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-right-radius)"
alt="Moje první podnikání"
/>
</svg>
</div>
</div>
<!-- Right content (col-6) -->
<div class="col-md-6">
<div class="p-5 me-5">
<h1 id="headingText5" class="text-start right-line">
Inspirace pro pedagogy a zřizovatele
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<div class="spacer"></div>
<p id="contentText5" class="mb-4">
Naše nabídka workshopů je určena učitelům, ředitelům a pracovníkům
školských odborů, kteří hledají způsoby, jak obohatit výuku o
prvky podnikavosti a osobního rozvoje. Chceme vám představit:
</p>
<p id="contentText6">
• Konkrétní workshopy a programy, které můžete zařadit do výuky.
<br />
• Metodiky, jež žákům pomohou propojit teorii s praxí. <br />
• Způsoby, jak pracovat s osobním rozvojem žáků.
</p>
<h4 id="headingText6" class="mt-5">
<strong
>Naším společným cílem je připravit mladé lidi na život, kde se
odváží snít, jednat a růst.</strong
>
</h4>
</div>
</div>
<img
src="media/intro3.jpg"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="kontakt">
<div class="row rowSection">
<div class="col-md-5">
<div class="p-5 me-5">
<h1 id="headingText24" style="font-size: 60px" class="text-start">
Cesta k rovnováze z.s.
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<div class="spacer"></div>
<h4 id="headingText25_clone" class="mt-3">Rozvíjíme podnikavost</h4>
<h4 id="headingText26_clone" class="mt-3">
Podněcujeme k sebepoznání
</h4>
<h4 id="headingText27_clone" class="mt-3">Sdílíme a propojujeme</h4>
<div class="spacer"></div>
<div class="row settingNormalScreen">
<div class="col-6">
<h5 id="headingText28_2">předseda spolku</h5>
<h4 id="headingText28" class="">
<strong>Jan Adam Plaček Köhle</strong>
</h4>
<h5
id="headingText30"
class=""
style="min-width: 230px; overflow: auto; font-size: 19px"
>
Telefon: +420 731 552 258
</h5>
<br />
</div>
<div class="col-6">
<h5 id="headingText28_3">administrativa</h5>
<h4 id="headingText28_1" class="" style="min-width: 190px">
<strong>Renata Plačková Köhle</strong>
</h4>
<h5
id="headingText30_1"
class=""
style="min-width: 230px; overflow: auto; font-size: 19px"
>
Telefon: +420 737 077 600
</h5>
<br />
</div>
</div>
<div class="row settingSmallerScreen">
<div class="col-12">
<h5 id="headingText28_2">předseda spolku</h5>
<h4 id="headingText28" class="">
<strong>Jan Adam Plaček Köhle</strong>
</h4>
<h5
id="headingText30"
class=""
style="min-width: 230px; font-size: 19px"
>
Telefon: +420 731 552 258
</h5>
<br />
</div>
<div class="col-12">
<h5 id="headingText28_3">administrativa</h5>
<h4 id="headingText28_1" class="">
<strong>Renata Plačková Köhle</strong>
</h4>
<h5
id="headingText30_1"
class=""
style="min-width: 230px; overflow: auto; font-size: 19px"
>
Telefon: +420 737 077 600
</h5>
<br />
</div>
</div>
<p>
email: ahoj@cestakrovnovaze.com<br />
<a href="gdpr.html">GDPR</a>
</p>
</div>
</div>
<!-- Right image placeholder (curved) -->
<div class="col-md-7 d-flex align-items-center">
<div class="image-placeholder">
<svg
class="curved-shape"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<defs>
<clipPath id="cut-left-radius">
<path d="M100,0 H0 Q15,50 0,100 H100 Z" />
</clipPath>
</defs>
<image
href="media/contact.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
/>
</svg>
<img
src="media/contactSmall.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<!-- Cookie Bar -->
<div
id="cookieBar"
style="
position: fixed;
bottom: 0;
width: 100%;
background: #333;
color: white;
text-align: center;
padding: 10px;
display: none;
"
>
<p style="margin: 0">
Tento web používá cookies pro zlepšení uživatelského zážitku.
<button
id="acceptCookies"
style="
background: #ff914d;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
"
>
Souhlasím
</button>
</p>
</div>
<script>
// Check if the user has already accepted cookies
document.addEventListener("DOMContentLoaded", function () {
// Check if the user has already accepted cookies
const cookieConsent = localStorage.getItem("cookieConsent");
if (!cookieConsent) {
document.getElementById("cookieBar").style.display = "block";
}
// Handle the "Accept" button click
document
.getElementById("acceptCookies")
.addEventListener("click", function () {
localStorage.setItem("cookieConsent", "true"); // Save consent in localStorage
document.getElementById("cookieBar").style.display = "none"; // Hide the cookie bar
});
});
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
defer
></script>
<script src="js/languagesNew.js"></script>
</body>
</html>