Added Bending Sheet Table and Pop Up Table (#1455)

Rakesh9100 · Jan 14, 2025 · 7acb438 · 7acb438
1 parent f9f0cc2
commit 7acb438
Show file tree

Hide file tree

Showing 5 changed files with 372 additions and 0 deletions.
diff --git a/Components/Tables/Bending-Sheet-Table/index.html b/Components/Tables/Bending-Sheet-Table/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Bending Sheet Table</title>
+</head>
+
+<body>
+    <table>
+        <caption>Bending Sheet Table</caption>
+        <thead>
+            <tr>
+                <th>One</th>
+                <th>Two</th>
+                <th>Three</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr style="--zi: 0">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -1">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -2">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -3">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -4">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -5">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -6">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -7">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -8">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+            <tr style="--zi: -9">
+                <td data-title="One">Cell 1</td>
+                <td data-title="Two">Cell 2</td>
+                <td data-title="Three">Cell 3</td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+
+</html>
diff --git a/Components/Tables/Bending-Sheet-Table/style.css b/Components/Tables/Bending-Sheet-Table/style.css
@@ -0,0 +1,110 @@
+* {
+    box-sizing: border-box;
+    font: 300 1.125rem/1.5 system-ui;
+}
+
+body {
+    padding: 2rem;
+}
+
+caption {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+table {
+    border-collapse: collapse;
+    border-radius: 1rem;
+    overflow: hidden;
+    width: min(48rem, 100%);
+    filter: drop-shadow(0 5px 15px #c1c1c1);
+    margin-inline: auto;
+}
+
+thead {
+    background: royalblue;
+    color: white;
+    border-radius: 1rem;
+
+    th {
+        font-weight: bold;
+        padding-block: 0.5rem;
+    }
+
+    @media (width <=32rem) {
+        display: none;
+    }
+}
+
+tr {
+    position: relative;
+    filter: drop-shadow(4px 4px 6px silver);
+    z-index: var(--zi);
+
+    &:not(:first-child)::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: -2rem;
+        width: 2rem;
+        height: 2rem;
+        background-color: var(--row-background);
+        transition: background 200ms;
+    }
+
+    @media (width <=32rem) {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+tr:nth-child(4n + 1) {
+    --row-background: honeydew;
+}
+
+tr:nth-child(4n + 2) {
+    --row-background: lavenderblush;
+}
+
+tr:nth-child(4n + 3) {
+    --row-background: aliceblue;
+}
+
+tr:nth-child(4n) {
+    --row-background: lightcyan;
+}
+
+tr:hover {
+    --row-background: papayawhip;
+}
+
+td {
+    padding: 2rem 0.5rem;
+    background-color: var(--row-background);
+    transition: background 200ms;
+
+    &:last-child {
+        clip-path: polygon(0 0,
+                100% 0,
+                100% calc(100% - 2rem),
+                calc(100% - 2rem) 100%,
+                0 101%);
+
+        &::after {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            content: "";
+            border: 1rem solid color-mix(in srgb, var(--row-background, #c0c0c0), black 10%);
+        }
+    }
+
+    @media (width < 32rem) {
+        padding: 0.25rem 0.5rem;
+
+        &::before {
+            content: attr(data-title) ": ";
+            font-weight: bold;
+        }
+    }
+}
diff --git a/Components/Tables/Pop-Up-Table/index.html b/Components/Tables/Pop-Up-Table/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css? family=Open+Sans:300,400,700">
+    <link rel="stylesheet" href="style.css">
+    <title>Pop Up Table</title>
+</head>
+
+<body>
+    <table class="container">
+        <head>
+            <tr>
+                <th>
+                    <h1>Sites</h1>
+                </th>
+                <th>
+                    <h1>Views</h1>
+                </th>
+                <th>
+                    <h1>Clicks</h1>
+                </th>
+                <th>
+                    <h1>Averages</h1>
+                </th>
+            </tr>
+            <tr>
+                <td>Google</td>
+                <td>9518</td>
+                <td>6369</td>
+                <td>01:32:50</td>
+            </tr>
+            <tr>
+                <td>Twitter</td>
+                <td>7326</td>
+                <td>10437</td>
+                <td>00:51:22</td>
+            </tr>
+            <tr>
+                <td>Amazon</td>
+                <td>4162</td>
+                <td>5327</td>
+                <td>00:24:34</td>
+            </tr>
+            <tr>
+                <td>Linedlin</td>
+                <td>3654</td>
+                <td>2961</td>
+                <td>00:12:10</td>
+            </tr>
+            <tr>
+                <td>Codepen</td>
+                <td>4623</td>
+                <td>4135</td>
+                <td>00:46:19</td>
+            </tr>
+            <tr>
+                <td>GitHub</td>
+                <td>2002</td>
+                <td>3486</td>
+                <td>00:31:52</td>
+            </tr>
+    </table>
+</body>
+
+</html>
diff --git a/Components/Tables/Pop-Up-Table/style.css b/Components/Tables/Pop-Up-Table/style.css
@@ -0,0 +1,108 @@
+body {
+    font-family: "Open Sans", sans-serif;
+    font-weight: 300;
+    line-height: 1.42em;
+    color: #A7A1AE;
+    background: #1F2739;
+}
+
+h1 {
+    font-size: 3em;
+    font-weight: 300;
+    text-align: center;
+    display: block;
+    line-height: 1em;
+    padding-bottom: 2em;
+    color: #FB667A;
+}
+
+h2 a {
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #FB667A;
+    text-decoration: none;
+}
+
+.blue {
+    color: #185875;
+}
+
+.yellow {
+    color: #FfF842;
+}
+
+.container th h1 {
+    font-weight: bold;
+    font-size: 1em;
+    text-align: left;
+    color: #a7a194;
+}
+
+.container td {
+    font-weight: normal;
+    font-size: 1em;
+    -webkit-box-shadow: 0 2px 2px-2px #0E1119;
+    -moz-box-shadow: 0 2px 2px -2px #0E1119;
+    box-shadow: 0 2px 2px -2px #0E1119;
+}
+
+.container {
+    text-align: left;
+    overflow: hidden;
+    width: 80%;
+    margin: 0 auto;
+    display: table;
+    padding: 0 0 8em 0;
+}
+
+.container td,
+.container th {
+    padding-bottom: 2%;
+    padding-top: 2%;
+    padding-left: 2%;
+
+}
+
+.container tr:nth-child(odd) {
+    background-color: #323C50;
+
+}
+
+.container tr:nth-child(even) {
+    background-color: #2C3446;
+}
+
+.container th {
+    background-color: #1F2739;
+
+}
+
+.container td:first-child {
+    color: #FB667A;
+}
+
+.container tr:hover {
+    background-color: #464A52;
+    -webkit-box-shadow: 0 6px 6px -6px #0E1119;
+    -moz-box-shadow: 0 6px 6px -6px #0E1119;
+    box-shadow: 0 6px 6px -6px #0E1119;
+}
+
+.container td:hover {
+    background-color: #FFF842;
+    color: #403E10;
+    font-weight: bold;
+    transform: translate3d(6px, -6px, 0);
+    transition-delay: 0s;
+    transition-duration: 0.4s;
+    transition-property: all;
+    transition-timing-function: line;
+    box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
+}
+
+@media(max-width: 800px) {
+    .container td:nth-child(4),
+    .container th:nth-child(4) {
+        display: none;
+    }
+}
diff --git a/assets/json_files/tables.json b/assets/json_files/tables.json
@@ -1,4 +1,9 @@
 [
+    {
+        "title": "Bending Sheet Table",
+        "previewLink": "../../Components/Tables/Bending-Sheet-Table/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tables/Bending-Sheet-Table"
+    },
     {
         "title": "Expandable Row Table",
         "previewLink": "../../Components/Tables/Expandable-Row-Table/index.html",
@@ -8,5 +13,10 @@
         "title": "Interactive Flip Table",
         "previewLink": "../../Components/Tables/Interactive-Flip-Table/index.html",
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tables/Interactive-Flip-Table"
+    },
+    {
+        "title": "Pop Up Table",
+        "previewLink": "../../Components/Tables/Pop-Up-Table/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Tables/Pop-Up-Table"
     }
 ]