<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Astloch:regular,bold' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<link href='https://lh3.googleusercontent.com/_dZe49ZVqM6A/TYS2pBOOYdI/AAAAAAAAAP0/Kcry0WoNYQo/d/icon.blogspacetech.png' rel='shortcut icon'/>
<b:skin><![CDATA[/*
/*
Theme Name: simples
Theme URI: http://blogspacetech.blogspot.com/
This theme was designed and built by khaled, a algeria based Web Designer
Front-end Developer
Please don't steal my design or code.
I will hunt you down and feed you to the crazy cats living in my Room:).
*/
* {
margin:0;
padding:0;
}
#navbar-iframe {
display:none;
height:0;
visibility:hidden;
}
text-align: left;
}
/*********************/
/* reset */
/*********************/
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
height:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/*********************/
/* style */
/*********************/
body{
background:#000;
color:#fff;
font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
color:#fff;
text-decoration:none;
}
img.mb_bgimage{
position:fixed;
left:0px;
top:0px;
width:100%;
opacity:0.8;
z-index:1;
}
.mb_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat top left;
z-index:2;
}
.mb_pattern div{
position:absolute;
width:50px;
height:50px;
background:#000;
z-index:10;
}
.mb_heading h1{
position:absolute;
top:10px;
left:10px;
font-size:86px;
color:#000;
text-shadow:0px 0px 1px #fff;
font-family:"Astloch", Arial, sans-serif;
z-index:4;
}
.mb_menu{
position:absolute;
top:154px;
left:0px;
z-index:11;
}
.mb_menu a{
background-color:#000;
margin-bottom:2px;
opacity:0.9;
display:block;
width:98px;
height:98px;
color:#fff;
line-height:98px;
text-align:center;
text-transform:uppercase;
outline:none;
-webkit-transition: all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
color:#000;
background-color:#fff;
}
.mb_content_wrapper{
background:transparent url(https://lh5.googleusercontent.com/-fxQ6GxLd4QA/ThDtNe-Xy5I/AAAAAAAAAcQ/21auAZ06B-E/bg_menu.png) repeat top left;
width:400px;
height:400px;
position:absolute;
top:154px;
left:200px;
z-index:4;
display:none;
}
span.mb_close{
position:absolute;
top:10px;
right:10px;
width:11px;
height:12px;
cursor:pointer;
background:transparent url(https://lh3.googleusercontent.com/-eIeqcGZwIWs/ThDtNXkFUbI/AAAAAAAAAcM/KjlVjJDtocY/close.png) no-repeat top left;
opacity:0.8;
}
span.mb_close:hover{
opacity:1.0;
}
.mb_content{
padding:30px;
display:none;
}
.mb_content h2{
font-family:"Astloch";
text-shadow:0px 0px 1px #fff;
font-size:42px;
text-align: left;
background:transparent url(https://lh6.googleusercontent.com/-HHFpAbB8nM0/ThDtNWWk4wI/AAAAAAAAAcI/9-WWUUUJJNI/line.png) repeat-x bottom left;
padding:0px 0px 5px 0px;
margin-bottom:10px;
}
.mb_content_inner{
line-height:24px;
height:268px;
outline: none;
}
.mb_content_inner p{
padding:5px 0px;
}
ul.mb_imagelist li{
float:left;
margin:2px;
cursor:pointer;
}
ul.mb_imagelist li img{
display:block;
opacity:0.3;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-transition: all 0.5s ease-in-out;
}
ul.mb_imagelist li img:hover{
opacity:1.0;
}
.mb_content form label{
float:left;
width:100px;
text-align:right;
margin-right:10px;
}
.mb_content form div{
padding:5px 0px;
}
.mb_content form input,
.mb_content form textarea{
border:none;
background:#fff;
width:200px;
font-family:Arial;
color:#555;
padding:4px;
}
.mb_content form textarea{
height:140px;
}
button{
background:#ddd;
border:none;
color:#000;
padding:3px 10px;
font-family: 'PT Sans Narrow', Arial, sans-serif;
cursor:pointer;
float:right;
margin-right:22px;
}
button:hover{
background:#fff;
}
.mb_footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
font-size:13px;
background:#000;
opacity:0.9;
height:20px;
padding-bottom:5px;
text-transform:uppercase;
z-index:4;
}
.mb_footer a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
float:right;
}
.mb_footer a:hover{
color:#fff;
}
.mb_footer a span{
font-weight:bold;
}
.mb_footer a.mb_left{
float:left;
}
/*********************/
/* jquery.jscrollpane */
/*********************/
/*
* CSS Styles that are needed by jScrollPane for it to operate correctly.
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
* may not operate correctly without them.
*/
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: #000;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #000;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #000;
position: relative;
}
.jspDrag
{
background: #333;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 10px;
}
.jspHorizontalBar .jspArrow
{
width: 10px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
/*********************/
/* audiojs */
/*********************/
.audiojs {
width: 340px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}
]]></b:skin>
<!-- The JavaScript -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://blogspacetech.googlecode.com/files/jquery.easing.js' type='text/javascript'/>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script src='http://blogspacetech.googlecode.com/files/jquery.mousewheel.js' type='text/javascript'/>
<!-- the jScrollPane script -->
<script src='http://blogspacetech.googlecode.com/files/jquery.jscrollpane.min.js' type='text/javascript'/>
<script src='http://blogspacetech.googlecode.com/files/jquery.transform-0.9.3.min_.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/17686000/blogspacetech/audio.min.js'/>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>
</head>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $menu = $('#mb_menu'),
$menuItems = $menu.children('a'),
$mbWrapper = $('#mb_content_wrapper'),
$mbClose = $mbWrapper.children('.mb_close'),
$mbContentItems = $mbWrapper.children('.mb_content'),
$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
$mbPattern = $('#mb_pattern'),
$works = $('#mb_imagelist > li'),
$mb_bgimage = $('#mb_background > img'),
Menu = (function(){
var init = function() {
preloadImages();
initPlugins();
initPattern();
initEventsHandler();
},
//preloads the images for the work area (data-bgimg attr)
preloadImages = function() {
$works.each(function(i) {
$('<img/>').attr('src' , $(this).children('img').data('bgimg'));
});
},
//initialise the jScollPane (scroll plugin)
initPlugins = function() {
$mbContentInnerItems.jScrollPane({
verticalDragMinHeight: 40,
verticalDragMaxHeight: 40
});
},
/*
draws 16 boxes on a specific area of the page.
we randomly calculate the top, left, and rotation angle for each one of them
*/
initPattern = function() {
for(var i = 0; i < 16 ; ++i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $('<div>').css({
opacity : o,
top : t + 'px',
left : l + 'px'
});
if (!$.browser.msie)
$el.transform({'rotate' : a + 'deg'});
$el.appendTo($mbPattern);
}
$mbPattern.children().draggable(); //just for fun
},
/*
when the User closes a content item, we move the boxes back to the original place,
with new random values for top, left and angle though
*/
disperse = function() {
$mbPattern.children().each(function(i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $(this),
param = {
width : '50px',
height : '50px',
opacity : o,
top : t + 'px',
left : l + 'px'
};
if (!$.browser.msie)
param.rotate = a + 'deg';
$el.animate(param, 1000, 'easeOutExpo');
});
},
initEventsHandler = function() {
/*
click a link in the menu
*/
$menuItems.bind('click', function(e) {
var $this = $(this),
pos = $this.index(),
speed = $this.data('speed'),
easing = $this.data('easing');
//if an item is not yet shown
if(!$menu.data('open')){
//if current animating return
if($menu.data('moving')) return false;
$menu.data('moving', true);
$.when(openItem(pos, speed, easing)).done(function(){
$menu.data({
open : true,
moving : false
});
showContentItem(pos);
$mbPattern.children().fadeOut(500);
});
}
else
showContentItem(pos);
return false;
});
/*
click close makes the boxes animate to the top of the page
*/
$mbClose.bind('click', function(e) {
$menu.data('open', false);
/*
if we would want to show the default image when we close:
changeBGImage('images/default.jpg');
*/
$mbPattern.children().fadeIn(500, function() {
$mbContentItems.hide();
$mbWrapper.hide();
});
disperse();
return false;
});
/*
click an image from "Works" content item,
displays the image on the background
*/
$works.bind('click', function(e) {
var source = $(this).children('img').data('bgimg');
changeBGImage(source);
return false;
});
},
/*
changes the background image
*/
changeBGImage = function(img) {
//if its the current one return
if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
return false;
var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
$itemImage.insertBefore($mb_bgimage);
$mb_bgimage.fadeOut(1000, function() {
$(this).remove();
$mb_bgimage = $itemImage;
});
$itemImage.fadeIn(1000);
},
/*
This shows a content item when there is already one shown:
*/
showContentItem = function(pos) {
$mbContentItems.hide();
$mbWrapper.show();
$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},
/*
moves the boxes from the top to the center of the page,
and shows the respective content item
*/
openItem = function(pos, speed, easing) {
return $.Deferred(
function(dfd) {
$mbPattern.children().each(function(i) {
var $el = $(this),
param = {
width : '100px',
height : '100px',
top : 154 + 100 * Math.floor(i/4),
left : 200 + 100 * (i%4),
opacity : 1
};
if (!$.browser.msie)
param.rotate = '0deg';
$el.animate(param, speed, easing, dfd.resolve);
});
}
).promise();
};
return {
init : init
};
})();
/*
call the init method of Menu
*/
Menu.init();
});
//]]>
</script>
<body>
<div style='text-align: left;'>
<div class='mb_background' id='mb_background'>
<img alt='Background' class='mb_bgimage' src='https://lh4.googleusercontent.com/-S2iaj5egoD8/ThD0AOnD9DI/AAAAAAAAAc4/CkDU8BBWhmo/default.jpg'/>
<div class='mb_overlay'/>
<div class='mb_loading'/>
</div>
<div class='mb_pattern' id='mb_pattern'/>
<div class='mb_heading'>
<h1>Moving Boxes</h1>
</div>
<div class='mb_menu' id='mb_menu'>
<a data-easing='easeOutBack' data-speed='1000' href='#'>About</a>
<a data-easing='easeInExpo' data-speed='1000' href='#'>Work</a>
<a data-easing='easeOutBack' data-speed='1000' href='#'>Media</a>
<a data-easing='easeInExpo' data-speed='1000' href='#'>Contact</a>
</div>
<div class='mb_content_wrapper' id='mb_content_wrapper'>
<span class='mb_close'/>
<div class='mb_content'>
<h2>About</h2>
<div class='mb_content_inner'>
<p>Hi,Thank you very much for visiting here </p>
<br/>
<p>my name is khaled I'm from algeria.I am interested a lot in </p>
<br/>
<p> computers and blogging</p>
<br/>
<p>I love sharing ideas and thoughts..helping people and </p>
<br/>
<p> exchanging the knowledge</p>
<br/>
<p> I like meditation and deep thinking</p>
</div>
</div>
<div class='mb_content'>
<h2>Work</h2>
<div class='mb_content_inner'>
<p>Nature, in the broadest sense, is equivalent to the natural world, physical world, or material world</p>
<ul class='mb_imagelist' id='mb_imagelist'>
<li><img alt='image1' data-bgimg='https://lh3.googleusercontent.com/-pSCF46yyOj0/ThD0AXEt2GI/AAAAAAAAAc8/Cc7e5ZIqGA4/image1.jpg' src='https://lh6.googleusercontent.com/-4OftaJ2NvRE/ThDz3Py9TlI/AAAAAAAAAck/u_3N0wn8C4U/1.jpg'/></li>
<li><img alt='image2' data-bgimg='https://lh3.googleusercontent.com/-BCn7825n7JM/ThD0Og0I6yI/AAAAAAAAAdI/Fjek9py174g/image2.jpg' src='https://lh4.googleusercontent.com/-n-cRkAw1OAQ/ThDz4C2nSoI/AAAAAAAAAcw/ekR3bEx3LQg/2.jpg'/></li>
<li><img alt='image3' data-bgimg='https://lh6.googleusercontent.com/-WiH1SDt3rV4/ThD0GIrNnzI/AAAAAAAAAdE/4XQi4IbxndQ/image3.jpg' src='https://lh6.googleusercontent.com/-ZscSYaCF790/ThDz4MjFvqI/AAAAAAAAAcs/3eI4OVV939s/3.jpg'/></li>
<li><img alt='image4' data-bgimg='https://lh6.googleusercontent.com/-L9s6ai2Mog8/ThD0FR5wI5I/AAAAAAAAAdA/U3IulB_Az7A/image4.jpg' src='https://lh6.googleusercontent.com/-L9s6ai2Mog8/ThD0FR5wI5I/AAAAAAAAAdA/U3IulB_Az7A/s100/image4.jpg'/></li>
<li><img alt='image5' data-bgimg='https://lh4.googleusercontent.com/-RjXL_UZcXiA/ThEPe_7jRsI/AAAAAAAAAdg/dhEYQ-y25iw/image5.jpg' src='https://lh5.googleusercontent.com/-6sK-ZjWMk3I/ThEPTAaDfaI/AAAAAAAAAdY/xN6qLotfvjw/5.jpg'/></li>
<li><img alt='image6' data-bgimg='https://lh3.googleusercontent.com/-tOnLpvRuEis/ThEPjXxw1DI/AAAAAAAAAdk/wOjVdAP-a_Q/image6.jpg' src='https://lh4.googleusercontent.com/-OOuhDgts2YA/ThEPTWtx3DI/AAAAAAAAAdc/IJIPJeBb-Hg/6.jpg'/></li>
</ul>
<p>"Nature" refers to the phenomena of the physical world, and also to life in general. It ranges in scale from the subatomic to the cosmic.</p>
<p>The word nature is derived from the Latin word natura, or "essential qualities, innate disposition", and in ancient times, literally meant "birth"</p>
<p>Natura was a Latin translation of the Greek word physis (φύσις), which originally related to the intrinsic characteristics that plants, animals, and other features of the world develop of their own accord.</p>
<p>The concept of nature as a whole, the physical universe, is one of several expansions of the original notion; it began with certain core applications of the word φύσις by pre-Socratic philosophers, and has steadily gained currency ever since. This usage was confirmed during the advent of modern scientific method in the last several centuries.</p>
</div>
</div>
<div class='mb_content'>
<h2>Media</h2>
<div class='mb_content_inner'>
<br>
</br>
<br>
</br>
<audio preload='auto' src='http://dl.dropbox.com/u/17686000/blogspacetech/naturesong.mp3'/>
</div>
</div>
<div class='mb_content'>
<h2>Contact</h2>
<div class='mb_content_inner'>
<form>
<div><label>: Name</label><input type='text'/></div>
<div><label>: Email</label><input type='text'/></div>
<div><label>: Message</label><textarea/></div>
<div><button>Send</button></div>
</form>
</div>
</div>
</div>
<div class='mb_footer'>
<a class='mb_left' href='http://blogspacetech.blogspot.com'><span> converted to Blogger XML BY :</span>blogspacetech</a>
<a href='http://tympanus.net/'><strong>Design by tympanus</strong></a>
<a href='http://photography.nationalgeographic.com/photography/photo-of-the-day/' target='_blank'>Photography by nationalgeographic</a>
</div>
</div>
</body>
</html>
Comments
0 B
|👍
/👎
0 B
|👍
/👎
0 B
|👍
/👎