StyleWeb – živá ukázka

Výsledek

<!DOCTYPE html>
<html>
<head>
    <title>StyleWeb</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="apple-touch-icon" sizes="57x57" href="favicons/images/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="favicons/images/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="favicons/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="favicons/images/apple-touch-icon-76x76.png">
    <link rel="icon" type="image/png" href="favicons/images/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="favicons/images/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="favicons/images/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="favicons/images/manifest.json">
    <link rel="mask-icon" href="favicons/images/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
<div id="header"><img src="https://www.stylecraft.cz/loga/sc_new.png"></div>
<div id="menu">
    <ul>
        <li><a href="#1" class="active">O serveru</a></li>
        <li><a href="#2">Návody</a></li>
        <li><a href="#3">Obchod</a></li>
        <li><a href="#4">Kontakt</a></li>
        <li><a href="#5">Banlist</a></a></li>
        <li><a href="#6">Nábor</a></li>
        <li><a href="http://servery.stylecraft.cz">Hráčské servery</a></li>
    </ul>
</div><br>

<div id="nadpis">StyleNews 24 [leden 2016]<div id="datum"><p>29.2.2016</p></div></div>

<div id="obsah"><p><iframe width="560" height="315" src="https://www.youtube.com/embed/CDinwRI7mhE" frameborder="0" allowfullscreen></iframe><br />
Přihlašte kanálu TheGotak odběr, ať další StyleNews a podobná videa vidíte jako první! <img src="https://www.stylecraft.cz/wp-includes/images/smilies/simple-smile.png" alt=":)" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <a href="https://www.youtube.com/channel/UC-N0va2a09q3BXBy6iJqI9Q?sub_confirmation=1">KLIKNĚTE ZDE</a>. Děkuji. <img src="https://www.stylecraft.cz/wp-includes/images/smilies/simple-smile.png" alt=":)" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p></div>
<div id="sidebar">dsdsd</div>
</body>
</html>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

/*
Theme Name: StyleWeb
Theme URI: http://rksoftwares/styleweb
Description: Šablona je speciálně vytvořená pro StyleSection s.r.o. a bez jejího svolení není dovoleno šablonu kopírovat nebo napodobovat. Šablona podporuje mobilní verzi a je vyvíjena v nejnovějších programovacích jazycích. Šablona byl vytvořena v roce 2016.
Author: Jakub Rychlý
Version: 1.0
License: #
License URI: #
*/

@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

body {
	background: url(images/pozadi.jpg);
	background-attachment: fixed;
	font-family: Calibri;
}

#header {
	text-align: center;
	margin-bottom: 1px;
}

#menu {
    display: block;
    width: 970px;
    margin: auto;
    background: #333333;
    font-size: 0;
}

#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    width: 100%;
}

#menu a {
    display: block;
    padding: 0 15px;
    color: white;
    line-height: 2em;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 16px;
}

#menu a:hover {
    background: #272727;
}

#obsah {
    float: left;
    color: black;
    background: white;
    padding: 10px;
    margin-left: 190px;
    margin-right: 450px;
}

@media (min-width: 600px) {

#menu {
        margin-right: 190px;
    	margin-left: 190px;
        background: #333333;
        border-radius: 10px;

}
	
	#menu ul li {
        width: auto;
        display: inline-block;
    }

#menu a {
        line-height: 48px;
        position: relative;
    }

#menu a:hover::after {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #272727;
        bottom: 0;
        left: 0;
        position: absolute;
    }

#obsah {
    float: left;
    color: black;
	background: white;
	padding: 10px;
	margin-left: 190px;
	width: 660px;
    }

#sidebar {
    float: right;
    background: #43AC6A;
    padding: 10px;
    margin-right: 190px;
    }

#nadpis {
    color: white;
    background: #43AC6A;
    float: left;
    width: 666px;
    padding: 7px;
    margin-left: 190px;
    font-size: 23px;
	}

#datum {
    font-size: 9px;
    width: 760px;
    }

}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS