přidán nový navrh na web

This commit is contained in:
archos 2024-07-26 21:42:33 +02:00
parent 56120af5e0
commit 0da8e78c4a
54 changed files with 102 additions and 3918 deletions

View File

@ -4,8 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Kankys Matrix" content="Kankys personal site." /> <meta name="MXchat" content="MXchat web" />
<title>Kankys v Matrixu</title> <title>Mxchat Cz</title>
<link rel="stylesheet" type="text/css" href="./style/alt.style.css" /> <link rel="stylesheet" type="text/css" href="./style/alt.style.css" />
<link <link
rel="stylesheet" rel="stylesheet"
@ -33,7 +33,7 @@
<a href="https://lukan.cz" target="_blank" class="btn">Blog</a> <a href="index/" target="_blank" class="btn">Blog</a>
<a href="index/project/zivotopis/zivotopis.html" target="_blank" class="btn">Životopis</a> <a href="index/project/zivotopis/zivotopis.html" target="_blank" class="btn">Životopis</a>
<!-- <a href="./index/games/" class="btn">Games</a> --> <!-- <a href="./index/games/" class="btn">Games</a> -->
<a href="https://publish.obsidian.md/kankys-note/" target="_blank" class="btn">Digital Garden</a> <a href="https://publish.obsidian.md/kankys-note/" target="_blank" class="btn">Digital Garden</a>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

226
index/about/index.html Executable file → Normal file
View File

@ -1,137 +1,99 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="cs"> <html lang="cs">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MXChat</title>
<meta name="Kankys Matrix" content="O mně." /> <link rel="stylesheet" type="text/css" href="styles.css">
<title>O mně</title> </head>
<link rel="stylesheet" href="../../style/style.css" /> <body>
<link <header>
rel="icon" <h1>mxchat.cz</h1>
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
<link
href="//cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css"
rel="stylesheet"
/>
</head>
<body style="cursor: url(../../res/site/icons/archlinux.png), auto">
<header class="page-header" role="banner">
<h1 class="project-name">O mně</h1>
<!-- <h2 class="project-tagline">The webmaster.</h2> -->
<a href="../../" class="btn">Domů</a>
</header> </header>
<main>
<main id="content" class="main-content" role="main"> <section id="overview">
<h3>O mně</h3> <h2>Přehled</h2>
<p>mxchat.cz je platforma postavená na protokolu Matrix, která poskytuje bezpečnou a decentralizovanou komunikaci. Tento repozitář slouží jako oficiální stránka projektu, kde najdete základní informace, konfigurace a právní podmínky.</p>
<div class="obsah"> </section>
<section id="content">
<div></div> <h2>Obsah</h2>
<p> <ul>
Jsem IT nadšenec s pozitivním přístupem k životu a vášní pro <li><a href="#uvod-do-matrix-a-synapse">Úvod do Matrix a Synapse</a></li>
technologie, ve kterých se neustále vzdělávám. Absolvoval jsem kurz <li><a href="#element">Element</a></li>
testingu a SQL v Acamaru. A nyní se i jako tester živím, v budoucnu <li><a href="#mosty-bridges">Mosty (Bridges)</a></li>
bych chtěl být Web Developerem. Můj životopis najdete pod tímto <a href="zivotopis.html" target="_blank" <li><a href="#registrace">Registrace</a></li>
class="tlacitko">odkazem.</a> <li><a href="#zakladni-konfigurace">Základní Konfigurace</a></li>
</p> <li><a href="#overeni-federace">Ověření Federace</a></li>
<li><a href="#prispivani">Přispívání</a></li>
<div> <li><a href="#licence">Licence</a></li>
<ul class="dot"> <li><a href="#ochrana-osobnich-udaju">Ochrana osobních údajů</a></li>
<li><strong>Ve volném čase se věnuji:</strong></li> <li><a href="#podminky-sluzby">Podmínky služby</a></li>
<li>Svému blogu:<a href="https://lukan.cz"> Lukáš Bloguje.</a></li> </ul>
<li>Linuxu, MacOS a Opensource (i si rozumím s Windows :-)).</li> </section>
<li>Seberozvoji v oblasti komunikace a emoční inteligence.</li> <section id="uvod-do-matrix-a-synapse">
<li>Sportu, který mi dobíjí baterky.</li> <h2>Úvod do Matrix a Synapse</h2>
<li>Missing maps pro Lékaře bez hranic.</li> <p>Matrix je otevřená síť pro bezpečnou a decentralizovanou komunikaci. Synapse je referenční implementace domácího serveru Matrix, navržená tak, aby byla lehká a snadno instalovatelná. S Matrixem mohou uživatelé komunikovat napříč různými platformami pomocí mostů.</p>
<li>Mapování v OSM.</li> </section>
</div> <section id="element">
<h2>Element</h2>
<p>Element je klient pro komunikaci v síti Matrix, který nabízí uživatelsky přívětivé rozhraní a pokročilé funkce jako end-to-end šifrování, videohovory a mnoho dalšího. Element můžete používat přímo na našem serveru:</p>
<ul>
<li><a href="https://element.mxchat.cz" target="_blank">Element mxchat.cz</a></li>
<div> </ul>
<ul class="dot"> </section>
<li><strong>V osobním životě se snažím vedle komerčních aplikací poznávat a <section id="mosty-bridges">
používat Opensource.</strong></li> <h2>Mosty (Bridges)</h2>
<li>To to jsou opensource aplikace, které používám vedle placených <p>mxchat.cz podporuje integraci s mnoha dalšími komunikačními platformami pomocí mostů (bridges). Tyto mosty umožňují komunikaci napříč různými platformami přímo z Matrixu. Zde je seznam podporovaných mostů:</p>
aplikací a stojí myslím za vyzkoušení:</li> <ul>
<li>* Alternativa za OneNote od Microsoftu je aplikace <a href="https://joplinapp.org/" target="_blank" <li><a href="https://github.com/beeper/linkedin" target="_blank">LinkedIn Bridge</a></li>
class="tlacitko">Joplin</a></li> <li><a href="https://github.com/tulir/mautrix-discord" target="_blank">Discord Bridge</a></li>
<li><a href="https://github.com/tulir/mautrix-googlechat" target="_blank">Google Chat Bridge</a></li>
<li>* Pro cloud a tvorbu dokumentů k Microsoft 365 doporučuji <a href="https://cloud.arch-linux.cz" <li><a href="https://github.com/tulir/mautrix-signal" target="_blank">Signal Bridge</a></li>
target="_blank" class="tlacitko">NextCloud</a></li> <li><a href="https://github.com/tulir/mautrix-facebook" target="_blank">Meta Messenger Bridge</a></li>
<li><a href="https://github.com/tulir/mautrix-instagram" target="_blank">Instagram Bridge</a></li>
<li>* Pokud potřebuji šifrovat dokumenty nebo jen s někým něco sdílet a <li><a href="https://github.com/tulir/mautrix-telegram" target="_blank">Telegram Bridge</a></li>
nechci sdílet s NextCloud nebo OneDrive použiji <a href="https://cryptpad.arch-linux.cz/" target="_blank" <li><a href="https://github.com/tulir/mautrix-gmessages" target="_blank">Google Messages Bridge</a></li>
class="tlacitko">CryptPad</a></li> <li><a href="https://github.com/tulir/mautrix-whatsapp" target="_blank">WhatsApp Bridge</a></li>
<li><a href="https://github.com/matrix-hacks/mx-puppet-steam" target="_blank">Steam Bridge</a></li>
<li>* Náhradu za Jiru může být <a href="https://tasks.archoslinux.cz/" target="_blank" </ul>
class="tlacitko">Vikunja</a></li> </section>
<section id="registrace">
<li>* Mimo GitHub svůj kód ukládám na <a href="https://git.archoslinux.cz/" target="_blank" <h2>Registrace</h2>
class="tlacitko">Gitea</a></li> <p>Registrace jsou momentálně uzavřené. Pro registraci mě prosím kontaktujte na e-mailu <a href="mailto:archos@arch-linux.cz">archos@arch-linux.cz</a> a já vám zašlu registrační token.</p>
</section>
<li>* Pro tvorbu tohoto blogu vedle VS Code používám <a href="https://brackets.io/" target="_blank" <section id="zakladni-konfigurace">
class="tlacitko">Brackets</a></li> <h2>Základní Konfigurace</h2>
<p>mxchat.cz je open-source projekt a tento repozitář obsahuje přehled kódu a základní příklady konfigurace pro Matrix Synapse.</p>
<li>* Jako RSS čtečku využívám minimalistickou <a href="https://rss.archoslinux.cz/" </section>
class="tlacitko">MiniFlux</a></li> <section id="overeni-federace">
<h2>Ověření Federace</h2>
<li>* Správce hesel může být <a href="https://bitwarden.archoslinux.cz/" target="_blank" <p>Pro ověření federace a klientských verzí můžete použít následující odkazy:</p>
class="tlacitko">Bitwarden</a></li> <ul>
<li><a href="https://matrix.mxchat.cz/_matrix/client/versions" target="_blank">Kontrola verzí klienta</a></li>
<li>* Internetový prohlížeč <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" <li><a href="https://matrix.mxchat.cz:8448/_matrix/federation/v1/version" target="_blank">Kontrola verzí federace</a></li>
class="tlacitko">Firefox</a></li> <li><a href="https://mxchat.cz/.well-known/matrix/server" target="_blank">Konfigurace serveru</a></li>
<li><a href="https://federationtester.matrix.org/#mxchat.cz" target="_blank">Ověření federace</a></li>
<li>* E-mail klienta používám <a href="https://www.thunderbird.net/en-US/" target="_blank" </ul>
class="tlacitko">Thunderbird</a></li> </section>
<section id="prispivani">
<li>* Alternativu k sociální sítím může být <a href="https://mastodon.arch-linux.cz/" terget="_blank" <h2>Přispívání</h2>
class="tlacitko">Mastodon</a><a href="https://element.mxchat.cz/" target="blank" <p>Informace o tom, jak přispět do projektu.</p>
class="tlacitko">Element</a></li> </section>
<section id="licence">
<li>* Alternativou k Instagramu může být <a href="https://pixelfed.cz" target="_blank" <h2>Licence</h2>
class="tlacitko">Pixelfed</a></li> <p>Informace o licenci projektu.</p>
</section>
</ul> <section id="ochrana-osobnich-udaju">
</div> <h2>Ochrana osobních údajů</h2>
<p>Informace o ochraně osobních údajů.</p>
<div> </section>
<ul class="dot"> <section id="podminky-sluzby">
<li><strong>Kde všude mně najdete: </strong></li> <h2>Podmínky služby</h2>
<li>Můj profil na: <a class="tlacitko" href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/" <p>Informace o podmínkách služby.</p>
target="_blank">LinkedIn</a></li> </section>
<li>
Můj profil na: <a class="tlacitko" href="https://git.archoslinux.cz/kankys" target="_blank">Gitea ☕</a>
</li>
<li>Můj profil na: <a class="tlacitko" href="https://lukan.cz" target="_blank">Můj druhý blog</a></li>
<li>Můj profil na: <a class="tlacitko" href="https://testing-docs.cz" target="_blank">Má Testing Docs</a></li>
</div>
<div>
<ul class="dot">
<li><strong>Budu velmi vděčný za malý příspěvek na provoz mých projektů:</strong></li>
<li>Přes paypal pomocí QR kódu: </li>
<li><img src="img/qrcode-paypal.png" width="130" alt="Paypal qrcode" /></li>
<li><a href="https://mega.io/?aff=xTR_bIiFjj4" target="_blank">Mega</a> můj Referral programm link na Mega, kde zapoužití získáme oba nějaké ty bonusy. Mega je cloud služba s dobrými ceny, která je pro všechny OS tak i mobilní zařízení. Nabízi galerii fotografií, možnost editovat vaše textové soubory a navíc je vše šyfrováno.</li>
<li>Pár satoshi nebo jiné krypto měny(po dohodě)</li>
<li>Aktivačním kódem na aplikaci k recenzi či článku</li>
<li>Kritikou, radou nebo e-mailem pár slov potěší</li>
<li>Také se můžeme potkat na WordPress pivu v Praze, Frodentisti akcích, PHPkáři akcích nebo jen tak na pivku
a jiné akci.</li>
</ul>
</div>
</div>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main> </main>
</body> <footer>
<p>Copyright &copy; MXChat 2024</p>
</footer>
</body>
</html> </html>

View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fractal</title>
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Fractal</h1>
<h2 class="project-tagline">
Interactive fractal using
<a href="https://github.com/xaos-project/XaoSjs">XaoS.js</a>.
</h2>
<a href="../../../" class="btn">Home</a>
<a href="../" class="btn">Games</a>
</header>
<div class="container">
<canvas id="canvas">
<p>
Your browser doesn't seem to support the &lt;canvas&gt; tag. Try
<a href="http://firefox.com">Firefox</a>.
</p>
</canvas>
<div id="controls">
<button
id="fullScreenButton"
class="btn btn-primary"
onclick="goFullScreen();"
></button>
<a href="./" id="resetButton" class="btn btn-danger">Reset</a>
<a
href="#"
id="saveCanvasButton"
class="btn btn-primary"
download="fractal.png"
onclick="saveCanvas()"
>Capture</a
><br />
</div>
</div>
<script src="./script/xaos.js"></script>
<script src="./script/starter-template.js"></script>
</body>
</html>

View File

@ -1,12 +0,0 @@
function saveCanvas() {
saveCanvasButton.download = "image.png";
saveCanvasButton.href = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
}
function goFullScreen() {
if (canvas.requestFullScreen) canvas.requestFullScreen();
else if (canvas.webkitRequestFullScreen) canvas.webkitRequestFullScreen();
else if (canvas.mozRequestFullScreen) canvas.mozRequestFullScreen();
}

File diff suppressed because it is too large Load Diff

View File

@ -1,67 +0,0 @@
#controls {
position: relative;
margin-bottom: 2.5em;
}
#canvas {
width: 100%;
height: 100vh;
margin-bottom: 0.5em;
display: inline-block;
vertical-align: baseline;
}
#fullScreenButton {
position: absolute;
height: 100vh;
width: 100%;
bottom: 3rem;
visibility: hidden;
}
@media only screen and (max-width: 600px) {
#fullScreenButton {
visibility: visible;
opacity: 0;
}
#saveCanvasButton {
visibility: hidden;
}
}
#resetButton {
position: absolute;
left: 0em;
}
#saveCanvasButton {
position: absolute;
right: 0.1em;
visibility: visible;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

View File

@ -1,81 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Games</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Games</h1>
<h2 class="project-tagline">
Games I programmed or implemented. <br />
(Warning: They suck.)
</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<section id="rps">
<h3>
<a href="./rps/">Rock Paper Scissors 🪨📄✂️<sup></sup></a>
</h3>
<code>
The first game I ever made! I wrote this when I first began learning
Javascript, to be specific I wrote the logic during that time. The
game was only playable through the terminal, now its fairly portable
and can be integrated into anything.
</code>
</section>
<br />
<section id="es">
<h3>
<a href="./eternal-space/web">Eternal Space<sup></sup></a>
</h3>
<code>
Currently only playable on a pc, I haven't tried figuring out how to
scale down the game lol. I participated in the Opera GX + GameMaker
game jam and created this monstrosity. The game jam was alien themed,
however I never got that far. Before taking part in this game jam I
have never programmed an actual game nor have been in a game jam. I
learned how to program in GameMaker Language (basically Javascript)
during the event.
</code>
</section>
<br />
<section id="fractal">
<h3>
<a href="./fractal/">Fractal<sup></sup></a>
</h3>
<code>
Interactive Javascript real-time fractal renderer using XaoS.js. Works
best on a PC.
</code>
</section>
<!-- <section id="#">
<h3><a href="#">title</a></h3>
<code>
Description
</code>
</section> -->
<footer class="site-footer">
You have reached the end of the page. (ノ◕ヮ◕)ノ*:・゚✧
</footer>
</main>
</body>
</html>

View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="../../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Rock Paper Scissors</h1>
<h2 class="project-tagline">Made using Javascript.</h2>
<a href="../../../" class="btn">Home</a>
<a href="../" class="btn">Games</a>
</header>
<main id="content" class="main-content" role="main">
<section class="game">
<div id="gameScore">
<p><span id="scorePlayer"></span> <span id="scoreCPU"></span></p>
<p><span id="round"></span></p>
</div>
<div>
<script src="./script/script.js"></script>
<button class="btn gameButton" onclick="play('rock')">🪨</button>
<button class="btn gameButton" onclick="play('paper')">📄</button>
<button class="btn gameButton" onclick="play('scissors')">✂️</button>
</div>
<div id="evaluation">
<p id="choice">
<span id="choicePlayer"></span> <span id="choiceCPU"></span>
</p>
<p><strong id="gameWinner"> </strong></p>
</div>
</section>
<footer class="site-footer">
You have reached the end of the page. (ノ◕ヮ◕)ノ*:・゚✧
</footer>
</main>
</body>
</html>

View File

@ -1,93 +0,0 @@
let userChoice = "";
const getUserChoice = (userInput) => {
userChoice = userInput;
};
function getComputerChoice() {
let cpuChoice = Math.floor(Math.random() * 3);
if (cpuChoice === 0) {
return "rock";
} else if (cpuChoice === 1) {
return "paper";
} else if (cpuChoice === 2) {
return "scissors";
}
}
function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "Tie";
}
if (userChoice === "rock") {
if (computerChoice === "paper") {
return "Computer";
} else {
return "Player";
}
}
if (userChoice === "paper") {
if (computerChoice === "scissors") {
return "Computer";
} else {
return "Player";
}
}
if (userChoice === "scissors") {
if (computerChoice === "rock") {
return "Computer";
} else {
return "Player";
}
}
}
const score = {
player: 0,
cpu: 0,
ties: 0,
rounds: 0,
};
function playGame() {
var computerChoice = getComputerChoice();
const winner = determineWinner(userChoice, computerChoice);
score.rounds++;
switch (winner) {
case "Player":
score.player++;
break;
case "Computer":
score.cpu++;
break;
case "Tie":
score.ties++;
break;
}
console.log("\nPlayer: " + userChoice);
console.log("CPU: " + computerChoice);
if (winner != "Tie") {
console.log("Winner: " + winner);
} else {
console.log("Tie game!");
}
console.log(score);
scorePlayer.textContent = `Player wins: ${score.player}` + " ";
scoreCPU.textContent = `Computer wins: ${score.cpu}`;
round.textContent = `Round ${score.rounds}`;
choicePlayer.textContent = `You: ${userChoice}`;
choiceCPU.textContent = `CPU: ${computerChoice}`;
if (winner != "Tie") {
gameWinner.textContent = "Winner: " + winner;
} else {
gameWinner.textContent = "Tie game!";
}
}
function play(input) {
getUserChoice(input);
playGame();
}

View File

@ -1,3 +0,0 @@
# První povinný projekt v rámci Akademii Engeto - front-end developers
K projektu připravuji zároveň i testy v frameworku Playwright pod tímto [odkazem](https://github.com/LukasKanka/YourTravelAssistant_Playwright.git).

View File

@ -1,554 +0,0 @@
:root {
--word-black: #000;
--word-white: #fff;
--link-one: #efa69d;
--link-two: #e9877b;
--background-one: #33292a;
--background-two: #644b4f;
--background-three: #333333;
--background-four: #f2f2f2;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
}
/* Navigace (horní menu) */
nav {
padding: 10px;
background-color: var(--background-one);
font-size: 20px;
}
a {
text-decoration: none;
color: var(--word-white);
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.navigation {
width: 65%;
margin: 0 auto;
}
.icon {
width: auto;
height: 22px;
display: none;
margin-left: auto;
margin-right: 12px;
}
.icon img {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.navigation {
width: 90%;
margin: 0 auto;
}
nav a {
display: none;
}
.icon {
display: block;
}
}
/* Hero - section */
.hero-section {
height: 80vh;
background-image: url(images/scott-goodwill-y8Ngwq34_Ak-unsplash.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-text-wrapper {
position: relative;
width: 65%;
margin: 0 auto;
height: 100%;
}
.hero-text {
color: var(--word-white);
position: absolute;
right: 0;
bottom: 50px;
font-size: 80px;
text-align: right;
}
.h2-about {
font-weight: 700;
}
@media (max-width: 768px) {
.hero-text-wrapper {
width: 90%;
margin: 0 auto;
}
.hero-text {
font-size: 35px;
height: 80px;
margin-bottom: 5px;
}
}
/* About sekce */
.about-section {
margin: 45px 0;
}
.about-section-wrapper {
width: 65%;
margin: 0 auto;
display: flex;
gap: 20px;
}
.about-text {
flex: 1;
}
.about-img {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.about-section-wrapper {
flex-direction: column;
width: 90%;
margin: 0 auto;
}
.about-text {
text-align: left;
}
.about-img {
text-align: center;
}
.about-text-p {
padding-top: 15px;
}
}
/* What We Do */
.what-section {
background-color: var(--background-one);
color: var(--word-white);
}
.what-section-wrapper {
width: 65%;
margin: 0 auto;
}
.what-text {
text-align: center;
}
.h2-what-we {
font-size: 38px;
text-align: center;
padding-top: 45px;
padding-bottom: 35px;
}
.where-text {
text-align: center;
}
.icon-what-section {
margin-top: 45px;
padding: 45px;
list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.img-icons {
width: 100px;
height: 100px;
align-items: center;
}
.icon-text {
text-align: center;
padding-top: 15px;
font-size: 25px;
}
@media (max-width: 768px) {
.what-section-wrapper {
width: 90%;
margin: 0 auto;
}
.icon-what-section {
flex-direction: column;
align-items: center;
text-align: center;
}
.img-icons {
width: 80px;
height: 80px;
margin-top: 20px;
align-items: center;
}
.icon-text {
padding-top: 0px;
}
}
/* Our Trips */
.trips-section {
margin-top: 45px;
margin-bottom: 45px;
}
.trips-section-wrapper {
display: flex;
flex-wrap: wrap;
width: 65%;
margin: auto;
gap: 10px;
}
.images-item {
height: 222px;
width: 32%;
flex-shrink: 1;
border-radius: 4px;
}
.images-trips-1 {
background-image: url(images/simon-english-48nerZQCHgo-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-2 {
background-image: url(images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-3 {
background-image: url(images/daniel-tseng-73lmMKhi2U8-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-4 {
background-image: url(images/holly-mandarich-UVyOfX3v0Ls-unsplash.jpg);
background-size: cover;
background-position: center;
}
.text-trips {
background-color: var(--background-four);
color: var(--word-black);
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: 700;
}
.images-trips-5 {
background-image: url(images/patrick-szylar-45bM3XGqnDE-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-6 {
background-image: url(images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-7 {
background-image: url(images/julian-bialowas-ilkTnuMunP8-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-8 {
background-image: url(images/matej-drha-rbDzMcJsBkY-unsplash.jpg);
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.trips-section-wrapper {
width: 90%;
margin: 0 auto;
}
.images-item {
width: 333px;
height: 222px;
}
.text-trips {
height: 80px;
}
}
/* Where togo */
.where-section {
background-color: var(--background-two);
color: var(--word-white);
display: flex;
}
.where-section-wrapper {
width: 65%;
margin: 0 auto;
padding-top: 45px;
padding-bottom: 45px;
display: flex;
}
.where-text {
display: flex;
}
.h2-where {
flex: 1;
font-size: 25px;
width: 272px;
height: 114px;
text-align: left;
}
.where-text-div {
flex: 1;
width: 572;
height: 201;
text-align: left;
}
.contact-text {
margin-top: 20px;
}
.contact-button {
margin-top: 35px;
background-color: var(--background-four);
width: 133px;
height: 43px;
border-radius: 4px;
text-align: center;
line-height: 43px;
}
.contact-button-text {
font-size: 14px;
font-weight: 700;
font-family: Inter;
color: var(--word-black);
display: block;
}
.mobile {
display: none;
}
@media (max-width: 768px) {
.where-section-wrapper {
width: 90%;
margin: 0 auto;
}
.where-text {
flex-direction: column;
}
.desktop {
display: none;
}
.mobile {
display: block;
font-size: 25px;
margin-bottom: 25px;
}
}
/* Reviews section */
.reviews-section {
width: 65%;
margin: 0 auto;
margin-top: 45px;
margin-bottom: 45px;
}
.h2-reviews {
text-align: center;
padding-bottom: 20px;
}
.reviews-text {
width: 332px;
height: 159px;
text-align: center;
margin: auto;
}
.reviews-card-wrapper {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 300px;
}
.reviews-card {
width: 378.49px;
height: 346px;
text-align: center;
}
.reviews-card-1 {
width: 378.49px;
height: 346px;
text-align: center;
}
.reviews-card img {
width: 122.13px;
height: 111px;
border-radius: 50%;
}
.reviews-card-1 img {
width: 122.13px;
height: 111px;
border-radius: 50%;
}
.reviews-card-text {
margin-top: 20px;
}
.reviews-name {
font-weight: 700;
padding-top: 50px;
height: 19px;
align-items: center;
}
@media (max-width: 768px) {
.reviews-section {
width: 90%;
margin: 0 auto;
}
.reviews-card-wrapper {
flex-direction: column;
width: 90%;
margin: 0 auto;
gap: 95px;
}
.reviews-card {
width: 324px;
}
.reviews-card-1 {
width: 324px;
}
.reviews-text {
width: 263px;
}
.h2-reviews {
padding-top: 40px;
}
.reviews-name {
padding-bottom: 40px;
}
}
/* Photo gallery */
.photo-gallery {
/* display: flex; */
/* flex-wrap: wrap; */
}
.photo-gallery-wrapper {
display: flex;
flex-wrap: wrap;
}
.picture-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-width: 50%;
}
@media (max-width: 768px) {
.photo-gallery-wrapper {
flex-direction: column;
margin-top: 100px;
}
.picture-img {
max-width: 100%;
height: 260px;
}
}
/* Footer */
.footer-wrapper {
background-color: var(--background-three);
padding: 45px;
}
.footer-text {
text-align: center;
}
.footer-contact {
color: var(--link-two);
text-decoration: underline;
font-weight: 700;
}
.footer-text-p {
padding-top: 20px;
text-align: center;
color: var(--word-white);
font-weight: 700;
}
@media (max-width: 768px) {
.footer-contact {
font-size: 12px;
}
.footer-text-p {
font-size: 10px;
}
}

View File

@ -1,217 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<!-- Lukáš Kaňka -->
<!-- lukas.kanka@outlook.cz -->
<!-- Lukáš K. -->
<head>
<link rel="stylesheet" type="text/css" href="cestovatel.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Travel Assistant</title>
</head>
<div>
<!-- Navigace -->
<nav>
<ul class="navigation" id="navigation">
<li><a href="#about">About Us</a></li>
<li><a href="#what-we-do">What We Do </a></li>
<li><a href="#trips">Our Trips</a></li>
<li><a href="#where">Where To Go</a></li>
<li><a href="#reviews">Reviews</a></li>
</ul>
<img class="icon" src="icons/PngItem_1608357.png" alt="#">
</nav>
<!-- Hero section -->
<header class="hero-section ">
<div class="hero-text-wrapper">
<h1 class="hero-text">Your <br>
Travel <br>
Assistant</h1>
</div>
</header>
<!-- About Us -->
<div class="content">
<section class="about-section" id="about">
<div class="about-section-wrapper">
<div class="about-text">
<h2 class="h2-about">About Us</h2>
<p class="about-text-p">Leigh McAdam is a Calgary-based writer, photographer and social media
enthusiast with over
48,000
followers. Her blog: HikeBikeTravel is frequently cited as one of the top travel and outdoor
adventure blogs in Canada, and consistently receives over 135,000 monthly page views. She
shares
her enthusiasm for the outdoors as a brand ambassador for Sporting Life, and has worked on
campaigns for Travel Alberta, Expedia and Flight Hub. Leigh is the author of Discover
Canada:
100 Inspiring Outdoor Adventures. Currently, she is co-authoring: 125 Nature Hot Spots in
Alberta (spring 2018). A true adventurer, Leigh will try anything once, except perhaps
bungee
jumping.
</p>
</div>
<div class="about-img"><img class="about-img content-container"
src="images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg" alt="#">
</div>
</div>
</section>
<!-- What We Do -->
<section class="what-section" id="what-we-do">
<div class="what-section-wrapper">
<div class="what-text">
<h2 class="h2-what-we">What We Do</h2>
<p class="what-text-p">Opportunities for challenging hikes and pleasant strolls are scattered all
over this planet; you
just
need to know where to find them. We do. Kilimanjaro, Everest Base Camp, Patagonia, and the Inca
Trail are out there, waiting for you to walk all over them. Were proud of our record of
successful
ascents (over 92% of our travellers make it to the top of Kili, depending on the route), but
its
our CEOs and local guides that make the journey itself as memorable as the summit. And if youre
not
into big climbs, dont sweat it; weve got loads of lower-impact walks and iconic treks youll
love,
too.</p>
</div>
<ul class="icon-what-section">
<li><img class="img-icons" src="icons/hiking-white.png " alt="#"><br>
<p class="icon-text">Hiking</p>
</li>
<li><img class="img-icons" src="icons/cycle-white.png" alt="#"><br>
<p class="icon-text">Cycling</p>
</li>
<li><img class="img-icons" src="icons/water-white.png" alt="#"><br>
<p class="icon-text">Surfing</p>
</li>
<li><img class="img-icons" src="icons/car-white.png" alt="#"><br>
<p class="icon-text">Car trips</p>
</li>
</ul>
</div>
</section>
<!-- Our Trips -->
<section class="trips-section">
<div class="trips-section-wrapper">
<div class="images-trips-1 images-item "></div>
<div class="images-trips-2 images-item "></div>
<div class="images-trips-3 images-item "></div>
<div class="images-trips-4 images-item "></div>
<div class="text-trips images-item" id="trips">Our Trips</div>
<div class="images-trips-5 images-item "></div>
<div class="images-trips-6 images-item "></div>
<div class="images-trips-7 images-item "></div>
<div class="images-trips-8 images-item "></div>
</div>
</section>
<!-- Where togo -->
<section class="where-section" id="where">
<div class="where-section-wrapper">
<div class="where-text">
<div class="h2-where">
<h2 class="desktop">Where do you <br> want to go?</h2>
<h2 class="mobile">Where do you want to go?</h2>
</div>
<div class="where-text-div">
<p>
Youll find 21 detailed adventure guides, over a hundred practical travel tips, book reviews
on
anything outdoors related, packing lists on a range of outdoor activities including
kayaking,
backpacking and camping as well as honest hotel and B&B reviews.
</p>
<p class="contact-text">Contact us and we will help you!</p>
<div class="contact-button">
<a href="#" class="contact-button-text">CONTACT US</a>
</div>
</div>
</div>
</div>
</section>
<!-- Reviews section -->
<section class="reviews-section" id="reviews">
<h2 class="h2-reviews">Reviews</h2>
<div class="reviews-text">
<p>Our amazing clients are the reason we exist, and their reactions to our
customized travel experiences
and personalized service keep us smiling all day long. Here is just a sampling of what theyve said:
</p>
</div>
<div class="reviews-card-wrapper">
<div class="reviews-card">
<img src="images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg" alt="#">
<div class="reviews-card-text">
She has booked two major European trips for us in the past year and every aspect has met, and
in
most cases exceeded, our expectations. Best prices, best hotels, best itineraries, and best
cruises, she does it all. But the most important thing is she remembers the little things
that
we would do if we were making the plans ourselves.
<div class="reviews-name">
Bertie Norton
</div>
</div>
</div>
<div class="reviews-card-1">
<img src="images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" alt="#">
<div class="reviews-card-text">
Leigh McAdam has been making my travel arrangements for about 20 years and there is no one
else I would trust to arrange my trips and tours. I've also had great fun on a few of the
group trips she has arranged - Peru & Machu Picchu and a 10-day cruise out of Venice and
diving. It's always an eclectic group of well traveled, interesting people.
<div class="reviews-name">
Frank Kinney
</div>
</div>
</div>
</div>
</section>
<!-- Photo galery -->
<section class="photo-gallery">
<div class="photo-gallery-wrapper">
<img class="picture-img" src="images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg" alt="picture-1">
<img class="picture-img" src="images/omer-salom-LoijtQXXNhs-unsplash.jpg" alt="picture-2">
<img class="picture-img" src="images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg" alt="picture-3">
<img class="picture-img" src="images/daniel-tseng-73lmMKhi2U8-unsplash.jpg" alt="picture-4">
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-wrapper">
<div class="footer-text">
<a class="footer-contact" href="#">Contact</a>
<div class="footer-text-div">
<p class="footer-text-p">
© 2022 - Your Travel Assistant. All Rights Reserved.
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 326 KiB

View File

@ -1,116 +0,0 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Kankys Matrix" content="Kankys projekty." />
<title>Projekty</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
id="MathJax-script"
async=""
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Projekty</h1>
<h2 class="project-tagline">
Zde najdeš odkazy na mé projekty.
</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<div class="flexbox-project">
<!-- <div class="menu-project">
</div>
-->
<div class="content-pr">
<h2>
Vítám tě na této stránce, která slouží jako mapa pro mé projekty.
</h2>
<p>
Zde najtete projekty věnující se k tvorbě webu a hlavně mou cestu Akademií Engeto.
</p>
<p>
Všechny projekty jsou vytvořeny v HTML, CSS a strochou JavaScriptu. Ale určitě jsem přidám i další
projekty, které tvořím mimo Akademii.</p>
<p>
Projekty které se netýkají tworby webu, najdete na mém GitHubu přes tento odkaz na <a
href="https://git.archoslinux.cz/kankys">Gitea</a>.
</p>
<p>
U každého projektu najdete popis a odkaz na něj. Buď na Gitea nebo na stránky, kde je projekt umístěn.
</p>
</div>
<div class="project">
<div class="pr1">
<h2>Projekt 1: Tento Blog</h2>
<p>
Tento projekt je vytvořen mimo Akademii Engeto. Je to můj osobní blog, který postupně vylepšuji.
Tato stránka slouží čistě jako má prezentace.</p>
<p>
Postupně jsem přidávám své znolosti z HTML, CSS a také se snažím aby web byl co nejlépe
responzivní. Tento projekt je nekončicí koloběh.
</p>
</div>
<div class="pr2">
<h2>Projekt 2: Životopis</h2>
<p>
Tento projekt je jako první úkol v Akademii.</p>
<p>Zadání bylo vytvořit jednoduchý životpis na procvičení základů HTML a CSS. Později jsem ještě pomocí
CSS nastavil v úkolu responsivní web pro mobilní zařízení.</p>
</p>
<p>Projekt Životopis najdete <a target="_blank" href="zivotopis/zivotopis.html">zde.</a></p>
</div>
<div class="pr3">
<h2>Projekt 3: Karta produktu</h2>
<p>Karta produktu. Na tomto projektu jsme se naučily pozicování elementu a pojmy jako Margin a Padding.
</p>
<p>Projekt Karta produkdu najdete <a target="_blank" href="kartaProduktu/karta-produktu.html">zde</a></p>
</div>
<div class="pr4">
<h2>Projekt 4: Nature and Culture</h2>
<p>Tento projekt je zaměřen na responsivitu webu pro mobilní zařízení a také jsme použily porvé Flexbox.
</p>
<p>Projekt Nature and Culture najdete <a target="_blank" href="nature/nature-and-culture.html">zde</a></p>
</div>
<div class="pr5">
<h2>Projekt 5: Your Travel Assistant</h2>
<p>Tento projekt je vytvořen mimo Akademii Engeto. Jedná se o stránku pro cestovatele.</p>
<p>Zadání jsme měli jako na reálném projektu a grafické rozložení se dělalo dle Figmi. Tento projekt byl hodnocený a je jeden ze tří projektů k získání certifikátu v Akademii.</p>
<p>Projekt najdeš pod tímto <a target="_blank" href="YourTravelAssistant/cestovatel.html">odkazem</a>. Od finální verze co jsem odevzdal se mírně liší, ještě před odevzdáním jsem vychytával poslední mouchy.</p>
</div>
</div>
</div>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 367 KiB

View File

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta keywords="Karta produktu, Sněhulák, Psí hračka">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.karta.css">
<title>Karta produktu</title>
</head>
<body>
<!-- Product Card -->
<div class="product-card">
<!-- Product Labels -->
<div class="whell">
<span class="product-only">Jen u nás</span>
<span class="discount-badge">-27%</span>
</div>
<!-- Product Image -->
<div class="product-image-container">
<img class="product-image" src="img/psi-hracka.png" />
</div>
<!-- Product Title -->
<h1>M-Pets Hračka Holly vánoční sněhulák</h1>
<!-- Product Description -->
<p><strong>Hračka pro psy - pro střední a velká plemena, vydává zvuky, materiál polyester, bílá barva</strong>
</p>
<!-- Product Change Offer -->
<div class="product-change">
<div>Výměna nevhodného dárku za poukaz do 31.1.2024 nyní zdarma! Více informací klini na odkaz: Výměna
dárku.
</div>
<div class="button-container">
<a class="button" href="#">Výměna dárku</a>
</div>
</div>
<!-- Product Price -->
<div class="product-price-container">
<p class="product-price-old">149,-</p>
<span class="product-price">109,-</span>
<span><a class="shopping-button" href="#">Do košíku</a></span>
</div>
<!-- Product Stock and Transport -->
<span class="stock">Skladem > 5 ks</span>
<span class="transport">Doprava zdarma</span>
</div>
</body>
</html>

View File

@ -1,147 +0,0 @@
:root {
--special-yellow: hsl(56, 94%, 49%);
--special-yellow-2: rgb(231, 231, 149);
--special-red-original: red;
--special-red: #db090d;
--special-black: #040303;
--special-white: #f7f7f7;
--special-green: rgb(0, 128, 0);
--special-agua: rgb(8, 126, 126);
--special-pink: palevioletred;
}
.product-card {
position: relative;
width: 450px;
background-color: var(--special-white);
padding: 16px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
border: 6px solid var(--special-black);
/* responzivita */
width: calc(100% - 32px);
max-width: 800px;
margin: auto;
}
.whell {
position: absolute;
}
.product-only {
background-color: var(--special-yellow);
position: absolute;
border-radius: 50%;
width: 120px;
height: 80px;
left: 35px;
top: 60px;
text-align: center;
font-size: 25px;
color: var(--special-white);
font-weight: bold;
padding-top: 50px;
}
.discount-badge {
background-color: var(--special-red);
position: absolute;
border-radius: 50%;
width: 120px;
height: 80px;
left: 35px;
top: 160px;
text-align: center;
font-size: 25px;
color: var(--special-white);
font-weight: bold;
padding-top: 50px;
}
.product-image {
width: 95%;
height: 90%;
}
h1 {
color: var(--special-agua);
}
.button {
color: var(--special-red);
border-style: solid;
text-decoration: none;
padding-right: 6px;
padding-left: 6px;
border-radius: 6px;
background-color: var(--special-yellow-2);
}
.product-price-container {
padding: 8px;
background-color: var(--special-pink);
margin-bottom: 16px;
position: relative;
border-radius: 6px;
top: 15px;
}
.product-price {
font-weight: bold;
font-size: 40px;
display: inline-block;
padding: 8px;
background-color: var(--special-red-original);
border-radius: 6px;
}
.product-price-old {
font-size: 20px;
color: var(--special-white);
text-decoration: line-through;
width: 75px;
background-color: var(--special-yellow);
margin-top: 1px;
margin-bottom: 1px;
padding-left: 35px;
border-radius: 6px;
font-weight: bold;
}
.shopping-button {
color: var(--special-black);
font-weight: bold;
font-size: 30px;
text-decoration: none;
position: absolute;
top: 30px;
right: 30px;
border-radius: 6px;
background-color: var(--special-yellow-2);
padding-left: 5px;
padding-right: 5px;
border-style: solid;
}
.stock {
font-weight: bold;
color: var(--special-green);
font-size: 20px;
padding: 10px;
}
.transport {
padding-left: 135px;
font-size: 20px;
font-weight: bold;
}
.button-container {
margin-top: 10px;
/* margin-bottom: 15px; */
}
/* ˇMobily */
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style-nature.css" rel="stylesheet" />
<title>Hero</title>
</head>
<body>
<!-- Navigace -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Contact US</a></li>
</ul>
<img class="icon" src="images/PngItem_1608357.png">
</nav>
<!-- Hero section -->
<div class="hero-section">
<div class="hero-text">
<div class="hero-subtitle">Exploring Icelandic Villages</div>
<div class="hero-title">
<h1>Nature and Culture Converge</h1>
</div>
</div>
</div>
<!-- image bird -->
<div class="image-container">
<img src="images/photo-1512419180521-2c5585bdf851.avif" alt="" bird>
</div>
</body>
</html>

View File

@ -1,115 +0,0 @@
:root {
--my-white: #fff;
--my-pink: #f08d8f;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 16px 32px;
}
.hero-section {
height: 70vh;
background-image: url(images/photo-1540503831458-3237544b2ce5.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 12px;
margin-bottom: 10px;
position: relative;
}
.hero-text {
position: absolute;
left: 32px;
bottom: 16px;
color: var(--my-white);
}
.hero-subtitle {
font-size: 20px;
}
.hero-title {
margin-top: 8px;
}
.icon {
width: auto;
height: auto;
display: none;
padding: 14px;
margin-left: auto;
/* display: flex; */
}
.icon img {
width: 100%;
height: 100%;
/* display: flex; */
/* align-items: center; */
}
.image-container {
width: 50%;
}
.image-container img {
width: 100%;
height: 100%;
border-radius: 12px;
}
nav {
height: 55px;
background-color: var(--my-pink);
display: flex;
justify-content: space-evenly;
text-decoration: none;
margin-bottom: 10px;
border-radius: 12px;
}
nav a {
color: var(--my-white);
text-decoration: none;
font-size: 20px;
font-weight: bold;
list-style-type: none;
}
ul {
display: flex;
list-style-type: none;
gap: 65px;
padding-top: 16px;
padding-bottom: 16px;
}
/* Mobile - setting */
@media (max-width: 768px) {
body {
margin: 8px;
}
.hero-subtitle {
font-size: 18px;
}
.hero-title {
font-size: 14px;
}
.icon {
display: block;
}
.image-container {
width: 100%;
}
nav a {
display: none;
}
}

View File

@ -1,2 +0,0 @@
<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<s:String x:Key="/Default/CodeInspection/PencilsConfiguration/Storage/@EntryValue">ThisComputer</s:String></wpf:ResourceDictionary>

View File

@ -1,3 +0,0 @@
# zivotopis_engeto
První zadání pro nepovinný domácí úkol, vytvořit CV.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

View File

@ -1,86 +0,0 @@
:root {
--my-black: black;
--my-beckground: #ded4d4;
max-width: 1200px;
margin: auto;
}
body {
background-color: var(--my-beckground);
max-width: 1200px;
margin: auto;
margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}
footer {
position: fixed;
bottom: 0;
}
.tlacitko {
color: var(--my-black);
}
td,
th {
border: 1px solid var(--my-black);
padding: 15px;
}
.flexbox {
display: flex;
max-width: auto;
margin: auto;
}
.flexbox-content {
display: flex;
flex-direction: column;
}
.menu {
margin-top: 25px;
}
.content {
order: 2;
flex: 3;
padding: 55px;
margin-top: -45px;
}
.dot {
list-style-type: none;
}
.jobs,
.course,
.fun {
font-size: 20px;
}
.title {
text-align: center;
order: 1;
}
@media screen and (max-width: 600px) {
.flexbox {
flex-direction: column;
}
.menu {
order: 1;
text-align: center;
}
.dot-none {
list-style-type: none;
}
/* .content {
order: 3;
} */
.title {
order: -1;
}
}

View File

@ -1,183 +0,0 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="CV Lukáše Kaňky" />
<meta name="keywords" content="Hlavní strana" />
<meta name="author" content="Lukáš Kaňka" />
<link rel="stylesheet" href="style-cv.css" />
<title>Životopis</title>
</head>
<body>
<div class="flexbox">
<!-- <div class="title">
<h1>ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1>
</div> -->
<div class="menu">
<img src="./image/1702045296079.jpeg" width="200" height="200" alt="Lukáš Kaňka" />
<h2>Státní příslušnost:</h2>
<ul class="dot-none">
<li>Česká</li>
</ul>
<h2>Datum narození:</h2>
<ul class="dot-none">
<li>2.4.1981</li>
</ul>
<h2>Kontakty:</h2>
<ul class="dot-none">
<li>
<a class="tlacitko" href="Tel: +420 725 303 747">Telefon: +420 725 303 747</a>
</li>
<li>
<a class="tlacitko" href="Mailto:lukas.kanka@lukan.cz" target="_blank">Email
</a>
</li>
<li>
<a class="tlacitko" href="https://lukaskanka.cz" target="_blank">Web</a>
</li>
<li>
<a class="tlacitko" href="https://github.com/LukasKanka" target="_blank">GitHub</a>
</li>
<li>
<a class="tlacitko" href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/"
target="_blank">LinkedIn</a>
</li>
</ul>
<h2>Adresa:</h2>
<ul class="dot-none">
<li>Petržílkova 27</li>
<li>Praha 13</li>
<li>158 00</li>
</ul>
</div>
<div class="flexbox-content">
<div class="title">
<h1>ŽIVOTOPIS<br> LUKÁŠ KAŇKA</h1>
</div>
<div class="content">
<section class="info-section">
<h2>O MNĚ</h2>
<hr />
<p>
IT nadšenec s pozitivním přístupem k životu a vášní pro technologie.
Do světa IT jsem vstoupil jako Support, pak mě osud dovedl na pozici
Testera a v současné době měním svůj kariérní směr do Front-Endu. Kód
i programování mě lákalo už dlouho, baví mě zobrazení okamžitého
výsledku, který mi umožňuje zlepšení a zdokonalení kódu. Aktuálně se
vzdělávám ve Front-End Developer Akademii se zaměřením na znalosti
v JavaScript, HTML, CSS. Jako návazný krok bych své znalosti rád
prohluboval ve frameworcích React, Angular.
</p>
</section>
<section class="job-section">
<h2>PRACOVNÍ ZKUŠENOSTI</h2>
<hr />
<ul class="dot">
<li>
<strong class="jobs">Tester softwaru</strong>
</li>
<li><strong>Uniprog Solutions, a.s [ 15/08/2022 14/08/2023 ]</strong></li>
<li>Město: Praha</li>
<li>Země: Česko</li>
<li>Manuální testování PowerBuilder aplikací.</li>
<li>Údržba a oprava automatizovaných testů Cucumber.</li>
<li>Manuální testování webových aplikací dle Test Case a dokumentace.</li>
<li>Komunikace napříč vývojovými týmy.</li>
<li>Technologie: MSSQL, Jira, PowerBuilder, GitLab.</li>
</ul>
<ul class="dot">
<li><strong class="jobs">IT support</strong></li>
<li><strong>Comfort Finance Group CFG Živnostník [ 04/2022 07/2022 ]</strong></li>
<li> Město: Praha </li>
<li>Země: Česko </li>
<li>Poskytování IT podpory uživatelům (SW, HW), onboarding nováčků,
evidence skladu vybavení, řešení nastalých technických problémů.</li>
<li>Reporting systémových chyb na adekvátní oddělení.</li>
<li>Práce v OS Ubuntu Linux.</li>
<li>Práce s nástroji jako Intergromat, Jira.</li>
</ul>
<ul class="dot">
<li><strong class="jobs">Řidič dodávky</strong></li>
<li>
<strong>Artglass Lighting Na plný úvazek [ 03/2016 04/2020 ]</strong><br />
Země: Česko <br />
Řízení dodávky, komunikace se zákazníky, podpora prodeje.
</li>
</ul>
<ul class="dot">
<li><strong class="pozice">Řidič nákladního vozu</strong></li>
<li>
<strong>ČSAD Liberec Na plný úvazek [ 07/2006 08/2014 ]</strong>
</li>
<li>Řízení nákladních vozidel (MAN, DAF, Iveco, Renault).
</li>
</ul>
</section>
<section class="edu-section">
<h2>VZDĚLÁNÍ A ODBORNÁ PŘÍPRAVA</h2>
<hr />
<ul class="dot">
<li><strong class="course">Základy Testingu, SQL, Web Services</strong></li>
<li>
<strong>Acamar [ 08/2020 ]</strong>
</li>
<li>Město: Praha </li>
<li>Země: Česko</li>
</ul>
<ul class="dot">
<li><strong class="course">Úvod do Playwright</strong></li>
<li><strong>Tesena [ 04/2023 ]</strong></li>
<li>Město: Praha </li>
<li>Země: Česko</li>
</ul>
</section>
<section class="hobby-section">
<h2>ZÁJMY A KONÍČKY</h2>
<hr />
<ul class="dot">
<li><strong class="fun">
Opensource, Linux, Sebevzdělávání v testingu a dalších technologiích,
Cyklistika
</strong></li>
<li>
Na mi mo pracovních projektech mám základní zkušenosti se SW a
technologiemi jako: C#, .Net, NUnit, Selenium, Selenide,Cypress,
Playwrigt, Java, Linux Ubuntu a další distribuce, Docker, MacOS,
MangoDB, Windows, Obsidian. <br />
Mimo jiné se ve volném čase účastním amatérských závodů na kole a rád
si zaběhám.
</li>
</ul>
<h2>DOBROVOLNICKÁ ČINNOST</h2>
<hr />
<ul class="dot">
<li><strong class="fun">Maper Missing Maps</strong></li>
<li>
Ve volném čase mapuji pro humanitární účely, v projektu
<a class="tlacitko" href="https://www.missingmaps.org" target="_blank">Missing Maps</a>
pomocí OSM na platformě
<a class="tlacitko" href="https://tasks.hotosm.org" target="_blank">Hot Tasking Manager</a>.
</li>
</ul>
</section>
</div>
</div>
</div>
<footer>Copyright &copy; Lukáš Kaňka 2023</footer>
</body>
</html>

View File

@ -1,121 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Projects</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">My Projects</h1>
<h2 class="project-tagline">
Programs and apps that I have coded and random ideas that I fabricated.
</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<table>
<thead>
<tr>
<th>Project</th>
<th>Description</th>
<th>Link (local)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dark New Roman</td>
<td>A custom serif font based off of Times New Roman.</td>
<td>
<a href="../../res/downloads/DarkNewRoman.ttf"
>Download font (truetype 28.9 KiB)</a
>
</td>
</tr>
<tr>
<td>Number System Converter (web)</td>
<td>Converts decimal numbers into other bases!</td>
<td>
<a href="./nsc-web/">nsc-web<sup></sup></a>
</td>
</tr>
</tbody>
</table>
<br />
<br />
<table>
<thead>
<tr>
<th>Project</th>
<th>Description</th>
<th>Link (external)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Firefox black & red triangle theme</td>
<td>A red and black theme for firefox tabs.</td>
<td>
<a
href="https://addons.mozilla.org/en-US/firefox/addon/black-red-triangle-theme"
>https://addons.mozilla.org/en-US/firefox/addon/black-red-triangle-theme/</a
>
</td>
</tr>
<tr>
<td>RGB Progress Bar</td>
<td>Makes progress bars cycle through different RGB colors.</td>
<td>
<a href="https://addons.mozilla.org/addon/rgb-progress-bar/"
>https://addons.mozilla.org/addon/rgb-progress-bar/</a
>
</td>
</tr>
</tbody>
</table>
<br />
<br />
<table>
<thead>
<tr>
<th>Github contribution</th>
<th>Description</th>
<th>Repository link</th>
<th>Language</th>
</tr>
</thead>
<tbody id="userRepo">
<script src="./script/script.js"></script>
</tbody>
</table>
<!-- <tr>
<td>Project</td>
<td>
Description
</td>
<td>
<a href="#">Link</a>
</td>
</tr> -->
<footer class="site-footer">
You have reached the end of the page. (ノ◕ヮ◕)ノ*:・゚✧
</footer>
</main>
</body>
</html>

View File

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number System Converter</title>
<link rel="stylesheet" href="../../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../../res/site/icons/favicon.ico"
/>
<script src="./script/script.js"></script>
<style>
input {
width: 40%;
}
</style>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Number System Converter</h1>
<h2 class="project-tagline">Web version.</h2>
<a href="../../../" class="btn">Home</a>
<a href="../" class="btn">Projects</a>
</header>
<main id="content" class="main-content" role="main">
<section>
<h3>Enter a decimal number to convert and a base.</h3>
<form>
<label for="number">Number:</label><br />
<input
name="number"
id="number"
type="text"
step="1"
onChange="numberSystemConverter();"
/>
<br />
<label for="base">Base (Range 2-36):</label><br />
<input
name="base"
id="base"
type="number"
value="10"
step="1"
min="2"
max="36"
onChange="numberSystemConverter();"
/>
<br />
<label for="new-base">New base (Range 2-36):</label><br />
<input
name="new-base"
id="new-base"
type="number"
value="2"
step="1"
min="2"
max="36"
onChange="numberSystemConverter();"
/>
<br />
<label for="converted">Converted number:</label><br />
<input
name="converted"
id="converted"
type="text"
disabled="true"
onChange="numberSystemConverter();"
/>
</form>
</section>
<footer class="site-footer">
You have reached the end of the page. (ノ◕ヮ◕)ノ*:・゚✧
</footer>
</main>
</body>
</html>

View File

@ -1,19 +0,0 @@
numberSystemConverter();
function numberSystemConverter() {
let num = document.getElementById("number").value;
let base = document.getElementById("base").value;
let new_base = document.getElementById("new-base").value;
base = parseInt(base);
new_base = parseInt(new_base);
try {
let dec_num = parseInt(num, base);
let new_num = dec_num.toString(new_base);
document.getElementById("converted").value = new_num;
console.log(`BASE ${base}: ${num} ==> BASE ${new_base}: ${new_num}`);
} catch (RangeError) {
console.log(`One or more bases is not in the range of 2 to 36.`);
}
}

View File

@ -1,38 +0,0 @@
requestUserRepos();
function requestUserRepos() {
const xhr = new XMLHttpRequest();
const url = `https://api.github.com/users/array-in-a-matrix/repos`;
xhr.open("GET", url, true);
xhr.onload = function () {
const data = JSON.parse(this.response);
let root = document.getElementById("userRepo");
while (root.firstChild) {
root.removeChild(root.firstChild);
}
let tbody = document.getElementById("userRepo");
for (let i in data) {
let tr = document.createElement("tr");
tr.classList.add("list-group-item");
function removeNull(disc) {
if (disc === null) {
const disc = "-";
return disc;
} else {
return data[i].description;
}
}
tr.innerHTML = `
<td>${data[i].name}</td>
<td>${removeNull(data[i].description)}</td>
<td><a href="${data[i].html_url}">${data[i].html_url}</a></td>
<td>${data[i].language}</td>
`;
tbody.appendChild(tr);
}
};
xhr.send();
}

View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Repositáře</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="../../style/alt.style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Repositáře</h1>
</header>
<div class="main-content">
<nav>
<a href="../../" class="btn">Domů</a>
</nav>
<nav>
<a href="https://git.archoslinux.cz/kankys" class="btn" target="_blank"
><i class="fa fa-gitea"></i> Gitea na ArchLinux CZ</a
>
<a href="https://github.com/LukasKanka" class="btn" target="_blank"
><i class="fa fa-github"></i> GitHub</a
>
</nav>
</div>
</body>
</html>

View File

@ -1,73 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Socials</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="../../style/alt.style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Mé Sociální sítě</h1>
<h2 class="project-tagline">Zde mě můžeš kontaktovat</h2>
</header>
<div class="main-content">
<nav>
<a href="../../" class="btn">Domů</a>
</nav>
<nav>
<a href="https://mastodon.arch-linux.cz/deck/@Kankys" class="btn" target="_blank"
><i class="fa fa-mastodon"></i> Mastodon</a
>
<a href="" class="btn" target="_blank"
><i class="fa fa-matrix-org"></i> Matrix</a
>
<a href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/" class="btn" target="_blank"
><i class="fa fa-linkedin"></i> LinkedIn</a
>
<a href="https://t.me/Kankys" class="btn" target="_blank"
><i class="fa fa-telegram"></i> Telegram</a
>
<a
href="https://discord.com/kankys_"
class="btn" target="_blank"
><i class="fa fa-discord"></i> Discord</a
>
</nav>
<br />
<nav>
<a href="https://git.archoslinux.cz/kankys" class="btn" target="_blank"
><i class="fa fa-gitea"></i> Gitea</a
>
<a href="https://github.com/LukasKanka" class="btn" target="_blank"
><i class="fa fa-github"></i> GitHub</a
>
<a href="https://pixelfed.cz/i/web/profile/464150575238569182" class="btn"
><i class="fa fa-pixelfed"></i> Pixelded CZ</a
>
<!-- waiting for gitea to get federation -->
<!-- <a href=" class="btn"
><i class="fa fa-gitea"></i> Gitea (Telodendria)</a
> -->
<!-- <a href="" class="btn"
><i class="fa fa-gitea"></i> Forgejo (Freetards)</a
> -->
</nav>
</div>
</body>
</html>

View File

@ -4,22 +4,23 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array in a Matrix</title> <title>Mxchat Cz</title>
<link rel="stylesheet" type="text/css" href="./alt.style.css" /> <link rel="stylesheet" type="text/css" href="./alt.style.css" />
<link rel="icon" type="image/x-icon" href="../res/site/icons/favicon.ico" /> <link rel="icon" type="image/x-icon" href="../res/site/icons/favicon.ico" />
</head> </head>
<body> <body>
<header class="page-header" role="banner"> <header class="page-header" role="banner">
<h1 class="project-name">Project Name</h1> <h1 class="project-name">Mxchat Cz</h1>
<h2 class="project-tagline">Project tagline</h2> <h2 class="project-tagline">Mxchat je platforma postavená na protokolu Matrix, která poskytuje bezpečnou a decentralizovanou komunikaci.</h2>
</header> </header>
<div class="main-content"> <div class="main-content">
<nav> <nav>
<a href="../" class="btn">Home</a> <a href="../" class="btn">Home</a>
</nav> </nav>
<nav> <nav>
<a href="#" class="btn">navigation button</a> <a href="../index/about/index.html" class="btn">Co je Mxchat</a>
<a href="" class="btn">Co je Mxchat</a>
<a href="#" class="btn">navigation button</a> <a href="#" class="btn">navigation button</a>
</nav> </nav>
</div> </div>