🍼🍁 Checkpoint

./src/pages/index.hbs:14029292/150
./public/style.css:14029292/1689

public/style.css

@@ -133,10 +133,16 @@ body {
 }
 
 /* Very light scaling for our illustration */
+.illo-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .illustration {
-  max-width: 100%;
+  max-width: 200px;
   max-height: var(--image-max-width);
-  margin-top: var(--image-margin);
+  margin-top: 1rem;
+  margin-right: 2rem;
 }
 
 /* Styles for our custom color form and its results */

src/pages/index.hbs

@@ -37,8 +37,10 @@
     <div class="wrapper">
       <div class="content" role="main">
         <!-- this is the start of content for our page -->
+        <div class="illo-container">
+          <img src="https://cdn.glitch.com/c62efef6-1e75-45cf-b248-afeccdda9477%2Fillustration.svg?v=1618196069568" class="illustration" alt="Javascript logo" />
+        </div>
         <h1 class="title">Hello Node!</h1>
-        <img src="https://cdn.glitch.com/c62efef6-1e75-45cf-b248-afeccdda9477%2Fillustration.svg?v=1618196069568" class="illustration" alt="Javascript logo" />
         <!-- add text indicating that we've changed color OR had an error -->
         {{#if color}}
           <p class="color-info">