title: Splash Screen in Web App using JS and HTML Issue
body: <p>I am making a website, and though that adding to it a splash screen would be nice and make the website much fancier. I made the code for it, but the issue, the text appears OK, but the <em><strong>text doesn't disappear after the set time which is 1 second it doesn't disappear</strong></em>, I mostly rechecked and didn't spot an error and when I run it, it works and no errors are given.</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-js lang-js prettyprint-override"><code>const splash = document.querySelector('.splash');
  
  document.addEventListener('DOMContentLoaded', (e)=&gt;{
      setTimeout(()=&gt;{
          splash.classList.add('display-none');
  
      }, 2000);
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      padding: 0;
      margin: 0;
      background: black;
    }
    .navbar {
      overflow: hidden;
      padding: 5px;
      margin: 0;
      top: 0;
      position: sticky;
      background: black;
      color: white;
      opacity: 85%;
    }
    .navbar-item {
      display: inline-block;
      padding: 5px;
    }
    .left {
      float: left;
      font-weight: bold;
      font-size: xx-large;
    }
    .right {
      float: right;
      font-size: x-large;
    }
    .no-style-link {
      text-decoration: none;
      color: inherit;
    }
    .main-content {
      padding: 10px;
      text-align: center;
    }
    .ytvidcollection {
      padding: 10px;
      background: #6969f8;
    }
    .ytvid {
      padding: 5px;
      background: red;
    }
    .ytvid:hover {
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }
    .copyright {
      background: #333030;
      color: white;
      text-align: center;
      bottom: 0;
      font-size: x-large;
      padding: 10px;
    }
    #Jothin-kumar {
      font-size: xx-large;
      text-decoration: none;
      color: red;
    }
    #Jothin-kumar:hover {
      text-decoration: underline;
    }</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;title&gt;Karan raj&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="splash"&gt;
      &lt;h1 class="fade-out"&gt;Welcome to My Website!&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;ul class="navbar"&gt;
      &lt;li class="navbar-item left"&gt;&lt;a class="no-style-link" href="/"&gt;Karan raj&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navbar-item right"&gt;&lt;a class="no-style-link" href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navbar-item right"&gt;&lt;a class="no-style-link" href="/about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navbar-item right"&gt;&lt;a class="no-style-link" href="/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="main-content"&gt;
      &lt;iframe width=75% height="750" src="https://www.youtube.com/embed/gHn85Ytl_4w?controls=0&amp;autoplay=1&amp;modestbranding=1&amp;rel=0" title="Trailer" allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"&gt;&lt;/iframe&gt;
      &lt;div class="ytvidcollection"&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/pFfOzZ97N2k?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/fZrw7x44UUA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/XDUVT25yaYM?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/-C7l9q1CSOo?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/djoODhumDFk?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/rvilf-L2Hhw?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/8LnoVbcAPFA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/0MH9ESonkiU?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/KJSu_8cialA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/rYcMuSEZOBA?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe class="ytvid" width="560" height="315" src="https://www.youtube.com/embed/bSsH_uCwNbQ?rel=0" title="Youtube video - Karan raj" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="copyright"&gt;© Copyright 2022 &lt;a href="https://jothin.tech" id="Jothin-kumar"&gt;Jothin kumar&lt;/a&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>