API tools faq
paste
Advertisement
CapitalistZombie

Moving Boxes.xml

CapitalistZombie
Oct 16th, 2016
2,450
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Openoffice BASIC 19.00 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!