Fix terminal

website/source/assets/stylesheets/_home.scss

@@ -1,8 +1,3 @@
-// TODO: remove
-$hero-height: 350px;
-$baseline: 20px;
-
-
 #page-home {
   // Override the main header
   #header {
@@ -151,4 +146,46 @@ $baseline: 20px;
       }
     }
   }
+
+  .terminal {
+    border: 1px solid $white;
+    background-color: $black;
+    box-sizing: border-box;
+    color: $white;
+    font-family: $font-family-monospace;
+    font-size: 14px;
+    line-height: 1.8;
+    margin: 20px auto;
+    padding: 10px 20px 20px 20px;
+
+    .terminal-content {
+      margin-top: 15px;
+      overflow-x: scroll;
+      width: 100%;
+      white-space: nowrap;
+
+      span {
+        display: block;
+        white-space: pre;
+      }
+    }
+
+    span.circle {
+      &:before {
+        content: '\25CF';
+        color: $white;
+        font-size: 20px;
+        line-height: 100%;
+        height: 100%;
+      }
+    }
+
+    span.vbox {
+      color: rgb(91, 251, 90);
+    }
+
+    span.vmware {
+      color: rgb(83, 255, 255);
+    }
+  }
 }

website/source/assets/stylesheets/_inner.scss

@@ -12,10 +12,16 @@
     margin-bottom: 0;
   }
 
-  pre {
+  pre,
+  code,
+  pre code,
+  tt {
     font-family: $font-family-monospace;
-    font-size: ($font-size - 3);
-    font-weight: normal;
+    font-size: $font-size - 2;
+    line-height: 1.6;
+  }
+
+  pre {
     padding: 20px;
     margin: 0 0 $font-size;
 

website/source/assets/stylesheets/_variables.scss

@@ -3,12 +3,17 @@ $white: #FFFFFF;
 $black: #000000;
 $gray-darker: #555555;
 
+$consul-pink: #D62783;
+$consul-pink-dark: #961D59;
 $packer-blue: #1DAEFF;
 $packer-blue-dark: #1D94DD;
+$terraform-purple: #5C4EE5;
+$terraform-purple-dark: #4040B2;
 $vagrant-blue: #1563FF;
 $vagrant-blue-dark: #104EB2;
 $vault-black: #000000;
 $vault-blue: #00ABE0;
+$vault-gray: #919FA8;
 
 // Typography
 $font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;

website/source/index.html.erb

@@ -28,7 +28,34 @@ description: |-
   <div class="container">
     <div class="row">
       <div class="col-md-6">
-        <%= image_tag 'screenshots/vmware_and_virtualbox.png', class: 'img-responsive' %>
+        <div class="terminal">
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <div class="terminal-content">
+            <span>$ packer build template.json</span>
+            <span class="vbox">==> virtualbox: virtualbox output will be in this color.</span>
+            <span class="vmware">==> vmware: vmware output will be in this color.</span>
+            <span></span>
+            <span class="vmware">==> vmware: Copying or downloading ISO. Progress will be reported periodically.</span>
+            <span class="vmware">==> vmware: Creating virtual machine disk</span>
+            <span class="vmware">==> vmware: Building and writing VMX file</span>
+            <span class="vmware">==> vmware: Starting HTTP server on port 8964</span>
+            <span class="vmware">==> vmware: Starting virtual machine...</span>
+            <span class="vbox">==> virtualbox: Downloading VirtualBox guest additions. Progress will be shown periodically.</span>
+            <span class="vbox">==> virtualbox: Copying or downloading ISO. Progress will be reported periodically.</span>
+            <span class="vbox">==> virtualbox: Starting HTTP server on port 8081</span>
+            <span class="vbox">==> virtualbox: Creating virtual machine...</span>
+            <span class="vbox">==> virtualbox: Creating hard drive...</span>
+            <span class="vbox">==> virtualbox: Creating forwarded port mapping for SSH (host port 3213)</span>
+            <span class="vbox">==> virtualbox: Executing custom VBoxManage commands...</span>
+            <span class="vbox">    virtualbox: Executing: modifyvm packer --memory 480</span>
+            <span class="vbox">    virtualbox: Executing: modifyvm packer --cpus 1</span>
+            <span class="vbox">==> virtualbox: Starting the virtual machine...</span>
+            <span class="vmware">==> vmware: Waiting 10s for boot...</span>
+            <span class="vbox">==> virtualbox: Waiting 10s for boot...</span>
+          </div>
+        </div>
       </div>
       <div class="col-md-6">
         <span class="callout">Infrastructure as code</span>