microsoft · PepperAddict · Oct 17, 2018 · Oct 29, 2018 · Oct 30, 2018
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -200,6 +200,7 @@ p,
 h1 {
   margin: 0;
   padding: var(--text-block-spacing) 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 /* Container */
@@ -408,3 +409,116 @@ footer [href*="github"]:focus {
 .time-travel a {
   cursor: pointer;
 }
+
+.locations {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.locations .link1,
+.link2 {
+  position: absolute;
+  cursor: pointer;
+  z-index: 2;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.locations .link1 {
+  top: 0px;
+  left: 20px;
+  padding-left: 20px;
+  color: transparent;
+}
+
+.locations .link2 {
+  top: 69px;
+  padding-left: 25px;
+  color: transparent;
+}
+
+.locations a:hover {
+  visibility: visible;
+}
+
+.locations img {
+  width: 100%;
+}
+
+.hideme #usa,
+.hideme .link1,
+.hideme .link2 {
+  animation: flipdown 0.5s forwards;
+}
+
+.locations:not(.hideme) #usa {
+  animation: flipup 0.5s forwards;
+}
+
+.locations:not(.hideme) #seatle {
+  animation: flipdown 0.5s forwards;
+}
+#sanfran {
+  width: 150px;
+  padding-left: 60px;
+}
+#seatle {
+  width: 250px;
+}
+.statetext {
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  font-weight: 800;
+  color: white;
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+    1px 1px 0 #000;
+}
+
+#seatle,
+#sanfran {
+  position: absolute;
+  display: none;
+  top: 0px;
+  cursor: pointer;
+  transition: 1s;
+}
+#seatle:not(.show),
+#sanfran:not(.show) {
+  width: 0px;
+  height: 0px;
+  transition: 1s;
+}
+#seatle.show,
+#sanfran.show {
+  display: block;
+  animation: flipup 0.5s forwards;
+  transition: 1s;
+}
+
+@keyframes flipdown {
+  0% {
+    -webkit-transform: translateY(0) rotateX(0deg);
+    transform: translateY(0) rotateX(0deg);
+  }
+  100% {
+    -webkit-transform: translateY(150px) rotateX(90deg);
+    transform: translateY(150px) rotateX(90deg);
+  }
+}
+
+@keyframes flipup {
+  0% {
+    -webkit-transform: translateY(150px) rotateX(90deg);
+    transform: translateY(150px) rotateX(90deg);
+  }
+
+  100% {
+    -webkit-transform: translateY(0) rotateX(0deg);
+    transform: translateY(0) rotateX(0deg);
+  }
+}
diff --git a/docs/images/san_fran.svg b/docs/images/san_fran.svg
diff --git a/docs/images/seatle.svg b/docs/images/seatle.svg
diff --git a/docs/images/usa.svg b/docs/images/usa.svg
diff --git a/docs/index.html b/docs/index.html
@@ -17,6 +17,7 @@
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="theme/theme.css">
   <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
+  <script src="js/state.js"></script>
 </head>
 
 <body class="js-theme-dark">
@@ -34,22 +35,36 @@
     </header>
     <main>
       <h1>
-        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
+        Microsoft is looking for designers who code to help create the most compelling developer
+        tools&nbsp;&amp;&nbsp;services on
         the planet.
       </h1>
+
+      <section id="map" class="locations">
+        <div class="select"><img id="usa" src="images/usa.svg">
+          <a class="link1" onclick="state('seatle', 'sanfran')">Seatle</a>
+          <a class="link2" onclick="state('sanfran', 'seatle')">San Francisco</a>
+          <span id="seatle"><img src="images/seatle.svg"><span class="statetext">Seatle</span></span>
+          <span id="sanfran"><img src="images/san_fran.svg"><span class="statetext">San Francisco</span></span>
+        </div>
+        <p>
+          We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and
+          elsewhere.
+        </p>
+      </section>
       <p>
-        We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
-      </p>
-      <p>
-        We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
+        We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and
+        build the future
         of software development.
       </p>
       <p>
-        We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
+        We believe in diversity, openness, and building delightful tools that empower every person and organization to
+        achieve more.
       </p>
       <p>
         Interested? Send a PR with any improvement to
-        <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
+        <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a>
+        or
         <a href="mailto:mmuno@microsoft.com" title="Email address for mmuno@microsoft.com">email us</a>.
       </p>
     </main>
@@ -81,7 +96,8 @@ <h1>
       </span>
       <span class="footer-piece footer-piece--separate">
         Created by
-        <a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
+        <a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a>
+        contributors on
         <a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
       </span>
     </p>
@@ -124,4 +140,4 @@ <h1>
   <script src="simon.js "></script>
 </body>
 
-</html>
+</html>
diff --git a/docs/js/state.js b/docs/js/state.js
@@ -0,0 +1,32 @@
+//state popup
+
+function state(id1, id2) {
+  //classy
+  const map = document.getElementById("map");
+  const idone = document.getElementById(id1);
+  const idtwo = document.getElementById(id2);
+  map.classList.toggle("hideme");
+  if (map.classList.contains("hideme")) {
+    idone.classList.add("show");
+    if (idtwo.classList.contains("show")) {
+      idtwo.classList.remove("show");
+    }
+    idone.addEventListener("click", function() {
+      map.classList.remove("hideme");
+      if (idone.classList.contains("show")) {
+        idone.classList.remove("show");
+      }
+    });
+    idtwo.addEventListener("click", function() {
+      map.classList.remove("hideme");
+      if (idone.classList.contains("show")) {
+        idone.classList.remove("show");
+      }
+    });
+  } else {
+    if (idone.classList.contains("show") || idtwo.classList.contains("show")) {
+      idone.classList.remove("show");
+      idtwo.classList.remove("show");
+    }
+  }
+}