Table Exercise
How do I make an table exercise?
Working through some tabular data designs.. What is a table exercise? How do you make a table exercise? This script and codes were developed by Marcin on 22 October 2022, Saturday.
Table Exercise - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Table Exercise</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
body { background: steelblue; font-family: "Open Sans", arial;
}
.content { color: white; text-align: center;
}
.content p,
.content pre,
.content h2 { text-align: left;
}
.content pre { padding: 1.2em 0 0.5em; background: white; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); color: #38678f;
}
.content .button { display: inline-block; text-decoration: none; color: white; height: 48px; line-height: 48px; padding: 0 20px; border-radius: 24px; border: 1px solid #38678f; background: steelblue; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.2); transition: all 0.1s;
}
.content .button:hover { background: #4f8aba; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.1);
}
.content .button:active { color: #294d6b; background: #427aa9; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.content .button:focus { outline: none;
}
body { background-image: url("http://dannocket.com/sandbox/satinweave.png"); font: .85em arial, sans-serif; padding: 10px;
}
h2 { color: #fff; margin-bottom: 5px; font-size: 2em; cursor: pointer;
}
a { color: #0882cb; text-decoration: none;
}
.numbers a { font-weight: bold;
}
table, td, th { border: 1px solid #eee;
}
table { width: 75%; border-collapse: collapse; border: 1px solid #38678f; margin: 1px auto; background: #e0e0e0;
}
td, th { padding: 10px 5px;
}
th { cursor: pointer; background: steelblue; height: 04px; width: 0%; font-weight: auto; color: dark; border: 1px solid #eee; box-shadow: inset 0px 1px 2px #eee; transition: all 0.5s;
}
/*.header,.summary { background-color: #aaa; color: #fff;
}*/
td { text-align: right;
}
th, td:nth-child(1) { text-align: left;
}
.money, .percent { text-align: center;
}
.fixed { cursor: pointer; top: 0; position: fixed; display: none; border: none; width: 75%;
}
.scrollMore { margin-top: 800px;
}
.up { cursor: pointer;
}
tr.summary, .percent { font-weight: bold;
}
/* Statuses */
.awful-highlight { color: #f00;
}
/* Details */
.row-details { display: none; height: 200px;
}
.row-details td { text-align: center;
}
.publisher14 { cursor: pointer;
}
/* Sort table */
.headerSortDown, .headerSortUp { background-color: #ddd;
}
tbody tr:hover { background: #cbcbcb;
}
/* Icon fonts */
@font-face { font-family: 'fontello'; src: url("http://dannocket.com/sandbox/font/fontello.eot"); src: url("http://dannocket.com/sandbox/font/fontello.eot?#iefix") format("embedded-opentype"), url("http://dannocket.com/sandbox/font/fontello.woff") format("woff"), url("http://dannocket.com/sandbox/font/fontello.ttf") format("truetype"), url("http://dannocket.com/sandbox/font/fontello.svg#fontello") format("svg"); font-weight: normal; font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before { font-family: 'fontello'; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; opacity: 0.8; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - magrins should be symmetric */ /* remove if not needed */ margin-left: 0.2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-plus:before { content: '\2b';
}
/* '+' */
.icon-minus:before { content: '\2d';
}
/* '-' */
.icon-star:before { content: '\2605';
}
/* '★' */
.icon-star-empty:before { content: '\2606';
}
/* '☆' */
.icon-heart-empty:before { content: '\2661';
}
/* '♡' */
.icon-heart:before { content: '\2665';
}
/* '♥' */
.icon-check:before { content: '\2713';
}
/* '✓' */
.icon-cancel:before { content: '\2715';
}
/* '✕' */
.icon-plus-circle:before { content: '\2795';
}
/* '➕' */
.icon-minus-circle:before { content: '\2796';
}
/* '➖' */
.icon-left-bold:before { content: '\e4ad';
}
/* '' */
.icon-right-bold:before { content: '\e4ae';
}
/* '' */
.icon-up-bold:before { content: '\e4af';
}
/* '' */
.icon-down-bold:before { content: '\e4b0';
}
/* '' */
.icon-arrow-combo:before { content: '\e74f';
}
/* '' */
/* jqPlot */
.jqplot-target { position: relative; color: #666; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 1em;
}
.jqplot-axis { font-size: .75em;
}
.jqplot-xaxis { margin-top: 10px;
}
.jqplot-x2axis { margin-bottom: 10px;
}
.jqplot-yaxis { margin-right: 10px;
}
.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px;
}
.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre;
}
.jqplot-xaxis-tick { top: 0; left: 15px; vertical-align: top;
}
.jqplot-x2axis-tick { bottom: 0; left: 15px; vertical-align: bottom;
}
.jqplot-yaxis-tick { right: 0; top: 15px; text-align: right;
}
.jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0; padding: 1px 5px 1px 5px; z-index: 2; font-size: 1.5em;
}
.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0; top: 15px; text-align: left;
}
.jqplot-yMidAxis-tick { text-align: center; white-space: nowrap;
}
.jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute;
}
.jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute;
}
.jqplot-yaxis-label { margin-right: 10px; font-size: 11pt; position: absolute;
}
.jqplot-yMidAxis-label { font-size: 11pt; position: absolute;
}
.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { font-size: 11pt; margin-left: 10px; position: absolute;
}
.jqplot-meterGauge-tick { font-size: .75em; color: #999;
}
.jqplot-meterGauge-label { font-size: 1em; color: #999;
}
table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px;
}
table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255, 255, 255, 0.6); border: 1px solid #ccc; position: absolute; font-size: .75em;
}
td.jqplot-table-legend { vertical-align: middle;
}
td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer;
}
.jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through;
}
div.jqplot-table-legend-swatch-outline { border: 1px solid #ccc; padding: 1px;
}
div.jqplot-table-legend-swatch { width: 0; height: 0; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid;
}
.jqplot-title { top: 0; left: 0; padding-bottom: .5em; font-size: 1.2em;
}
table.jqplot-cursor-tooltip { border: 1px solid #ccc; font-size: .75em;
}
.jqplot-cursor-tooltip { border: 1px solid #ccc; font-size: .75em; white-space: nowrap; background: rgba(208, 208, 208, 0.5); padding: 1px;
}
.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #ccc; font-size: .75em; white-space: nowrap; background: rgba(208, 208, 208, 0.5); padding: 1px;
}
.jqplot-point-label { font-size: .75em; z-index: 2;
}
td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center;
}
div.jqplot-cursor-legend-swatch { width: 1.2em; height: .7em;
}
.jqplot-error { text-align: center;
}
.jqplot-error-message { position: relative; top: 46%; display: inline-block;
}
div.jqplot-bubble-label { font-size: .8em; padding-left: 2px; padding-right: 2px; color: #333333;
}
div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(230, 230, 230, 0.7);
}
div.jqplot-noData-container { text-align: center; background-color: rgba(245, 245, 245, 0.3);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body bgcolor="red">
<div class='main'> <section class="content"> <a class="button" href="https://github.com/victordarras/HeavyTable.js"><b><font size="5">How points are collected?</font></b></a> </div><br> <br> <br>
<table class="numbers table2"> <thead> <tr class="header"> <th class="name">Username</th><th>Club</th><th>Nation</th><th>PKT</th> </tr> </thead> <tbody> <tr class="good"> <td><a href="#">Fresco</a></td> <td><a href="#"><p align="left">NDSZ'Crewu</p></td> <td class="money"><b>Poland</td> <td class="money"><b>0</td> </tr>
<tr class="good">
<td><a href="#">Lierox</a></td>
<td><a href="#"><p align="left">NDSZ'Crewu</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">Rabbit MARKUS</a></td>
<td><a href="#"><p align="left">NDSZ'Crewu</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">Lee</a></td>
<td><a href="#"><p align="left">NDSZ'Crewu</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">Mourinho</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td> <td class="money"><b><b>Poland</b></td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">iks</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">Gunner 99</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">ox</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">VANtastic</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">Kyohei</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">SALAKE</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">regi</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td>
<tr class="good">
<td><a href="#">wINIARSKI</a></td>
<td><a href="#"><p align="left">inFAMOUS</p></td>
<td class="money"><b>Poland</td>
<td class="money"><b>0</td> </td> </tr> </tbody> <tfoot> </tfoot>
</table> </body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://dannocket.com/sandbox/IvtpK.js'></script> <script src="js/index.js"></script>
</body>
</html>
Table Exercise - Script Codes CSS Codes
@charset "UTF-8";
body { background: steelblue; font-family: "Open Sans", arial;
}
.content { color: white; text-align: center;
}
.content p,
.content pre,
.content h2 { text-align: left;
}
.content pre { padding: 1.2em 0 0.5em; background: white; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9); color: #38678f;
}
.content .button { display: inline-block; text-decoration: none; color: white; height: 48px; line-height: 48px; padding: 0 20px; border-radius: 24px; border: 1px solid #38678f; background: steelblue; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.2); transition: all 0.1s;
}
.content .button:hover { background: #4f8aba; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.1);
}
.content .button:active { color: #294d6b; background: #427aa9; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.2);
}
.content .button:focus { outline: none;
}
body { background-image: url("http://dannocket.com/sandbox/satinweave.png"); font: .85em arial, sans-serif; padding: 10px;
}
h2 { color: #fff; margin-bottom: 5px; font-size: 2em; cursor: pointer;
}
a { color: #0882cb; text-decoration: none;
}
.numbers a { font-weight: bold;
}
table, td, th { border: 1px solid #eee;
}
table { width: 75%; border-collapse: collapse; border: 1px solid #38678f; margin: 1px auto; background: #e0e0e0;
}
td, th { padding: 10px 5px;
}
th { cursor: pointer; background: steelblue; height: 04px; width: 0%; font-weight: auto; color: dark; border: 1px solid #eee; box-shadow: inset 0px 1px 2px #eee; transition: all 0.5s;
}
/*.header,.summary { background-color: #aaa; color: #fff;
}*/
td { text-align: right;
}
th, td:nth-child(1) { text-align: left;
}
.money, .percent { text-align: center;
}
.fixed { cursor: pointer; top: 0; position: fixed; display: none; border: none; width: 75%;
}
.scrollMore { margin-top: 800px;
}
.up { cursor: pointer;
}
tr.summary, .percent { font-weight: bold;
}
/* Statuses */
.awful-highlight { color: #f00;
}
/* Details */
.row-details { display: none; height: 200px;
}
.row-details td { text-align: center;
}
.publisher14 { cursor: pointer;
}
/* Sort table */
.headerSortDown, .headerSortUp { background-color: #ddd;
}
tbody tr:hover { background: #cbcbcb;
}
/* Icon fonts */
@font-face { font-family: 'fontello'; src: url("http://dannocket.com/sandbox/font/fontello.eot"); src: url("http://dannocket.com/sandbox/font/fontello.eot?#iefix") format("embedded-opentype"), url("http://dannocket.com/sandbox/font/fontello.woff") format("woff"), url("http://dannocket.com/sandbox/font/fontello.ttf") format("truetype"), url("http://dannocket.com/sandbox/font/fontello.svg#fontello") format("svg"); font-weight: normal; font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before { font-family: 'fontello'; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; opacity: 0.8; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - magrins should be symmetric */ /* remove if not needed */ margin-left: 0.2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-plus:before { content: '\2b';
}
/* '+' */
.icon-minus:before { content: '\2d';
}
/* '-' */
.icon-star:before { content: '\2605';
}
/* '★' */
.icon-star-empty:before { content: '\2606';
}
/* '☆' */
.icon-heart-empty:before { content: '\2661';
}
/* '♡' */
.icon-heart:before { content: '\2665';
}
/* '♥' */
.icon-check:before { content: '\2713';
}
/* '✓' */
.icon-cancel:before { content: '\2715';
}
/* '✕' */
.icon-plus-circle:before { content: '\2795';
}
/* '➕' */
.icon-minus-circle:before { content: '\2796';
}
/* '➖' */
.icon-left-bold:before { content: '\e4ad';
}
/* '' */
.icon-right-bold:before { content: '\e4ae';
}
/* '' */
.icon-up-bold:before { content: '\e4af';
}
/* '' */
.icon-down-bold:before { content: '\e4b0';
}
/* '' */
.icon-arrow-combo:before { content: '\e74f';
}
/* '' */
/* jqPlot */
.jqplot-target { position: relative; color: #666; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 1em;
}
.jqplot-axis { font-size: .75em;
}
.jqplot-xaxis { margin-top: 10px;
}
.jqplot-x2axis { margin-bottom: 10px;
}
.jqplot-yaxis { margin-right: 10px;
}
.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { margin-left: 10px; margin-right: 10px;
}
.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { position: absolute; white-space: pre;
}
.jqplot-xaxis-tick { top: 0; left: 15px; vertical-align: top;
}
.jqplot-x2axis-tick { bottom: 0; left: 15px; vertical-align: bottom;
}
.jqplot-yaxis-tick { right: 0; top: 15px; text-align: right;
}
.jqplot-yaxis-tick.jqplot-breakTick { right: -20px; margin-right: 0; padding: 1px 5px 1px 5px; z-index: 2; font-size: 1.5em;
}
.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { left: 0; top: 15px; text-align: left;
}
.jqplot-yMidAxis-tick { text-align: center; white-space: nowrap;
}
.jqplot-xaxis-label { margin-top: 10px; font-size: 11pt; position: absolute;
}
.jqplot-x2axis-label { margin-bottom: 10px; font-size: 11pt; position: absolute;
}
.jqplot-yaxis-label { margin-right: 10px; font-size: 11pt; position: absolute;
}
.jqplot-yMidAxis-label { font-size: 11pt; position: absolute;
}
.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { font-size: 11pt; margin-left: 10px; position: absolute;
}
.jqplot-meterGauge-tick { font-size: .75em; color: #999;
}
.jqplot-meterGauge-label { font-size: 1em; color: #999;
}
table.jqplot-table-legend { margin-top: 12px; margin-bottom: 12px; margin-left: 12px; margin-right: 12px;
}
table.jqplot-table-legend, table.jqplot-cursor-legend { background-color: rgba(255, 255, 255, 0.6); border: 1px solid #ccc; position: absolute; font-size: .75em;
}
td.jqplot-table-legend { vertical-align: middle;
}
td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { cursor: pointer;
}
.jqplot-table-legend .jqplot-series-hidden { text-decoration: line-through;
}
div.jqplot-table-legend-swatch-outline { border: 1px solid #ccc; padding: 1px;
}
div.jqplot-table-legend-swatch { width: 0; height: 0; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 6px; border-right-width: 6px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid;
}
.jqplot-title { top: 0; left: 0; padding-bottom: .5em; font-size: 1.2em;
}
table.jqplot-cursor-tooltip { border: 1px solid #ccc; font-size: .75em;
}
.jqplot-cursor-tooltip { border: 1px solid #ccc; font-size: .75em; white-space: nowrap; background: rgba(208, 208, 208, 0.5); padding: 1px;
}
.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { border: 1px solid #ccc; font-size: .75em; white-space: nowrap; background: rgba(208, 208, 208, 0.5); padding: 1px;
}
.jqplot-point-label { font-size: .75em; z-index: 2;
}
td.jqplot-cursor-legend-swatch { vertical-align: middle; text-align: center;
}
div.jqplot-cursor-legend-swatch { width: 1.2em; height: .7em;
}
.jqplot-error { text-align: center;
}
.jqplot-error-message { position: relative; top: 46%; display: inline-block;
}
div.jqplot-bubble-label { font-size: .8em; padding-left: 2px; padding-right: 2px; color: #333333;
}
div.jqplot-bubble-label.jqplot-bubble-label-highlight { background: rgba(230, 230, 230, 0.7);
}
div.jqplot-noData-container { text-align: center; background-color: rgba(245, 245, 245, 0.3);
}
Table Exercise - Script Codes JS Codes
/** Prototype code -Known issues: - The table sorter is using a string sort instead of a numeric sort as you would expect.
*/
$(document).ready(function() { addMarginGraph(); $('.table2').tablesorter(); $('.table3').tablesorter();
});
var statusColorGood = "rgba(121,216,121,1)";
var statusColorMarginal = "rgba(255,242,61,1)";
addMarginGraph = function() { $('.numbers .percent').each(function(e) { var percentage = parseFloat($(this).html()); var color = ""; if (percentage >= 0) { if (percentage >= 50) { color = statusColorGood; } else { color = statusColorMarginal; } $(this).css('background',"-webkit-linear-gradient(left, "+color+" 0%,"+color+" "+percentage+"%,rgba(255,255,255,0) "+(percentage+1)+"%,rgba(255,255,255,0) 100%)"); } else { $(this).addClass('awful-highlight'); } });
}
Developer | Marcin |
Username | Fresco |
Uploaded | October 22, 2022 |
Rating | 3 |
Size | 9,585 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Crisp table | 2,795 Kb |
A Pen by Marcin | 121,070 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Starfield old school style | Bolloxim | 5,214 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Hexagons | Ashmind | 4,360 Kb |
SVG Animation | Pollardld | 3,133 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
SVG hamburger menu button | Elifitch | 2,602 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!