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="cinnost"><h1>ELEKTRONIKA</h1> </div> <div class="cinnost"><h1>AUTOMATIZACE</h1> </div> <div class="cinnost"><h1>PROGRAMOVÁNÍ</h1> </div> <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> </header> <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í
/* https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99 */ /*First you will need to create a list containing the main navigation items. Then add an checkbox input/label element. This will become our main navigation button using a span as the ? menu icon */ /*We then need to add css to fix the header to the top of the page, reset list styling and hide the dropdown menu as the default state:*/ /*pocatky nastylovani rozbalovaciho menu*/ h1 { margin: 0px; font-size: 16px; } .header { z-index: 3; // height: 85px; border-bottom: thick solid rgb(0,147,234); } article { // position: relative; // top: 50px; margin-left: 10px; margin-right: 10px; } article header { text-align: center; } article section { text-align: justify; font-size: 18px; } .header li a { /*barva pisma menu*/ display: block; padding: 10px 10px; border-right: 1px solid #f4f4f4; text-decoration: none; font-size: 20px; color: rgb(0,0,0); } .header li .aktivni { background-color: rgb(0, 147, 234); color: white; } .cara { // position: relative; // top: 25px; } .header li a:hover { /*barva pri najeti*/ //background-color: rgb(20,67,255); color: white; } .header .logo { // position: absolute; // top: 0px; left: 20px; z-index: 2; background: url('obr/logo/logo4.jpg') no-repeat; width: 155px; height: 100px; // margin-top: 15px; } .header ul { margin: 0; padding: 0; list-style: none; overflow: hidden; background-color: rgb(0,147,234); /*barva pozadi menu*/ } .header .cinnost { // position: relative; // top: 15px; margin-right: 10px; z-index: 1; text-align: right; } .header .menu { // position: absolute; // top: 92px; right: 60px; clear: both; max-height: 0; transition: max-height .2s ease-out; z-index: 3; /*rychlost rozbaleni*/ } /*Next we need to style the menu icon for the dropdown. I’ve decided to use span elements to create the icon, rather than an svg of icons font. Using css here allows us to have a fancy animation whenever some clicks the icon:*/ .header .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*/ .header .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px; } /* krajni dve carky*/ .header .menu-icon .navicon:before, .header .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; /*rychost zmeny symbolu*/ width: 100%; } .header .menu-icon .navicon:before { top: 5px; } .header .menu-icon .navicon:after { top: -5px; } /*Now we can add the icon and menu animations when the checkbox is clicked:*/ .header .menu-btn { display: none; } .header .menu-btn:checked ~ .menu { max-height: 240px; } .header .menu-btn:checked ~ .menu-icon .navicon { background: transparent; /*nezobrazeni prostředni čarky*/ } .header .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } .header .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } /*od tohoto mista je reseno velke zobrazeniLastly we need to add responsive css to show the horizontal menu items for larger browser widths by default:*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ @media (min-width: 48em) { h1 { font-size: 24px; } .header { // margin-top: 15px; margin-left: auto; margin-right: auto; max-width: 1000px; // height: 100px; } body { border: solid; border-color: rgb(0,147,234); // height: 580px; border-radius: 8px; //border-top: none; margin-left: auto; margin-right: auto; max-width: 1000px; } .cara { border: thick solid rgb(0,147,234); // position: relative; // top: -70px; } article { // position: relative; // top: 100px; margin-left: 30px; margin-right: 30px; } article header { margin-left: 30px; text-align: left; } article section { text-align: justify; font-size: 15px; } .header li { float: left; } .header li a { // padding: 10px 30px; font-weight: bold; font-size: 16px; } .header .menu { clear: none; float: right; max-height: none; right: 10px; } .header .menu-icon { display: none; } .header .cinnost { // position: relative; // top: -80px; margin-right: 20px; z-index: 1; text-align: right; } .header .logo { // position: relative; z-index: 2; background: url('obr/logo/logo3.jpg') no-repeat; width: 155px; height: 100px; // margin-top: 5px; // margin-left: 10px; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>