Saved!

HTML5 Template - l4MkTHUD

HTML5 Template <header> <section> <aside> <article> <footer>

HTML5 Template header section aside article footer

  
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" >
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Oswald|Rock+Salt|Open+Sans|Quicksand|Orbitron|Comfortaa|Russo+One|Audiowide|Michroma|Contrail+One|Gruppo' rel='stylesheet' type='text/css'>
<header id="header">
	<ul>
		<li>
		
		                      <div class="logo">
                                <div class="logo1">
                                    <div class="c1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c4"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c5"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c6"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                </div>
                                <div class="logo2">
                                    <div class="c7"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c8"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c9"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c10"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c11"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                    <div class="c12"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                </div>
                                <div class="name">
                                    <h1>mjuzaload</h1>
                                    <h2>glazbena televizija</h2>
                                </div>
                            </div>  
		
		</li>
		<li><img src="http://localhost/test/ads/sve_468x60.png"></li>
	</ul>	
</header>

<section class="wrapper" id="wrapper">

                  <div id="video-wrapper">
					<div id="clocking"></div>
                    <div id="video">
                        <div class="video-info in">
                            <span><h2>Jasmin Stavros & Učiteljice - Nema natrag</h2></span>
                            <span><h2>2014</h2></span>
                        </div>
                        <div id='mediaplayer'>	
							<iframe src="http://www.youtube.com/embed/vLvNympX-7E?wmode=opaque&autoplay=0&controls=0&fs=0&rel=0&showinfo=0&disablekb=1" frameborder="0"></iframe>
						</div>
                            <div class="vol">
                                Volume:
                                <a href="javascript:void(0);" onclick="mute()"><span id="mute"><span class="ctrl off">mute</span></span></a>
                                <input id="slider" type="range" class="bigslider-in" min="0" max="100" step="1" value="0"/>
                                <span id="volume"></span>
                                <span id="posx"></span>
                                <span id="durx"></span>
                            </div>

	
	
	                            <div class="recent_news" style="padding:20px;display:block;float:none;">
                                <h4 class="widget_heading">Upravo gledaš</h4>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/BdDwgJqDsck/jasmin-stavros-uciteljice-nema-natrag_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/BdDwgJqDsck/hqdefault.jpg" alt="News3">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title">Jasmin Stavros & Učiteljice - Nema natrag</h2>
                                            <div class="entry-content">
                                                UČITELJICE - KONTAKT ZA NASTUPE : HR +385 (0) 91 507 45 81 HR +385 (0) 97 6386384 +381 63 386 383 SLO +386 (0) 70 579 579 Glazba i tekst - Dušan Bačić Aranžm...<br>
                                                <a href="http://www.youtube.com/watch?v=BdDwgJqDsck" target="_blank"><img src="http://i.imgur.com/OIo095Q.png"> Video Izvor</a><br>
                                                Youtube Kanal: <a href="https://www.youtube.com/channel/UC-3_K7CTKsgFRWOp0UtCJsQ" target="_blank">UciteljiceOfficial</a><br>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                          </div>
	
					  
	<section class="nav" id="primary-navigation">
		<nav>
			<ul>
				<li><a href="#primary-navigation" onclick="content('dogadanja','0')">Događanja</a></li>
                <li><a href="#primary-navigation" onclick="content('novosti','0')">Novosti</a></li>
                <li><a href="#primary-navigation" onclick="content('program','0')">Program</a></li>
                <li><a href="#primary-navigation" onclick="content('playlista','0')">Playlista</a></li>
                <li><a href="#primary-navigation" onclick="content('kontakt','0')">Kontakt</a></li>
			</ul>
			<ul class="right">
				<a href="#primary-navigation"><li class="fb"><i class="fa fa-facebook"></i></li></a>
                <li class="tw"><a href="#primary-navigation"><i class="fa fa-twitter"></i></a></li>
                <li class="yt"><a href="#primary-navigation"><i class="fa fa-youtube"></i></a></li>
                <li class="gp"><a href="#primary-navigation"><i class="fa fa-google-plus"></i></a></li>
			</ul>
		</nav>
	</section>
	
	<section class="recent_news">
	                
		
		<h4 class="widget_heading">Recent News</h4>
		
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="http://igg.me/at/mjuzaload" target="_blank">
                                            <img class="dark_shadow" src="http://www.lockmail.de/img/indiegogo.gif" alt="indiegogo">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title">Pomozite</h2>
                                            <div class="entry-content">

                                                Pomozite. Mi mislimo da je mjuzaload zaslužio mjesto na Hrvatsko nacijonalnoj televiziji. Ali za to trebamo sredstva. Pomozite sa jednom malom donacijom.
                                                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
                                                <input type="hidden" name="cmd" value="_s-xclick">
                                                <input type="hidden" name="hosted_button_id" value="9PF36P6JN7KBL">
                                                <input type="image" style="float:left;" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                                </form>  
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/f2YTlJLacHY/mina-kostic-nisam-ti-ja-mama-official-video-artwork-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/f2YTlJLacHY/hqdefault.jpg" alt="Mina Kostic - Nisam ti ja mama [OFFICIAL VIDEO ARTWORK]">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/f2YTlJLacHY/mina-kostic-nisam-ti-ja-mama-official-video-artwork-_download">Mina Kostic - Nisam ti ja mama [OFFICIAL VIDEO ARTWORK]</a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCKtQc0hv5MtyxMwq76uPmaA" target="_blank">vedadjasa</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Muzika, tekst, aranzman, producent: Goran Ratkovic Rale</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/f2YTlJLacHY/mina-kostic-nisam-ti-ja-mama-official-video-artwork-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/FLSn1xTJk3U/connect-ljubi-me-budalo-3jumf-official-video-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/FLSn1xTJk3U/hqdefault.jpg" alt="CONNECT - LJUBI ME BUDALO (3JUMF) /official video/">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/FLSn1xTJk3U/connect-ljubi-me-budalo-3jumf-official-video-_download">CONNECT - LJUBI ME BUDALO (3JUMF) /official video/</a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCqwr2CBNERo_uAYuoKx95SA" target="_blank">grupaconnect</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Grupa Connect / Menart Label / Album: 3JUMF Booking kontakt +385922924344 Video Directed and Edited by Ivan Dražić Camera - Ivan Dražić, Danijel Tipura Light...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/FLSn1xTJk3U/connect-ljubi-me-budalo-3jumf-official-video-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/bzfNSXb4Pic/djogani-snovi-od-cokolade-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/bzfNSXb4Pic/hqdefault.jpg" alt="DJOGANI - SNOVI OD COKOLADE ">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/bzfNSXb4Pic/djogani-snovi-od-cokolade-_download">DJOGANI - SNOVI OD COKOLADE </a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCcF7lkZqxzI2asePTbksVdA" target="_blank">IdentityDjoloVideos</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Label and copyright: IDJTunes™ Digital distribution: http://www.idjdigital.com Subscribe to IDJVideos.TV: http://bit.ly/197CiFW Buy It On: iTunes: Coming soo...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/bzfNSXb4Pic/djogani-snovi-od-cokolade-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/TAqAFSKqw0k/shomy-i-vuki-ludo-volim-te-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/TAqAFSKqw0k/hqdefault.jpg" alt="SHOMY I VUKI - LUDO VOLIM TE ">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/TAqAFSKqw0k/shomy-i-vuki-ludo-volim-te-_download">SHOMY I VUKI - LUDO VOLIM TE </a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCm3VSb_0u6LOX38LTnOdttg" target="_blank">Crorec</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>© 2014 CROATIA RECORDS Popularni osječki dvojac Shomy i Vuki, vlasnici jednog od najvećih prošlogodišnjih ljetnih hitova &quot;Mi amore&quot;, danas objavljuju novi si...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/TAqAFSKqw0k/shomy-i-vuki-ludo-volim-te-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/06sRF-fCVZY/marko-vanilla-feat-sandra-afrika-300-cuda-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/06sRF-fCVZY/hqdefault.jpg" alt="MARKO VANILLA feat. SANDRA AFRIKA - 300 CUDA ">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/06sRF-fCVZY/marko-vanilla-feat-sandra-afrika-300-cuda-_download">MARKO VANILLA feat. SANDRA AFRIKA - 300 CUDA </a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCcF7lkZqxzI2asePTbksVdA" target="_blank">IdentityDjoloVideos</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Label and copyright: IDJVideos™ / IDJTunes™ Digital distribution: http://www.idjtunes.tv Subscribe to IDJVideos.TV: http://bit.ly/197CiFW Follow Marko Vanill...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/06sRF-fCVZY/marko-vanilla-feat-sandra-afrika-300-cuda-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/b9k889LgJp0/elitni-odredi-ne-koci-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/b9k889LgJp0/hqdefault.jpg" alt="ELITNI ODREDI - NE KOCI ">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/b9k889LgJp0/elitni-odredi-ne-koci-_download">ELITNI ODREDI - NE KOCI </a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCcF7lkZqxzI2asePTbksVdA" target="_blank">IdentityDjoloVideos</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Subscribe to IDJVideos.TV: http://bit.ly/197CiFW Subscribe to IDJTunes™: http://bit.ly/15ivJey Follow us: http://www.facebook.com/idjvideos http://www.facebo...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/b9k889LgJp0/elitni-odredi-ne-koci-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/ig8IjgTtaS4/viki-miljkovic-ono-nesto-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/ig8IjgTtaS4/hqdefault.jpg" alt="VIKI MILJKOVIC - ONO NESTO ">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/ig8IjgTtaS4/viki-miljkovic-ono-nesto-_download">VIKI MILJKOVIC - ONO NESTO </a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCcF7lkZqxzI2asePTbksVdA" target="_blank">IdentityDjoloVideos</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Label and copyright: IDJTunes™ Digital distribution: http://www.idjdigital.com Subscribe to IDJVideos.TV: http://goo.gl/ApKmqJ Viki Facebook: http://goo.gl/g...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/ig8IjgTtaS4/viki-miljkovic-ono-nesto-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/LawoCMq3p5Q/jelena-rozga-odo-39-ja-soundtrack-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/LawoCMq3p5Q/hqdefault.jpg" alt="JELENA ROZGA - ODO&#39; JA (SOUNDTRACK)">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/LawoCMq3p5Q/jelena-rozga-odo-39-ja-soundtrack-_download">JELENA ROZGA - ODO&#39; JA (SOUNDTRACK)</a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCqQ8dna-4vF7I7FRqD5bGEw" target="_blank">JelenaRozgaFanClub</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Premijera pjesme &quot;ODO&#39; JA&quot; - soundtrack serije &quot;Kud puklo, da puklo&quot;! Glazba: Tonči Huljić Tekst: Vjekoslava Huljić Aranžman: Fedor Boić Redatelj: Goran Ruka...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/LawoCMq3p5Q/jelena-rozga-odo-39-ja-soundtrack-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/aoJPvx2Lr2k/seka-aleksic-ti-se-hrani-mojim-bolom-audio-2015-hd_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/aoJPvx2Lr2k/hqdefault.jpg" alt="SEKA ALEKSIC - TI SE HRANI MOJIM BOLOM - (AUDIO 2015) HD">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/aoJPvx2Lr2k/seka-aleksic-ti-se-hrani-mojim-bolom-audio-2015-hd_download">SEKA ALEKSIC - TI SE HRANI MOJIM BOLOM - (AUDIO 2015) HD</a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCxEMA4apFhleO3ONQTowMvQ" target="_blank">SekaAleksicTV</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>Label &amp; Copyright © Seka Aleksić http://goo.gl/5TwmLE / Seka Aleksić @ Facebook http://goo.gl/X9SQ2o / Seka Aleksić @ Twitter http://goo.gl/duzcWW / Seka Ale...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/aoJPvx2Lr2k/seka-aleksic-ti-se-hrani-mojim-bolom-audio-2015-hd_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                                <article class="post clearfix">
                                    <div class="entry-thumb">
                                        <a href="/sfEqEQuRf1Q/ivan-zak-dugujes-mi-ljeto-official-video-_download">
                                            <img class="dark_shadow" src="https://i.ytimg.com/vi/sfEqEQuRf1Q/hqdefault.jpg" alt="Ivan Zak - Duguješ mi ljeto (Official video)">
                                        </a>
                                    </div>
                                    <div class="entry-detail">
                                        <div class="entry-header">
                                            <h2 class="entry-title"><a href="/sfEqEQuRf1Q/ivan-zak-dugujes-mi-ljeto-official-video-_download">Ivan Zak - Duguješ mi ljeto (Official video)</a></h2>
                                            <div class="entry-meta">
                                                <span class="posted-on"><a href="https://www.youtube.com/channel/UCqAbv1vDTwfGZ6Xzca2RTSw" target="_blank">IvanZakSluzbenikanal</a></span>
                                                <span class="comments-link">
                                                    <span class="sep">/</span>
                                                    <a href="#">više</a>
                                                </span>
                                            </div>
                                            <div class="entry-content">
                                                <p>https://www.facebook.com/Ivan.Volaric.Zak Molimo ne kopirati videospot i pjesmu. U protivnom, svaku neovlaštenu kopiju bit ćemo primorani ukloniti. Aranžman ...</p>
                                            </div>
                                            <div class="entry-more">
                                                <a href="/sfEqEQuRf1Q/ivan-zak-dugujes-mi-ljeto-official-video-_download" class="ui button">Više</a>
                                            </div>
                                        </div>
                                    </div>
                                </article>

	</section>

	<aside>
		<h2>About section</h2>
		<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</aside>

	
	
	
	<footer>
	<div>
		<h2>About section</h2>
		<span>Donec eu libero sit </span>

		<a href="#" class="button fb"><i class="fa fa-facebook"></i> facebook</a><br>

	</div>
	<div>
		<h2>About section</h2>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
	</div>
	<div>
		<h2>About section</h2>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
	</div>
	<div>
		<h2>About section</h2>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
		<span>Donec eu libero sit </span>
	</div>
		
		
		
		<span class="left">Copyright <i class="fa fa-copyright"></i> 2015 Your name</span>
		<span class="right">Made with <i class="fa fa-heart"></i> by Studio Klik</span>
	</footer> 

	        <a id="backtoplayer" class="button" href="#wrapper">TV</a>
            <a id="backtotop" class="button" href="#header">Top</a>


</section>
  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js