#4 #6 Base creation of a product viewing page with the ability to edit as a seller

static/css/loginform.css

@@ -2,7 +2,8 @@ h2 {
     font-weight:300;
     text-align:center;
 }
-#login-form-wrap {
+
+#input-form-wrap {
     background-color: rgba(255, 255, 255, .15);  
     backdrop-filter: blur(200px);
     width: 35%;
@@ -11,7 +12,8 @@ h2 {
     border-radius: 4px;
     box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
 }
-.login-form {
+
+.input-form {
     padding: 1em 2em;
     display: flex;
     flex-direction: column;
@@ -19,7 +21,13 @@ h2 {
     gap: 1em;
 }
 
-.login-form input, .login-form select, .login-form option {
+.input-form-row {
+    display: flex;
+    flex-direction: row;
+    gap: 1em 1em;
+}
+
+.input-form input, .input-form select, .input-form option, .input-form textarea {
     width: 100%;
     padding: 0 0 0 10px;
     margin: 0;
@@ -48,7 +56,12 @@ h2 {
     }
 }
 
-.login-form input[type="submit"] {
+.input-form textarea {
+    min-height: 120px;
+    max-width: 100%;
+}
+
+.input-form input[type="submit"] {
     border: none;
     display:block;
     background-color: rgba(255, 255, 255, .10);

static/css/products.css

@@ -42,12 +42,32 @@
     justify-content: space-between;
     flex-wrap: wrap;
     flex: 4 0 1rem;
+    max-width: 40%;
     padding: .5rem 1rem 2rem 2rem;
     background: var(--bg-secondary);
     border-radius: .5rem .5rem;
     transition: all 0.2s;
 }
 
+.product-fs {
+    height: 80%;
+    width: 80%;
+    font-size: 150%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: .5rem 1rem 2rem 2rem;
+    background: var(--bg-secondary);
+    border-radius: .5rem .5rem;
+    transition: all 0.2s;
+}
+
+.product-title {
+    font-size: 130%;
+    font-weight: bold;
+}
+
 .product-information {
     display: flex;
     flex-direction: row;