const menuEl = document.getElementById("menu-el")
const footerEl = document.getElementById("footer-el")
const subfooterEl = document.getElementById("subfooter-el")

menuEl.innerHTML = 

`<div>
    <ul class="menu">
        <li class="menuitems"><a href="https://www.ottieotter.com/">Home</a></li>
        <!--<li class="menuitems">Photos</li>-->
        <li class="menuitems"><a href="/ottieotter-articles.html">Read</a></li>
        <li class="menuitems"><a href="/ottieotter-videos.html">Watch</a></li>
        <li class="menuitems"><a href="/meet-ottie.html">Ottie</a></li>
        <li class="menuitems"><a href="/contact-ottieotter.html">Contact</a></li>
    </ul>
    
</div>`

footerEl.innerHTML =

`<div class="footercolumns">
<div class="footercolumn"><b>Related Sites</b>
    <ul>
        <li><a href="https://mycarpentry.com/">mycarpentry.com</a></li>
        <li><a href="https://www.rvweekends.com/">rvweekends.com</a></li>
        <li><a href="https://www.split-tree.com/">split-tree.com</a></li>
    </ul>
</div>
<div class="footercolumn"><b>Contact</b>
    <ul>
        <li>Contact Us</li>
        <li>Disclaimer</li>
    </ul>
</div>
<div class="footercolumn"><b>Technology</b>
    <ul>
        <li><a href="https://www.mxtn.com/">MXTN Technologies</a></li>
        <li><a href="https://www.mxtn.com/canvas-animation.html">Canvas Animation</a></li>
        <li><a href="https://www.vacant-office.com/">Vacant Office</a></li>
    </ul>
</div>
<div class="footercolumn"><b>Social Media</b>
    <ul>
        <li><a href="https://www.pinterest.com/ottieottercom/">Pinterist</a></li>
        <li>Facebook</li>
    </ul>
</div>

</div>`

subfooterEl.innerHTML = `
<hr style="width: 80%;">
<br>
<center>Copyright 2012 - 2026 ottieotter.com</center>`