Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE HTML> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <meta name="description" content="programátor Hnyk." /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="keywords" content="Atmel, programování procesorů, Fatek, program Fatek, aplikační program PLC, programování C, programátor, programování, elektronika, PLC, HMI" /> <title>HNYK.CZ </title> <link rel="stylesheet" href="o_firme.css" type="text/css" /> </head> <body> <header class="header"> <div class="logo"> </div> <div class="cinnosti"> <div class="cinnost"><h1>ELEKTRONIKA</h1> </div> <div class="cinnost"><h1>AUTOMATIZACE</h1> </div> <div class="cinnost"><h1>PROGRAMOVÁNÍ</h1> </div> </div> </header> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"> <span class="navicon"> </span> </label> <ul class="menu"> <li> <a href="index.html">Nabídka</a> </li> <li> <a href="priklady_realizaci.html">Příklady realizací</a> </li> <li> <a href="o_firme.html"class="aktivni">O firmě HNYK</a> </li> <li> <a href="kontakt.html">Kontakt</a> </li> </ul> <article> <header> <h2> <p>Historie firmy </p></h2> </header> <section> <p> V roce 1998, zprvu jako firma zabývající se opravami elektronických a elektrických zařízení vozidel. Jako reakce na požadavky zákazníků byla činnost firmy rozšířena na montáže elektronických zabezpečovacích systémů vozidel, později i objektů. Souběžně firma působila jako autorizovaný servis nezávislých topení Ateso. Přibývalo zákazníků, zejména majitelů a řidičů nákladních vozidel. V té době se ale začalo rozvíjet působení v dalším oboru, průmyslové automatizaci. </p> </section> </article> <article> <header> <h2> <p>Firma v současnosti </p></h2> </header> <section> <p> Protože již nebylo možné z kapacitních důvodů plnit požadavky zákazníků ve všech zmíněných oborech, docházelo postupně k utlumování jednotlivých aktivit a kolem roku 2008 se firma vyprofilovala do nynějšího stavu, kdy se specializuje pouze na automatizaci v průmyslu, elektroniku a programování. </p> </section> </article> <article> <header> <h2> <p> </p></h2> </header> <section> <p> Hlavní složkou činnosti firmy je řešení atypických konstrukcí, ale v současnosti se zabývá i sériovou výrobou strojů na zpracování vlnité lepenky. </p> </section> </article> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
h1 { margin: 0px; font-size: 14px; } .header { border-bottom: thick solid rgb(0,147,234); background: blue; height: 70px; } article { margin-left: 10px; margin-right: 10px; clear: both; } article header { text-align: center; } article section { text-align: justify; font-size: 18px; } li a { /*barva pisma menu*/ text-align: center; display: block; padding-top: 10px; // border-right: 1px solid #f4f4f4; text-decoration: none; font-size: 20px; color: rgb(0,0,0); background: gray; } .aktivni { color: white; } li a:hover { /*barva pri najeti*/ color: white; } .header .logo { background: url('obr/logo/logo4.jpg') no-repeat; width: 155px; height: 70px; float: left; //margin: 10px; } ul { list-style: none; overflow: hidden; background-color: rgb(0,147,234); /*barva pozadi menu*/ } .header .cinnost { //margin-right: 10px; //text-align: right; // float: left; background: green; } .header .cinnosti { position: relative; top: 15px; margin-right: 10px; text-align: right; float: right; width: 150px; } .menu { float: right; // clear: both; width: 200px; max-height: 0; transition: max-height .2s ease-out; /*rychlost rozbaleni*/ } .menu-icon { /*zobrazeni icony*/ // cursor: pointer; display: inline-block; float: right; padding: 16px 20px; //position: absolute; //top: 92px; //right: 8px; user-select: none; background-color: rgb(0,147,234); } /*prostredni carka*/ .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } /* krajni dve carky*/ .menu-icon .navicon:before, .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; /*rychost zmeny symbolu*/ width: 100%; } .menu-icon .navicon:before { top: 5px; } .menu-icon .navicon:after { top: -5px; } /*Now we can add the icon and menu animations when the checkbox is clicked:*/ .menu-btn { display: none; } .menu-btn:checked ~ .menu { max-height: 240px; } .menu-btn:checked ~ .menu-icon .navicon { background: transparent; /*nezobrazeni prostředni čarky*/ } .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>