<!DOCTYPE html>
<html>
<head>
<title>misha blog</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.5"></script>
<style type="text/css">
body {
background-color: #999999;
}
.p {
padding: 25px;
}
.h1 {
font-size: 56px
}
.centered-content {
width: 46% ;
margin-left: auto;
margin-right: auto;
}
.centered-content-2 {
width: 42% ;
margin-left: auto;
margin-right: auto;
}
.t {
top: 20px;
}
.m {
margin-right: 360px;
margin-left: 360px;
}
.m-2{
margin-right: 500px;
margin-left: 480px;
}
.m-3{
margin-left: 38px;
margin-right: 38px;
}
#my-1{
margin-left: 1350px;
margin-right: 5px;
position:absolute;
top: 50px;
}
#line {
text-decoration: underline
}
#img-1{
margin-left: 50px;
}
</style>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand dropdown-toggle" data-toggle="dropdown">misha blog</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="html5.blog.html">Home</a></li>
<li><a href="http://www.facebook.com/profile.php?id=100002348138234">my facebook</a></li>
<li><a class="various fancybox.iframe" href="1.html">my cool game!</a></li>
<li><a class="various fancybox.iframe" href="2.html">my cool game with math!</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">my blog<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">my sites</a></li>
<li><a href="html-about-me.html">about me</a></li>
<li><a href="#">now news about me</a></li>
<li class="divider"></li>
<li class="nav-header">Useful for building</br>web sites:</li>
<li><a href="http://twitter.github.com/bootstrap/">bootstrap for css</a></li>
<li><a href="http://jquery.com/">jquery for javascript</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li><a>I build this site using bootstrap and jquery</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="centered-content-2">
<p class="label label-info p h1 m-3">welcome to my blog</p>
</br>
</div>
</br>
<div class="well m t" style="padding: 6px margin: 200px;">
<ul class="nav nav-list">
<li class="active">
<a href="html5.blog.html">Home</a>
</li>
<li>
<a href="http://www.facebook.com/profile.php?id=100002348138234">my facebook</a>
</li>
<li>
<a class="various fancybox.iframe" href="1.html">my cool game!</a>
</li>
<li>
<a class="various fancybox.iframe" href="2.html">my cool game with math!</a>
</li>
<li>
<li class="nav-header">my blog</li>
</li>
<li>
<a href="#">my sites</a>
</li>
<li>
<a href="html-about-me.html">about me</a>
</li>
<li>
<a href="#">now news about me</a>
</li>
<li class="nav-header">Useful for building web sites</li>
<li>
<a class="various fancybox.iframe" href="http://twitter.github.com/bootstrap/">bootstrap for css</a>
</li>
<li>
<a href="http://jquery.com/">jquery for javascript</a>
</li>
</ul>
</div>
<a id="img-1" class="fancybox-button" rel="gallery1" href="img/pic_001225480122.jpg" title="my dragon">
<img class="btn btn-inverse" src="img/pic_001225480122.jpg" width="288" height="288" />
</a>
<a id="img-2" class="fancybox-button" rel="gallery1" href="img/cb.jpg" title="my dragon">
<img class="btn btn-inverse" src="img/cb.jpg" width="326.25" height="288" />
</a>
<a id="img-2" class="fancybox-button" rel="gallery1" href="img/3c676294cb24.jpg" title="he is I">
<img class="btn btn-inverse" src="img/3c676294cb24.jpg" width="221" height="221" />
</a>
<a id="img-2" class="fancybox-button" rel="gallery1" href="img/IMG_0321.jpg" title="he is I">
<img class="btn btn-inverse" src="img/IMG_0321.jpg" width="324" height="216" />
</a>
<a id="img-2" class="fancybox-button" rel="gallery1" href="img/49923b937d35.jpg" title="he is I">
<img class="btn btn-inverse" src="img/49923b937d35.jpg" width="221" height="221" />
</a>
</br>
</br>
<div class="progress progress-danger
progress-striped active">
<div class="bar"
style="width: 100%;"></div>
</div>
<div class="progress progress-info
progress-striped active">
<div class="bar"
style="width: 100%;"></div>
</div>
<div class="progress progress-important
progress-striped active">
<div class="bar"
style="width: 100%;"></div>
</div>
<div class="progress progress-success
progress-striped active">
<div class="bar"
style="width: 100%;"></div>
</div>
<div class="well alert alert-info" id="my-1">
<h1 id="line">my like sites</h1>
</br>
<h4>1!---bootstrap</h4>
</br>
<h4>2!---jquery</h4>
</br>
<h4>3!---facebook</h4>
</br>
<h4>4!---google</h4>
</br>
<h4>5!---html w3 school</h4>
</br>
<h4>6!---html.net</h4>
</br>
<h4>7!---walla {he}</h4>
</br>
<h4>8!---Nickelodeon</h4>
</div>
<script>
function v() {
$('fancybox-buttons').toggle();
}
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : '-V',
nextEffect : '--V',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
$('img').click(v);
});
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</body>
</html>