Human Tech Virtual Tour
I created an HTML-based website that provides a virtual tour of The Seven Hills School campus. This tour is designed for new students who would like to explore the school, as well as for students living outside the country who want to experience the campus remotely. The website includes photos from every corner of the school, giving viewers a complete look at campus life. This tour is a great way to understand what it means to be a Seven Hills student.
Supplies
The tools we used were VSCode, which allowed us to create the HTML website. We have it running on a GitHub page for anyone to try out freely.
https://mayornic26.github.io/HumanTechPresent/
Code for Project
Code:
<!DOCTYPE html>
<html>
<style>
body {
font-family: Arial;
background-color: #002d72;
text-align: center;
padding: 20px;
}
button {
background-color: #b7b7b7;
padding: 12px 25px;
font-size: 16px;
border-radius: 6px;
margin-top: 15px;
}
.instruction-text {
color: rgb(254, 254, 254);
font-weight: bold;
margin-top: 20px;
font-size: 14px;
}
.content-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding: 20px;
}
.logo-container {
display: flex;
flex-direction: column;
align-items: center;
}
p{
color: rgb(254, 254, 254);
}
</style>
<body>
<div class="content-wrapper">
<div class="logo-container">
<img src="logo.png" alt="Seven Hills Logo">
<a href="https://app.cloudpano.com/tours/YwQ5ef9qi">
<button>Launch Tour</button>
</a>
<div class="instruction-text">
Or click the desired start location on the map
</div>
</div>
<img src="Map.png" usemap="#image-map" alt="Campus Map">
</div>
<map name="image-map">
<area alt="Baseball field" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=HTqzEZT6Gjj" coords="367,499,416,454" shape="rect">
<area alt="Schiff Center" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=zCJPrUY1jrt" coords="352,456,416,401" shape="rect">
<area alt="High School-Big" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=szpfrunlBv" coords="323,417,267,304" shape="rect">
<area alt="High School-Science" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=9XHeChAEkwz" coords="325,377,362,409" shape="rect">
<area alt="Courtyard" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=6qjshPkpiJ" coords="356,375,325,341" shape="rect">
<area alt="Kalnow Gym" href="https://app.cloudpano.com/tours/YwQ5ef9qi" coords="336,295,373,334,356,250,439,496,478,487" shape="rect">
<area alt="Tennis Courts" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=642QG4rA_k" coords="244,111,337,158" shape="rect">
<area alt="Upper Field" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=sEL7OEuhMF" coords="290,223,404,162" shape="rect">
<area alt="Lower Field" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=0ll2DgA6zT" coords="411,189,496,323" shape="rect">
<area alt="Field House" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=ZqXOp2Ed3G" coords="390,153,340,115" shape="rect">
<area alt="Lotspiech" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=1I0Z7-EzhW" coords="303,226,383,284" shape="rect">
<area alt="DAC and Outside" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=lJA6wQEs4T" coords="410,334,376,270" shape="rect">
<area alt="Outside Schiff" href="https://app.cloudpano.com/tours/YwQ5ef9qi?sceneId=ACCPJNkaiJQ" coords="453,442,418,394" shape="rect">
</map>
<h5 style="color: white;">
Project developed by Eli Kampel & Nico Mayoral in the 2026 Human Tech Interactions Class. Map Image designed by Angella Zong
</h5>
</body>
</html>