API tools faq
paste
eulaliaaires

leticia html

eulaliaaires
Aug 13th, 2018
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.21 KB | None | 0 0
raw download clone embed print report
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title>Leticia Martelli</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/index.css' %}" />
  10.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  11.     <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,700,800,900|Vidaloka" rel="stylesheet">
  12.     <script src="{% static 'js/index.js' %}"></script>
  13.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  14.     <script src="../../static/js/mediaelement-and-player.min.js"></script>
  15.     <meta name="robots" content="noindex,follow" />
  16. </head>
  17. <body>
  18.     <nav class="navbar" id="navbar_id">
  19.         <img class="logo" id="logo_id" src="../../static/img/logo_inteira.png" alt="logo-leticia">
  20.         <div class="hamburger_menu_icon" id="hamburger_icon">
  21.             <img id="hamburger_icon" src="../../static/img/hamburger_branco.png">
  22.         </div>
  23.          <ul class ="menu">
  24.             <li id="menu_options_id">
  25.                 <a href="#" id="nav_legal_english">THE LEGAL ENGLISH COURSE</a>
  26.             </li>
  27.             <li>
  28.                 <a href="#" id="nav_methodology">METHODOLOGY</a>
  29.             </li>
  30.             <li>
  31.                 <a href="#" id="nav_other_services">OTHER SERVICES</a>
  32.             </li>
  33.             <li>
  34.                 <a href="#" id="nav_my_profile">MY PROFILE</a>
  35.             </li><li>
  36.                 <a href="#" id="nav_english_drops">LEGAL ENGLISH DROPS</a>
  37.             </li>
  38.             <li>
  39.                 <a href="#" id="nav_contact_me">CONTACT ME</a>
  40.             </li>
  41.         </ul>
  42.     </nav>
  43.             <ul class ="menu_hamburger" id="menu_hamburger_id">
  44.                 <li id="menu_hamburger_options_id">
  45.                     <a href="#" id="nav_legal_english">THE LEGAL ENGLISH COURSE</a>
  46.                 </li>
  47.                 <li>
  48.                     <a href="#" id="nav_methodology">METHODOLOGY</a>
  49.                 </li>
  50.                 <li>
  51.                     <a href="#" id="nav_other_services">OTHER SERVICES</a>
  52.                 </li>
  53.                 <li>
  54.                     <a href="#" id="nav_my_profile">MY PROFILE</a>
  55.                 </li><li>
  56.                     <a href="#" id="nav_english_drops">LEGAL ENGLISH DROPS</a>
  57.                 </li>
  58.                 <li>
  59.                     <a href="#" id="nav_contact_me">CONTACT ME</a>
  60.                 </li>
  61.             </ul>
  62.     <div class="banner" id="banner_id">
  63.         <h1 class="title">Beyond Legal Terminology</h1>
  64.         <p class="subtitle">INGLÊS JURÍDICO COM LETICIA MARTELLI</p>
  65.         <div class="clip"></div>
  66.         <div class="scroll_clip">
  67.             <p>SCROLL</p>
  68.         </div>
  69.         <div class="clip_mobile">
  70.                 <img src="../../static/img/clip.png">
  71.         </div>
  72.         <a href="#" class="watch_video" onclick ="show('video_id')">WATCH THE VIDEO <span class="play_icon"><i class="far fa-play-circle"></i></span></a>
  73.         <div class="video_container" id="video_id">
  74.             <video width="1040" height="590" controls onseek onseeking>
  75.                 <source src="../../static/media/jout.mp4" type="video/mp4">
  76.             </video>
  77.         </div>
  78.         <!--<div class="scroll">SCROLL</div>!-->
  79.     </div>
  80.     <div class"teste" id="teste">lalalala</div>
  81.     <div class="teste2" id="resre2">aaaaaaaaa</div>
  82.    
  83.    
  84.    
  85.     <script>
  86.  
  87.         var navbarHeight = 118;
  88.         var bannerHeight = $('#banner').height();
  89.         var servicoHeight = 0;
  90.         var sobrenosHeight = 0;
  91.         var depoimentosHeight = 0;
  92.         var contatosHight = 0;
  93.  
  94.  jQuery("document").ready(function($){
  95.     //Elemento que vai receber os eventos.
  96.     var nav = $('.navbar');
  97.     var bannerHeight = $('#banner_id').height();
  98.     var testeHeight = $('#teste').height() + bannerHeight; //altura de teste
  99.     var teste2Height = $('#resre2').height() + testeHeight; //altura de teste
  100.     var legalEnglishHeight = $('#legal_id').height() + bannerHeight;
  101.     var methodologyHeight = $('#methodology_id').height() +  legalEnglishHeight;
  102.     var otherServicesHeight = $('#other_id').height() + methodologyHeight;
  103.     var englishDropsHeight = $('#drops_id').height() + otherServicesHeight;
  104.     var contactMeHeight = $('#contact_id').height() + englishDropsHeight ;
  105.     //Ao rolar a página, a função será executada.
  106.     $(window).scroll(function (navB) {
  107.         //Se o tamanho da parte rolada for maior que 136px (pixels) ->
  108.         if ($(this).scrollTop() >= 10 && $(this).scrollTop() <= testeHeight ) {
  109.            nav.addClass("black_navbar"); //Aplica a classe scrolled_menu no elemento .menu
  110.             $('#navbar_id').find("img").attr('src', '../../static/img/logo_encurtada.png');
  111.             $('#hamburger_icon').find("img").attr('src', '../../static/img/hamburger_branco.png');
  112.         }
  113.         else if ($(this).scrollTop() <= bannerHeight){
  114.            nav.removeClass("black_navbar");
  115.            nav.removeClass("white_navbar");
  116.            $('#navbar_id').find("img").attr('src', '../../static/img/logo_inteira.png');
  117.            $('#hamburger_icon').find("img").attr('src', '../../static/img/hamburger_branco.png');
  118.        }
  119.        else {
  120.            nav.removeClass("black_navbar"); //Remove a classe scrolled_menu no elemento .menu
  121.            nav.addClass("white_navbar");
  122.            $('#navbar_id').find("img").attr('src', '../../static/img/logo_encurtada.png');
  123.            $('#hamburger_icon').find("img").attr('src', '../../static/img/hamburger_preto.png');
  124.        }
  125.    });
  126.    $('#hamburguer_icon').on('click', function (event) {
  127.        if (menu_hamburger.style.display == "none") {
  128.            $("#menu_hamburger_id").slideDown("slow");
  129.        } else {
  130.            $("#menu_hamburger_id").slideUp("slow");
  131.        }
  132.    });
  133.  
  134.    });
  135.    window.onload = navB;
  136.    window.onscroll = navB;
  137.    window.onresize = navB;
  138.    </script>
  139.        
  140. </body>
  141. </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!