index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anou's Instagram Shop</title>


    <!--Style Sheets-->
    <link href="/styles.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
    
</head>

<body> 

<!--Forced Reload-->
<script>
    window.addEventListener("resize", myFunction);

    function myFunction() {
        if (screen.width > 999) location.reload()
        //console.log("Forced reload")
    }
</script>

<!--Logo-->
    <header>

        <!--User Information in Modal Window-->
        <div id = "userHeader">
            <div id="userImg"></div>
            <div id="user_name"></div>
            <div id="userText"></div>
            <div id="userLink"></div>
        </div>

    </header>   

<!--Navigation-->


        <!--Navigation for Small, Medium & Large Screens-->
        <nav class="clearfix">

            <!--Hamburger Navigation for Small & Large Screens-->
            <button id="hamburgerBtn" onclick="toggleMenu()">
                <span><i>&times;</i></span>
                <span><i>&equiv;</i></span>
            </button>

            <!--Primary Navigation for Small Medium & Large Screens-->

            <!--The hamburger menu is clicked to reveal this Navigation on 
            Small and Medium Screens. On large Screens the Hamburger Icon 
            is hidden and the Primary Navigation is full width and easily
            accessible for desktop users to reduce the amount of clicks-->

            <ul id="primaryNav" class="slideInDown">
                <li class="top active"><a href="https://www.theanou.com/about" target="_blank">About</a></li>
                <li><a href="https://helloanou.wordpress.com/" target="_blank">Blog</a></li>
                <li><a href="https://www.theanou.com/" target="_blank">Store</a></li>
                <li><a href="https://www.theanou.com/#everything" target="_blank">Contact</a></li>
              </ul>

              
        </nav>

<!--Beginning of Main Section-->

    <main>  


<!--Photo Div-->
   
        <div id="Photos">

            <!--INSERTED BY CODE-->   

        </div> 
    </main>

<!-- The Modal Window -->

        <div id="myModal" class="modal">
            <span class="close">&times;</span>
            <div id="mpDiv">
            </div>
            
        </div>
        <script src="jsonLoad.js"></script>
</body>

<!--END OF BODY TAG-->

</html>