You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
4.7 KiB
HTML

<!DOCTYPE html>
2 years ago
<html lang="cs">
<head>
2 years ago
<meta charset="UTF-8">
2 years ago
<title>CSS Album</title>
2 years ago
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Igor Vujovič">
<meta name="description" content="Demonstrativní web pro výuku CSS">
<meta name="robots" content="all">
2 years ago
<link rel="stylesheet" media="screen" href="style.css">
</head>
<!--
2 years ago
Tipy Triky a Dobrá praxe pro CSS:
2 years ago
- :first-child, :last-child a :nth-child je způsob jak přistupovat k elementům
- ::before a ::after lze využít pro vytvoření a stylování pseudo-elementů na místo tvorby nových
- pro vkládání obrázku je lepší použít více background images, jeden element je poté přehlednější než více img tagů, který se hodí, pokud je obrázek náplní stránky
- extra elementy pro stylování na konci souboru jsou pro vyjímečné účely. Využívejte proto raději přístup k pseudo elementům ::before a ::after
-->
2 years ago
<body>
<!-- Zobrazená část webu -->
2 years ago
<div class="page-wrapper">
<!-- Intro -->
2 years ago
<section class="intro">
2 years ago
<header>
<h1>CSS Album</h1>
<h2>&#126;Učíme se designovat weby </h2>
</header>
2 years ago
<div class="preambule">
<h3>&#126;Čistý a přehledný kód</h3>
<p>Přehlednost a čistota kódu vede ke snadnějšímu editování, týmové práci a vývoji. Komentáře nejsou na škodu</p>
<h3>&#126;Moderní a responzivní</h3>
<p>Responzivita pro zařízení s různou úhlopříčkou je podstatná část designu, nad kterou je dobré uvažovat již při návrhu</p>
2 years ago
</div>
</section>
<!-- Hlavní část -->
2 years ago
<section class="main">
<article>
<p>CSS Album váš zve na relaxační zážitek a demonstraci čeho všeho je možné dosáhnout kvalitním CSS designem. Vyberte kterýkoliv design pro načtení.</p>
<h3>Cesta k osvícení</h3>
2 years ago
<p>ze všech stran lemována jest specifickými tagy prohlížečů, nekompatibilními DOM a selektory lidské zloby... A když uvalím svůj syntax na tebe, seznáš, že jméno mé je CSS!</p>
2 years ago
<h3>Proč jsme tady?</h3>
2 years ago
<p>Existuje trvalá potřeba demonstrovat sílu CSS. Naše CSS album si klade za cíl inspirovat a podporovat výuku a studium webů a především CSS. Pro začátek si prohlédněte některé z existujících návrhů v seznamu. Kliknutím na kterýkoli z nich se načte stylový list do této stránky. HTML zůstává vždy stejné, jediná věc, která se změnila, je externí CSS soubor. Ano, opravdu. CSS umožňuje úplnou a absolutní kontrolu nad stylem hypertextového dokumentu. Jediný způsob, jak to lze ilustrovat tak, aby lidé byli nadšeni, je ukázat, co všechno skutečně dokáže. Převzměte do rukou otěže, a staňte se těmi kdo jsou schopni vytvářet krásu ze struktury. Naším zaměřením je silný vizuální design jehož hranice lze vždy posouvat dál.</p>
<h3>Jak na to?</h3>
<p>CSS můžete libovolně upravovat, ale ne HTML. Pokud jste dosud nikdy nepracovali tímto způsobem, může se to zpočátku jevit obtížné, ale v zájmu dobré praxe je vhodné tvořit CSS design, který je šitý na HTML dokument, ten může být totiž dynamicky generovaný nebo CSS může být aplikovatelné pro více stránek.</p>
<p>Toto je výukové cvičení a zároveň demonstrace.</p>
2 years ago
</article>
<!-- Postraní informace -->
<aside>
</aside>
</section>
<!-- Podpůrné informace -->
<section class="support">
</section>
<!-- Zápatí webu -->
<footer>
<h4>Ve spolupráci s:</h4>
2 years ago
<nav>
<ul>
<li><a href="https://www.microlab.space">microlab</a></li>
<li><a href="https://www.gjk.cz"">Gymnázium Jana Keplera</a></li>
<li><a href="https://www.it.pedf.cuni.cz">Katedra informačních technologií a Technické výchovy</a></li>
<li><a href="">I Zde můžete být vaše jméno</a></li>
2 years ago
</ul>
</nav>
2 years ago
<p>Igor Vujovič &amp; Fili Projekt</p>
<p>UK PedF KITTV, Praha 2023</p>
2 years ago
</footer>
</div>
<!-- Extra elementy pro stylování-->
<div class="extra1"></div>
<div class="extra2"></div>
<div class="extra3"></div>
<div class="extra4"></div>
<div class="extra5"></div>
<div class="extra6"></div>
</body>
</html>