moving function/styling to new branch

Author: forstisabella

src/_sass/components/_markdown.scss

@@ -475,3 +475,24 @@ div.highlighter-rouge {
   font-weight: bold;
   margin-left: 3px
 }
+
+.sample-code-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.output {
+  outline: 1px solid color(gray-600);
+  outline-offset: 4px
+}
+.output-code {
+  display: block;
+  font: 12px color(code-gray) "Droid Sans Mono", "Lucida Console", "Monaco", monospace; 
+  word-wrap: break-word;
+}
+
+.form {
+  outline: 1px solid color(gray-600);
+  outline-offset: 4px
+}

src/connections/spec/best-practices-identify.md

@@ -58,6 +58,56 @@ analytics.page({
 })
 ```
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.css" integrity="sha512-EaMmVtm5YHQNg4u9UXGOueWP6nyUtCpKZojcE4Rqt/6ifpzzzuQVMTffvo8FVj4xDG04gIyWm1z1b7GqELl1eQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<script type="text/javascript">
+  function showMessage(){
+      var email = document.getElementById("email").value;
+      var fname = document.getElementById("fname").value;
+      var lname = document.getElementById("lname").value;
+      var output = `analytics.identify({
+  firstName: '${fname}',
+  lastName: '${lname}',
+  email: '${email}'
+}) `
+    output_container.innerHTML = output
+    Prism.highlightElement(output_container)
+  }
+</script>
+<script>
+  function showOutput() {
+    var show = document.getElementById("output-code");
+    if (show.style.display === "block") {
+      show.style.display = "none";
+    } else {
+      show.style.display = "block";
+    }
+  }
+</script>
+
+<div class="sample-code-container">
+<div class="form">
+  <h3> Web Form </h3>
+  <p><b>Newsletter Signup</b></p>
+  <label for="fname">First Name:</label>
+  <input type="text" id="fname"><br>
+  <label for="lname">Last Name:</label>
+  <input type="text" id="lname"><br>
+  <label for="email">Email:</label>
+  <input type="text" id="email"><br>
+  <input type="submit" id="submit" onclick="showMessage(); showOutput()" value="Submit">
+</div>
+
+<div class="output">
+<h3>Sample Identify Call</h3>
+<!-- <div class="output-code" id="output-code" style="display:none"> -->
+<pre class="language-javascript"><code class="language-javascript" id="output_container">
+
+</code></pre>
+<!-- </div> -->
+</div>
+</div>
+
 <!---[Page Call](https://user-images.githubusercontent.com/78389005/214352835-5c3f7f28-af28-428e-bb8a-88ad39d53b46.png)--->
 
 You can see in this full page event, the `anonymousId` is populated, and the `userId` is null.