index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NASA API Pictures</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="https://s2.googleusercontent.com/s2/favicons?domain=www.nasa.gov">
    <!-- ZTM Favicon -->
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <!--Loader-->
    <div class="loader hidden">
        <img src="rocket.svg" alt="Rocket loading image">
    </div>

    <!--Container-->
    <div class="container">
        <!--Navigation-->
        <div class="navigation-container">
            <span class ="background"></span>

            <!--Results Nav-->
            <span class="navigation-items" id="resultsNav">
                <h3 class="clickable" onclick="updateDOM('favorites')">Favorites</h3>
                <h3>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</h3>
                <h3 class="clickable" onclick="getNasaPictures()">Load More</h3>
            </span>

            <!--Favorites Nav-->
            <span class="navigation-items hidden" id="favoritesNav">
                <h3 class="clickable" onclick="getNasaPictures()">Load More NASA Images</h3>
            </span>

        </div>

        <!--Images container-->
        <div class="images-container"></div>
    </div>
            
    <!--save confirmation-->
    <div class="save-confirmed hidden" >
    <h1>ADDED!</h1>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>