<!--
* @file podnikavost.html
* @brief Page
*
* 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 together with additional titles translation.
*
-->
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Podporujeme podnikání na školách." />
<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;
}
.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;
}
.contactHeading:hover {
color: #ff914d;
}
@media (max-width: 768px) {
.navbar-container {
position: static; /* Change to static for mobile view */
}
.navbar {
flex-direction: column; /* Stack items vertically */
}
.navLink {
text-align: center;
padding: 0.5rem 0;
width: 100%;
}
.dropdown-menu {
position: static; /* Change to static for mobile view */
top: auto; /* Reset top position */
left: auto; /* Reset left position */
transform: none; /* Reset transform */
width: 100%; /* Full width for dropdown on mobile */
}
}
/* Default: hide .settingSmallerScreen */
.settingSmallerScreen {
display: none;
}
/* Hide .settingNormalScreen and show .settingSmallerScreen between 1130px and 1200px */
@media (min-width: 1100px) and (max-width: 1200px) {
.settingNormalScreen {
display: none;
}
.settingSmallerScreen {
display: block;
}
}
@media (max-width: 1200px) {
.image-placeholder {
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
.curved-shape {
width: 100%;
height: 100%;
display: block;
}
p {
font-size: 28px;
line-height: 1.5;
color: #555;
}
h5 {
font-size: 24px;
font-weight: 500;
}
}
@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;
}
}
@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="#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="#mojeprvnipodnikani"
>Moje první podnikání</a
>
</li>
<li><a id="navText5" href="#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="#umelcemnavolne">Umělcem na volné noze</a>
</li>
<li>
<a id="navText8" href="#startupovepodnikani">Startup podnikání</a>
</li>
<li>
<a id="navText9" href="#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 pt-4" id="rozvijimepodnikavost">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText7" class="text-start">Rozvíjíme podnikavost</h1>
<div class="spacer"></div>
<div class="divider"></div>
<div class="spacer"></div>
<p id="contentText7" class="mb-4">
„Kdo je podnikatel? Je to člověk, který má vrozené, ale i
vychované schopnosti jednat iniciativně, odpovědně a přeměňovat
myšlenky ve skutek! <br />Tomáš Baťa
</p>
<h4 id="headingText8" style="color: #ff914d; font-weight: 600">
Naše workshopy a semináře
</h4>
<p id="contentText8">
• Moje první podnikání<br />
• Mám nápad! A co dál?
</p>
<h4 id="headingText9" style="color: #ff914d; font-weight: 600">
Naše kurzy a programy
</h4>
<p id="contentText9">
• Umělcem na volné noze<br />
• Startup podnikání <br />
• Startupový akcelerátor
</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/intro4.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Moje první podnikání"
/>
</svg>
<img
src="media/intro4.jpg"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="mojeprvnipodnikani">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText10" class="text-start left-line">
Moje první podnikání
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText11" class="mt-5">Inspirativní workshop</h5>
<p id="contentText10" class="mb-4">
Seznamujeme s klíčovými momenty rozjezdu podnikání – motivací,
cílem, překážkami a možnostmi. Žáci si zvědomují tato témata při
práci na svých vlastních nápadech na podnikání. Pro vizualizaci
používáme naši unikátní metodiku.
</p>
<p id="contentText11">
<strong>Cíl:</strong> inspirovat k podnikání jako způsobu
seberealizace. <br /><strong>Délka:</strong> 3 vyučovací hodiny.
<br />
<strong>Cílovka:</strong> žáci ZŠ (8. a 9. třída) a SŠ.
</p>
<button
id="buttonText1"
class="m-4 btnInterest"
onclick="handlePopup('#ff914d', 'title1', '1',)"
>
Mám zájem
</button>
<p id="contentText12">
<a
id="linkText1"
href="https://mojeprvnipodnikani.cz/"
target="_blank"
>Odkaz na web</a
>
</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/img1.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Moje první podnikání"
/>
</svg>
<img
src="media/img1.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="mamnapad1">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText12" class="text-start left-line">
Mám nápad! A co dál?
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText13" class="mt-5">Inspirativní workshop</h5>
<p id="contentText13" class="mb-4">
Jak poznáme, jestli náš nápad stojí zato, abychom do něj vkládali
energii? A pokud máme nápadů víc, tak jak vybrat ten pravý? Na
workshopu se naučíme, jak s nápady pracovat, vyhodnocovat je a
dotahovat až do konce.
</p>
<p id="contentText14">
<strong>Cíl:</strong> naučit se jak (ne)realizovat své nápady.
<br /><strong>Délka: </strong>2,5 hodiny.<br />
<strong>Cílovka:</strong> SŠ, VŠ, veřejnost.
</p>
<button
id="buttonText1_1"
class="m-4 btnInterest"
style="background-color: #9acc87"
onclick="handlePopup('#9acc87', 'title2', '2',)"
>
Mám zájem
</button>
</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/img2.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Photo by Canva Studio from Pexels: https://www.pexels.com/photo/four-people-using-laptop-computers-and-smartphone-3277808/
"
/>
</svg>
<img
src="media/img2.jpg"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="mamnapad2">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText14" class="text-start left-line">
Mám nápad! A co dál? 2
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText15" class="mt-5">Inspirativní workshop</h5>
<p id="contentText15" class="mb-4">
V navazujícím workshopu ověříme, jestli lze náš nápad realizovat
jako byznys. Podíváme, kdo jsou naši potenciální zákazníci a
ověříme, co je trápí a s čím jim můžeme pomoci. Zároveň zjistíme,
jestli máme nějakou konkurenci a jak vypadá její nabídka.
</p>
<p id="contentText16">
<strong>Cíl:</strong> vytvořit z nápadu fungující byznys model.
<br />
<strong>Délka: </strong>2,5 hodiny. <br />
<strong>Cílovka:</strong> SŠ, VŠ, veřejnost.
</p>
<button
id="buttonText1_2"
class="m-4 btnInterest"
style="background-color: #ad46a1"
onclick="handlePopup('#ad46a1', 'title3', '3',)"
>
Mám zájem
</button>
</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/img7.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Photo by Fox: https://www.pexels.com/photo/group-of-people-watching-on-laptop-1595385/"
/>
</svg>
<img
src="media/img7.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="mamnapad3">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText16" class="text-start left-line">
Mám nápad! A co dál? 3
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText17" class="mt-5">Inspirativní workshop</h5>
<p id="contentText17" class="mb-4">
Na základě ověřeného byznys modelu z předešlého workshopu
sestavíme celý byznys plán. Vydefinujeme náš produkt/službu, jeho
unikátní výhody, marketingové a distribuční kanály a spočítáme si
naše příjmy a výdaje.
</p>
<p id="contentText18">
<strong>Cíl:</strong> sestavit kompletní byznys plán.<br />
<strong>Délka:</strong> 2,5 hodiny.<br />
<strong>Cílovka:</strong> SŠ, VŠ, veřejnost.
</p>
<button
id="buttonText1_3"
class="m-4 btnInterest"
style="background-color: #ad46a1"
onclick="handlePopup('#ad46a1', 'title4', '4',)"
>
Mám zájem
</button>
</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/img8.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="https://unsplash.com/photos/three-men-sitting-on-chair-beside-tables-mpN7xjKQ_Ns?utm_content=creditShareLink&utm_medium=referral&utm_source=unsplash
"
/>
</svg>
<img
src="media/img8.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="umelcemnavolne">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText18" class="text-start left-line">
Umělcem na volné noze
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText19" class="mt-5">Praktický kurz</h5>
<p id="contentText19" class="mb-4">
Práce na volné noze a svobodná tvorba je snem mnoha studentů
umění. Jak ale uchopit témata jako je tvorba portfolia,
cenotvorba, propagace, networking a práce s příležitostmi? V našem
kurzu získáte odpovědi.
</p>
<p id="contentText20">
<strong>Cíl:</strong> naučit se, jak se uživit uměleckou
tvorbou.<br />
<strong>Délka:</strong> 5 dvouhodinových workshopů.<br />
<strong>Cílovka:</strong> studenti uměleckých škol.
</p>
<button
id="buttonText1_4"
class="m-4 btnInterest"
style="background-color: #1fbbd3"
onclick="handlePopup('#1fbbd3', 'title5', '5',)"
>
Mám zájem
</button>
</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/img4.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
/>
</svg>
<img
src="media/img4.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="startupovepodnikani">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1 id="headingText20" class="text-start left-line">
Startup podnikání
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText21" class="mt-5">Kroužek</h5>
<p id="contentText21" class="mb-4">
Startupové podnikání je způsob, jak vybudovat úspěšný byznys
rychle, bez slepých uliček a zbytečných nákladů. Představuje
propracovanou metodiku, která provede hravou formou žáky a
studenty, krok za krokem, od nápadu až k platícím zákazníkům.
</p>
<p id="contentText22">
<strong>Cíl:</strong> naučit se, jak úspěšně realizovat
podnikatelský záměr.<br />
<strong>Délka:</strong> září –červen, pravidelná týdenní
setkání,na cca 1,5 hodiny.<br />
<strong>Cílovka:</strong> žáci ZŠ (8. a 9. třídy), studenti SŠ.
</p>
<button
id="buttonText1_5"
class="m-4 btnInterest"
onclick="handlePopup('#ff914d', 'title6', '6',)"
>
Mám zájem
</button>
</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/img5.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
/>
</svg>
<img
src="media/img5.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="statupovyinkubator">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="p-5 ms-5">
<h1
id="headingText22"
class="text-start left-line"
style="font-size: 60px"
>
Startupový inkubátor / akcelerátor
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText23" class="mt-5">Program</h5>
<p id="contentText23" class="mb-4">
Co je to elevator pitch? A proč ověřovat a jak spočítat finanční
plán? Na tyto a další otázky přináší odpověď náš program na
podporu začínajících podnikatelů. Provádí všemi důležitými aspekty
podnikání a pomáhá tak zvýšit počet a úspěšnost zájemců o
podnikání.
</p>
<p id="contentText24">
<strong>Cíl:</strong> zvýšit počet podnikatelů ve městě, regionu
apod.<br />
<strong>Délka:</strong> 10-ti měsíční program složený z workshopů
a individuálního mentoringu.<br />
<strong>Cílovka:</strong> veřejnost.
</p>
<button
type="button"
id="buttonText1_6"
class="m-4 btnInterest"
onclick="handlePopup('#ff914d', 'title7', '7',)"
>
Mám zájem
</button>
</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/img6.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
/>
</svg>
<img
src="media/img6.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</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" class="mt-3">Rozvíjíme podnikavost</h4>
<h4 id="headingText26" class="mt-3">Podněcujeme k sebepoznání</h4>
<h4 id="headingText27" 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>
<!-- Popup Form -->
<div class="popup-overlay" id="popupOverlay">
<div class="popup-content" id="popup-content">
<h2 class="mb-3" style="text-align: center">Mám zájem</h2>
<button class="popup-close" onclick="hidePopup()">×</button>
<form class="contact-form" method="POST" action="process-form.php">
<div class="form-group">
<label for="fullName" id="fullNameLang">Celé jméno*</label>
<input type="text" id="fullName" name="fullName" required />
</div>
<div class="form-group">
<label for="organization" id="organizationLang">Organizace*</label>
<input type="text" id="organization" name="organization" required />
</div>
<div class="form-group">
<label for="interest" id="interestLang">Zajímá mě</label>
<input type="text" id="interest" name="interest" value="" />
</div>
<div class="form-group">
<label for="telephone" id="telephoneLang">Telefon*</label>
<input type="tel" id="telephone" name="telephone" required />
</div>
<div class="form-group">
<label for="email" id="emailLang">Email*</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<input type="text" name="backlink" id="backlink" value="" hidden />
</div>
<div class="form-group">
<label for="message" id="messageLang">Zpráva</label>
<textarea id="message" name="message" rows="3" required></textarea>
</div>
<button type="submit" id="submitBtn" class="btn-submit">
Odeslat
</button>
</form>
</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>
function handlePopup(color, titleKey, id) {
const lang = localStorage.getItem("language") || "cz"; // Get the current language
// Define translations for each title key
const titles = {
title1: {
cs: "Moje první podnikání",
en: "My first business",
},
title2: {
cs: "Mám nápad! A co dál?",
en: "I have an idea! What's next?",
},
title3: {
cs: "Mám nápad! A co dál? 2",
en: "I have an idea! What's next? 2",
},
title4: {
cs: "Mám nápad! A co dál? 3",
en: "I have an idea! What's next? 3",
},
title5: {
cs: "Umělcem na volné noze",
en: "Freelance artist",
},
title6: {
cs: "Startup podnikání",
en: "Startup business",
},
title7: {
cs: "Startupový inkubátor / akcelerátor",
en: "Startup incubator / accelerator",
},
// Add more title translations as needed
};
// Get the translated title based on the language
const title = titles[titleKey][lang] || titles[titleKey].cs; // Default to Czech if no translation exists
// Call the showPopup function with the translated title
showPopup(color, title, id);
}
// 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>
<script src="js/popup.js"></script>
</body>
</html>