<!--
* @file sebepoznani.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" />
<title>Curved Image Placeholder</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;
}
.divider {
width: 280px;
height: 3px;
background-color: #d5d5d5;
}
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 (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;
}
.spacerBig {
height: 140px;
}
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">
<!-- Přidat záložku kontakt -->
<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="#mojepracesnu">Moje práce snů</a></li>
<li>
<a id="navText12" href="#emocezpetnavazba"
>Emoce jako zpětná vazba</a
>
</li>
<li>
<a id="navText13" href="#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">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-5">
<div class="p-5 ms-5">
<h1 id="headingText31" class="text-start mt-5">
Podněcujeme k sebepoznání
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<div class="spacer"></div>
<p id="contentText25" class="mb-4">
„Než z nevědomého učiníte vědomé, bude vám to řídit život a vy
tomu budete říkat osud.“ <br />Carl Gustav Jung
</p>
<h4 id="headingText32" style="color: #ff914d; font-weight: 600">
Naše workshopy a semináře
</h4>
<p id="contentText26">
• Moje práce snů<br />
• Emoce jako zpětná vazba<br />
• Návod na úspěšný život<br />
</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"
>
<image
href="media/page2.jpg"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
alt="Moje první podnikání"
/>
</svg>
<img
src="media/page2Small.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="mojepracesnu">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-6">
<div class="spacerBig"></div>
<div class="p-5 ms-5">
<h1 id="headingText33" class="text-start left-line">
Moje práce snů
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText34" class="mt-5">Interaktivní workshop</h5>
<p id="contentText27" class="mb-4">
Najít si práci, která nás bude uspokojovat je snem nás všech. Jak
zjistíme, na co se hodíme a v čem můžeme uspět? Základním
předpokladem je zmapování našich zájmů, vlastností, schopností a
hodnot. Naše unikátní metodika zajistí vizualizaci a propojení
našeho osobního potenciálu s konkrétní profesí.
</p>
<p id="contentText28">
<strong>Cíl:</strong> přijít si na to, na co se hodím.
<br /><strong>Délka:</strong> celodenní workshop.
<br />
<strong>Cílovka:</strong> žáci 9. tříd ZŠ a gymnázií.
</p>
<button
id="buttonText1_7"
class="m-4 btnInterest"
onclick="handlePopup('#ff914d', 'title8', '8')"
>
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/img9.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
alt="Moje první podnikání"
/>
</svg>
<img
src="media/img9.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="emocezpetnavazba">
<div class="row rowSection">
<!-- Left content (col-6) -->
<div class="col-md-6">
<div class="spacerBig"></div>
<div class="p-5 ms-5">
<h1 id="headingText35" class="text-start left-line">
Emoce jako zpětná vazba
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText36" class="mt-5">Transformační wellbeing</h5>
<p id="contentText29" class="mb-4">
Emoce nás provází celý život. Vyjadřují naše pocity, které by
jinak zůstaly skryty. Zvykli jsme si je rozdělovat na pozitivní a
negativní. Užíváme si ty pozitivní a těch negativních bychom se
nejraději zbavili. Ale co když nám i ty negativní emoce mohou být
něčím užitečné?
</p>
<p id="contentText30">
<strong>Cíl:</strong> naučit se pracovat s negativními emocemi a
zlepšit tak své vztahy. <br /><strong>Délka: </strong>1,5
hodiny.<br />
<strong>Cílovka:</strong> žáci ZŠ a SŠ, pedagogové.
</p>
<button
id="buttonText1_8"
class="m-4 btnInterest"
style="background-color: #9acc87"
onclick="handlePopup('#9acc87', 'title9', '9')"
>
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/img10.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
/>
</svg>
<img
src="media/img10.png"
alt="Moje první podnikání"
class="plain-img d-none"
/>
</div>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="container-fluid" id="navodnauspesnyzivot">
<div class="row rowSection">
<!-- Left content (col-7) -->
<div class="col-md-6">
<div class="spacerBig"></div>
<div class="p-5 ms-5">
<h1 id="headingText37" class="text-start left-line">
Návod na úspěšný život
</h1>
<div class="spacer"></div>
<div class="divider"></div>
<h5 id="headingText38" class="mt-5">Transformační workshop</h5>
<p id="contentText31" class="mb-4">
Všichni sníme o šťastném a úspěšném životě! Ale co vlastně znamená
úspěch? Pro někoho je to finanční hojnost, jiný touží po
harmonické rodině a další hledá práci, která ho bude naplňovat.
Každý máme svůj vlastní sen – a my vám ukážeme, jak na něj
dosáhnout!
</p>
<p id="contentText32">
<strong>Cíl:</strong> naučit se, jak využít naplno svůj osobní
potenciál, v pracovním i soukromém životě.
<br />
<strong>Délka:</strong>celodenní skupinový workshop.<br />
<strong>Cílovka:</strong> SŠ, VŠ, veřejnost.
</p>
<button
id="buttonText1_9"
class="m-4 btnInterest"
style="background-color: #ad46a1"
onclick="handlePopup('#ad46a1', 'title10', '10')"
>
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/img11.png"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
clip-path="url(#cut-left-radius)"
/>
</svg>
<img
src="media/img11.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="spacerBig"></div>
<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">Celé jméno*</label>
<input type="text" id="fullName" name="fullName" required />
</div>
<div class="form-group">
<label for="organization">Organizace*</label>
<input type="text" id="organization" name="organization" />
</div>
<div class="form-group">
<label for="interest">Zajímá mě</label>
<input type="text" id="interest" name="interest" value="" />
</div>
<div class="form-group">
<label for="telephone">Telefon*</label>
<input type="tel" id="telephone" name="telephone" required />
</div>
<div class="form-group">
<label for="email">Email*</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="message">Zpráva</label>
<textarea id="message" name="message" rows="3" required></textarea>
</div>
<div class="form-group">
<input
type="number"
name="backlink"
id="backlink"
value=""
hidden
/>
</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 = {
title8: {
cs: "Moje práce snů",
en: "My Dream Job",
},
title9: {
cs: "Emoce jako zpětná vazba",
en: "Emotions as Feedback",
},
title10: {
cs: "Návod na úspěšný život",
en: "A Guide to a Successful Life",
},
// 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 () {
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");
document.getElementById("cookieBar").style.display = "none";
});
});
</script>
<script src="js/languagesNew.js"></script>
<script src="js/popup.js"></script>
</body>
</html>