Advertisement
CapitalistZombie

Moving Boxes.xml

Oct 16th, 2016
2,981
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <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'>
  4.  
  5. <head>
  6.  <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
  7. <link href='http://fonts.googleapis.com/css?family=Astloch:regular,bold' rel='stylesheet' type='text/css'/>
  8.  <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title>
  9.  </b:if>
  10. <link href='https://lh3.googleusercontent.com/_dZe49ZVqM6A/TYS2pBOOYdI/AAAAAAAAAP0/Kcry0WoNYQo/d/icon.blogspacetech.png' rel='shortcut icon'/>
  11.  
  12.  
  13.     <b:skin><![CDATA[/*
  14.  
  15. /*
  16.  Theme Name: simples
  17.  Theme URI: http://blogspacetech.blogspot.com/
  18. This theme was designed and built by khaled, a algeria based Web Designer
  19. Front-end Developer
  20. Please don't steal my design or code.
  21. I will hunt you down and feed you to the crazy cats living in my Room:).
  22.  */
  23. * {
  24. margin:0;
  25. padding:0;
  26. }
  27.  
  28. #navbar-iframe {
  29. display:none;
  30. height:0;
  31. visibility:hidden;
  32. }
  33. text-align: left;
  34. }
  35. /*********************/
  36. /*   reset   */
  37. /*********************/
  38. /* CSS reset */
  39. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  40.     margin:0;
  41.     padding:0;
  42. }
  43. html,body {
  44.     margin:0;
  45.     padding:0;
  46.     height:100%;
  47. }
  48. table {
  49.     border-collapse:collapse;
  50.     border-spacing:0;
  51. }
  52. fieldset,img {
  53.     border:0;
  54. }
  55. input{
  56.     border:1px solid #b0b0b0;
  57.     padding:3px 5px 4px;
  58.     color:#979797;
  59.     width:190px;
  60. }
  61. address,caption,cite,code,dfn,th,var {
  62.     font-style:normal;
  63.     font-weight:normal;
  64. }
  65. ol,ul {
  66.     list-style:none;
  67. }
  68. caption,th {
  69.     text-align:left;
  70. }
  71. h1,h2,h3,h4,h5,h6 {
  72.     font-size:100%;
  73.     font-weight:normal;
  74. }
  75. q:before,q:after {
  76.     content:'';
  77. }
  78. abbr,acronym { border:0;
  79. }
  80.  
  81. /*********************/
  82. /*  style  */
  83. /*********************/
  84.  
  85.  
  86. body{
  87.     background:#000;
  88.     color:#fff;
  89.     font-family: 'PT Sans Narrow', Arial, sans-serif;
  90. }
  91. a{
  92.     color:#fff;
  93.     text-decoration:none;
  94. }
  95. img.mb_bgimage{
  96.     position:fixed;
  97.     left:0px;
  98.     top:0px;
  99.     width:100%;
  100.     opacity:0.8;
  101.     z-index:1;
  102. }
  103. .mb_overlay{
  104.     width:100%;
  105.     height:100%;
  106.     position:fixed;
  107.     top:0px;
  108.     left:0px;
  109.     background:transparent url(../images/pattern.png) repeat top left;
  110.     z-index:2;
  111. }
  112. .mb_pattern div{
  113.     position:absolute;
  114.     width:50px;
  115.     height:50px;
  116.     background:#000;
  117.     z-index:10;
  118. }
  119. .mb_heading h1{
  120.     position:absolute;
  121.     top:10px;
  122.     left:10px;
  123.     font-size:86px;
  124.     color:#000;
  125.     text-shadow:0px 0px 1px #fff;
  126.     font-family:"Astloch", Arial, sans-serif;
  127.     z-index:4;
  128. }
  129. .mb_menu{
  130.     position:absolute;
  131.     top:154px;
  132.     left:0px;
  133.     z-index:11;
  134. }
  135. .mb_menu a{
  136.     background-color:#000;
  137.     margin-bottom:2px;
  138.     opacity:0.9;
  139.     display:block;
  140.     width:98px;
  141.     height:98px;
  142.     color:#fff;
  143.     line-height:98px;
  144.     text-align:center;
  145.     text-transform:uppercase;
  146.     outline:none;
  147.     -webkit-transition: all 0.2s ease-in;
  148.     -moz-transition:all 0.2s ease-in;
  149.     -o-transition: all 0.2s ease-in;
  150.     -transition: all 0.2s ease-in;
  151. }
  152. .mb_menu a:hover{
  153.     color:#000;
  154.     background-color:#fff;
  155. }
  156. .mb_content_wrapper{
  157.     background:transparent url(https://lh5.googleusercontent.com/-fxQ6GxLd4QA/ThDtNe-Xy5I/AAAAAAAAAcQ/21auAZ06B-E/bg_menu.png) repeat top left;
  158.     width:400px;
  159.     height:400px;
  160.     position:absolute;
  161.     top:154px;
  162.     left:200px;
  163.     z-index:4;
  164.     display:none;
  165. }
  166. span.mb_close{
  167.     position:absolute;
  168.     top:10px;
  169.     right:10px;
  170.     width:11px;
  171.     height:12px;
  172.     cursor:pointer;
  173.     background:transparent url(https://lh3.googleusercontent.com/-eIeqcGZwIWs/ThDtNXkFUbI/AAAAAAAAAcM/KjlVjJDtocY/close.png) no-repeat top left;
  174.     opacity:0.8;
  175. }
  176. span.mb_close:hover{
  177.     opacity:1.0;
  178. }
  179. .mb_content{
  180.     padding:30px;
  181.     display:none;
  182. }
  183. .mb_content h2{
  184.     font-family:"Astloch";
  185.     text-shadow:0px 0px 1px #fff;
  186.     font-size:42px;
  187.         text-align: left;
  188.     background:transparent url(https://lh6.googleusercontent.com/-HHFpAbB8nM0/ThDtNWWk4wI/AAAAAAAAAcI/9-WWUUUJJNI/line.png) repeat-x bottom left;
  189.     padding:0px 0px 5px 0px;
  190.     margin-bottom:10px;
  191. }
  192. .mb_content_inner{
  193.     line-height:24px;
  194.     height:268px;
  195.     outline: none;
  196. }
  197. .mb_content_inner p{
  198.     padding:5px 0px;
  199. }
  200. ul.mb_imagelist li{
  201.     float:left;
  202.     margin:2px;
  203.     cursor:pointer;
  204. }
  205. ul.mb_imagelist li img{
  206.     display:block;
  207.     opacity:0.3;
  208.     -webkit-transition: all 0.5s ease-in-out;
  209.     -moz-transition: all 0.5s ease-in-out;
  210.     -o-transition: all 0.5s ease-in-out;
  211.     -transition: all 0.5s ease-in-out;
  212. }
  213. ul.mb_imagelist li img:hover{
  214.     opacity:1.0;
  215. }
  216. .mb_content form label{
  217.     float:left;
  218.     width:100px;
  219.     text-align:right;
  220.     margin-right:10px;
  221. }
  222. .mb_content form div{
  223.     padding:5px 0px;
  224. }
  225. .mb_content form input,
  226. .mb_content form textarea{
  227.     border:none;
  228.     background:#fff;
  229.     width:200px;
  230.     font-family:Arial;
  231.     color:#555;
  232.     padding:4px;
  233. }
  234. .mb_content form textarea{
  235.     height:140px;
  236. }
  237. button{
  238.     background:#ddd;
  239.     border:none;
  240.     color:#000;
  241.     padding:3px 10px;
  242.     font-family: 'PT Sans Narrow', Arial, sans-serif;
  243.     cursor:pointer;
  244.     float:right;
  245.     margin-right:22px;
  246. }
  247. button:hover{
  248.     background:#fff;
  249. }
  250. .mb_footer{
  251.     position:fixed;
  252.     bottom:0px;
  253.     left:0px;
  254.     width:100%;
  255.     font-size:13px;
  256.     background:#000;
  257.     opacity:0.9;
  258.     height:20px;
  259.     padding-bottom:5px;
  260.     text-transform:uppercase;
  261.     z-index:4;
  262. }
  263. .mb_footer a{
  264.     padding:5px 10px;
  265.     letter-spacing:1px;
  266.     text-shadow:1px 1px 1px #000;
  267.     color:#ddd;
  268.     float:right;
  269. }
  270. .mb_footer a:hover{
  271.     color:#fff;
  272. }
  273. .mb_footer a span{
  274.     font-weight:bold;
  275. }
  276. .mb_footer a.mb_left{
  277.     float:left;
  278. }
  279.  
  280.  
  281. /*********************/
  282.  
  283. /*   jquery.jscrollpane  */
  284.  
  285. /*********************/
  286.  
  287. /*
  288.  * CSS Styles that are needed by jScrollPane for it to operate correctly.
  289.  * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
  290.  * may not operate correctly without them.
  291.  */
  292.  
  293. .jspContainer
  294. {
  295.     overflow: hidden;
  296.     position: relative;
  297. }
  298.  
  299. .jspPane
  300. {
  301.     position: absolute;
  302. }
  303.  
  304. .jspVerticalBar
  305. {
  306.     position: absolute;
  307.     top: 0;
  308.     right: 0;
  309.     width: 10px;
  310.     height: 100%;
  311.     background: #000;
  312.  
  313. }
  314.  
  315. .jspHorizontalBar
  316. {
  317.     position: absolute;
  318.     bottom: 0;
  319.     left: 0;
  320.     width: 100%;
  321.     height: 10px;
  322.     background: #000;
  323. }
  324.  
  325. .jspVerticalBar *,
  326. .jspHorizontalBar *
  327. {
  328.     margin: 0;
  329.     padding: 0;
  330. }
  331.  
  332. .jspCap
  333. {
  334.     display: none;
  335. }
  336.  
  337. .jspHorizontalBar .jspCap
  338. {
  339.     float: left;
  340. }
  341.  
  342. .jspTrack
  343. {
  344.     background: #000;
  345.     position: relative;
  346. }
  347.  
  348. .jspDrag
  349. {
  350.     background: #333;
  351.     position: relative;
  352.     top: 0;
  353.     left: 0;
  354.     cursor: pointer;
  355. }
  356.  
  357. .jspHorizontalBar .jspTrack,
  358. .jspHorizontalBar .jspDrag
  359. {
  360.     float: left;
  361.     height: 100%;
  362. }
  363.  
  364. .jspArrow
  365. {
  366.     background: #50506d;
  367.     text-indent: -20000px;
  368.     display: block;
  369.     cursor: pointer;
  370. }
  371.  
  372. .jspArrow.jspDisabled
  373. {
  374.     cursor: default;
  375.     background: #80808d;
  376. }
  377.  
  378. .jspVerticalBar .jspArrow
  379. {
  380.     height: 10px;
  381. }
  382.  
  383. .jspHorizontalBar .jspArrow
  384. {
  385.     width: 10px;
  386.     float: left;
  387.     height: 100%;
  388. }
  389.  
  390. .jspVerticalBar .jspArrow:focus
  391. {
  392.     outline: none;
  393. }
  394.  
  395. .jspCorner
  396. {
  397.     background: #eeeef4;
  398.     float: left;
  399.     height: 100%;
  400. }
  401.  
  402. /* Yuk! CSS Hack for IE6 3 pixel bug :( */
  403. * html .jspCorner
  404. {
  405.     margin: 0 -3px 0 0;
  406. }
  407.  
  408.  
  409.  
  410. /*********************/
  411.  
  412. /*   audiojs  */
  413.  
  414. /*********************/
  415.  
  416.  
  417.  
  418.  
  419. .audiojs {
  420. width: 340px;
  421. height: 36px;
  422. background: #404040;
  423. overflow: hidden;
  424. font-family: monospace;
  425. font-size: 12px;
  426. 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)); \
  427. background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
  428. -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  429. -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
  430. }
  431.  
  432.  
  433.  
  434. ]]></b:skin>
  435.  
  436.  
  437. <!-- The JavaScript -->
  438.         <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
  439.         <script src='http://blogspacetech.googlecode.com/files/jquery.easing.js' type='text/javascript'/>
  440.         <!-- the mousewheel plugin - optional to provide mousewheel support -->
  441.  
  442.         <script src='http://blogspacetech.googlecode.com/files/jquery.mousewheel.js' type='text/javascript'/>
  443.         <!-- the jScrollPane script -->
  444.         <script src='http://blogspacetech.googlecode.com/files/jquery.jscrollpane.min.js' type='text/javascript'/>
  445.         <script src='http://blogspacetech.googlecode.com/files/jquery.transform-0.9.3.min_.js' type='text/javascript'/>
  446.         <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js' type='text/javascript'/>
  447.        
  448.  
  449. <script src='http://dl.dropbox.com/u/17686000/blogspacetech/audio.min.js'/>
  450. <script>
  451. audiojs.events.ready(function() {
  452. var as = audiojs.createAll();
  453. });
  454.  
  455. </script>
  456.  
  457.  
  458. </head>
  459.  
  460.  
  461. <script type='text/javascript'>
  462.  
  463. //<![CDATA[
  464.  
  465.  
  466.           $(function() {
  467.                 var $menu           = $('#mb_menu'),
  468.                 $menuItems          = $menu.children('a'),
  469.                 $mbWrapper          = $('#mb_content_wrapper'),
  470.                 $mbClose            = $mbWrapper.children('.mb_close'),
  471.                 $mbContentItems     = $mbWrapper.children('.mb_content'),
  472.                 $mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
  473.                 $mbPattern          = $('#mb_pattern'),
  474.                 $works              = $('#mb_imagelist > li'),
  475.                 $mb_bgimage         = $('#mb_background > img'),
  476.                
  477.                 Menu                = (function(){
  478.                    
  479.                     var init        = function() {
  480.                         preloadImages();
  481.                         initPlugins();
  482.                         initPattern();
  483.                         initEventsHandler();
  484.                     },
  485.                     //preloads the images for the work area (data-bgimg attr)
  486.                     preloadImages   = function() {
  487.                         $works.each(function(i) {
  488.                             $('<img/>').attr('src' , $(this).children('img').data('bgimg'));
  489.                         });
  490.                     },
  491.                     //initialise the jScollPane (scroll plugin)
  492.                     initPlugins     = function() {
  493.                         $mbContentInnerItems.jScrollPane({
  494.                             verticalDragMinHeight: 40,
  495.                             verticalDragMaxHeight: 40
  496.                         });
  497.                     },
  498.                     /*
  499.                         draws 16 boxes on a specific area of the page.
  500.                         we randomly calculate the top, left, and rotation angle for each one of them
  501.                      */
  502.                     initPattern     = function() {
  503.                         for(var i = 0; i < 16 ; ++i) {
  504.                             //random opacity, top, left and angle
  505.                             var o       = 0.1,
  506.                             t       = Math.floor(Math.random()*196) + 5, // between 5 and 200
  507.                             l       = Math.floor(Math.random()*696) + 5, // between 5 and 700
  508.                             a       = Math.floor(Math.random()*101) - 50; // between -50 and 50
  509.                                    
  510.                             $el     = $('<div>').css({
  511.                                 opacity         : o,
  512.                                 top             : t + 'px',
  513.                                 left            : l + 'px'
  514.                             });
  515.                                
  516.                             if (!$.browser.msie)
  517.                                 $el.transform({'rotate' : a + 'deg'});
  518.                                
  519.                             $el.appendTo($mbPattern);
  520.                         }
  521.                         $mbPattern.children().draggable(); //just for fun
  522.                     },
  523.                     /*
  524.                         when the User closes a content item, we move the boxes back to the original place,
  525.                         with new random values for top, left and angle though
  526.                      */
  527.                     disperse        = function() {
  528.                         $mbPattern.children().each(function(i) {
  529.                             //random opacity, top, left and angle
  530.                             var o           = 0.1,
  531.                             t           = Math.floor(Math.random()*196) + 5, // between 5 and 200
  532.                             l           = Math.floor(Math.random()*696) + 5, // between 5 and 700
  533.                             a           = Math.floor(Math.random()*101) - 50; // between -50 and 50
  534.                             $el         = $(this),
  535.                             param       = {
  536.                                 width   : '50px',
  537.                                 height  : '50px',
  538.                                 opacity : o,
  539.                                 top     : t + 'px',
  540.                                 left    : l + 'px'
  541.                             };
  542.                                    
  543.                             if (!$.browser.msie)
  544.                                 param.rotate    = a + 'deg';
  545.                                    
  546.                             $el.animate(param, 1000, 'easeOutExpo');
  547.                         });
  548.                     },
  549.                     initEventsHandler   = function() {
  550.                         /*
  551.                             click a link in the menu
  552.                          */
  553.                         $menuItems.bind('click', function(e) {
  554.                             var $this   = $(this),
  555.                             pos     = $this.index(),
  556.                             speed   = $this.data('speed'),
  557.                             easing  = $this.data('easing');
  558.                             //if an item is not yet shown
  559.                             if(!$menu.data('open')){
  560.                                 //if current animating return
  561.                                 if($menu.data('moving')) return false;
  562.                                 $menu.data('moving', true);
  563.                                 $.when(openItem(pos, speed, easing)).done(function(){
  564.                                     $menu.data({
  565.                                         open    : true,
  566.                                         moving  : false
  567.                                     });
  568.                                     showContentItem(pos);
  569.                                     $mbPattern.children().fadeOut(500);
  570.                                 });
  571.                             }
  572.                             else
  573.                                 showContentItem(pos);
  574.                             return false;
  575.                         });
  576.                            
  577.                         /*
  578.                             click close makes the boxes animate to the top of the page
  579.                          */
  580.                         $mbClose.bind('click', function(e) {
  581.                             $menu.data('open', false);
  582.                             /*
  583.                                 if we would want to show the default image when we close:
  584.                                 changeBGImage('images/default.jpg');
  585.                              */
  586.                             $mbPattern.children().fadeIn(500, function() {
  587.                                 $mbContentItems.hide();
  588.                                 $mbWrapper.hide();
  589.                             });
  590.                                
  591.                             disperse();
  592.                             return false;
  593.                         });
  594.                            
  595.                         /*
  596.                             click an image from "Works" content item,
  597.                             displays the image on the background
  598.                          */
  599.                         $works.bind('click', function(e) {
  600.                             var source  = $(this).children('img').data('bgimg');
  601.                             changeBGImage(source);
  602.                             return false;
  603.                         });
  604.                                
  605.                     },
  606.                     /*
  607.                         changes the background image
  608.                      */
  609.                     changeBGImage       = function(img) {
  610.                         //if its the current one return
  611.                         if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
  612.                             return false;
  613.                                    
  614.                         var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
  615.                         $itemImage.insertBefore($mb_bgimage);
  616.                            
  617.                         $mb_bgimage.fadeOut(1000, function() {
  618.                             $(this).remove();
  619.                             $mb_bgimage = $itemImage;
  620.                         });
  621.                         $itemImage.fadeIn(1000);
  622.                     },
  623.                     /*
  624.                         This shows a content item when there is already one shown:
  625.                      */
  626.                     showContentItem     = function(pos) {
  627.                         $mbContentItems.hide();
  628.                         $mbWrapper.show();
  629.                         $mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
  630.                     },
  631.                     /*
  632.                         moves the boxes from the top to the center of the page,
  633.                         and shows the respective content item
  634.                      */
  635.                     openItem            = function(pos, speed, easing) {
  636.                         return $.Deferred(
  637.                         function(dfd) {
  638.                             $mbPattern.children().each(function(i) {
  639.                                 var $el         = $(this),
  640.                                 param       = {
  641.                                     width   : '100px',
  642.                                     height  : '100px',
  643.                                     top     : 154 + 100 * Math.floor(i/4),
  644.                                     left    : 200 + 100 * (i%4),
  645.                                     opacity : 1
  646.                                 };
  647.                                        
  648.                                 if (!$.browser.msie)
  649.                                     param.rotate    = '0deg';
  650.                                        
  651.                                 $el.animate(param, speed, easing, dfd.resolve);
  652.                             });
  653.                         }
  654.                     ).promise();
  655.                     };
  656.                        
  657.                     return {
  658.                         init : init
  659.                     };
  660.                    
  661.                 })();
  662.            
  663.                 /*
  664.                     call the init method of Menu
  665.                  */
  666.                 Menu.init();
  667.             });
  668. //]]>
  669.  
  670. </script>
  671.  
  672.  
  673.  
  674.   <body>
  675. <div style='text-align: left;'>
  676.  
  677. <div class='mb_background' id='mb_background'>
  678.             <img alt='Background' class='mb_bgimage' src='https://lh4.googleusercontent.com/-S2iaj5egoD8/ThD0AOnD9DI/AAAAAAAAAc4/CkDU8BBWhmo/default.jpg'/>
  679.             <div class='mb_overlay'/>
  680.             <div class='mb_loading'/>
  681.  
  682.         </div>
  683.         <div class='mb_pattern' id='mb_pattern'/>
  684.         <div class='mb_heading'>
  685.             <h1>Moving Boxes</h1>
  686.         </div>
  687.         <div class='mb_menu' id='mb_menu'>
  688.             <a data-easing='easeOutBack' data-speed='1000' href='#'>About</a>
  689.             <a data-easing='easeInExpo' data-speed='1000' href='#'>Work</a>
  690.  
  691.             <a data-easing='easeOutBack' data-speed='1000' href='#'>Media</a>
  692.             <a data-easing='easeInExpo' data-speed='1000' href='#'>Contact</a>
  693.         </div>
  694.         <div class='mb_content_wrapper' id='mb_content_wrapper'>
  695.             <span class='mb_close'/>
  696.             <div class='mb_content'>
  697.                 <h2>About</h2>
  698.  
  699.                 <div class='mb_content_inner'>
  700.                     <p>Hi,Thank you very much for visiting here </p>
  701. <br/>
  702.                     <p>my name is khaled I&#39;m from algeria.I am interested a lot in </p>
  703. <br/>
  704.  
  705. <p> computers and blogging</p>
  706.  
  707. <br/>
  708.                     <p>I love sharing ideas and thoughts..helping people and </p>
  709.  
  710. <br/>
  711.  
  712. <p> exchanging the knowledge</p>
  713.        
  714. <br/>          
  715.        
  716. <p> I like meditation and deep thinking</p>
  717.         </div>
  718.             </div>
  719.  
  720.             <div class='mb_content'>
  721.                 <h2>Work</h2>
  722.                 <div class='mb_content_inner'>
  723.                     <p>Nature, in the broadest sense, is equivalent to the natural world, physical world, or material world</p>
  724.                     <ul class='mb_imagelist' id='mb_imagelist'>
  725.                         <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>
  726.                         <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>
  727.                         <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>
  728.  
  729.                         <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>
  730.                         <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>
  731.                         <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>
  732.                     </ul>
  733.                     <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>
  734.                     <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>
  735.  
  736.                     <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>
  737.                     <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>
  738.                 </div>
  739.             </div>
  740.             <div class='mb_content'>
  741.                 <h2>Media</h2>
  742.                 <div class='mb_content_inner'>
  743. <br>
  744. </br>
  745. <br>
  746. </br>
  747.  
  748.  
  749.                     <audio preload='auto' src='http://dl.dropbox.com/u/17686000/blogspacetech/naturesong.mp3'/>
  750.  
  751.                    
  752.                 </div>
  753.             </div>
  754.             <div class='mb_content'>
  755.  
  756.                 <h2>Contact</h2>
  757.                 <div class='mb_content_inner'>
  758.                     <form>
  759. <div><label>: Name</label><input type='text'/></div>
  760.                         <div><label>: Email</label><input type='text'/></div>
  761.                         <div><label>: Message</label><textarea/></div>
  762.  
  763.                         <div><button>Send</button></div>
  764.                     </form>
  765.                 </div>
  766.             </div>
  767.         </div>
  768.         <div class='mb_footer'>
  769.             <a class='mb_left' href='http://blogspacetech.blogspot.com'><span> converted to Blogger XML BY :</span>blogspacetech</a>
  770.  
  771.             <a href='http://tympanus.net/'><strong>Design by tympanus</strong></a>
  772.             <a href='http://photography.nationalgeographic.com/photography/photo-of-the-day/' target='_blank'>Photography by nationalgeographic</a>
  773.         </div>
  774.        
  775. </div>
  776. </body>
  777. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement