Update website style

gusostow · gusostow · commit 77e5e5414094 · 2025-11-02T17:48:51.000-05:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,8 +9,7 @@
 <body>
     <div class="container">
         <h1>peter + sophie</h1>
-        <h3>submit a wedding message</h3>
-
+        <h3><i>send a wedding message to be displayed on an LED transit departure sign in their home</i></h3>
         <form id="messageForm">
             <div class="form-group">
                 <label for="apiPassword">wedding date</label>
diff --git a/frontend/style.css b/frontend/style.css
@@ -1,6 +1,8 @@
 body {
-    font-family: Arial, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
     margin: 20px;
+    background-color: #fffef9;
+    color: #333;
 }
 
 .container {
@@ -9,7 +11,15 @@ body {
 }
 
 h1 {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    font-size: 36px;
+}
+
+h3 {
+    color: #666;
+    font-weight: normal;
+    font-size: 14px;
+    margin-bottom: 30px;
 }
 
 .form-group {
@@ -19,6 +29,23 @@ h1 {
 label {
     display: block;
     margin-bottom: 5px;
+    color: #555;
+    font-size: 14px;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    font-size: 16px;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+    border: 2px solid #ddd;
+    background-color: #fff;
+}
+
+input[type="text"]:focus {
+    outline: none;
+    border-color: #FF7B9C;
 }
 
 #messageContent {
@@ -30,15 +57,23 @@ label {
 
 .char-counter {
     text-align: right;
-    font-size: 14px;
-    color: #666;
+    font-size: 12px;
+    color: #999;
     margin-top: 5px;
 }
 
 button {
     padding: 10px 20px;
-    font-size: 16px;
+    font-size: 14px;
     cursor: pointer;
+    background-color: #FF7B9C;
+    border: none;
+    color: #FFFFFF;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+button:hover {
+    background-color: #ff6b8a;
 }
 
 button:disabled {
