From d2292dbf2b483d5e59c5b6b3b310230deafc23f3 Mon Sep 17 00:00:00 2001
From: Pablo Martin <pablo.martin@superhog.com>
Date: Tue, 29 Apr 2025 18:02:17 +0200
Subject: [PATCH] progress on the right

---
 projects/sign-up-form/index.html | 11 +++++++-
 projects/sign-up-form/style.css  | 44 +++++++++++++++++++++++++++++++-
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/projects/sign-up-form/index.html b/projects/sign-up-form/index.html
index 6e5a4ad..b6de40a 100644
--- a/projects/sign-up-form/index.html
+++ b/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>
diff --git a/projects/sign-up-form/style.css b/projects/sign-up-form/style.css
index 9936b53..7b04ba2 100644
--- a/projects/sign-up-form/style.css
+++ b/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: ;
+}
\ No newline at end of file