CapitalistZombie icon

Moving Boxes.xml

CapitalistZombie | PRO | 10/16/16 08:36:24 PM UTC | 0 ⭐ | 11161 👁️ | Never ⏰ | []
Openoffice BASIC |

0 B

|

None

|

0 👍

/

0 👎

<?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 == &quot;index&quot;'> <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&#39;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>&quot;Nature&quot; 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 &quot;essential qualities, innate disposition&quot;, and in ancient times, literally meant &quot;birth&quot;</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

  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎

    
        
  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎

    
        
  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎