<!DOCTYPE html> <html> <title>Horton Dome</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> <style> body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif} body {font-size:16px;} .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer} .w3-half img:hover{opacity:1} </style> <body> <!-- Sidenav/menu --> <nav class="w3-sidenav w3-green w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold" id="mySidenav"><br> <a href="javascript:void(0)" onclick="w3_close()" class="w3-padding-xlarge w3-hide-large w3-display-topleft w3-hover-white" style="width:100%;font-size:22px">Close Menu</a> <div class="w3-container"> <h3 class="w3-padding-64"><b>Horton Dome</b></h3> </div> <a href="http://www.hortondome.com/" onclick="w3_close()" class="w3-padding w3-hover-white">Home</a> <a href="http://www.hortondome.com/dome/index.html" onclick="w3_close()" class="w3-padding w3-hover-white">The Dome Story</a> <a href="http://www.hortondome.com/tinyhouse" onclick="w3_close()" class="w3-padding w3-hover-white">Our new Tiny House Adventure</a> </nav> <!-- Top menu on small screens --> <header class="w3-container w3-top w3-hide-large w3-green w3-xlarge w3-padding"> <a href="javascript:void(0)" class="w3-btn w3-green w3-border w3-border-white w3-margin-right" onclick="w3_open()">0&</a> <span>Horton Dome</span> </header> <!-- Overlay effect when opening sidenav on small screens --> <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> <!-- !PAGE CONTENT! --> <div class="w3-main" style="margin-left:340px;margin-right:40px"> <!-- Header --> <div class="w3-container" style="margin-top:80px" id="showcase"> <h1 class="w3-jumbo"><b>Welcome to the Horton Dome</b></h1> <!-- <h1 class="w3-xxxlarge w3-text-green"><b>Showcase.</b></h1> --> <hr style="width:50px;border:5px solid green" class="w3-round"> </div> <!-- Photo grid (modal) --> <div class="w3-row-padding"> <div class="w3-full"> <p> <img src="dome/pics/111901.jpg" style="width:100%" onclick="onClick(this)" alt="Dome Front"> </p> </div> <!-- <div class="w3-half"> <img src="/w3images/atrium.jpg" style="width:100%" onclick="onClick(this)" alt="Windows for the atrium"> <img src="/w3images/bedroom.jpg" style="width:100%" onclick="onClick(this)" alt="Bedroom and office in one space"> <img src="/w3images/livingroom2.jpg" style="width:100%" onclick="onClick(this)" alt="Scandinavian design"> </div> --> </div> <!-- Modal for full size images on click--> <div id="modal01" class="w3-modal w3-black w3-padding-0" onclick="this.style.display='none'"> <span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-xxlarge w3-container w3-display-topright"></span> <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> <img id="img01" class="w3-image"> <p id="caption"></p> </div> </div> <!-- Dome --> <div class="w3-container" id="services" style="margin-top:75px"> <h1 class="w3-xxxlarge w3-text-green"><b>The Dome Story.</b></h1> <hr style="width:50px;border:5px solid green" class="w3-round"> <P>Located in North Western Vermont, the Horton Dome is our family home. It is the realization of a dream to create our own unique, efficient and modern home. <BR> <BR> The story of our experience creating the home ourselves, with the help of family, friends, an a few contractors, <a href="dome/index.html">begins here.</a> </P> </div> <!-- Tiny House --> <div class="w3-container" id="designers" style="margin-top:75px"> <h1 class="w3-xxxlarge w3-text-green"><b>Tiny House Adventure.</b></h1> <hr style="width:50px;border:5px solid green" class="w3-round"> <p>In 2017 we started our next building project, a Tiny House on Wheels. We are sharing that story as it unfolds <a href="tinyhouse/index.htm">.here</a>. </p> </div> <!-- End page content --> </div> <!-- W3.CSS Container --> <div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Powered by <a href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></p></div> <script> // Script to open and close sidenav function w3_open() { document.getElementById("mySidenav").style.display = "block"; document.getElementById("myOverlay").style.display = "block"; } function w3_close() { document.getElementById("mySidenav").style.display = "none"; document.getElementById("myOverlay").style.display = "none"; } // Modal Image Gallery function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; var captionText = document.getElementById("caption"); captionText.innerHTML = element.alt; } </script> </body> </html>