title: Chrome don't show css background-img
body: <p>My problem is that when I check the page on the internet with Chrome on macOS it doesn't show background-images from CSS stylesheet. However, when I check it in Coda 2 everything works fine. Moreover it works when I open page in Chrome when I open the html file. Can you just tell what the problem might be, cause I've tried nearly everything?</p>
  
  <p><a href="http://avelitest.epizy.com/index.html" rel="nofollow noreferrer">http://avelitest.epizy.com/index.html</a></p>
  
  <p>P.S.</p>
  
  <p>I think the problem is somewhere in CSS cause at first it was working fine. </p>
  
  <p><a href="https://i.stack.imgur.com/WxguN.jpg" rel="nofollow noreferrer">CODA 2</a></p>
  
  <p><a href="https://i.stack.imgur.com/8QSJz.png" rel="nofollow noreferrer">CHROME</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
        cursor: url(file:///htdocs/img/aperture3.png), auto !important;         
       }
   
  body {
   
    margin: 0 auto;
    max-width: 100%;
   
  }
  a:link, a:visited, a:hover, a:active {
   
   
  }
  * {
        box-sizing: border-box;
        margin: 0%;
        padding: 0%;
        font-family: "Darker Grotesque" !important;
  }
  
  /*--------------- hero section --------------- */
  
  .video-container {
        position: absolute;
        width: 100%;
        height: 100vh;
        overflow: hidden;
  }
  
  video {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
  }
  
  .video-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #1b1b1b;
        opacity: 0.8;
  }
  
  .header {
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translate( -60%, 100%);  
          
  }
  
  .header h1 {
        color: #d3ae87;
        font-size: 80px !important;
        display: inline;
        transform: translate;
        text-align: center !important;
        padding-right: -200px;
   }
  
  @media(max-width: 900px) {
        .header {
              left: 50%;
        }
  
        .header h1 {
              font-size: 34px !important;
              text-align: center;
        }
  }
  
  a:hover {
   text-decoration: none;
   
  }
  
  
  /*--------------- navigation --------------- */
  
  .nav {
   
        width: 100%;
        height: 80px;
        position: fixed;
        z-index: 2;
        
  }
  
  .nav.scrolled {
     width:100%;
        background-color: #161616 !important;
        transition: background-color 500ms linear;
  }
  
  .nav #brand {
        float: left;
        display: block;
        margin-left: 1.5%;
        line-height: 80px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 40px;
  
  }
  .nav #brand a {
        color: #fff;
        font-family: Poppins !important;
        transition: all 500ms ease-out;
  }
  
  .nav #brand a:hover {
        text-decoration: none;
       
  }
  
  .nav #menu {
        float: left;
        right: 40px;
        position: fixed;
  }
  
  .nav #menu li {
        padding-left: 40px;
        display: inline-block;
        font-weight: lighter !important;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 80px;
        position: relative;
        transition: all 500ms ease-out;
  }
  
    .nav #menu li a {
        font-family: sans-serif !important;
        color: rgb(156, 156, 156);
        transition: all 500ms ease-out;
  }
  
  .nav #menu li a:hover {
     text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 15px #d3bc97;
     color: white;
        text-decoration: none;
        transition: all 500ms ease-out;      
         -webkit-filter: drop-shadow(0px 0px 20px #d3bc97) ;
         filter: drop-shadow(0px 0px 20px #d3bc97) ;
         
  }
  
  
  #toggle {
        position: absolute;
        right: 40px;
        top: 20px;
        font-weight: 300;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        z-index: 2;
        width: 30px;
        height: 30px;
        float: right;
        transition: all 0.3s ease-out;
        visibility: hidden;
        opacity: 0;
  }
  
  .close-btn {
        position: absolute;
        right: 30px;
        font-weight: 300;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        z-index: 2;
        top: -2px;
        line-height: 80px;
  }
  .countdown {
   text-decoration: none;
   font-weight: 400;
   filter: drop-shadow (0px 0px 5px #f24333); 
   -webkit-filter: drop-shadow(0px 0px 5px #f24333) ;
   text-shadow: 0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
   -webkit-text-shadow:0 0 2px #f24333, 0 0 5px #f24333, 0 0 8px #f24333, 0 0 10px #f24333;
   color:white !important;
   }
  #resize {
        z-index: 2;
        top: 0px;
        position: fixed;
        background: #0f0f0f;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition: all 1s ease-out;
    
  }
  
  #resize #menu {
     
        height: 90px;
        position: absolute;
        left: 45%;
        transform: translateX(-40%);
        text-align: center;
        display: table-cell;
        vertical-align: center;
  }
  
  #resize #menu li {
        display: block;
        text-align: center;
        padding: 10px 0;
        font-size: 50px;
        text-transform: uppercase;
        min-height: 50px;
        font-weight: bold;
        transition: all 0.3s ease-out;
  }
  
  #resize li:nth-child(1) {
        margin-top: 140px;
  }
  
  #resize #menu li a {
        color: #fff;
  }
  
  #resize #menu li a:hover {
        text-decoration: none;
  }
  
  #resize.active {
     
        visibility: visible;
        opacity: 1;
  }
  
  @media(max-width: 900px) {
        #toggle {
              visibility: visible;
              opacity: 1;
              margin-top: 6px;
              margin-right: 4px;
        }
  
        nav #brand {
              margin-left: 10px;
        }
  
        #resize ul li a {
              font-size: 15px;
              font-family: "Poppins" !important;
              font-weight: lighter !important;
              color: rgb(156, 156, 156) !important;
              transition: all 500ms ease-out;
        }
  
        nav #menu {
              display: none;
        }
  }
  
  @media(min-width: 900px) {
        #resize {
              visibility: hidden !important;
        }
  }
  
  /*--------------- about section starts  --------------- */
  
  .content {
        position: absolute;
        margin-top: 100vh;
        width: 100%;
  }
  
  section {
        padding: 140px 0;
  }
  
  .section-index {
        color: #d3ae87;
        font-weight: bolder;
        font-size: 20px;
        font-family: 'Poppins' !important;
  }
  
  .section-heading {
        color: grey;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 18px;
  }
  
  .section-subheading {
        color: grey;
        margin: 10px 0;
  }
  
  .section-info {
        font-size: 24px;
        color: grey;
  }
  
  .more {
        margin: 40px 0;
  }
  
  button {
        background: none;
        border: .3pt solid rgba(184, 140, 93, 0.7);
        text-transform: uppercase !important;
        font-size: 12px !important;
        letter-spacing: 2px;
        padding: 18px 36px;
        color: black;
  
  }
  
  #btn a {
   text-decoration: none !important;
   color: black;
  }
  
  #btn {
    min-height: 50px;
        padding: 0 30px;
        border-radius: 0;
        font-size: 12px;
        text-transform: uppercase;
        font-family: 'Poppins' !important;
   
  }
  
  /*--------------- services section starts  --------------- */
  
  .services {
        background: #161616;
  }
  
  .service {
        margin: 30px 0;
  }
  
  .icon ion-icon {
        font-size: 36px;
        color: #d3ae87;
  }
  
  .icon ion-icon:hover {
      text-shadow: 0 0 2px #d3bc97, 0 0 5px #d3bc97, 0 0 8px #d3bc97, 0 0 10px #d3bc97, 0 0 12px #d3bc97, 0 0 200px #d3bc97;
   filter: drop-shadow (0px 0px 5px #d3bc97);
   -webkit-filter: drop-shadow(0px 0px 5px #d3bc97) ;
   transition: 1s ease-in-out;
  }
  
  .icon-title {
        font-size: 28px;
        margin-bottom: 4px;
        color: rgb(182, 182, 182);
        font-weight: lighter;
  }
  
  /*--------------- our team section starts  --------------- */
  
  #txt {
   display: inline !important;
   font-size: 15px;
   overflow: hidden;
   
  }
  .row{
   padding-right: 7%;
  }
  .team-member, .team-img {
        position: relative;
  }
  
  .team-img {
        background: grey;
        height: 400px;
        width: 300px;
        
        
  }
  
  .members {
        margin: 0% -15%;
        
  }
  
  .team-title {
        margin: 20px 0px;
        margin-right: -200px;      
  }
  
  .team-title h5 {
        font-size: 28px;
  }
  
  .team-title span {
        font-size: 20px;
  }
  
  .team-member {
        overflow: visible;
  
  .team-one {
   
        background: url ("file:///htdocs/img/FEDOR.jpg") no-repeat 50% 50%;
        background-size: cover;
        
        
  }
  
  .team-two {
   
        background: url ("file:///htdocs/img/ANDREI.jpg") no-repeat 50% 50%;
        background-size: cover;
       
  }
  
  .team-three {
   
   background: url ("file:///htdocs/img/ILJA.jpg") no-repeat 50% 50%;
   background-size: cover;
   
  }
  
  /*--------------- newsletter section starts  --------------- */
  
  .newsletter {
        padding: 140px 0;
        background: #161616;
        background: url(file:///htdocs/img/subcribe.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
  }
  
  .newsletter input {
        text-transform: uppercase;
  }
  
  .newsletter .news-data {
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
        position: relative;
  }
  
  .newsletter h1 {
        color: #fff;
        float: center;
        position: center !important;
        margin-bottom: 40px;
  }
  
  .newsletter .form-control {
   float: center;
  position: center !important;
        height: 50px;
        border-color: #fff;
        border-radius: 0 !important;
  }
  
  .form-control:focus {
        box-shadow: none !important;
        border: none !important;
  }
  
  ::placeholder {
        letter-spacing: 4px;
  }
  
  .newsletter .btn {
        min-height: 50px;
        padding: 0 30px;
        border-radius: 0;
        background: #000;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: Poppins !important;
  }
  
  /*--------------- contact section starts here --------------- */
  
  #contact-form {
        margin: 5% 0;
  }
  
  .contact .icon-title {
        margin-top: 10px;
        color: #000;
  }
  
  #contact-form ul {
        list-style: none;
        margin-bottom: 40px;
        border-radius: 0;
  }
  
  #contact-form li:last-of-type {
        border-bottom: none;
  }
  
  #contact-form label {
        display: block;
        font-size: 22px;
        color: rgb(97, 97, 97);
  }
  
  #contact-form input, #contact-form textarea {
        width: 100%;
        padding: 5px;
        border: none;
        resize: vertical;
        background: transparent;
        color: #101010;
        font-weight: bolder;
  }
  
  input:focus {
        outline: none !important;
        border: none !important;
  }
  
  textarea:focus {
        outline: none !important;
        border: none !important;
  }
  
  .textarea {
        border-bottom: 1px solid #c9c9c9;
  }
  
  @media(max-width: 900px) {
        #contact-form {
              margin: 5% 0;
              width: 98%;
        }
  }
  
  
  
  /*--------------- footer section starts here --------------- */
  
  .footer {
        background: #161616;
  }
  
  
  
  #media, #address, #mail {
        text-align: center !important;
       
  }
  
  #mail a:hover {
   text-decoration: none;
  }
  
  #media a:link, a:hover, a:visited {
   color:white;
  }
  
  .footer .container {
        padding: 160px 0;
  }
  
  .footer li, p, h4 {
        font-size: 24px !important;
  }
  
  .footer h4 {
        font-weight: lighter;
        color: #fff;
  }
  
  .footer p {
        color: grey;
        font-weight: lighter;
  }
  
  .footer li {
        font-weight: lighter;
        color: #fff;
        padding-left: 20px;
        font-size: 18px !important;
  }
  
  #media ul {
        list-style: none;
  }
  
  #media ul li {
        display: inline-block;
  }
  
  @media(max-width: 900px) {
        .footer .container {
              width: 92% !important;
        }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
        
         
    &lt;meta name="description" content="PRODUCTION SHORT DESCRIPTION"/&gt;
    &lt;meta name="keywords" content="AVELI PRODUCTION, VIDEO PRODUCTION, MUSIC VIDEOS, FILMS COMPANY, VIDEO EDITING, VFX COMPANY, AVELI, aveli, filming crew"&gt;
  
        &lt;title&gt;AVELI PRODUCTION&lt;/title&gt;
  
        &lt;!-- stylesheet --&gt;
        &lt;link rel="stylesheet" href="stylesheets/style.css"&gt;
  
        &lt;!-- google fonts --&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Darker+Grotesque:300,400,500,600,700,800,900&amp;display=swap" rel="stylesheet"&gt;
  
        &lt;!-- bootstrap --&gt;
        &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
        &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
        &lt;!-- icons --&gt;
        &lt;script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"&gt;&lt;/script&gt;
  
        &lt;!-- for on scroll animations --&gt;
        &lt;link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css"&gt;
        &lt;script src="https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js"&gt;&lt;/script&gt; 
      
        
  &lt;/head&gt;
  
  &lt;body&gt;
       
    
   
              &lt;!--------------- team section starts here ---------------&gt;
  
                  &lt;a id="team"&gt;&lt;/a&gt;
  
              &lt;section class="team"&gt;
               
               &lt;div id="teamstar"&gt;
  
                    &lt;div class="container-fluid"&gt;
  
                          &lt;div class="row"&gt;
                                &lt;div class="col-md-2"&gt;&lt;/div&gt;
                                &lt;div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s" style="margin-right: -1.000em;"&gt;03&lt;/div&gt;
                                &lt;div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s" style="margin-left:-5.000em; margin-bottom: 3.000em;"&gt;Our Founders&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row members"&gt;
  
                                &lt;div class="col-md-4"&gt;&lt;/div&gt;
  
                                &lt;div class="col-md-3 wow fadeInUp" data-wow-delay="0.5s" style="margin-left: -110px; margin-right: 7px;"&gt;
                                      &lt;div class="team-member"&gt;
                                            &lt;div class="team-img team-one"&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="team-title"&gt;
                                            &lt;h5&gt;Fedir Hostryi&lt;/h5&gt;
                                            &lt;span&gt;Founder/Film&amp;SMM Area&lt;/span&gt;
                                      &lt;/div&gt;
                                &lt;/div&gt;
  
                                &lt;div class="col-md-3 wow fadeInUp" data-wow-delay="0.6s" style="margin-right: 7px;"&gt;
                                            &lt;div class="team-member"&gt;
                                                  &lt;div class="team-img team-two"&gt;&lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="team-title"&gt;
                                                  &lt;h5&gt;Andrii Donetskyi&lt;/h5&gt;
                                                  &lt;span&gt;Co-founder/Film Area&lt;/span&gt;
                                            &lt;/div&gt;
                                      &lt;/div&gt;
  
          &lt;div class="col-md-3 wow fadeInUp" data-wow-delay="0.7s" style="margin-right:-1000px;"&gt;
                                            &lt;div class="team-member"&gt;
                                                  &lt;div class="team-img team-three"&gt;&lt;/div&gt;
                                            &lt;/div&gt;
                                            &lt;div class="team-title"&gt;
                                                  &lt;h5&gt;Illia Ivantsov&lt;/h5&gt;
                                                  &lt;span&gt;Co-founder/SMM Area&lt;/span&gt;
                                            &lt;/div&gt;
                                      &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
              &lt;/section&gt;
         
              &lt;!--------------- team section ends here ---------------&gt;
  
              &lt;!--------------- newsletter section starts here ---------------&gt;
  
             &lt;section class="newsletter"&gt;
  
                    &lt;div class="container"&gt;
  
                          &lt;div class="row"&gt;
                                &lt;div class="col-md-12"&gt;
                                      &lt;div class="news-data"&gt;
                                      &lt;div class="section-subheading"&gt;
                                            &lt;h1 class="wow fadeInUp" data-wow-delay="0.3s"&gt;Subscribe to our newsletter&lt;/h1&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="input-group wow fadeInUp" data-wow-delay="0.4s"&gt;
                                            &lt;input type="email" class="form-control" placeholder="Enter your email"&gt;
                                            &lt;span class="input-group-btn"&gt;
                                                  &lt;button class="btn" type="submit"&gt;Subscribe&lt;/button&gt;
                                            &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;/div&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
             &lt;/section&gt;
  
              &lt;!--------------- newsletter section ends here ---------------&gt;
  
              &lt;!--------------- contact section starts here ---------------&gt;
  
              &lt;a id="contact"&gt;&lt;/a&gt;
  
              &lt;section class="contact"&gt;
  
                    &lt;div class="container-fluid"&gt;
  
                          &lt;div class="row"&gt;
                                &lt;div class="col-md-2"&gt;&lt;/div&gt;
                                &lt;div class="col-md-2 section-index wow fadeInUp" data-wow-delay="0.3s"&gt;04&lt;/div&gt;
                                &lt;div class="col-md-8 section-heading wow fadeInUp" data-wow-delay="0.4s"&gt;Contact us&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;
                                &lt;div class="col-md-4"&gt;&lt;/div&gt;
                                &lt;div class="col-md-6 icon-title wow fadeInUp" data-wow-delay="0.5s"&gt;We’re here to help and answer any question you might have. We look forward to hearing from you &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;
                                &lt;div class="col-md-4"&gt;&lt;/div&gt;
                                &lt;div class="col-md-6"&gt;
                                      &lt;form action="mailto:aveliproduction@gmail.com" name="contact-form" id="contact-form" method="POST"&gt;
  
                                            &lt;ul&gt;
  
                                        &lt;li class="wow fadeInUp" data-wow-delay="0.6s"&gt;
                                           &lt;label for="contact-name"&gt;Name :&lt;/label&gt;
                                                        &lt;div class="textarea"&gt;
                                                              &lt;input type="text" name="contact-name" id="contact-name" value="" required&gt;
                                                        &lt;/div&gt;
                                                  &lt;/li&gt;
  
                                                  &lt;br&gt;
  
                                                  &lt;li class="wow fadeInUp" data-wow-delay="0.7s"&gt;
                                                        &lt;label for="contact-email"&gt;E-mail :&lt;/label&gt;
                                                        &lt;div class="textarea"&gt;
                                                              &lt;input type="email" name="contact-email" id="contact-email" value="" required&gt;
                                                        &lt;/div&gt;
                                                  &lt;/li&gt;
  
                                                  &lt;br&gt;
  
                                                  &lt;li class="wow fadeInUp" data-wow-delay="0.8s"&gt;
                                                       &lt;label for="contact-project"&gt;Message :&lt;/label&gt; 
                                                       &lt;div class="textarea"&gt;
                                                       &lt;textarea name="contact-project" id="contact-project" rows="6" required&gt;&lt;/textarea&gt;
                                                       &lt;/div&gt;
                                                  &lt;/li&gt;
  
                                            &lt;/ul&gt;
  
                                            &lt;button type="submit" name="contact-submit" id="contact-submit"  class="send wow fadeInUp" data-wow-delay="0.9s"&gt;Send Message&lt;/button&gt;
  
                                      &lt;/form&gt;
                                &lt;/div&gt;
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
              &lt;/section&gt;
  
              &lt;!--------------- footer starts here ---------------&gt;
  
              &lt;div class="footer"&gt;
  
                    &lt;div class="container"&gt;
  
                          &lt;div class="info"&gt;
  
                                &lt;div class="row"&gt;
                                      &lt;div class="col-md-4 wow fadeInUp" data-wow-delay="0.3s" id="address"&gt;
                                            &lt;p&gt;Workarea&lt;/p&gt;
                                            &lt;h4&gt;Warszawa&lt;/h4&gt;
                                            &lt;h4&gt;Zlota Tower&lt;/h4&gt;
                                            &lt;h4&gt;postal code: 00-165&lt;/h4&gt;
  
                                            &lt;br&gt;&lt;br&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="col-md-4 wow fadeInUp" data-wow-delay="0.4s" id="media"&gt;
                                            &lt;ul&gt;
                                                  &lt;li&gt;
                                                  &lt;a href="//www.facebook.com/fedor.hostryy"&gt; 
                                               &lt;ion-icon name="logo-facebook"&gt;&lt;/ion-icon&gt;   
                                                  &lt;/a&gt;
                                                  &lt;/li&gt;
  
                                                  &lt;li&gt;
                                                  &lt;a href="//www.facebook.com/fedor.hostryy"&gt; 
                                               &lt;ion-icon name="logo-instagram"&gt;&lt;/ion-icon&gt;
                                                  &lt;/a&gt;
                                               &lt;/li&gt;
                                                   
  
                                                  &lt;li&gt;
                                                  &lt;a href="//www.facebook.com/fedor.hostryy"&gt; 
                                                  &lt;ion-icon name="logo-twitter"&gt;&lt;/ion-icon&gt;
                                                  &lt;/a&gt;
                                                  &lt;/li&gt;
  
                                                  &lt;li&gt;
                                                  &lt;a href="//www.facebook.com/fedor.hostryy"&gt; &lt;/a&gt;
                                                  &lt;ion-icon name="logo-youtube"&gt;&lt;/ion-icon&gt;
                                                  &lt;a href="//www.facebook.com/fedor.hostryy"&gt;&lt;/a&gt;
                                                  &lt;/li&gt;
                                            &lt;/ul&gt;
  
                                            &lt;br&gt;&lt;br&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s" id="mail"&gt;
                                            &lt;p&gt;Feel Free to Contact Us&lt;/p&gt;
                                            
     &lt;a href="mailto:aveliproduction@gmail.com"&gt;&lt;h4&gt;aveliproduction@gmail.com&lt;/h4&gt;&lt;/a&gt;
  
                                            &lt;br&gt;&lt;br&gt;
                                      &lt;/div&gt;
                                &lt;/div&gt;
  
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;!--------------- footer ends here ---------------&gt;
  
              &lt;/div&gt;
  
        &lt;/div&gt;
        
  
   &lt;script&gt;
    // audio starts here
  var audio = document.getElementById("bckgmusic");
    audio.autoplay = true;
    audio.loop = true;
    audio.volume = 0.1;
      audio.load();
      
  
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 113) {
      document.getElementById('bckgmusic').pause();
    }
  });
  
   
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 112) {
      document.getElementById('bckgmusic').play();
    }
  });
  
  
  &lt;/script&gt;
  
  
  
  &lt;script src="https://code.jquery.com/jquery-3.4.1.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  // navigation starts here
  $("#toggle").click(function() {
              $(this).toggleClass('on');
              $("#resize").toggleClass("active");
        });
        $("#resize ul li a").click(function() {
              $(this).toggleClass('on');
              $("#resize").toggleClass("active");
        });
        $(".close-btn").click(function() {
              $(this).toggleClass('on');
              $("#resize").toggleClass("active");
        });
  
  $(function () {
    $(document).scroll(function () {
      var $nav = $(".nav");
      $nav.toggleClass('scrolled', $(this).scrollTop() &gt; $nav.height());
    });
  });
  
  new WOW().init();
  
  // Select all links with hashes
  $('a[href*="#"]')
    // Remove links that don't actually link to anything
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function(event) {
      // On-page links
      if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        &amp;&amp; 
        location.hostname == this.hostname
      ) {
        // Figure out element to scroll to
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        // Does a scroll target exist?
        if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }
      }
    });
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>