diff --git a/docs/css/style.css b/docs/css/style.css
index c36f875..545f60a 100644
--- 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
new file mode 100644
index 0000000..87be73a
--- /dev/null
+++ b/docs/images/san_fran.svg
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/images/seatle.svg b/docs/images/seatle.svg
new file mode 100644
index 0000000..854d89e
--- /dev/null
+++ b/docs/images/seatle.svg
@@ -0,0 +1,100 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/images/usa.svg b/docs/images/usa.svg
new file mode 100644
index 0000000..3438bd7
--- /dev/null
+++ b/docs/images/usa.svg
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/index.html b/docs/index.html
index e8f4b84..43d78fb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,6 +17,7 @@
+
@@ -34,22 +35,36 @@
- Microsoft is looking for designers who code to help create the most compelling developer tools & services on
+ Microsoft is looking for designers who code to help create the most compelling developer
+ tools & services on
the planet.
+
+
+
+
+ We have open positions for technical product designers & design leaders in San Francisco, Seattle, and
+ elsewhere.
+
+
- We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
-
-
- 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.
- 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.
Interested? Send a PR with any improvement to
- microsoft/join-dev-design or
+ microsoft/join-dev-design
+ or
email us .
@@ -81,7 +96,8 @@
@@ -124,4 +140,4 @@
-