Add files via upload

SpantaAlizadeh10 · Mar 8, 2024 · b95d02f · b95d02f
1 parent b6285f4
commit b95d02f
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 0 deletions.
diff --git a/table/index.html b/table/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr>
+          <th>Sofa</th>
+          <th>The Laid Back</th>
+          <th>The worker be</th>
+          <th>The sofa 5/6</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <th>with</th>
+          <td>60 cm</td>
+          <td>80 cm</td>
+          <td>220 cm</td>
+        </tr>
+
+        <tr>
+          <th>height</th>
+          <td>30 cm</td>
+          <td>40 cm</td>
+          <td>120 cm</td>
+        </tr>
+
+        <tr>
+          <th>Depth</th>
+          <td>60 cm</td>
+          <td>80 cm</td>
+          <td>220 cm</td>
+        </tr>
+
+        <tr>
+          <th>Weight</th>
+          <td>60 kg</td>
+          <td>80 kg</td>
+          <td>220 kg</td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
diff --git a/table/style.css b/table/style.css
@@ -0,0 +1,60 @@
+/*
+      SPACING SYSTEM (px)
+      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+
+      FONT SIZE SYSTEM (px)
+      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+      */
+
+/*
+      MAIN COLOR: #087f5b
+      GREY COLOR: #343a40
+      */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ------------------------ */
+/* GENERAL STYLES */
+/* ------------------------ */
+body {
+  font-family: inter, sans-serif;
+  color: black;
+  line-height: 1;
+  display: flex;
+  justify-content: center;
+}
+
+table {
+  width: 800px;
+  margin-top: 100px;
+  border: 1px solid #343a40;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  /* border: 1px solid #343a40; */
+  padding: 16px 24px;
+  text-align: left;
+}
+
+thead tr {
+  background-color: #087f5b;
+  color: #fff;
+}
+
+thead th {
+  width: 25%;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e9ecef;
+}