API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 29th, 2018
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.  
  6.     <meta charset="utf-8">
  7.     <meta name="viewpost" content="width=device-width; maximum-scale=1">
  8.  
  9.     <title>Takos</title>
  10.     <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
  11.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
  12.     <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
  13.     <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
  14. <style type="text/css">
  15.  
  16.     #home {
  17.         position: sticky;
  18.         min-height: 100vh;
  19.         background-size: cover;
  20.         background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)), url("./assets/imgs/jumbotronimg2.jpeg");
  21.         margin-top: 60px;
  22.     }
  23.  
  24.     @media only screen and (max-width: 400px) {
  25.         #home  {
  26.             position: sticky;
  27.             min-height: 100vh;
  28.             background-size: cover;
  29.             background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2)), url("./assets/imgs/jumbotronimg2mobile.jpeg");
  30.             margin-top: 50px;
  31.            
  32.         }
  33.     }
  34.  
  35.         @font-face {
  36.     font-family: '3dumbregular';
  37.     src: url('./assets/imgs/3Dumb-webfont.eot');
  38.     src: url('./assets/imgs/3Dumb-webfont.eot?#iefix') format('embedded-opentype'),
  39.          url('./assets/imgs/3Dumb-webfont.woff2') format('woff2'),
  40.          url('./assets/imgs/3Dumb-webfont.woff') format('woff'),
  41.          url('./assets/imgs/3Dumb-webfont.ttf') format('truetype'),
  42.          url('./assets/imgs/3Dumb-webfont.svg#3dumbregular') format('svg');
  43.     font-weight: normal;
  44.     font-style: normal;
  45.  
  46. }
  47.  
  48.  
  49. @font-face {
  50.     font-family: 'permanent_markerregular';
  51.     src: url('./assets/imgs/PermanentMarker-webfont.eot');
  52.     src: url('./assets/imgs/PermanentMarker-webfont.eot?#iefix') format('embedded-opentype'),
  53.          url('./assets/imgs/PermanentMarker-webfont.woff2') format('woff2'),
  54.          url('./assets/imgs/PermanentMarker-webfont.woff') format('woff'),
  55.          url('./assets/imgs/PermanentMarker-webfont.ttf') format('truetype'),
  56.          url('./assets/imgs/PermanentMarker-webfont.svg#permanent_markerregular') format('svg');
  57.     font-weight: normal;
  58.     font-style: normal;
  59.  
  60. }
  61.  
  62. /*#sobreheading {
  63.     font-family: '3dumbregular';
  64.     color: black;
  65.     text-align: center;
  66.     font-size: 49px;
  67.     /*padding-top: 40px;*/
  68.  
  69.  
  70. /*}*/
  71.  
  72. body {
  73.     overflow-x: hidden;
  74. }
  75. .navbar-toggle {
  76.     z-index:3;
  77. }
  78.  
  79. .navbarbrandimg {
  80.     height: auto;
  81.     width: 70px;
  82.     margin-top: -7px;
  83.     position: relative;
  84.     left: 50%;
  85.     margin-left: -35px !important;  /* 50% of your logo width */
  86.     display: block;
  87.     padding: 0;
  88. }
  89.  
  90. .navbarsocial {
  91.     height: auto;
  92.     width: 30px;
  93.     margin-top: -3px;
  94. }
  95. nav ul li a,
  96. nav ul li a:after,
  97. nav ul li a:before {
  98.   transition: all .5s;
  99. }
  100. .navbar-default .navbar-nav>li>a:hover {
  101.   color: #F2D08C !important;
  102. }
  103.  
  104. nav.stroke ul li a {
  105.   position: relative;
  106. }
  107. nav.stroke ul li a:after {
  108.   position: absolute;
  109.   bottom: 0;
  110.   left: 0;
  111.   right: 0;
  112.   margin: auto;
  113.   width: 0%;
  114.   content: '.';
  115.   color: transparent;
  116.   background: #E3CB9C;
  117.   height: 1px;
  118. }
  119. nav.stroke ul li a:hover:after {
  120.   width: 100%;
  121. }
  122.  
  123.  
  124. .navbar-default .navbar-nav>li>a {
  125.     color: white !important;
  126.     text-decoration: none;
  127.     padding-top: 15px;
  128.     font-size: 16px;
  129. }
  130. .navbar {
  131.     vertical-align: middle;
  132.     background-color: #937C7A !important;
  133.     padding: 5px 0 5px 0;
  134.     margin-bottom: 0;
  135.     border: 0 !important;
  136.     font-family: 'permanent_markerregular';
  137. }
  138.  
  139. .navbar-brand {
  140.     position: absolute;
  141.     left: 50%;
  142.     margin-left: -35px !important;  /* 50% of your logo width */
  143.     display: block;
  144.     padding: 0;
  145. }
  146. .navbar-right {
  147.     padding-right: 10px;
  148. }
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  .header-brand {
  158.     height: auto;
  159.     width: 30%;
  160.     /*this block of code below vertically and horizontally aligns an object on the page AND is responsive */   
  161.     max-height: 90%;
  162.     max-width: 90%;
  163.     position: absolute;
  164.     top: 0;
  165.     bottom: 0;
  166.     left: 0;
  167.       right: 0;
  168.       margin: auto;
  169.        -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  170.        -moz-animation: fadein 2s; /* Firefox < 16 */
  171.        -ms-animation: fadein 2s; /* Internet Explorer */
  172.         -o-animation: fadein 2s; /* Opera < 12.1 */
  173.            animation: fadein 2s;
  174. }
  175.  
  176. @keyframes fadein {
  177.    from { opacity: 0; }
  178.    to   { opacity: 1; }
  179. }
  180.  
  181. /* Firefox < 16 */
  182. @-moz-keyframes fadein {
  183.    from { opacity: 0; }
  184.    to   { opacity: 1; }
  185. }
  186.  
  187. /* Safari, Chrome and Opera > 12.1 */
  188. @-webkit-keyframes fadein {
  189.     from { opacity: 0; }
  190.     to   { opacity: 1; }
  191. }
  192.  
  193. /* Internet Explorer */
  194. @-ms-keyframes fadein {
  195.     from { opacity: 0; }
  196.     to   { opacity: 1; }
  197. }
  198.  
  199. /* Opera < 12.1 */
  200. @-o-keyframes fadein {
  201.    from { opacity: 0; }
  202.    to   { opacity: 1; }
  203. }
  204.  
  205. @media only screen and (max-width: 600px) {
  206.     .header-brand {
  207.         height: auto;
  208.         width:60%;
  209.     }
  210. }
  211.     </style>
  212.    
  213.    
  214.    
  215.  
  216. </head>
  217. <body>
  218.     <img src="./assets/imgs/jumbotronimg2.jpeg" style="display:none">
  219.  
  220.     <nav class="stroke navbar navbar-fixed-top navbar-default"  role="navigation">
  221.       <div class="navbar-header">
  222.         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  223.           <span class="icon-bar"></span>
  224.           <span class="icon-bar"></span>
  225.           <span class="icon-bar"></span>
  226.         </button>    
  227.         <a class="navbar-brand" href="#">
  228.             <img alt="Takos" src="assets/imgs/takossmaller.png" class="navbarbrandimg">
  229.         </a>
  230.       </div>
  231.       <div class="navbar-collapse collapse">
  232.         <ul class="nav navbar-nav navbar-left">
  233.             <li class="navbartext nav-link"><a href="#aboutuss">Sobre</a></li>
  234.             <li class="navbartext nav-link"><a href="#galeriascroll">Galería</a></li>
  235.             <li class="navbartext nav-link"><a href="#cartascroll">Carta</a></li>
  236.             <li class="navbartext nav-link"><a href="#contactoscroll">Contacto</a></li>
  237.         </ul>
  238.         <ul class="nav navbar-nav navbar-right">
  239.             <li class="navbartext">
  240.                 <a target="_blank" rel="nofollow" href="https://www.facebook.com/takosalpastormadrid/">
  241.                     <img class="navbarsocial" src="./assets/imgs/facebooknav.png">
  242.                 </a>
  243.             </li>
  244.  
  245.             <li class="navbartext">
  246.                 <a target="_blank" rel="nofollow"  href="https://twitter.com/TakosPastor">
  247.                     <img class="navbarsocial" src="./assets/imgs/twitternav.png">
  248.                 </a>
  249.             </li>
  250.         </ul>
  251.       </div>
  252.     </nav>
  253.  
  254.  
  255.  
  256.  
  257.     <header id="home">
  258.         <div class="header-content">
  259.         <p> </p>
  260.             <img src="./assets/imgs/takoslarger-min2.png" class="header-brand center-block img-responsive">
  261.         </div>
  262.     </header>
  263.    
  264.    
  265.         <div id="aboutus" class="container-fluid about-us">
  266.         <span id="aboutuss"></span>
  267.             <h1 id="sobreheading">Sobre Nosotros</h1>
  268.             <div class="descbox">
  269.                 <p>Lorem ipsum dolor sit amet, te eros graece eloquentiam qui, ut graeco persius mea. Cum et alterum apeirian sensibus, vim no nobis bonorum constituto. Mea brute eruditi ullamcorper eu. Ut pri munere euismod platonem. Unum vocent democritum mel cu, placerat oportere dissentias mea ei. Duo libris copiosae complectitur cu, affert fierent accusata usu ea.
  270.                 </p>
  271.             </div>
  272.         </div>
  273.  
  274.         <div class="container-fluid secondpart">
  275.             <span id="galeriascroll"></span>
  276.             <h1 id="galeriaheading">Galería</h1>
  277.  
  278.             <div class="swiper-container">
  279.                 <!-- Additional required wrapper -->
  280.                 <div class="swiper-wrapper">
  281.                     <!-- Slides -->
  282.                     <div class="swiper-slide">
  283.                         <a href="./assets/imgs/photo1.png" data-fancybox="gallery">
  284.                             <img src="./assets/imgs/photo1thumbnail.png" alt=""/>
  285.                         </a>
  286.                     </div>
  287.  
  288.                     <div class="swiper-slide">
  289.                         <a href="./assets/imgs/photo2.png" data-fancybox="gallery">
  290.                             <img src="./assets/imgs/photo2thumbnail.png" alt=""/>
  291.                         </a>
  292.                     </div>
  293.  
  294.                     <div class="swiper-slide">
  295.                         <a href="./assets/imgs/photo3.png" data-fancybox="gallery">
  296.                             <img src="./assets/imgs/photo3thumbnail.png" alt=""/>
  297.                         </a>
  298.                     </div>
  299.  
  300.                     <div class="swiper-slide">
  301.                         <a href="./assets/imgs/photo4.png" data-fancybox="gallery">
  302.                             <img src="./assets/imgs/photo4thumbnail.png" alt=""/>
  303.                         </a>
  304.                     </div>
  305.  
  306.                     <div class="swiper-slide">
  307.                         <a href="./assets/imgs/photo6.png" data-fancybox="gallery">
  308.                             <img src="./assets/imgs/photo6thumbnail.png" alt=""/>
  309.                         </a>
  310.                     </div>
  311.  
  312.                     <div class="swiper-slide">
  313.                         <a href="./assets/imgs/photo7.png" data-fancybox="gallery">
  314.                             <img src="./assets/imgs/photo7thumbnail.png" alt=""/>
  315.                         </a>
  316.                     </div>
  317.  
  318.                     <div class="swiper-slide">
  319.                         <a href="./assets/imgs/photo9.png" data-fancybox="gallery">
  320.                             <img src="./assets/imgs/photo9thumbnail.png" alt=""/>
  321.                         </a>
  322.                     </div>
  323.  
  324.                    
  325.                 </div>
  326.                 <!-- If we need pagination -->
  327.                 <div class="swiper-pagination"></div>
  328.              
  329.                 <!-- If we need navigation buttons -->
  330.                 <div class="swiper-button-prev"></div>
  331.                 <div class="swiper-button-next"></div>
  332.             </div>
  333.         </div>
  334.  
  335.         <!-- <div id="gradient2"></div> -->
  336.  
  337.         <div class="container-fluid thirdpart">
  338.             <span id="cartascroll"></span>
  339.             <h1 id ="cartaheading">Nuestra Carta</h1>
  340.  
  341.            
  342.  
  343.             <div class="swiper-container">
  344.                 <!-- Additional required wrapper -->
  345.                 <div class="swiper-wrapper">
  346.                     <!-- Slides -->
  347.                     <div class="swiper-slide">
  348.                         <a href="./assets/imgs/menu1.png" data-fancybox="carta">
  349.                             <img src="./assets/imgs/menu1small.png" alt=""/>
  350.                         </a>
  351.                     </div>
  352.  
  353.                     <div class="swiper-slide">
  354.                         <a href="./assets/imgs/menu2.png" data-fancybox="carta">
  355.                             <img src="./assets/imgs/menu2small.png" alt=""/>
  356.                         </a>
  357.                     </div>
  358.  
  359.                     <div class="swiper-slide">
  360.                         <a href="./assets/imgs/menu3.png" data-fancybox="carta">
  361.                             <img src="./assets/imgs/menu3small.png" alt=""/>
  362.                         </a>
  363.                     </div>
  364.  
  365.                    
  366.                 </div>
  367.                 <!-- If we need pagination -->
  368.                 <div class="swiper-pagination"></div>
  369.              
  370.                 <!-- If we need navigation buttons -->
  371.                 <div class="swiper-button-prev"></div>
  372.                 <div class="swiper-button-next"></div>
  373.             </div>
  374.         </div>
  375.  
  376.         <div class="container-fluid fourthpart">
  377.             <span id="contactoscroll"></span>
  378.             <h1 id="contactoheading">Contacto</h1>
  379.  
  380.             <div class="container mapAndsocial">
  381.                 <div class="row">
  382.                     <div class="map col-md-6">
  383.                         <div id="my-fast-map" data-iframe-width="100%" data-iframe-height="300" data-iframe-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.542437506494!2d-3.70592488469201!3d40.41898617936477!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42287dec736e4f%3A0x5156e65b93e6f08a!2sTakos!5e0!3m2!1sen!2ses!4v1524775236466">
  384.                             <a href="#" title="Click to activate map">
  385.                                 <img class="mapimg" src="https://maps.googleapis.com/maps/api/staticmap?center=Madrid&zoom=13&scale=1&size=455x300&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:%7CCalle+de+la+Abada,+2,+28013+Madrid&markers=size:mid%7Ccolor:0xff0000%7Clabel:%7CCalle+Botoneras,+7,+28012+Madrid">
  386.                             </a>
  387.                         </div>
  388.                     </div>
  389.                     <div class="socialmedia col-md-6">
  390.  
  391.                     <p><img src="./assets/imgs/placeholder.png">Calle de la Abada, 2, 28013 Madrid<br>
  392.                     <img src="./assets/imgs/wall-clock.png"> Martes - Domingo 13:30-00:00  Lunes Cerrado</p>
  393.  
  394.                     <p id="paragraphspace">&nbsp;</p>
  395.  
  396.                     <p>
  397.                     <img src="./assets/imgs/placeholder.png">Calle Botoneras, 7, 28012 Madrid<br>
  398.                     <img src="./assets/imgs/wall-clock.png"> Miércoles - Domingo 13:30-00:00  Lunes y Martes Cerrado<br>
  399.                     </p>
  400.                         <a target="_blank" rel="nofollow" href="https://www.facebook.com/takosalpastormadrid/">
  401.                             <img class="social hvr-float-shadow" src="./assets/imgs/facebook.png">
  402.                         </a>
  403.  
  404.                         <a target="_blank" rel="nofollow" href="https://twitter.com/TakosPastor">
  405.                             <img class="social" src="./assets/imgs/twitter-draw-logo.png">
  406.                         </a>
  407.                     </div>
  408.                 </div>
  409.             </div>
  410.  
  411.  
  412.         <div class="webplate-overlay"></div>
  413.        
  414.  
  415.    
  416.  
  417.  
  418.  
  419.  
  420.  
  421.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  422.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  423.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
  424.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
  425.     <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
  426.  
  427.  
  428.     <script>
  429.     jQuery(document).ready(function($) {
  430.         $('a[href*="#"]')
  431.       // Remove links that don't actually link to anything
  432.       .not('[href="#"]')
  433.       .not('[href="#0"]')
  434.       .click(function(event) {
  435.         // On-page links
  436.         if (
  437.           location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
  438.           &&
  439.           location.hostname == this.hostname
  440.         ) {
  441.           // Figure out element to scroll to
  442.           var target = $(this.hash);
  443.           target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  444.           // Does a scroll target exist?
  445.           if (target.length) {
  446.             // Only prevent default if animation is actually gonna happen
  447.             event.preventDefault();
  448.             $('html, body').animate({
  449.               scrollTop: target.offset().top
  450.             }, 1000, function() {
  451.               // Callback after animation
  452.               // Must change focus!
  453.               var $target = $(target);
  454.               $target.focus();
  455.               if ($target.is(":focus")) { // Checking if the target was focused
  456.                 return false;
  457.               } else {
  458.                 $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
  459.                 $target.focus(); // Set focus again
  460.               };
  461.             });
  462.           }
  463.         }
  464.       });
  465.  
  466.         jQuery('.fancybox').fancybox();
  467.    
  468.     $('.nav-link').on('click',function() { //this makes the collapsable navabr dissappear when anchor tag is clicked
  469.         $('.navbar-collapse').collapse('hide');
  470.     });
  471.  
  472.     jQuery(function($) {
  473.   $('#my-fast-map a').on('click', function(e) {
  474.     e.preventDefault();
  475.         map = $(this).parent();
  476.    
  477.     iframe_src = map.data('iframe-src');
  478.     iframe_width = map.data('iframe-width');
  479.     iframe_height = map.data('iframe-height');
  480.  
  481.     map.html('<iframe src="' + iframe_src + '" width="' + iframe_width + '" height="' + iframe_height + '" allowfullscreen></iframe>');
  482.  
  483.     return false;
  484.   });
  485. });
  486.  
  487.  
  488.     });
  489.     </script>
  490.  
  491.     <script>
  492.    
  493.  
  494.  
  495.     var swiper = new Swiper('.swiper-container', {
  496.       navigation: {
  497.         nextEl: '.swiper-button-next',
  498.         prevEl: '.swiper-button-prev',
  499.       },
  500.       autoHeight: 'true',
  501.     });
  502.  
  503.     window.sr = ScrollReveal();
  504.    
  505.     sr.reveal('h1', {
  506.         duration: 2000,
  507.         origin:'bottom',
  508.         viewFactor: 0.4
  509.     });
  510.  
  511.     sr.reveal('.map', {
  512.         duration: 2000,
  513.         origin:'left',
  514.         delay: 100,
  515.         viewFactor: 0.3
  516.     });
  517.     sr.reveal('.descbox', {
  518.         duration: 2000,
  519.         origin:'top',
  520.         delay: 480,
  521.         viewFactor: 0.4
  522.     });
  523.     sr.reveal('.swiper-container', {
  524.         duration: 2000,
  525.         origin:'top',
  526.         delay: 480,
  527.         viewFactor: 0.2
  528.     });
  529.     sr.reveal('.social', {
  530.         duration: 2000,
  531.         origin:'right',
  532.         delay: 500,
  533.         viewFactor: 0.3
  534.     });
  535.     </script>
  536.        
  537.    
  538.        
  539.    
  540.    
  541. </body>
  542. </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!