index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="title" content="Nenzadex - Pokedex Pokémon">
    <meta name="description" content="Pokedex from fan to fan, all Pokémon in one site! see here information of status, evolutions, images, descriptions and mutch more">
    <meta name="keywords" content="evolution, pokedex, pokemon, types of pokemon, pokemon description, pokemon descrições, pokemons tipos, pokeapi, pokeapi exemplo html, pokeapi exemplo javascript, pokeapi exemplo ajax">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="English">
    <meta name="revisit-after" content="2 days">
    <meta name="author" content="Pedro Tomaz Rezende Fagundes, pedrotomazdev">
    
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <title>NenzaDex</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- CSS -->
    <link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="css/main.css">
    </noscript>
</head>

<body class="no-scroll" id="firstElement">

    <div class="load">
        <video loop autoplay muted>
            <source src="img/load_1.webm" type="video/webm">
        </video>
    </div>

    <div id="overlay">
    </div>

    <header class="nenza-header">
        <h1>Nenzadex - The best Pokedex of the web - See all pokemons, stats, types, and much more!</h1>
        <div class="container-fluid">
            <div class="content-header">
                <div class="col-md-12 col-sm-12">
                    <div class="campo-busca">
                        <p>Number or Name</p>
                        <label for="searchKey">
                            <input type="text" placeholder="Search for the pokemon you want!" id="searchKey">
                            <button id="startSearch">
                                <i class="fas fa-search"></i>
                            </button>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section id="main">
        <div id="failedToLoad">

        </div>
        <div class="container">
            <div id="all_poke">
                <div id="preload">
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 ">
                        <div class="pokemons-card">
                            <div class="poke-type">
                            </div>
                            <div class="poke-icon">
                            </div>
                            <div class="poke-img">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="windowPoke">
            <div class="close-window">
                <i class="fas fa-backspace"></i>
            </div>
            <div id="infoPoke">

            </div>
        </div>
    </section>

    <footer>
        <div class="profile-github">
            <span class="baloom">
                See my Profile on Github :)
            </span>
            <div class="profile-img">
                <a href="https://github.com/pedrotomazdev" target="_blank">
                    <img src="https://avatars.githubusercontent.com/u/60102999?v=4" alt="pedrotomazdev" target="_blank">
                </a>
            </div>
        </div>

        <div class="view-repository-social">
            <div class="icons-links">

                <div class="item">
                    <span class="baloom">
                        This Repository
                    </span>
                    <a href="https://github.com/pedrotomazdev/pedrotomazdev.github.io" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"
                            class="">
                            <g>
                                <path xmlns="http://www.w3.org/2000/svg"
                                    d="m256 22.3341c127.3873 0 230.6551 103.2676 230.6551 230.6546 0 103.503-68.1728 191.0821-162.0654 220.2863l-3.5362.9093v-58.76q-.8976-11.0187-12.5662-26.8595 48.47-8.2652 70.46-28.2375 29.1712-30.3025 29.1715-79.2024v-16.9882q-2.244-20.2028-17.9513-45.2255-2.02 0-4.2639-4.3614 4.2639-13.5459 4.2639-24.1054v-2.755q-3.1419-33.9765-9.6491-33.976-22.6641 0-58.1186 24.1045-29.3959-7.1156-41.5132-7.1165h-30.2932q-7.1805 0-40.1668 7.1165-33.66-24.1046-59.465-24.1045-5.8342 8.9532-8.3028 35.354v2.9844q4.0393 21.12 4.0394 22.498-21.9911 29.8438-21.9908 63.5915 0 69.0995 49.8159 94.8123 15.9319 9.87 45.5521 14.2339h4.0392v2.754q-7.854 8.9532-13.688 29.6145a81.1934 81.1934 0 0 1 -27.601 4.3625h-1.5705q-20.196 0-41.2891-35.354-15.0344-12.8563-29.1712-12.8559l-6.9561 2.9844q0 3.9018 20.8687 22.4981 4.7126 5.5089 19.2979 35.3529 15.0343 15.6114 47.123 15.6119a121.726 121.726 0 0 1 19.2983-1.378l1.346 2.7551v25.77l-2.2577-.345c-105.1056-21.5073-184.17-114.505-184.17-225.9694 0-127.3869 103.2678-230.6545 230.6551-230.6545z"
                                    fill-rule="evenodd" fill="#000000" data-original="#000000" class=""></path>
                            </g>
                        </svg>
                    </a>
                </div>

                <div class="item">
                    <span class="baloom">
                        Facebook
                    </span>
                    <a href="https://www.facebook.com/pedro.tomaz.129/" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"
                            class="">
                            <g>
                                <path xmlns="http://www.w3.org/2000/svg"
                                    d="m437 0h-362c-41.351562 0-75 33.648438-75 75v362c0 41.351562 33.648438 75 75 75h151v-181h-60v-90h60v-61c0-49.628906 40.371094-90 90-90h91v90h-91v61h91l-15 90h-76v181h121c41.351562 0 75-33.648438 75-75v-362c0-41.351562-33.648438-75-75-75zm0 0"
                                    fill="#000000" data-original="#000000" class=""></path>
                            </g>
                        </svg>
                    </a>
                </div>


                <div class="item">
                    <span class="baloom">
                        Instagram
                    </span>
                    <a href="https://www.instagram.com/tomaz069/" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"
                            class="">
                            <g>
                                <path xmlns="http://www.w3.org/2000/svg"
                                    d="m305 256c0 27.0625-21.9375 49-49 49s-49-21.9375-49-49 21.9375-49 49-49 49 21.9375 49 49zm0 0"
                                    fill="#000000" data-original="#000000" class=""></path>
                                <path xmlns="http://www.w3.org/2000/svg"
                                    d="m370.59375 169.304688c-2.355469-6.382813-6.113281-12.160157-10.996094-16.902344-4.742187-4.882813-10.515625-8.640625-16.902344-10.996094-5.179687-2.011719-12.960937-4.40625-27.292968-5.058594-15.503906-.707031-20.152344-.859375-59.402344-.859375-39.253906 0-43.902344.148438-59.402344.855469-14.332031.65625-22.117187 3.050781-27.292968 5.0625-6.386719 2.355469-12.164063 6.113281-16.902344 10.996094-4.882813 4.742187-8.640625 10.515625-11 16.902344-2.011719 5.179687-4.40625 12.964843-5.058594 27.296874-.707031 15.5-.859375 20.148438-.859375 59.402344 0 39.25.152344 43.898438.859375 59.402344.652344 14.332031 3.046875 22.113281 5.058594 27.292969 2.359375 6.386719 6.113281 12.160156 10.996094 16.902343 4.742187 4.882813 10.515624 8.640626 16.902343 10.996094 5.179688 2.015625 12.964844 4.410156 27.296875 5.0625 15.5.707032 20.144532.855469 59.398438.855469 39.257812 0 43.90625-.148437 59.402344-.855469 14.332031-.652344 22.117187-3.046875 27.296874-5.0625 12.820313-4.945312 22.953126-15.078125 27.898438-27.898437 2.011719-5.179688 4.40625-12.960938 5.0625-27.292969.707031-15.503906.855469-20.152344.855469-59.402344 0-39.253906-.148438-43.902344-.855469-59.402344-.652344-14.332031-3.046875-22.117187-5.0625-27.296874zm-114.59375 162.179687c-41.691406 0-75.488281-33.792969-75.488281-75.484375s33.796875-75.484375 75.488281-75.484375c41.6875 0 75.484375 33.792969 75.484375 75.484375s-33.796875 75.484375-75.484375 75.484375zm78.46875-136.3125c-9.742188 0-17.640625-7.898437-17.640625-17.640625s7.898437-17.640625 17.640625-17.640625 17.640625 7.898437 17.640625 17.640625c-.003906 9.742188-7.898437 17.640625-17.640625 17.640625zm0 0"
                                    fill="#000000" data-original="#000000" class=""></path>
                                <path xmlns="http://www.w3.org/2000/svg"
                                    d="m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm146.113281 316.605469c-.710937 15.648437-3.199219 26.332031-6.832031 35.683593-7.636719 19.746094-23.246094 35.355469-42.992188 42.992188-9.347656 3.632812-20.035156 6.117188-35.679687 6.832031-15.675781.714844-20.683594.886719-60.605469.886719-39.925781 0-44.929687-.171875-60.609375-.886719-15.644531-.714843-26.332031-3.199219-35.679687-6.832031-9.8125-3.691406-18.695313-9.476562-26.039063-16.957031-7.476562-7.339844-13.261719-16.226563-16.953125-26.035157-3.632812-9.347656-6.121094-20.035156-6.832031-35.679687-.722656-15.679687-.890625-20.6875-.890625-60.609375s.167969-44.929688.886719-60.605469c.710937-15.648437 3.195312-26.332031 6.828125-35.683593 3.691406-9.808594 9.480468-18.695313 16.960937-26.035157 7.339844-7.480469 16.226563-13.265625 26.035157-16.957031 9.351562-3.632812 20.035156-6.117188 35.683593-6.832031 15.675781-.714844 20.683594-.886719 60.605469-.886719s44.929688.171875 60.605469.890625c15.648437.710937 26.332031 3.195313 35.683593 6.824219 9.808594 3.691406 18.695313 9.480468 26.039063 16.960937 7.476563 7.34375 13.265625 16.226563 16.953125 26.035157 3.636719 9.351562 6.121094 20.035156 6.835938 35.683593.714843 15.675781.882812 20.683594.882812 60.605469s-.167969 44.929688-.886719 60.605469zm0 0"
                                    fill="#000000" data-original="#000000" class=""></path>
                            </g>
                        </svg>
                    </a>
                </div>


                <div class="item">
                    <span class="baloom">
                        Twitter
                    </span>
                    <a href="https://twitter.com/TomazFagundes" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0"
                            viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 512 512" xml:space="preserve"
                            class="">
                            <g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123   C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126   h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225   C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71   c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115   c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836   c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991   c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279   c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571   c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264   c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704   c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846   c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708   C357.458,149.793,347.462,160.166,335.471,168.735z"
                                        fill="#000000" data-original="#000000" class=""></path>
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                                <g xmlns="http://www.w3.org/2000/svg">
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>


                <div class="item">
                    <span class="baloom">
                        Linkedin
                    </span>
                    <a href="https://www.linkedin.com/in/pedro-tomaz/" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0"
                            viewBox="0 0 176 176" style="enable-background:new 0 0 512 512" xml:space="preserve"
                            class="">
                            <g>
                                <g xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2">
                                    <g id="linkedin">
                                        <path id="icon"
                                            d="m152 0h-128a24 24 0 0 0 -24 24v128a24 24 0 0 0 24 24h128a24 24 0 0 0 24-24v-128a24 24 0 0 0 -24-24zm-92 139.28a3.71 3.71 0 0 1 -3.71 3.72h-15.81a3.71 3.71 0 0 1 -3.72-3.72v-66.28a3.72 3.72 0 0 1 3.72-3.72h15.81a3.72 3.72 0 0 1 3.71 3.72zm-11.62-76.28a15 15 0 1 1 15-15 15 15 0 0 1 -15 15zm94.26 76.54a3.41 3.41 0 0 1 -3.42 3.42h-17a3.41 3.41 0 0 1 -3.42-3.42v-31.05c0-4.64 1.36-20.32-12.13-20.32-10.45 0-12.58 10.73-13 15.55v35.86a3.42 3.42 0 0 1 -3.37 3.42h-16.42a3.41 3.41 0 0 1 -3.41-3.42v-66.87a3.41 3.41 0 0 1 3.41-3.42h16.42a3.42 3.42 0 0 1 3.42 3.42v5.78c3.88-5.83 9.63-10.31 21.9-10.31 27.18 0 27 25.38 27 39.32z"
                                            fill="#000000" data-original="#000000" class=""></path>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>


    <!-- Bootstrap JS -->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- JQuery -->
    <script src="js/jquery.min.js"></script>

    <!-- JS -->
    <script src="js/main-dist.js"></script>

</body>

</html>