table inserted

mr-hrr-harry · Mar 24, 2023 · 336a886 · 336a886
1 parent a113892
commit 336a886
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -13,30 +13,28 @@
         <h1>Horror XO</h1>
     </header>
 
-    <Section id="bdy">
+    <Section id="main">
          <table id="box">
-            <tbody>
                 <tr>
-                    <td></td>
-                    <td></td>
+                    <td>hi</td>
+                    <td>hey</td>
                     <td></td>
                 </tr>
                 <tr>
+                    <td>hello</td>
                     <td></td>
-                    <td></td>
-                    <td></td>
+                    <td>hola</td>
                 </tr>
                 <tr>
                     <td></td>
-                    <td></td>
+                    <td>hai</td>
                     <td></td>
                 </tr>
-            </tbody>
          </table>
     </Section>
 
     <footer id="ftr">
-        <p>Developed by Horror</p>
+        <p> - - Developed by Horror - -     </p>
     </footer>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -10,14 +10,66 @@
     font-family: 'Tilt Warp', cursive;
 }
 
-/* Header */
+body{
+    height: 100vh;
+    background-image: linear-gradient(135deg, #CA2A2A, #FFFF00);
+}
 
-#hdr{
+body > *{
 
     position: relative;
     padding: 20px;
-    margin: 10px;
+    margin: 20px 50px;
+
+    background: #0000004c;
+    color: #fff;
+    border: 3px dashed #000;
+    box-shadow: 0 0 10px #fff;
+    text-shadow: 0 0 5px #000;
 
     text-align:center;
 
-}
+}
+
+/* Header */
+#hdr{
+    border-radius: 30px;
+    font-size: 32px;
+}
+
+/* Main */
+#main{
+    padding: 50px;
+    border-radius: 30px;
+}
+
+#box td:first-child{
+    border-left: none;
+}
+#box td:last-child{
+    border-right: none;
+}
+#box tr:first-child td{
+    border-top: none;
+}
+#box tr:last-child td{
+    border-bottom: none;
+}
+
+#box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-collapse: collapse;
+}
+#box td{
+    padding: 65px;
+    border: 3px dashed #000;
+}
+
+/* Footer */
+#ftr{
+    border-radius: 20px;
+}
+