API tools faq
paste
Guest User

Untitled

a guest
Dec 6th, 2014
219
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.11 KB | None | 0 0
raw download clone embed print report
  1.     <!DOCTYPE html>
  2. <html>
  3.         <title>Moje zainteresowania</title>
  4.     <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <title>Moje zainteresowania</title>
  7.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  8.     <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
  9.    
  10.    
  11.     <style type="text/css">
  12.         p {
  13.         font-family: Comfortaa;
  14.         src: url('Comfortaa-Regular.ttf');
  15.         color: white;
  16.         text-shadow: #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px,
  17.                      #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px;
  18.         }
  19.         body {
  20.         background-image: url(background.jpg);
  21.         background-position: center;
  22.         background-attachment: fixed;
  23.         background-repeat: no-repeat;
  24.         -moz-background-size: cover;
  25.         }
  26.         div {
  27.         font-family: Comfortaa;
  28.         src: url('Comfortaa-Regular.ttf');
  29.         font-size:48px;
  30.         color: white;
  31.         text-shadow: #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px,
  32.                      #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px;
  33.        
  34.         }
  35.         .synth {
  36.         width:320px;
  37.         height:230px;
  38.         margin-left: 7cm;
  39.         border-color: #000000;
  40.         border-style: solid;
  41.         border-width: 5px;
  42.         }
  43.         .indie {
  44.         width: 320px;
  45.         height: 230px;
  46.         float: right;
  47.         margin-right: 8cm;
  48.         border-color: #000000;
  49.         border-style: solid;
  50.         border-width: 5px;
  51.         }
  52.         body, html {
  53.         height: 100%;
  54.         margin: 0;
  55.         overflow:hidden;
  56.         font-family: helvetica;
  57.         font-weight: 100;
  58.         }
  59.         .container {
  60.         position: relative;
  61.         height: 100%;
  62.         width: 100%;
  63.         left: 0;
  64.         -webkit-transition:  left 0.4s ease-in-out;
  65.         -moz-transition:  left 0.4s ease-in-out;
  66.         -ms-transition:  left 0.4s ease-in-out;
  67.         -o-transition:  left 0.4s ease-in-out;
  68.         transition:  left 0.4s ease-in-out;
  69.         }
  70.         .container.open-sidebar {
  71.          left: 240px;
  72.         }
  73.      
  74.       .swipe-area {
  75.           position: absolute;
  76.           width: 50px;
  77.           left: 0;
  78.       top: 0;
  79.           height: 100%;
  80.           background: #f3f3f3;
  81.           z-index: 0;
  82.       }
  83.       #sidebar {
  84.           background: #DF314D;
  85.           position: absolute;
  86.           width: 240px;
  87.           height: 100%;
  88.           left: -240px;
  89.           box-sizing: border-box;
  90.           -moz-box-sizing: border-box;
  91.       }
  92.       #sidebar ul {
  93.           margin: 0;
  94.           padding: 0;
  95.           list-style: none;
  96.       }
  97.       #sidebar ul li {
  98.           margin: 0;
  99.       }
  100.       #sidebar ul li a {
  101.           padding: 15px 20px;
  102.           font-size: 16px;
  103.           font-weight: 100;
  104.           color: white;
  105.           text-decoration: none;
  106.           display: block;
  107.           border-bottom: 1px solid #C9223D;
  108.           -webkit-transition:  background 0.3s ease-in-out;
  109.           -moz-transition:  background 0.3s ease-in-out;
  110.           -ms-transition:  background 0.3s ease-in-out;
  111.           -o-transition:  background 0.3s ease-in-out;
  112.           transition:  background 0.3s ease-in-out;
  113.       }
  114.       #sidebar ul li:hover a {
  115.           background: #C9223D;
  116.       }
  117.       .main-content {
  118.           width: 100%;
  119.           height: 100%;
  120.           padding: 10px;
  121.           box-sizing: border-box;
  122.           -moz-box-sizing: border-box;
  123.           position: relative;
  124.       }
  125.       .main-content .content{
  126.           box-sizing: border-box;
  127.           -moz-box-sizing: border-box;
  128.       padding-left: 60px;
  129.       width: 100%;
  130.       }
  131.       .main-content .content h1{
  132.           font-weight: 100;
  133.       }
  134.       .main-content .content p{
  135.           width: 100%;
  136.           line-height: 160%;
  137.       }
  138.       .main-content #sidebar-toggle {
  139.           background: #DF314D;
  140.           border-radius: 3px;
  141.           display: block;
  142.           position: relative;
  143.           padding: 10px 7px;
  144.           float: left;
  145.       }
  146.       .main-content #sidebar-toggle .bar{
  147.            display: block;
  148.           width: 18px;
  149.           margin-bottom: 3px;
  150.           height: 2px;
  151.           background-color: #fff;
  152.           border-radius: 1px;  
  153.       }
  154.       .main-content #sidebar-toggle .bar:last-child{
  155.            margin-bottom: 0;  
  156.       }
  157.     </style>
  158.     <script type="text/javascript">
  159.       $(window).load(function(){
  160.         $("[data-toggle]").click(function() {
  161.           var toggle_el = $(this).data("toggle");
  162.           $(toggle_el).toggleClass("open-sidebar");
  163.         });
  164.          $(".swipe-area").swipe({
  165.               swipeStatus:function(event, phase, direction, distance, duration, fingers)
  166.                   {
  167.                       if (phase=="move" && direction =="right") {
  168.                           $(".container").addClass("open-sidebar");
  169.                            return false;
  170.                       }
  171.                       if (phase=="move" && direction =="left") {
  172.                           $(".container").removeClass("open-sidebar");
  173.                            return false;
  174.                       }
  175.                   }
  176.           });
  177.       });
  178.      
  179.     </script>
  180.     </head>
  181.     <body>
  182.     <div class="container">
  183.       <div id="sidebar">
  184.           <ul>
  185.             <li><a href="index.html">Home</a></li>
  186.             <li><a href="synth.html">Muzyka elektroniczna, syntezatory</a></li>
  187.             <li><a href="indie.html">Gry niezależne (indie)</a></li>
  188.             <li><a href="ps.html">Grafika komputerowa</a></li>
  189.             <li><a href="sec.html">Bezpieczeństwo</a></li>
  190.             </ul>
  191.       </div>
  192.       <div class="main-content">
  193.          <div class="swipe-area"></div>
  194.          <a href="#" data-toggle=".container" id="sidebar-toggle">
  195.             <span class="bar"></span>
  196.             <span class="bar"></span>
  197.             <span class="bar"></span>
  198.           </a>
  199.         <div class="content">
  200.     <p align="center"><font size="36">
  201.     Moje zainteresowania
  202.     </font></p>
  203.     <a href="synth.html"><img class="synth" src="synthesizers.jpg" >
  204.     <a href="indie.html"><img class="indie" src="indie.jpg" >
  205.     <br>
  206.     <br>
  207.     <a href="ps.html"><img class="synth" src="ps.jpg" >
  208.     <a href="sec.html"><img class="indie" src="security.jpg" >
  209.     <br>
  210.     <br>
  211.     <br>
  212.     </div>
  213.     </div>
  214.     </div> 
  215.    
  216.    
  217.     </body>
  218. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!