WIP: Nahrání kódu do větve test_web #1

Closed
Archos wants to merge 5 commits from test_web into main
64 changed files with 6663 additions and 25 deletions

22
error/403.html Executable file
View File

@ -0,0 +1,22 @@
<!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>403 Chyba</title>
<link rel="stylesheet" href="/style/style.css" />
<link rel="icon" type="image/gif" href="/res/site/icons/cat.gif" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">403 Chyba</h1>
<h2 class="project-tagline">
Nemáte přístup k této stránce, přestaňte šmírovat ÒwÓ.
</h2>
<a href="/" class="btn">Domů</a>
</header>
</body>
</html>

19
error/404.html Executable file
View File

@ -0,0 +1,19 @@
<!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>404 Error</title>
<link rel="stylesheet" href="/style/style.css" />
<link rel="icon" type="image/gif" href="/res/site/icons/cat.gif" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">404 Error</h1>
<h2 class="project-tagline">Requested page diverges.</h2>
<a href="/" class="btn">Home</a>
</header>
</body>
</html>

20
error/413.html Executable file
View File

@ -0,0 +1,20 @@
<!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>413 Error</title>
<link rel="stylesheet" href="/style/style.css" />
<link rel="icon" type="image/gif" href="/res/site/icons/cat.gif" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">413 Error</h1>
<h2 class="project-tagline">413 Payload Too Large.</h2>
<a href="/" class="btn">Home</a>
</header>
</body>
</html>

22
error/5xx.html Executable file
View File

@ -0,0 +1,22 @@
<!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>5XX Error</title>
<link rel="stylesheet" href="/style/style.css" />
<link rel="icon" type="image/gif" href="/res/site/icons/cat.gif" />
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">5XX Error</h1>
<h2 class="project-tagline">
The server is currently on fire! Please check back later.
</h2>
<a href="/" class="btn">Home</a>
</header>
</body>
</html>

View File

@ -1,29 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="cs"> <html lang="cs">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Oscloud" content="Oscloud - Váš bezpečný cloud." />
<title>Oscloud</title> <title>Oscloud</title>
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" type="text/css" href="./style/alt.style.css" />
<link
rel="stylesheet"
href="./res/site/fonts/DarkNewRoman/stylesheet.css"
type="text/css"
/>
<link rel="icon" type="image/x-icon" href="./res/site/icons/favicon.ico" />
<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"
/>
</head> </head>
<body> <body>
<header> <header class="page-header" role="banner">
<h1>Vítejte na Oscloud</h1> <img src="./logo/logo.png" alt="Oscloud logo" style="width: 100px; height: auto;" />
<nav> <h1 class="project-name" style="font-family: DarkNewRoman">
<ul> Oscloud
<li><a href="index.html">Domů</a></li> </h1>
<li><a href="about.html">O nás</a></li> <h2 class="project-tagline">Váš bezpečný cloud.</h2>
<li><a href="contact.html">Kontakt</a></li>
</ul>
</nav>
</header> </header>
<main> <div class="main-content">
<h2>Váš bezpečný cloud</h2> <nav>
<p>Oscloud je váš bezpečný cloud. Naším cílem je ukázat lidem výhody bezpečného internetu a Open Source technologií.</p> <a href="./index/socials/" class="btn">Sociální sítě</a>
</main> <a href="https://lukan.cz" target="_blank" class="btn">Blog</a>
<a href="index/project/zivotopis/zivotopis.html" target="_blank" class="btn">Životopis</a>
<a href="https://publish.obsidian.md/kankys-note/" target="_blank" class="btn">Digitální zahrada</a>
<a href="./index/about/" class="btn">O nás</a>
</nav>
<nav>
<a href="index/repository/index.html" class="btn">Repositáře</a>
<a href="./index/project/" class="btn">Projekty</a>
<a href="https://testing-docs.cz/" target="_blank" class="btn">Testing Docs CZ</a>
<a href="index/privacy-policy/index.html" class="btn">Zásady ochrany osobních údajů</a>
</nav>
<nav>
<a href="https://git.archoslinux.cz/oscloud" class="btn" target="_blank"><i class="fa fa-gitea"></i> Gitea</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://mastodon.arch-linux.cz/deck/@Oscloud" class="btn" target="_blank"><i class="fa fa-mastodon"></i> Mastodon</a>
</nav>
<nav>
<a href="https://status.oscloud.cz/status/oscloud" class="btn">Stav služeb</a> <!-- Odkaz na Uptime Kuma -->
</nav>
</div>
<footer> <footer>
<p>&copy; 2024 Oscloud</p> Copyright &copy; Oscloud 2024
</footer> </footer>
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

137
index/about/index.html Executable file
View File

@ -0,0 +1,137 @@
<!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="O mně." />
<title>O mně</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
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>
<main id="content" class="main-content" role="main">
<h3>O mně</h3>
<div class="obsah">
<div></div>
<p>
Jsem IT nadšenec s pozitivním přístupem k životu a vášní pro
technologie, ve kterých se neustále vzdělávám. Absolvoval jsem kurz
testingu a SQL v Acamaru. A nyní se i jako tester živím, v budoucnu
bych chtěl být Web Developerem. Můj životopis najdete pod tímto <a href="zivotopis.html" target="_blank"
class="tlacitko">odkazem.</a>
</p>
<div>
<ul class="dot">
<li><strong>Ve volném čase se věnuji:</strong></li>
<li>Svému blogu:<a href="https://lukan.cz"> Lukáš Bloguje.</a></li>
<li>Linuxu, MacOS a Opensource (i si rozumím s Windows :-)).</li>
<li>Seberozvoji v oblasti komunikace a emoční inteligence.</li>
<li>Sportu, který mi dobíjí baterky.</li>
<li>Missing maps pro Lékaře bez hranic.</li>
<li>Mapování v OSM.</li>
</div>
<div>
<ul class="dot">
<li><strong>V osobním životě se snažím vedle komerčních aplikací poznávat a
používat Opensource.</strong></li>
<li>To to jsou opensource aplikace, které používám vedle placených
aplikací a stojí myslím za vyzkoušení:</li>
<li>* Alternativa za OneNote od Microsoftu je aplikace <a href="https://joplinapp.org/" target="_blank"
class="tlacitko">Joplin</a></li>
<li>* Pro cloud a tvorbu dokumentů k Microsoft 365 doporučuji <a href="https://cloud.arch-linux.cz"
target="_blank" class="tlacitko">NextCloud</a></li>
<li>* Pokud potřebuji šifrovat dokumenty nebo jen s někým něco sdílet a
nechci sdílet s NextCloud nebo OneDrive použiji <a href="https://cryptpad.arch-linux.cz/" target="_blank"
class="tlacitko">CryptPad</a></li>
<li>* Náhradu za Jiru může být <a href="https://tasks.archoslinux.cz/" target="_blank"
class="tlacitko">Vikunja</a></li>
<li>* Mimo GitHub svůj kód ukládám na <a href="https://git.archoslinux.cz/" target="_blank"
class="tlacitko">Gitea</a></li>
<li>* Pro tvorbu tohoto blogu vedle VS Code používám <a href="https://brackets.io/" target="_blank"
class="tlacitko">Brackets</a></li>
<li>* Jako RSS čtečku využívám minimalistickou <a href="https://rss.archoslinux.cz/"
class="tlacitko">MiniFlux</a></li>
<li>* Správce hesel může být <a href="https://bitwarden.archoslinux.cz/" target="_blank"
class="tlacitko">Bitwarden</a></li>
<li>* Internetový prohlížeč <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"
class="tlacitko">Firefox</a></li>
<li>* E-mail klienta používám <a href="https://www.thunderbird.net/en-US/" target="_blank"
class="tlacitko">Thunderbird</a></li>
<li>* Alternativu k sociální sítím může být <a href="https://mastodon.arch-linux.cz/" terget="_blank"
class="tlacitko">Mastodon</a><a href="https://element.mxchat.cz/" target="blank"
class="tlacitko">Element</a></li>
<li>* Alternativou k Instagramu může být <a href="https://pixelfed.cz" target="_blank"
class="tlacitko">Pixelfed</a></li>
</ul>
</div>
<div>
<ul class="dot">
<li><strong>Kde všude mně najdete: </strong></li>
<li>Můj profil na: <a class="tlacitko" href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/"
target="_blank">LinkedIn</a></li>
<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>
</body>
</html>

56
index/games/fractal/index.html Executable file
View File

@ -0,0 +1,56 @@
<!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

@ -0,0 +1,12 @@
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();
}

1518
index/games/fractal/script/xaos.js Executable file

File diff suppressed because it is too large Load Diff

67
index/games/fractal/style.css Executable file
View File

@ -0,0 +1,67 @@
#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;
}
}

81
index/games/index.html Executable file
View File

@ -0,0 +1,81 @@
<!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>

51
index/games/rps/index.html Executable file
View File

@ -0,0 +1,51 @@
<!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

@ -0,0 +1,93 @@
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

@ -0,0 +1,169 @@
<!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="Zásady ochrany osobních údaju." />
<title>Zásady ochrany osobních údaju</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
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>
<main id="content" class="main-content" role="main">
<p>
<strong>
<center>Zásady ochrany osobních údajů</center> </strong
><br />
Naposledy aktualizováno: 28.4.2022
</p>
<p>
Pokud jste návštěvníkem našeho blogu, odběratelem novinek,
přispěvatelem do komentářů poskytujete nám své osobní údaje. My vaše
údaje zpracováváme a za jejich bezpečnost odpovídáme. Slibujeme, že
vaše <br />údaje dostatečně chráníme a podřizujeme se požadavkům
Nařízení o ochraně osobních údajů (GDPR).
</p>
<p>
Neprodáváme žádný produkt, nejste tedy našimi zákazníky, ale
návštěvníky blogu.
</p>
<p>
Správcem vašich osobních údajů je Lukáš (Lucka ani nekouká přes
rameno!)<br />
Správcem osobních údajů je Lukáš Kaňka, který provozuje webové stránky
lukan.cz a lukan.cekuj.net. Lukáš vaše údaje spravuje a určuje, jak
dlouho budou osobní údaje zpracovávány, a za jakým účelem. Vybírá
<br />také další zpracovatele, které ke zpracování využíváme.
</p>
<p>
<strong>Jaké údaje zpracováváme a proč?</strong><br />
Vaše osobní údaje zpracováváme především proto, abychom vám mohli
poskytovat co nejkvalitnější obsah. Jednotlivé důvody zpracování:
</p>
<p>
<strong>Předávání osobních údajů třetím osobám.</strong><br />
Vaše údaje zpracovává správce Lukáš Kaňka, s využitím dalších dvou
zpracovatelů, společnosti Endora , jejichž zpracování spočívá v
uchovávání údajů na zabezpečených cloudových serverech.
</p>
<p>
Abychom mohli měřit, jak se vám na našem blogu líbí, kde trávíte
nejvíce času a kam klikáte, používáme další poskytovatele služeb pro
určité zpracovatelské operace. Jsou to:
</p>
<p>TopList pomocí měřícího kódu</p>
<p>
<strong>Jak nás můžete kontaktovat</strong><br />
Ať už na nás máte jakoukoliv otázku nebo požadavek, můžete nás
kontaktovat ne e-mailové adrese: lukas.kanka@lukan.cz.
</p>
<p>
<strong>Předávání vašich dat mimo Evropskou Unii</strong><br />
Vaše data zpracováváme výhradně v Evropské unii nebo v zemích, které
zajišťují odpovídající úroveň ochrany na základě rozhodnutí Evropské
komise.
</p>
<p>
<strong>Zabezpečení a ochrana osobních údajů</strong><br />
Vaše data jsou u nás v bezpečí. Přijali jsme technická opatření, která
zajišťují zabezpečení osobních údajů šifrováním přenosu dat pomocí
HTTPS protokolu (ten zámeček, co je vedle naší URL adresy ;-)) a<br />
zabezpečili vaše osobní údaje v souladu s čl. 32 GDPR.
</p>
<p>
<strong>Vaše práva v souvislosti s ochranou osobních údajů:</strong>
</p>
<p>
V souvislosti s ochranou osobních údajů máte řadu práv. Pokud budete
chtít některého z těchto práv využít, prosím, kontaktujte nás
prostřednictvím e-mailu: lukas.kanka@lukan.cz
</p>
<p>Máte právo na informace, které si právě teď čtete. 🙂</p>
<p>
Díky právu na přístup nás můžete kdykoli vyzvat a my vám do 30 dnů
doložíme, jaké vaše osobní údaje zpracováváme a proč. Pokud se u vás
něco změní nebo shledáte své osobní údaje neaktuální nebo<br />
neúplné, máte právo na doplnění a změnu osobních údajů.
</p>
<p>
Právo na omezení zpracování můžete využít, pokud se domníváte, že
zpracováváme vaše nepřesné údaje, domníváte se, že provádíme
zpracování nezákonně, ale nechcete všechny údaje smazat nebo pokud
jste<br />
vznesli námitku proti zpracování. Omezit můžete rozsah osobních údajů
nebo účelů zpracování.
</p>
<p><strong>Právo na výmaz (být zapomenut)</strong></p>
<p>
Vaším dalším právem je právo na výmaz (být zapomenut). Nechceme na vás
zapomenout, ale pokud si to budete přát, máte na to právo. 😞 V
takovém případě vymažeme veškeré vaše osobní údaje ze svého<br />
systému i ze systému všech dílčích zpracovatelů a záloh. Na zajištění
práva na výmaz potřebujeme 30 dní.
</p>
<p><strong>Stížnost u Úřadu na ochranu osobních údajů</strong></p>
<p>
Pokud máte pocit, že s vašimi údaji nezacházíme v souladu se zákonem,
máte právo se se svou stížností kdykoli obrátit na Úřad pro ochranu
osobních údajů. Budeme moc rádi, pokud nejprve budete o tomto<br />
podezření informovat nás, abychom s tím mohli něco udělat a případné
pochybení napravit.
</p>
<p><strong>Mlčenlivost:</strong></p>
<p>
Jsme povinni zachovávat mlčenlivost o osobních údajích a o
bezpečnostních opatřeních, jejichž zveřejnění by ohrozilo zabezpečení
vašich osobních údajů. Tato mlčenlivost přitom trvá i po skončení<br />
závazkových vztahů s námi. Bez vašeho souhlasu také vaše údaje žádné
jiné třetí straně nevydáme.
</p>
<p>Tyto Zásady ochrany osobních údajů nabývají účinnosti 28.4.2022</p>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main>
</body>
</html>

View File

@ -0,0 +1,3 @@
# 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

@ -0,0 +1,554 @@
: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

@ -0,0 +1,217 @@
<!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.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

116
index/project/index.html Executable file
View File

@ -0,0 +1,116 @@
<!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.

After

Width:  |  Height:  |  Size: 367 KiB

View File

@ -0,0 +1,55 @@
<!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

@ -0,0 +1,147 @@
: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.

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

@ -0,0 +1,41 @@
<!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

@ -0,0 +1,115 @@
: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

@ -0,0 +1,2 @@
<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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -0,0 +1,86 @@
: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

@ -0,0 +1,183 @@
<!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>

121
index/projects/index.html Executable file
View File

@ -0,0 +1,121 @@
<!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

@ -0,0 +1,84 @@
<!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

@ -0,0 +1,19 @@
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.`);
}
}

38
index/projects/script/script.js Executable file
View File

@ -0,0 +1,38 @@
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

@ -0,0 +1,44 @@
<!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>

73
index/socials/index.html Executable file
View File

@ -0,0 +1,73 @@
<!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>

BIN
logo/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

17
package.json Normal file
View File

@ -0,0 +1,17 @@
{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
"devDependencies": {
"eslint-config-prettier": "^8.10.0",
"husky": "^8.0.3",
"lint-staged": "^13.3.0",
"prettier": "2.8.4"
},
"dependencies": {
"eslint": "^8.54.0"
},
"scripts": {
"prepare": "husky install"
}
}

1336
pnpm-lock.yaml Normal file

File diff suppressed because it is too large Load Diff

27
style/alt.index.html Executable file
View File

@ -0,0 +1,27 @@
<!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>Array in a Matrix</title>
<link rel="stylesheet" type="text/css" href="./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">Project Name</h1>
<h2 class="project-tagline">Project tagline</h2>
</header>
<div class="main-content">
<nav>
<a href="../" class="btn">Home</a>
</nav>
<nav>
<a href="#" class="btn">navigation button</a>
<a href="#" class="btn">navigation button</a>
</nav>
</div>
</body>
</html>

315
style/alt.style.css Executable file
View File

@ -0,0 +1,315 @@
:root {
--primary: #fff;
--secondary: rgba(0, 0, 0, 0.5);
--tertiary: #151b74;
--transparent: transparent;
}
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-webkit-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
/* Main styles */
body {
margin-top: 13.5rem;
color: var(--primary);
font-family: Utopia, "Liberation Serif";
text-align: center;
/* img size is 50x50 */
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==")
repeat 0 0;
-webkit-animation: bg-scrolling-reverse 0.92s infinite;
/* Safari 4+ */
-moz-animation: bg-scrolling-reverse 0.92s infinite;
/* Fx 5+ */
-o-animation: bg-scrolling-reverse 0.92s infinite;
/* Opera 12+ */
animation: bg-scrolling-reverse 0.92s infinite;
/* IE 10+ */
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
.larger-name {
font-size: larger;
}
.smaller-name {
font-size: smaller;
}
.main-content {
font-family: "Montserrat", sans-serif;
}
.project-name {
color: --primary;
font-family: Utopia, "Liberation Serif";
}
@media screen and (min-width: 64em) {
.project-name {
font-size: 8rem;
}
.main-content {
font-size: 1.5rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 4rem;
}
.main-content {
font-size: 1.25rem;
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size: 2rem;
}
.main-content {
font-size: 1rem;
}
}
a {
background-color: var(--transparent);
}
a:active,
a:hover {
outline: 0;
}
a {
color: var(--tertiary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.btn {
display: inline-block;
margin-bottom: 1rem;
color: var(--primary);
background-color: var(--secondary);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.btn + .btn {
margin-left: 1rem;
}
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem;
}
}
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem;
}
.btn + .btn {
margin-top: 1rem;
margin-left: 0;
}
}
* {
box-sizing: border-box;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
}
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7;
font-family: "Montserrat", sans-serif;
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem;
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem;
}
}
footer,
site-footer {
font-family: "Montserrat", sans-serif;
font-size: small;
display: block;
}
@media screen and (min-width: 64em) {
.site-footer {
font-size: 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size: 1rem;
}
}
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem;
}
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}

744
style/style.css Executable file
View File

@ -0,0 +1,744 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
html {
font-family: "Montserrat", sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #606c71;
}
#skip-to-content {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
#skip-to-content:focus {
position: fixed;
top: 10px;
left: 10px;
height: auto;
width: auto;
background: #e19447;
outline: thick solid #e19447;
}
a {
color: #1e6bb8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.btn {
display: inline-block;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn:hover {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.btn + .btn {
margin-left: 1rem;
}
@media screen and (min-width: 64em) {
.btn {
padding: 0.75rem 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.btn {
padding: 0.6rem 0.9rem;
font-size: 0.9rem;
}
}
@media screen and (max-width: 42em) {
.btn {
display: block;
width: 100%;
padding: 0.75rem;
font-size: 0.9rem;
}
.btn + .btn {
margin-top: 1rem;
margin-left: 0;
}
}
.page-header {
color: #fff;
text-align: center;
}
@-webkit-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling-reverse {
100% {
background-position: 50px 50px;
}
}
@-webkit-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-moz-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@-o-keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
@keyframes bg-scrolling {
0% {
background-position: 50px 50px;
}
}
body {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABbmlDQ1BpY2MAACiRdZE7SwNBFIW/RCWikRRaBLHYQsVCJSiIpcbCJkiICr6aZPMSNuuyu0HEVrCxCFiINr4K/4G2gq2CICiCiI1/wFcjYb2TBBJEZ5m9H2fmXGbOgD9m6AWnOQIF07UT01FtYXFJC7wSIEwnw/iSumNNxuMx/h1f9/hUvRtSvf7f9+doT2ccHXytwmO6ZbvCE8KxdddSvCPcpeeTaeEj4UFbDih8rfRUlV8U56r8odieS0yBX/XUcg2camA9bxeEB4R7C0ZRr51H3SSYMednpXbL7MEhwTRRNFIUWcXAZUiqKZn97YtUfDOsiUeXv8UGtjhy5MU7KGpRumakZkXPyGewoXL/naeTHR2pdg9GoeXZ8977ILAL5ZLnfR97XvkEmp7g0qz71ySn8U/RS3Wt9xBCW3B+VddSe3CxDeFHK2knK1KTTH82C29n0LEInbfQtlzNqrbO6QPMbcoT3cD+AfTL/tDKD92VZ/plHO89AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuElEQVRoBe3awQ2CQABEUbUEbJEEi5ISpQVETuY38LPkk5gwp9mdx9H7srz2dX3fpul5G/XZts959H2e5/14G/Z3nv+QGPYC/+M/Rv2ceO4uwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+xPhInZOxBZgfyJcxM6J2ALsT4SL2DkRW4D9iXAROydiC7A/ES5i50RsAfYnwkXsnIgtwP5EuIidE7EF2J8IF7FzIrYA+y8j8rvYJf6v9QVf2KG69fWg3gAAAABJRU5ErkJggg==")
repeat 0 0;
-webkit-animation: bg-scrolling-reverse 0.92s infinite;
/* Safari 4+ */
-moz-animation: bg-scrolling-reverse 0.92s infinite;
/* Fx 5+ */
-o-animation: bg-scrolling-reverse 0.92s infinite;
/* Opera 12+ */
animation: bg-scrolling-reverse 0.92s infinite;
/* IE 10+ */
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem;
}
}
@media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem;
}
}
.project-name {
margin-top: 0;
margin-bottom: 0.1rem;
}
@media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem;
}
}
@media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem;
}
}
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7;
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem;
}
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem;
}
}
.main-content {
word-wrap: break-word;
background-color: #fff;
background-color: rgba(250, 250, 250, 0.712);
}
.main-content :first-child {
margin-top: 0;
}
@media screen and (min-width: 64em) {
.main-content {
max-width: 64rem;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.main-content {
padding: 2rem 4rem;
font-size: 1.1rem;
}
}
@media screen and (max-width: 42em) {
.main-content {
padding: 2rem 1rem;
font-size: 1rem;
}
}
.main-content kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
color: #444d56;
display: inline-block;
font-size: 11px;
line-height: 10px;
padding: 3px 5px;
vertical-align: middle;
}
.main-content img {
max-width: 100%;
}
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: normal;
color: #000;
}
.main-content p {
margin-bottom: 1em;
}
.main-content code {
padding: 2px 4px;
font-family: "Montserrat", sans-serif;
font-size: 0.9rem;
color: #567482;
background-color: #f3f6fa;
border-radius: 0.3rem;
}
.main-content pre {
padding: 0.8rem;
margin-top: 0;
margin-bottom: 1rem;
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #567482;
word-wrap: normal;
background-color: #f3f6fa;
border: solid 1px #dce6f0;
border-radius: 0.3rem;
}
.main-content pre > code {
padding: 0;
margin: 0;
font-size: 0.9rem;
color: #567482;
word-break: normal;
white-space: pre;
background: transparent;
border: 0;
}
.main-content .highlight {
margin-bottom: 1rem;
}
.main-content .highlight pre {
margin-bottom: 0;
word-break: normal;
}
.main-content .highlight pre,
.main-content pre {
padding: 0.8rem;
overflow: auto;
font-size: 0.9rem;
line-height: 1.45;
border-radius: 0.3rem;
-webkit-overflow-scrolling: touch;
}
.main-content pre code,
.main-content pre tt {
display: inline;
max-width: initial;
padding: 0;
margin: 0;
overflow: initial;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
.main-content pre code:before,
.main-content pre code:after,
.main-content pre tt:before,
.main-content pre tt:after {
content: normal;
}
.main-content ul,
.main-content ol {
margin-top: 0;
}
.main-content blockquote {
padding: 0 1rem;
margin-left: 0;
color: #819198;
border-left: 0.3rem solid #dce6f0;
}
.main-content blockquote > :first-child {
margin-top: 0;
}
.main-content blockquote > :last-child {
margin-bottom: 0;
}
.main-content table {
display: block;
width: 100%;
overflow: auto;
word-break: normal;
word-break: keep-all;
-webkit-overflow-scrolling: touch;
}
.main-content table th {
font-weight: bold;
}
.main-content table th,
.main-content table td {
padding: 0.5rem 1rem;
border: 1px solid #e9ebec;
}
.main-content dl {
padding: 0;
}
.main-content dl dt {
padding: 0;
margin-top: 1rem;
font-size: 1rem;
font-weight: bold;
}
.main-content dl dd {
padding: 0;
margin-bottom: 1rem;
}
.main-content hr {
height: 2px;
padding: 0;
margin: 1rem 0;
background-color: #dce6f0;
border: 0;
}
.site-footer {
padding-top: 2rem;
margin-top: 2rem;
border-top: solid 1px #eff0f1;
}
@media screen and (min-width: 64em) {
.site-footer {
font-size: 1rem;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
.site-footer {
font-size: 1rem;
}
}
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem;
}
}
.gameButton {
font-size: 400%;
text-align: center;
background-color: rgba(0, 0, 0, 0.08);
}
.game {
text-align: center;
}
:target:not(main) {
animation: highlight 1s ease;
transform: translateX(20px);
}
@keyframes highlight {
0% {
border-left-color: yellow;
}
100% {
border-left-color: rgba(255, 255, 255, 0);
}
}
:target:not(main) {
border-left: 40px solid rgba(255, 255, 255, 0);
padding: 0px;
transition: all 0.5s ease;
padding-right: 50px;
margin-left: -20px;
}
.zoom {
transition: transform 0.2s;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5);
}
.center {
text-align: center;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: auto;
gap: 4%;
}
.grid-item {
margin: 4% 0;
width: 15rem;
height: 22rem;
text-align: center;
}
.grid-item div {
height: 50%;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: contain;
}
.grid-item-banner {
width: 88px;
}