add main style

src/public/styles/style.css

@@ -15,6 +15,7 @@
         --link-color-hover: rgb(181, 162, 101);
         --grey: rgb(207, 216, 220);
         --shadow: rgba(0, 0, 0, 0.5);
+        --border: rgb(45, 40, 22);
     }
 }
 
@@ -27,6 +28,7 @@
         --link-color-hover: rgb(175, 154, 88);
         --grey: rgb(55, 71, 79);
         --shadow: rgba(125, 109, 60, 0.288);
+        --border: rgb(213, 202, 168);
     }
 }
 
@@ -56,13 +58,62 @@ main {
     margin-right: auto;
     margin-top: 2%;
     padding: 0.9% 0.9% 0.9% 0.9%;
-    width: 42%;
+    width: 62%;
     border-radius: 6px;
-    border: 1px solid rgb(170, 170, 170);
+    border: 1px solid var(--border);
     text-align: center;
 
     border-radius: 8px;
     box-shadow: 0 4px 30px 0 var(--shadow), 0 4px 30px 0 var(--shadow);
+
+    display: flex;
+    flex-direction: row;
+
+    padding-top: 0.5em;
+}
+
+.upload-area {
+    border: 2px dashed var(--border);
+    height: 70vh;
+    width: 65vw;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.desc-area {
+    text-align: left;
+    max-width: 30%;
+    padding-left: 1em;
+}
+
+/* Mobile display */
+@media only screen and (max-height: 850px) {
+    header > .text-title {
+        font-size: 1.5rem;
+    }
+
+    .upload-area {
+        height: 65vh;
+    }
+}
+
+@media only screen and (max-width: 850px) {
+    main {
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .upload-area {
+        width: 55vw;
+        height: 55vh;
+    }
+
+    .desc-area {
+        max-width: 80%;
+    }
 }
 
 footer {

src/templates/index.html

@@ -15,7 +15,19 @@
         </header>
 
         <main>
-            <p>placeholder-main</p>
+            <div class="upload-area">
+                <header>Glissez pour déposer un fichier</header>
+                <input type="file" hidden />
+            </div>
+            <div class="desc-area">
+                <h2>Projet</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </div>
         </main>
 
         <footer class="text-center">