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"> <title>MineGame.cz</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="../maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script src="js/modernizr.js"></script> </head> <body> <div class="box"> <div class="hornimenu"><span style="position:absolute; right:80px;"><a href="http://www.facebook.cz"><img src="img/fb.png"></a></span><span style="position:absolute; right:130px; top:3px"> <a href="ts3"><img src="img/ts3-icon.png" width="25" height="25"></a></span></div> <!-- Logo --> <div class="logo"><a href="index.html"><img src="img/logo.jpg" width="500"></a></div> <!-- Menu --> <div id='menu'> <ul> <li class="active"><a href='o-serveru.html'><span>O Serveru</span></a></li> <li><a href='vip.html'><span>VIP</span></a></li> <li><a href='jak-se-pripojit.html'><span>Jak se připojit</span></a></li> <li><a href='admin-team.html'><span>Admin Team</span></a></li> <li><a href='partneri.html'><span>Partneři</span></a></li> <li><a href='hlasovani.html'><span>Hlasování</span></a></li> <li><a href='banlist'><span>BanList</span></a></li> <li class='last'><a href='ke-stazeni.html'><span>Ke stažení</span></a></li> </ul> </div> <article> <div class="blog"> <h3><span style="font-family: minecraft_font; text-align:center; "> Novy web</span></h3> <div class="cara"></div> <p>Oficiálně vám představuju nový web pro projekt MineGame.cz</p> </div> </article> <article> <div class="blog"> <h3><span style="font-family: minecraft_font; text-align:center; "> Novy dsdsdsdweb</span></h3> <div class="cara"></div> <p>Oficiálně vám představuju nový web pro projekt MdsdsdsdsineGame.cz</p> </div> </article> </div> <!-- Scripty --> <script src="js/jquery-2.1.4.js"></script> <script src="js/main.js"></script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@font-face { font-family: 'minecraft_font'; src: url('../fonts/minecraft_font_by_pwnage_block-d37t6nb.ttf'); } @font-face { font-family: 'minecraft_font1'; src: url('../fonts/Minecrafter.Reg.ttf'); } /*Menu*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:700); #menu { background: #f96e5b; width: auto; position: absolute; top: 90px; right: 170px; border-top-left-radius: 15px ; border-top-right-radius: 15px ; } #menu ul { list-style: none; margin: 0; padding: 0; line-height: 1; display: block; zoom: 1; } #menu ul:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #menu ul li { display: inline-block; padding: 0; margin: 0; } #menu.align-right ul li { float: right; } #menu.align-center ul { text-align: center; } #menu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #menu ul li a:hover { color: #333333; } #menu ul li a:hover:before { width: 100%; } #menu ul li a:after { content: ""; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } #menu ul li a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #333333; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #menu ul li.last > a:after, #menu ul li:last-child > a:after { display: none; } #menu ul li.active a { color: #333333; } #menu ul li.active a:before { width: 100%; } #menu.align-right li.last > a:after, #menu.align-right li:last-child > a:after { display: block; } #menu.align-right li:first-child a:after { display: none; } @media screen and (max-width: 768px) { #menu ul li { float: none; display: block; } #menu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #fb998c; border-radius: 10px } #menu ul li.last > a, #menu ul li:last-child > a { border: 0; } #menu ul li a:after { display: none; } #menu ul li a:before { display: none; } } /*-Menu-*/ /*IMG*/ .logo { position: absolute; left: 450px } /*-IMG-*/ /*Back to TOP*/ /* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { color: #e86256; text-decoration: none; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { width: 90%; max-width: 768px; margin: 2em auto; } .cd-container::after { /* clearfix */ content: ''; display: table; clear: both; } /* -------------------------------- Main components -------------------------------- */ header { background: #5c4751; height: 100px; text-align: center; } header h1 { font-size: 20px; font-size: 1.25rem; font-weight: bold; font-family: "Open Sans", sans-serif; text-transform: uppercase; font-weight: bold; padding-top: 1.6em; margin-bottom: .2em; } header p { font-size: 13px; font-size: 0.8125rem; color: #957484; } @media only screen and (min-width: 1024px) { header { height: 200px; } header h1 { font-size: 30px; font-size: 1.875rem; padding-top: 2.6em; } } main p { font-size: 16px; font-size: 1rem; line-height: 1.6; margin: 2em 0; } @media only screen and (min-width: 1024px) { main p { font-size: 20px; font-size: 1.25rem; } } .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } .no-touch .cd-top:hover { background-color: #e86256; opacity: 1; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; } } /*-BCT-*/ / /* * Override Bootstrap's default container. */ @media (min-width: 1200px) { .container { width: 970px; } } /* * Masthead for nav */ .blog { background-color: #fff; height: auto; width: 600px; ; border: 5px solid #e86256 ; } .cara { height: 5px; background-color: #e86256; } h3 { font-family: minecraft_font; text-align: center; } h6 { text-align: center; } p { text-align: center; text-shadow: 1px 1px 0px grey; } .mcicon { padding-left: 25px; height: 128px; width: 128px; position: relative; left: 128px } .mcicon:hover .mcvyber1 { display: block; } .mcvyber1 { background-color: #e86256; height: 100px; width: 150px; display: none; position: absolute; top: -100px; left: 9px; text-align: center; } .mcvyber1 a { color: black } .tsicon { padding-left: 25px; height: 128px; width: 128px; position: absolute; left: 265px; top: 52px } .hicoria { background-color: black; width: 246px; position: relative; left: 170px; opacity: 0.8; } .filterable { margin-top: 15px; } .filterable .panel-heading .pull-right { margin-top: -20px; } .filterable .filters input[disabled] { background-color: transparent; border: none; cursor: auto; box-shadow: none; padding: 0; height: auto; } .filterable .filters input[disabled]::-webkit-input-placeholder { color: #333; } .filterable .filters input[disabled]::-moz-placeholder { color: #333; } .filterable .filters input[disabled]:-ms-input-placeholder { color: #333; } .adminteam { width: 600px } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .form-control { width: 200px; margin-bottom: -8px; margin-top: 8px; } .hornimenu { height: 30px; background: url(http://arcadiamc.eu/img/header-status.png); position: relative; } .clear { clear: both; } .box { width: 500px; margin-left: auto; margin-right: auto; position: relative; }
CSS
Autoformát
CSS reset
Až na konci
function posunreklamu() {
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>