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
119 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<title>CSS Album</title>
|
|
|
|
<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">
|
|
|
|
<link rel="stylesheet" media="screen" href="style.css">
|
|
</head>
|
|
|
|
<!--
|
|
|
|
Tipy Triky a Dobrá praxe pro CSS:
|
|
|
|
- :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
|
|
|
|
-->
|
|
|
|
<body>
|
|
|
|
<!-- Zobrazená část webu -->
|
|
|
|
<div class="page-wrapper">
|
|
|
|
<!-- Intro -->
|
|
|
|
<section class="intro">
|
|
|
|
<header>
|
|
<h1>CSS Album</h1>
|
|
<h2>~Učíme se designovat weby </h2>
|
|
</header>
|
|
|
|
<div class="preamble">
|
|
<h3>~Č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>~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>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Hlavní část -->
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<h3>Proč jsme tady?</h3>
|
|
|
|
<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>
|
|
</article>
|
|
|
|
<!-- Postraní informace -->
|
|
|
|
<aside>
|
|
|
|
</aside>
|
|
|
|
</section>
|
|
|
|
<!-- Podpůrné informace -->
|
|
|
|
<section class="support">
|
|
|
|
</section>
|
|
|
|
<!-- Zápatí webu -->
|
|
|
|
<footer>
|
|
<h4>Ve spolupráci s:</h4>
|
|
|
|
<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>
|
|
</ul>
|
|
</nav>
|
|
|
|
<p>Igor Vujovič & Fili Projekt</p>
|
|
<p>UK PedF KITTV, Praha 2023</p>
|
|
|
|
</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> |