🍮💺 Checkpoint

./public/style.css:14029292/337
./src/pages/index.hbs:14029292/1134

public/style.css

@@ -121,6 +121,10 @@ body {
   justify-content: left;
 }
 
+p {
+  font-size: 1.25rem;
+}
+
 /* Title h1 style */
 .title {
   color: #2800FF;
@@ -133,15 +137,22 @@ body {
 }
 
 /* Very light scaling for our illustration */
+.illo-container {
+  display: flex;
+  justify-content: flex-end;
+}
 .illustration {
   max-width: 100%;
-  max-height: 200px;
+  max-height: 150px;
-  margin-top: 0;
+  margin-top: 1rem;
 }
 
 /* Styles for our custom color form and its results */
 .color-info {
-  
+  margin-left: 5px;
+}
+.color-search {
+  margin-top: 3rem;
 }
 .color-form {
   width: 90%;

src/pages/index.hbs

@@ -37,7 +37,6 @@
     <div class="wrapper">
       <div class="content" role="main">
         <!-- this is the start of content for our page -->
-        <img src="https://cdn.glitch.com/c62efef6-1e75-45cf-b248-afeccdda9477%2Fillustration.svg?v=1618196069568" class="illustration" alt="Node logo" />
         <h1 class="title">Hello Node!</h1>
         
         <!-- add text indicating that we've changed color OR had an error -->
@@ -82,6 +81,9 @@
           <!-- this randomize link communicates with the server (server.js) using a querystring and GET request instead of a form POST -->
           Can't decide? <a href="?randomize=go">Use a random color!</a>
         </div>
+        <div class="illo-container">
+          <img src="https://cdn.glitch.com/c62efef6-1e75-45cf-b248-afeccdda9477%2Fillustration.svg?v=1618196069568" class="illustration" alt="Node logo" />
+        </div>
         
       </div>
     </div>