Skip to content

Instantly share code, notes, and snippets.

@onzze

onzze/gist:4513917

Last active December 11, 2015 00:08
Show Gist options
  • Save onzze/4513917 to your computer and use it in GitHub Desktop.
Save onzze/4513917 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>Onzze.</title>
<meta name="description" content="{description}">
<link rel="shortcut icon" href="{Favicon}">
<meta name="keywords" content="Blog Musical,Onzze,Musique,Jean Reynaud">
<meta name="author" content="Jean Reynaud">
<META NAME="Abstract" CONTENT="Onzze, le blog musical à suivre.">
<META NAME="Designer" CONTENT="Jean Reynaud">
<meta name="text:Bonus Symbol" content=""/>
<meta name="text:Bonus Link" content=""/>
<meta charset="UTF-8"></head>
<script type="text/javascript" src="http://www.queness.com/resources/html/scroll/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.queness.com/resources/html/scroll/js/jquery.scrollTo.js"></script>
<!--
Onzze - 2012-2013 - powered by Tumblr
[email protected]
-->
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_height = height * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_height);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: width, height: mask_height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<link href='http://fonts.googleapis.com/css?family=Cabin:600, 600italic' rel='stylesheet' type='text/css'>
<style>
body {
font-family:"Cabin";
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#player{overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px}
#VIDEO a { bottom:20px;
font-size:20px;
left:40px;
color:#ffffff;
position:fixed;
z-index:1500 !important;
letter-spacing:2px;
text-decoration:none;
border-bottom:3px solid #fff;
}
#VIDEO a:hover {
border-bottom:3px solid #646EFF;
}
#bonus a{position:absolute;
font-family:"Cabin";
font-size:30px;
letter-spacing:2px;
top:50%;
right:55px;
z-index:1500;
color:#fff;
text-decoration:none;
}
#INFO a { bottom:20px;
font-size:20px;
left:130px;
color:#ffffff;
position:fixed;
z-index:1500 !important;
letter-spacing:2px;
text-decoration:none;
border-bottom:3px solid #fff;
}
#INFO a:hover {
border-bottom:3px solid #646EFF;
}
#agenda {position:absolute;
left: 50%;
top: 50%; letter-spacing:2px;
margin-left:-145px; margin-top:-175px; display:block; width:290px; height:300px; color:#fff; font-size:25px;line-height:2em;}
#agenda a{font-size:11px; color:#646EFF; text-decoration:none;}
.exposant{font-size:11px; color:#646EFF;}
.exposant a{font-size:11px; color:#646EFF;}
#MIX a { bottom:20px;
font-size:20px;
left:215px;
color:#ffffff;
position:fixed;
z-index:1500 !important;
letter-spacing:2px;
text-decoration:none;
border-bottom:3px solid #fff;
}
#MIX a:hover {
border-bottom:3px solid #FFFF00
;
}
#FACEBOOK { top:85%;
left:40px;
position:relative;
letter-spacing:2px;
text-decoration:none;
}
#TWITTER { top:85%;
font-size:20px;
left:164px;
position:absolute;
letter-spacing:2px;
text-decoration:none;
}
#CONTACT a { bottom:20px;
font-size:20px;
left:525px;
color:#ffffff;
position:absolute;
letter-spacing:2px;
text-decoration:none;
border-bottom:3px solid #fff;
float:bottom;
}
#CONTACT a:hover {
border-bottom:3px solid #FFE345;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:transparent;
overflow:hidden;
}
#mask {
width:100%;
height:500%;
overflow:hidden;
background-color:transparent;
}
.item {
width:100%;
height:20%;
display:block;
background-color:transparent;
}
hr { display:none; }
img { border:0px; }
#blog {
background: transparent;
color: #fff;
font-family:'cabin';
font-size: 15px; /* 12px */
margin:0px;
padding:0px;
letter-spacing: 0.1em;
}
#blog a:link, a:active, a:visited {
color: #fff;
text-decoration: underline;
font-style:normal;
}
.content {
width:100%;
min-height:100%;
margin:0 auto;
background-color:transparent;
position:relative;
}
#item1 {background:#000000
}
#item2 { background:#ADB2FF;}
#item3 {background:#FEE972;}
#item4 {background:#F78181;}
#top, #bottom, #left, #right {
background:#FFD500;
position: absolute;
}
#top, #bottom {
left: 0; right: 0;
height: 2px;
}
#top { top: 0; }
#bottom { bottom: 0; }
#title a { left:73px; top:40px; color:transparent; z-index:1500; position:fixed;}
#title2 a { left:73px; top:40px; color:transparent; z-index:1500; position:absolute;}
#title3 a { left:73px; top:15px; color:transparent; z-index:1500; position:absolute;}
#interview {padding:10px; right:40px; top: 50px; border: solid 1px #0000FF; position:absolute; display:block;text-align:left; color: #0000FF;letter-spacing:2px;
text-decoration:none;}
#interview a {color: #0000FF;
text-decoration:none; border-bottom:2px solid #0000FF;
}
#description { position:absolute;
left: 40px;
top: 56%;
margin-top:-130px;
padding:10px; width:190px; height:260px; border: solid 1px #0000FF; position:absolute; text-align:justify; color: #0000FF;letter-spacing:2px; text-decoration:none; z-index:1500; font-size:14px;}
#description a {color: #0000FF;
text-decoration:none; border-bottom:2px solid #0000FF;
}
#mixiframe {
position:absolute;
left: 50%;
top: 50%;
margin-left: -240px;
margin-top:-240px;
}
#video2{ position:absolute;
left:50%;
top:50%;
margin-left:-400px;
margin-bottom:-300px;
}
#futur a {position:absolute;
font-family:"Cabin";
font-size:20px;
letter-spacing:2px;
top:70px;
right:40px;
z-index:1500;
color:#fff;
text-decoration:none;
-webkit-transform:rotate(30deg);}
#futur a:hover{>}
#paste a {position:absolute;
font-family:"Cabin";
font-size:20px;
letter-spacing:2px;
top:110px;
right:40px;
z-index:1500;
color:#fff;
text-decoration:none;
-webkit-transform:rotate(30deg);}
.postvideo {position:absolute;}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21070537-16']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<body>
<div id="title"><a href="/"> <img src="http://media.tumblr.com/tumblr_meohw2YlQc1ro291y.png" width="150" height="150"></a></div>
<div id="INFO"><a href="#item2" class="panel">INFOS</a></div>
<div id="VIDEO"><a href="#item1" class="panel">VIDEO</a></div>
<div id="MIX"><a href="#item3" class="panel">MIX</a></div>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div class="content">
{block:Posts}
{block:Video}
<div class="postvideo">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{/block:Posts} <script>// MAKE SURE TO CHANGE "container" to the name of the ID of the container that's
// 100% width you want the video to fit in
var resizeVideos = function () {
console.log('resized')
var iframes = document.body.getElementsByTagName('iframe')
newVimeoWidth = document.getElementById('wrapper').offsetWidth
, newVimeoHeight = window.innerHeight;
console.log(newVimeoWidth)
for(x in iframes){
if(iframes[x].src && iframes[x].src.indexOf('player.vimeo.com') > -1 ||
iframes[x].src && iframes[x].src.indexOf('youtube.com') > -1){
if(newVimeoHeight == 'auto'){
newVimeoHeight = ( newVimeoWidth * 9 ) / 16;
}
iframes[x].width = newVimeoWidth;
iframes[x].height = newVimeoHeight
}
}
};
window.onresize = resizeVideos;
resizeVideos();</script>
<div id="bonus"<a href="{text:Bonus Link}">{text:Bonus Symbol}</a></div>
<div id="pagination">
{block:Pagination}{block:NextPage} <div id="futur"><a href="{NextPage} " >NEXT VIDEO</a></div>{/block:NextPage}{/block:Pagination}{block:Pagination}
{block:PreviousPage} <div id="paste"><a href="{PreviousPage}">PREVIOUS VIDEO</a></div>{/PreviousPage} {/block:Pagination}
</div>
</div>
</div>
<div id="item2" class="item">
<div class="content"><div id="FACEBOOK"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fonzze.blog&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe></div><div id="TWITTER"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://onzze.fr" data-text="#nw La vidéo du jour sur" data-via="blog_onzze" data-hashtags="onzze">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div id="title2"><a href="/"> <img src="http://media.tumblr.com/tumblr_meohvlP2Ro1ro291y.png" width="150" height="150"></a></div>
<div id="description">Onzze c'est un peu votre meilleur pote, grâce à lui vous allez faire de jolies découvertes musicales, il sera callé aussi bien en chanson française, qu'en samba, il sera là dans toutes les circonstances, quand vous serez triste ou joyeux, amoureux ou énervé, enfin n'oubliez pas, ça reste tout de même un site web.</div>
<div id="agenda">Lundi<sup class="exposant"> Soul / Jazz / Hip-Hop</sup><br>Mardi<sup class="exposant"> Soul / Jazz / Hip-Hop</sup><br>Mercredi<sup class="exposant"> Soul / Jazz / Hip-Hop</sup><br>Jeudi<sup class="exposant"> Pop / Rock</sup><br>Vendredi<sup class="exposant"> Musiques Electroniques</sup><br>Samedi<sup class="exposant"> Musiques Electroniques</sup><br>Dimanche<sup class="exposant"> Musiques Electroniques</sup><br><center><sup class="exposant"><a target="blank" href="http://www.youtube.com/playlist?list=PLnuW64H93yX5z_oa8eiE-3q_nKwzBbqJj">(toutes les vidéos)</a><br></sup><a href="#item4" class="panel">+</a><center></div>
<div id="interview">Interviews:<p><a href="/yklein#item4">Y.KLEiN</a></div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<div id="title2"><a href="/"> <img src="http://media.tumblr.com/tumblr_meohvlP2Ro1ro291y.png" width="150" height="150"></a></div>
<div id="interview">Mix:<p><a href="/yklein#item3">Y.KLEiN</a></div>
<div id="mixiframe"> <div><object width="480" height="480"><param name="movie" value="//www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FOnzze%2Fonzze-y-k-l-ein-mix-1%2F&embed_uuid=367ff05b-4a7c-434a-8c1e-4a2b5558baad&stylecolor=ffffff&embed_type=widget_standard"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FOnzze%2Fonzze-y-k-l-ein-mix-1%2F&embed_uuid=367ff05b-4a7c-434a-8c1e-4a2b5558baad&stylecolor=ffffff&embed_type=widget_standard" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="480" height="480"></embed></object></div> </div>
</div>
</div>
<div style="overflow-y:scroll;" id="item4" class="item">
<div
class="content">
<div id="title3"><a href="/#item4"> <img src="http://media.tumblr.com/tumblr_meohvlP2Ro1ro291y.png" width="150" height="150"></a></div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment