javascript - JS在我的网页中不起作用，解释如下，有什么解决办法吗？

Question

在我决定添加 JS 以使我的页面动态之前，我正在做一个 Web 项目，每件事都太好了，但是当我尝试通过 tagName 或通过 id 或类访问我的元素时，我遇到了一个大问题它总是返回空且未定义，请提供任何解决方案，我是新手，提前致谢，如果您无法理解问题，您可以给我发邮件或回复，但请我需要解决方案

console.log('test1')
window.onload = function() {;
elements.forEach((element) => element.style.color = 'red');
}

/* * {
    margin: 0;
} */


}
body {
    margin: 0;
    box-sizing: border-box;
    display: block;
    background: #eee;
}
header {
    color: white;
    background: linear-gradient(to left, #222, black, #222);
    box-sizing: border-box;
    border-bottom: 2px solid #999;
    display: block;
    overflow: hidden;
    width: 100%;
    text-align: center;
    padding: 22px;
    padding-bottom: 20px;
}
header .page-title {
    cursor: pointer;
    display: block;
    font-size: 25px;
    font-variant: small-caps;
    transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
    cursor: pointer;
    font-size: 25px;
    color: green;
    text-shadow: 0 0 7px #004800;
    transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
    float: left;
    text-decoration: none;
    font-size: 15px;
    padding: 17.5px;
    display: inline-block;
    border: none;
    border-left: 1px solid white;
    box-sizing: border-box;
    color: white;
    background: black;
    width: 88%;
}
.icon {
    float: left;
    border-right: none;
    text-align: : left;
    box-sizing: border-box;
    background: black;
    margin: 0;
    display: inline-block;
    color: white;
    padding: 17.5px;
    font-size: 15px;
    width: 6%;
}
input:focus {
    outline: none;
}

/*input:before{
            border:1px solid black:
            content:"";
            }
            //.icon:before{
            border:1px solid black;
            content:"";
            }
            */
.contextBtn {
    //box-shadow:inset 0 0 7px white;
    border-top: 1px solid white;
    font-size: 15px;
    padding: 15px;
    display: block;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    background: black;
    color: white;
}
ul {
    list-style-type: none;
    padding: 0 0 5px 0;
    margin: 0;
    box-shadow: 0 0 3px black;
}
li {
    width: 100%;
}
li a {
    position: relative;
    color: #fff;
    //background:#333;
    background: linear-gradient(to left, black, #222, black);
    font-size: 110%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    margin: auto;
    //padding:3%;
    padding: 20px;
    width: 100%;
    height: 6%;
    display: block;
    overflow: hidden;
    box-shadow: 0px -1px 1px white;
    transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
    box-sizing: border-box;
    display: block;
    background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
    font-size: 120%;
    margin-left: auto 10%;
    width: 80%;
    height: 6%;
    overflow: hidden;
    //padding:4%;
    padding: 23px;
    border-left: 3px solid green;
    border-right: 3px solid green;
    border-radius: 25px;
    box-shadow: 0 0 3px #67FF67;
    box-shadow: inset 0 0 7px #69FF69;
    transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
    //transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
    background-color: red;
}
li a:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    box-sizing: border-box;
    left: 50%;
    transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border: 3px solid green;
    border-left: 0px solid green;
    border-right: 0px solid green;
    border-top: 2px solid green;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    box-sizing: border-box;
    right: 50%;
    transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border: 2px solid green;
    border-left: 0px solid green;
    border-right: 0px solid green;
    border-top: 1px solid green;
    box-sizing: border-box;
    bottom: 0;
    right: 0;
    transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
    //position: relative;
    background: green;
    padding: 25px;
    border-radius: 30px;
    border-top: 0.5px solid #989898;
    border-bottom: 0.2px solid black;
    width: 80%;
    margin: auto;
    font-size: 22px;
    box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
    border: 1px solid green;
    box-shadow: 0 0px 5px #3F7D00;
}
article {
    //position: relative;
    margin: 2px;
    padding: 20px 8px;
    box-shadow: 0px 0px 5px black;
    //font-size:20px;
}
article p {
    font-size: 15px;
}
.divider {
    text-align: center;
}
footer {
    margin: 0 2px 5px 2px;
    background: grey;
}
.foot-container {
    background: grey;
    //position: relative;
    box-sizing: border-box;
    box-shadow: 0 1px 5px black;
}
.foot-section {
    line-height: 25px;
    text-align: center;
    color: white;
    float: left;
    margin: 0.1111111111111111%;
    width: 33%;
    box-sizing: border-box;
    box-shadow: 0 0 1px black;
}

/* .foot-section:after{
                    content"";
                    display:table;
                    clear:both;
                }*/
.foot-section h4 {
    //text-decoration:underline;
    display: inline-block;
    margin: 6px auto 8px auto;
    font-size: 110%;
}
.foot-section a {
    color: white;
    text-decoration: none;
    display: block;
    clear: both;
}
.foot-section a:hover {
    font-size: 90%;
    box-shadow: inset 0 0 7px #2F2F2F;
}
address {
    text-decoration: none;
    margin: 5px auto;
    line-height: 20px;
    box-shadow: 0 0 5px black;
    text-align: center;
    color: white;
}
.social {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    //bottom: 0;
}
.social a {
    border: 1px solid black;
    border-radius: 8.5px;
    width: 17px;
    height: 17px;
    margin: 2px;
    padding: 3px;
    display: inline-block;
    box-shadow: 0 0 5px black;
}
.social a:hover {
    color: white;
    background: black;
}
@media only screen and (min-width: 500px) {
    body {
        background: white;
        //position: relative;
    }
    /* .contextBtn {
        display: none;
    } */
    
    li a {
        overflow-y: hidden;
        //position: sticky;
        width: 25%;
        float: left;
        top: 0;
        transition: none;
    }
    
    li a:hover:not(.active-item) {
        width: 25%;
        padding: 20px;
        z-index: 1;
        border-radius: 0%;
        font-size: initial;
        transition: none;
    }
    
    li a.active-item {
        display: none;
    }
    
    article {
        margin: 50px 5px 10px 5px;
        padding: 50px 5px;
    }
    
    .icon {
        width: 8%;
    }
    
    .search {
        width: 92%;
    }
}

/* @media only screen and (min-width:350px) {
    .contextBtn {
        display: none;
    }
    
    .search {
        width: 90%;
    }
    
    .icon {
        width: 8%;
    }
} */

<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0 ">
    <title>About Us </title>
    <link rel="stylesheet" href="style/mystyles.css">
    <script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
    <!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->

</head>

<body>
    <header>
        <h1 class="page-title">About MixHacxTricks &nbsp &nbsp
            <i class="fas fa-id-card-alt"></i></h1>
    </header>
    <nav>

        <div>
            <ul>
                <div class="search-area"><input class="search" type="search" placeholder="Search">
                    <!--<label class="icon">-->
                    <span class="icon"> <i class="fas fa-search"></i></span>
                    <!--</label>-->
                </div>
                <span class="contextBtn" id="context">  x  </span>
                <li class="menu"><a href="#" class="nav-item">Home     &nbsp <i class="fas fa-home"></i></span></a></li>
                <li class="menu"><a href="#" class="nav-item">Android  &nbsp <i class="fab fa-android"></i></span></a></li>
                <li class="menu"><a href="#" class="nav-item">Windows  &nbsp <i class="fab fa-windows"></i></span></a></li>
                <li class="menu"><a href="#" class="nav-item">Trending &nbsp <i class="fas fa-chart-line"></i></span></a></li>
                <li class="menu"><a href="index.html" class="active-item">About <i class="fas fa-id-card-alt"></i></span></a></li>
            </ul>
        </div>
    </nav>
    <article>
        <div class="article">
            <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium
                lectus. Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus
                nullam eget felis. Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
            <br>
            <p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
                Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque
                viverra mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
            <!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->

        </div>
        <div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
    </article>
    <footer>
        <div class="foot-container">
            <div class="foot-section">
                <h4>Android</h4>
                <a href="#" class="foot-sec-item">Apps</a>
                <a href="#" class="foot-sec-item">Games</a>
                <a href="#" class="foot-sec-item">Tools</a><br>
            </div>
            <div class="foot-section">
                <h4>Windows</h4>
                <a href="#" class="foot-sec-item">Softwares</a>
                <a href="#" class="foot-sec-item">Games</a>
                <a href="#" class="foot-sec-item">Tools</a><br>
            </div>
            <div class="foot-section">
                <h4>Others</h4>
                <a href="#" class="foot-sec-item">WebTools</a>
                <a href="#" class="foot-sec-item">Source Code</a>
                <a href="#" class="foot-sec-item">O.S.</a><br>
            </div>
            <address>
                        MixHacxTricks<br> 
                        Web Site: Soon Uploaded<br> 
                        Developer:Priyanshu Agrawal<br>
                        Contact:-<br>Email:<br>[e-mail]<br>
                    </address>
        </div>
    </footer>




</body>

    <script src="js/myscript.js"></script>

</html>

标签： javascripthtmlcss

Answer 1

DOMContentLoaded在事件中包装 Javascript 代码

像

document.addEventListener("DOMContentLoaded", function(event) { 
   //do work
});

更多信息

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

document.addEventListener("DOMContentLoaded", function(event) {
  console.log('test1')
  let elemens = document.getElementsByTagName('p');
  for (let i = 0; i < elemens.length; i++) {
    elemens[i].style.color = 'red';
  }
});

/* * {
    margin: 0;
} */


}
body {
  margin: 0;
  box-sizing: border-box;
  display: block;
  background: #eee;
}
header {
  color: white;
  background: linear-gradient(to left, #222, black, #222);
  box-sizing: border-box;
  border-bottom: 2px solid #999;
  display: block;
  overflow: hidden;
  width: 100%;
  text-align: center;
  padding: 22px;
  padding-bottom: 20px;
}
header .page-title {
  cursor: pointer;
  display: block;
  font-size: 25px;
  font-variant: small-caps;
  transition: color 1s linear, font-size 1s linear;
}
header .page-title:hover {
  cursor: pointer;
  font-size: 25px;
  color: green;
  text-shadow: 0 0 7px #004800;
  transition: color 1s linear, font-size 1s linear, text-shadow 2s linear;
}
//not working.pagetitle:hover < header {background:black;}
.search {
  float: left;
  text-decoration: none;
  font-size: 15px;
  padding: 17.5px;
  display: inline-block;
  border: none;
  border-left: 1px solid white;
  box-sizing: border-box;
  color: white;
  background: black;
  width: 88%;
}
.icon {
  float: left;
  border-right: none;
  text-align: : left;
  box-sizing: border-box;
  background: black;
  margin: 0;
  display: inline-block;
  color: white;
  padding: 17.5px;
  font-size: 15px;
  width: 6%;
}
input:focus {
  outline: none;
}

/*input:before{
            border:1px solid black:
            content:"";
            }
            //.icon:before{
            border:1px solid black;
            content:"";
            }
            */
.contextBtn {
  //box-shadow:inset 0 0 7px white;
  border-top: 1px solid white;
  font-size: 15px;
  padding: 15px;
  display: block;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  background: black;
  color: white;
}
ul {
  list-style-type: none;
  padding: 0 0 5px 0;
  margin: 0;
  box-shadow: 0 0 3px black;
}
li {
  width: 100%;
}
li a {
  position: relative;
  color: #fff;
  //background:#333;
  background: linear-gradient(to left, black, #222, black);
  font-size: 110%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  margin: auto;
  //padding:3%;
  padding: 20px;
  width: 100%;
  height: 6%;
  display: block;
  overflow: hidden;
  box-shadow: 0px -1px 1px white;
  transition: width 1s, border-radius 2s, padding 1.5s, background 1.5s, font-size 1s, border-left 2s, border-right 2s;
}
li a:hover:not(.active-item) {
  box-sizing: border-box;
  display: block;
  background: linear-gradient(to left, #1B1B1B, black, #1B1B1B);
  font-size: 120%;
  margin-left: auto 10%;
  width: 80%;
  height: 6%;
  overflow: hidden;
  //padding:4%;
  padding: 23px;
  border-left: 3px solid green;
  border-right: 3px solid green;
  border-radius: 25px;
  box-shadow: 0 0 3px #67FF67;
  box-shadow: inset 0 0 7px #69FF69;
  transition: width 1.5s, background 3s linear 0.2, border-radius 1s linear, font-size 0.2s linear 0.1s, margin 2s linear 5s, padding 2s, border-right 1s linear 1s, border-left 1s linear 1s, box-shadow 1s linear 2s;
  //transition:width 1.5s, background 1.5s,border-radius 1.5s;
}
li a:active {
  background-color: red;
}
li a:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  box-sizing: border-box;
  left: 50%;
  transition: width 2s linear, left 2s linear, height 0.4s linear 0.1s;
}
li a:hover:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid green;
  border-left: 0px solid green;
  border-right: 0px solid green;
  border-top: 2px solid green;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  transition: width 1s linear, left 1s linear, height 0.2s linear 0.1s, box-shadow 3s linear 2s;
}
li a:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  box-sizing: border-box;
  right: 50%;
  transition: width 2s linear, right 2s linear, height 0.4s linear 0.1s;
}
li a:hover:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border: 2px solid green;
  border-left: 0px solid green;
  border-right: 0px solid green;
  border-top: 1px solid green;
  box-sizing: border-box;
  bottom: 0;
  right: 0;
  transition: width 1s linear, right 1s linear, height 0.2s linear 0.1s;
}
li a.active-item {
  //position: relative;
  background: green;
  padding: 25px;
  border-radius: 30px;
  border-top: 0.5px solid #989898;
  border-bottom: 0.2px solid black;
  width: 80%;
  margin: auto;
  font-size: 22px;
  box-shadow: 0 0 5px #3F7D00;
}
li a.active-item:hover {
  border: 1px solid green;
  box-shadow: 0 0px 5px #3F7D00;
}
article {
  //position: relative;
  margin: 2px;
  padding: 20px 8px;
  box-shadow: 0px 0px 5px black;
  //font-size:20px;
}
article p {
  font-size: 15px;
}
.divider {
  text-align: center;
}
footer {
  margin: 0 2px 5px 2px;
  background: grey;
}
.foot-container {
  background: grey;
  //position: relative;
  box-sizing: border-box;
  box-shadow: 0 1px 5px black;
}
.foot-section {
  line-height: 25px;
  text-align: center;
  color: white;
  float: left;
  margin: 0.1111111111111111%;
  width: 33%;
  box-sizing: border-box;
  box-shadow: 0 0 1px black;
}

/* .foot-section:after{
                    content"";
                    display:table;
                    clear:both;
                }*/
.foot-section h4 {
  //text-decoration:underline;
  display: inline-block;
  margin: 6px auto 8px auto;
  font-size: 110%;
}
.foot-section a {
  color: white;
  text-decoration: none;
  display: block;
  clear: both;
}
.foot-section a:hover {
  font-size: 90%;
  box-shadow: inset 0 0 7px #2F2F2F;
}
address {
  text-decoration: none;
  margin: 5px auto;
  line-height: 20px;
  box-shadow: 0 0 5px black;
  text-align: center;
  color: white;
}
.social {
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: center;
  //bottom: 0;
}
.social a {
  border: 1px solid black;
  border-radius: 8.5px;
  width: 17px;
  height: 17px;
  margin: 2px;
  padding: 3px;
  display: inline-block;
  box-shadow: 0 0 5px black;
}
.social a:hover {
  color: white;
  background: black;
}
@media only screen and (min-width: 500px) {
  body {
    background: white;
    //position: relative;
  }
  /* .contextBtn {
        display: none;
    } */
  
  li a {
    overflow-y: hidden;
    //position: sticky;
    width: 25%;
    float: left;
    top: 0;
    transition: none;
  }
  
  li a:hover:not(.active-item) {
    width: 25%;
    padding: 20px;
    z-index: 1;
    border-radius: 0%;
    font-size: initial;
    transition: none;
  }
  
  li a.active-item {
    display: none;
  }
  
  article {
    margin: 50px 5px 10px 5px;
    padding: 50px 5px;
  }
  
  .icon {
    width: 8%;
  }
  
  .search {
    width: 92%;
  }
}

/* @media only screen and (min-width:350px) {
    .contextBtn {
        display: none;
    }
    
    .search {
        width: 90%;
    }
    
    .icon {
        width: 8%;
    }
} */

<!DOCTYPE html>

<html lang="en">

<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0 ">
  <title>About Us </title>
  <link rel="stylesheet" href="style/mystyles.css">
  <script src="https://kit.fontawesome.com/7e25e18c01.js" crossorigin="anonymous"></script>
  <!-- https: //cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js -->
  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->

</head>

<body>
  <header>
    <h1 class="page-title">About MixHacxTricks &nbsp &nbsp
      <i class="fas fa-id-card-alt"></i></h1>
  </header>
  <nav>

    <div>
      <ul>
        <div class="search-area"><input class="search" type="search" placeholder="Search">
          <!--<label class="icon">-->
          <span class="icon"> <i class="fas fa-search"></i></span>
          <!--</label>-->
        </div>
        <span class="contextBtn" id="context">  x  </span>
        <li class="menu"><a href="#" class="nav-item">Home     &nbsp <i class="fas fa-home"></i></span></a></li>
        <li class="menu"><a href="#" class="nav-item">Android  &nbsp <i class="fab fa-android"></i></span></a></li>
        <li class="menu"><a href="#" class="nav-item">Windows  &nbsp <i class="fab fa-windows"></i></span></a></li>
        <li class="menu"><a href="#" class="nav-item">Trending &nbsp <i class="fas fa-chart-line"></i></span></a></li>
        <li class="menu"><a href="index.html" class="active-item">About <i class="fas fa-id-card-alt"></i></span></a></li>
      </ul>
    </div>
  </nav>
  <article>
    <div class="article">
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ipsum consequat nisl vel pretium lectus.
        Justo nec ultrices dui sapien. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Maecenas ultricies mi eget mauris. Mauris a diam maecenas sed enim. At quis risus sed vulputate. Nec ullamcorper sit amet risus nullam eget felis.
        Sit amet dictum sit amet justo. Eu facilisis sed odio morbi quis commodo odio aenean.</p>
      <br>
      <p>Proin nibh nisl condimentum id venenatis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla ut morbi tincidunt augue interdum. Vehicula ipsum a arcu cursus vitae. Consequat nisl vel pretium lectus quam id leo in vitae.
        Mattis rhoncus urna neque viverra justo nec ultrices. Commodo elit at imperdiet dui accumsan sit amet. Nunc sed id semper risus in. At erat pellentesque adipiscing commodo elit. Facilisi nullam vehicula ipsum a arcu cursus vitae. Scelerisque viverra
        mauris in aliquam. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Euismod nisi porta lorem mollis aliquam ut porttitor leo.</p><br>
      <!--<marquee><p class="divider">#*************************************************************************************************************************************************************************************************************************************</p></marquee>-->

    </div>
    <div class="social"><a><i class="fa fa-facebook" aria-hidden="true"></i></a><a><i class="fa fa-telegram" aria-hidden="true"></i></a></div>
  </article>
  <footer>
    <div class="foot-container">
      <div class="foot-section">
        <h4>Android</h4>
        <a href="#" class="foot-sec-item">Apps</a>
        <a href="#" class="foot-sec-item">Games</a>
        <a href="#" class="foot-sec-item">Tools</a><br>
      </div>
      <div class="foot-section">
        <h4>Windows</h4>
        <a href="#" class="foot-sec-item">Softwares</a>
        <a href="#" class="foot-sec-item">Games</a>
        <a href="#" class="foot-sec-item">Tools</a><br>
      </div>
      <div class="foot-section">
        <h4>Others</h4>
        <a href="#" class="foot-sec-item">WebTools</a>
        <a href="#" class="foot-sec-item">Source Code</a>
        <a href="#" class="foot-sec-item">O.S.</a><br>
      </div>
      <address>
                        MixHacxTricks<br> 
                        Web Site: Soon Uploaded<br> 
                        Developer:Priyanshu Agrawal<br>
                        Contact:-<br>Email:<br>[e-mail]<br>
                    </address>
    </div>
  </footer>




</body>

</html>