V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
HTML aj CSS kód sem môžeš pridávať pomocou CODE tagov, to je hneď
druhý symbol v editore napravo od smalíkov 
<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>JiraDiesing</title>
</head>
<body>
<header>
<img src="obrazky/jiradiesing.png" title="jiradiesing" alt="logo" /> <!-- 960x300 -->
<nav>
<ul>
<li class="aktivní"><a href="XXXX" title="odkaz na uvod">Úvod</a></li> <!-- aktivní na lepší orientaci v menu, možná i v a? -->
<li><a href="XXXX" title="odkaz na nabidka">Nabídka</a></li>
<li><a href="XXXX" title="odkaz na fotogalerie">Fotogalerie</a></li>
<li><a href="XXXX" title="odkaz na kontakt">Kontakt</a></li>
</ul>
</nav>
<div class="cistic"></div> <!-- ukončily jsme obtékání textu -->
</header>
<article>
<header>
<h1><strong>Truhlářství JíraDiesing Opava</strong></h1>
</header>
<section>
<h2>O firmě</h2>
<p>
Vítám Vás na stránkách <strong>Truhlářství JíraDiesing</strong>. Přicházíte-li s úmyslem <strong>získat kvalitu</strong>, <strong>tradiční zpracování</strong>, dobrou radu, vše za <strong>rozumnou cenu</strong>, jste na tom pravém místě. Do Vašeho bytu, domu, kanceláře nebo chaty vyrobím <strong>vestavěné skříně</strong>,<strong>masivní postele</strong>, <strong>schodiště</strong>, <strong>jídelní a konferenční stoly</strong>, <strong>kuchyňské linky</strong>, <strong>bytový i kancelářský nábytek</strong> na míru z lamina i z masivu. Pro venkovní odpočinek Vám <strong>zhotovím zahradní posezení</strong>, <strong>terasy a pergoly</strong>. Rád se přizpůsobím Vašemu přání a <em>vyrobím nábytek přesně dle Vašich představ</em>.
</p>
</section>
<section>
<h2>Proč vybrat nás?</h2>
<p>
Poskytuji <strong><strong>zdarma</strong> odbornou konzultaci</strong> s prezentací sortimentu, vyměření zakázky na míru, cenovou kalkulací a profesionální pomoc při zprostředkování nákupu spotřebičů a nejmodernějších doplňků na trhu. Veškerý využívaný materiál kupuji a dovážím od rakouských a německých dodavatelů s léty prověřenou kvalitou. Na každý kus vyrobeného nábytku i další sortiment poskytuji <strong>garanci kvality se <strong>záruční dobou</strong></strong>.
</p>
<p>
Přes 23 let se zabývám převážně zakázkovou výrobou nábytku do Vašich domovů s vysokou kvalitou za skvělé ceny. Svých dlouholetých zkušeností z oboru využívám, abych každému pomohl bezstarostně vybavit jeho byt a dům tím nejlepším nábytkem dle jeho přání a snů.
</p>
<p>
V Truhlářství JiraDiesing nalezne každý zákazník kompletní servis od návrhu jednotlivého nábytku, přes vlastní výrobu v nové výrobní hale, až po dopravu, <em>montáž a <em>odvoz starého nábytku</em> na určeném místě</em>. Vše v předem domluveném termínu. Spokojený zákazník je mým základním krédem, kterým se řídím celých 23 let a nehodlám jej opustit ani nyní. Vyzkoušejte sortiment a servis Truhlářství JiraDiesing a ověřte si, že to nejsou jen prázdná slova.
</p>
<p>
Nabízím Vám skutečně to, co si objednáte, <strong>za předem <strong>stanovenou cenu</strong></strong> v dohodnutém čase. Kvalitně odvedená práce je mou reklamou.
</p>
</section>
<section>
<h2>Kontaktní informace</h2>
<p>
Patrik Jíra<br />
Antonína Sovy 1519/43<br />
747 05, Opava<br />
Česká republika <br />
IČO: 15258563
</p>
</section>
<section>
<h2>Kde se na nás podívat?</h2>
<p>
<a href="https://www.youtube.com/" rel="external"><img src="obrazky/youtube.png" title="ikona youtube" alt="ikona youtube" width="50" /></a><a href="https://plus.google.com/?hl=cs" rel="external"><img src="obrazky/google.png" title="ikona google plus" alt="ikona google plus" width="50" /></a><a href="https://cs-cz.facebook.com/" rel="external"><img src="obrazky/facebook.png" title="ikona facebook" alt="ikona facebook" width="50" /></a>
</p>
</section>
</article>
<aside>
<a href="https://www.youtube.com/" rel="external"><img src="obrazky/youtube.png" title="ikona youtube" alt="ikona youtube" width="50" /></a><a href="https://plus.google.com/?hl=cs" rel="external"><img src="obrazky/google.png" title="ikona google plus" alt="ikona google plus" width="50" /></a><a href="https://cs-cz.facebook.com/" rel="external"><img src="obrazky/facebook.png" title="ikona facebook" alt="ikona facebook" width="50" /></a>
</aside>
<footer>
<p><small>Vytvořil ©Patrik Jíra</small></p>
<address>[email protected], 773 505 855</address>
</footer>
</body>
</html>/* CSS Document */
.cistic{ /* ukončí obtékaní */
clear: both;
}
/* tělo */
body{
width: 960px; /* šířka */
margin: 0px auto; /* centrování do prostřed a nahoru */
/* pozadí těla, hnědá světlá */
background: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#752201+0,f0b7a1+17,f0b7a1+17,f0b7a1+19,bf6e4e+79,bf6e4e+79,bf6e4e+85,bf6e4e+85,bf6e4e+85,8c3310+100 */
background: rgb(117,34,1); /* Old browsers */
background: -moz-linear-gradient(top, rgba(117,34,1,1) 0%, rgba(240,183,161,1) 17%, rgba(240,183,161,1) 17%, rgba(240,183,161,1) 19%, rgba(191,110,78,1) 79%, rgba(191,110,78,1) 79%, rgba(191,110,78,1) 85%, rgba(191,110,78,1) 85%, rgba(191,110,78,1) 85%, rgba(140,51,16,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(117,34,1,1) 0%,rgba(240,183,161,1) 17%,rgba(240,183,161,1) 17%,rgba(240,183,161,1) 19%,rgba(191,110,78,1) 79%,rgba(191,110,78,1) 79%,rgba(191,110,78,1) 85%,rgba(191,110,78,1) 85%,rgba(191,110,78,1) 85%,rgba(140,51,16,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(117,34,1,1) 0%,rgba(240,183,161,1) 17%,rgba(240,183,161,1) 17%,rgba(240,183,161,1) 19%,rgba(191,110,78,1) 79%,rgba(191,110,78,1) 79%,rgba(191,110,78,1) 85%,rgba(191,110,78,1) 85%,rgba(191,110,78,1) 85%,rgba(140,51,16,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#752201', endColorstr='#8c3310',GradientType=0 ); /* IE6-9 */
/* konec pozadí těla, hnědá světlá */
}
/* konec těla */
/* navigace */
nav ul li{
float: left;
list-style-type: none;
border: 1px solid white; /* nastavení rámu */
background: red;
padding: 20px 92px;
margin-top: -22px; /* pozite navikace k obrzku nahoru */
}
nav ul{
width: 960px;
margin-left: -39px; /* zarovnání navigace na levý roh obrázku */
}
Zobrazeno 4 zpráv z 4.