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">
</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>
<div id="sidebar">Ahoj</div>
<div id="nadpis">Nadpis</div>
<div id="obsah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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: 100%;
    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;
}

@media (min-width: 600px) {

#menu {
    	margin-left: 190px;
    	margin-right: 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;
	background: white;
	padding: 10px;
	margin-left: 190px;
	margin-right: 320px;
	}

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

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

}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS