progress on the right

projects/sign-up-form/index.html

@@ -20,7 +20,16 @@
           <p class="picture-caption">Photo by someone, somewhere</p>
         </div>
       </div>
-      <div class="right-panel">ola?</div>
+      <div class="right-panel">
+        <div class="top-right-area">
+          <h3 class="right-panel-header first right-panel-left-margin">This is not a real online service! You know you need something like this in your life to help you realize your deepest dreams. Sign up <em>now</em> to get started.</h2>
+          <h3 class="right-panel-header second right-panel-left-margin">You <em>know</em> you want to.</h2>
+        </div>
+        <div class="form-area">ola</div>
+        <div class="bottom-right-area">
+          <div class="button bg-green subtle-shadow">Create Account</div>
+        </div>
+      </div>
     </div>
   </body>
 </html>

projects/sign-up-form/style.css

@@ -5,6 +5,7 @@
 
 :root {
   --main-color: green;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 body {
@@ -77,11 +78,12 @@ body {
 .picture-caption-container {
   position: absolute;
   bottom: 0%;
-  left: 30%;
+  left: calc(33% - 1rem);
 }
 
 .picture-caption {
   color: white;
+  font-weight: 300;
 }
 
 .right-panel {
@@ -92,4 +94,44 @@ body {
   position: absolute;
   left: 33%;
   top: 0;
+  height: 100vh;
+}
+
+.form-area {
+  position: absolute;
+  background-color: white;
+  top: 33%;
+  left: 0%;
+  height: 33vh;
+  width: 100%;
+}
+
+.right-panel-left-margin {
+  left: 5%;
+}
+
+.top-right-area {
+  position: relative;
+  height: 33vh;
+}
+
+.right-panel-header {
+  position: absolute;
+  margin: 0;
+}
+
+.right-panel-header.first {
+  top: 45%;
+} 
+
+.right-panel-header.second {
+  top: 75%;
+} 
+
+.bg-green {
+  background-color: rgb(46, 65, 46)
+}
+
+.subtle-shadow {
+  box-shadow: ;
 }