prod php blog
This commit is contained in:
BIN
lukaskanka/index/project/nature/images/PngItem_1608357.png
Normal file
BIN
lukaskanka/index/project/nature/images/PngItem_1608357.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 845 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
@ -0,0 +1,117 @@
|
||||
<!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"
|
||||
/>
|
||||
<link rel="shortcut icon" href="img/logo_arch_linux_167.png" />
|
||||
<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 © Lukáš Kaňka 2024
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
41
lukaskanka/index/project/nature/nature-and-culture.php
Normal file
41
lukaskanka/index/project/nature/nature-and-culture.php
Normal 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>
|
||||
115
lukaskanka/index/project/nature/style-nature.css
Normal file
115
lukaskanka/index/project/nature/style-nature.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user