SHARE
TWEET

Teste

a guest Jan 3rd, 2018 101 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html><head>
  3.         <meta charset="utf-8">
  4.         <title>Documento sem título</title>
  5.         <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  6.         <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  7.         <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
  8.         <style>
  9.             *{
  10.                 padding: 0px;
  11.                 margin: 0px;
  12.                 box-sizing: border-box;
  13.             }
  14.             .header{
  15.                 width: 100%;
  16.                 height: 1000px;
  17.                 background-image: url(../6.jpg);
  18.                 background-size: cover;
  19.             }
  20.             .navbar{
  21.                 width: 100%;
  22.                 padding: 20px;
  23.                 position: fixed;
  24.                 top:0px;
  25.                 text-align: center;
  26.                 transition: .5s;
  27.             }
  28.             .navbar ul li{
  29.                 list-style-type: none;
  30.                 display: inline-block;
  31.                 padding: 10px 50px;
  32.                 color: white;
  33.                 font-size: 24px;
  34.                 font-family: sans-serif;
  35.                 cursor: pointer;
  36.                 border-radius: 10px;
  37.             }  
  38.             .navbar ul li:hover{
  39.                 background: orange;
  40.             }
  41.             .box{
  42.                 width: 80%;
  43.                 height: 2000px;
  44.                 background: green;
  45.                 margin: 20px auto;
  46.  
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.  
  52.         <div class="header">
  53.             <div class="navbar" id="nav">
  54.                 <ul>
  55.                     <li>Home</li>
  56.                     <li>Loja</li>
  57.                     <li>Contato</li>
  58.                     <li>Faq</li>
  59.                 </ul>
  60.             </div>
  61.         </div>
  62.         <div class="box">
  63.         </div>
  64.  
  65.  
  66.         <script>
  67.             var nav = document.getElementById('nav');
  68.             document.body.onscroll = () => {
  69.                 if (window.pageYOffset > 100) {
  70.  
  71.                     nav.style.background = "#007bff";
  72.  
  73.                 } else {
  74.                     nav.style.background = "transparent";
  75.                 }
  76.             }
  77.         </script>
  78.  
  79.     </body>
  80. </html>
RAW Paste Data
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
 
Top