mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
add table
This commit is contained in:
parent
0d1875f5b9
commit
221f9ece7c
@ -91,6 +91,12 @@ LAYOUT
|
|||||||
.wx24-metrics {
|
.wx24-metrics {
|
||||||
width: 86%;
|
width: 86%;
|
||||||
}
|
}
|
||||||
|
.wx-table-a {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.wx-table-b {
|
||||||
|
width: 16%;
|
||||||
|
}
|
||||||
.hx24 {
|
.hx24 {
|
||||||
height: 24rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
@ -101,10 +107,9 @@ LAYOUT
|
|||||||
height: 30rem;
|
height: 30rem;
|
||||||
}
|
}
|
||||||
.hx-compare-c,
|
.hx-compare-c,
|
||||||
.hx-compare-d {
|
.hx-compare-d,
|
||||||
height: 100%;
|
.hx-metrics,
|
||||||
}
|
.hx-difference {
|
||||||
.hx-metrics {
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 30em) {
|
@media only screen and (min-width: 30em) {
|
||||||
@ -112,6 +117,12 @@ LAYOUT
|
|||||||
.wx24-metrics {
|
.wx24-metrics {
|
||||||
width: 24rem;
|
width: 24rem;
|
||||||
}
|
}
|
||||||
|
.wx-table-a {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.wx-table-b {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
.hx-try-user {
|
.hx-try-user {
|
||||||
height: 24rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
@ -123,6 +134,9 @@ LAYOUT
|
|||||||
.wx24-metrics {
|
.wx24-metrics {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.wx-table-b {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
.hx-compare-c,
|
.hx-compare-c,
|
||||||
.hx-compare-d {
|
.hx-compare-d {
|
||||||
height: 50rem;
|
height: 50rem;
|
||||||
@ -130,6 +144,9 @@ LAYOUT
|
|||||||
.hx-metrics {
|
.hx-metrics {
|
||||||
height: 132rem;
|
height: 132rem;
|
||||||
}
|
}
|
||||||
|
.hx-difference {
|
||||||
|
height: 33rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Margins an paddings */
|
/* Margins an paddings */
|
||||||
@ -296,7 +313,14 @@ i {
|
|||||||
.inner-shaddow {
|
.inner-shaddow {
|
||||||
box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75);
|
box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75);
|
||||||
}
|
}
|
||||||
|
@media only screen and (max-width: 45em) {
|
||||||
|
.hscroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.hscroll table {
|
||||||
|
width: 46rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
/* ---------------------------------------------------
|
||||||
IMAGES
|
IMAGES
|
||||||
|
|||||||
@ -483,65 +483,165 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- TABLE -->
|
<!-- TABLE -->
|
||||||
<div class="w-100">
|
<div class="w-100">
|
||||||
|
|
||||||
<div class="w-100 hx-compare-c dib cclr-bg-white-fade">
|
<div class="w-100 hx-difference dib cclr-bg-white-fade">
|
||||||
<div class="h-100" id="bg-pattern">
|
<div class="h-100" id="bg-pattern">
|
||||||
|
|
||||||
|
<div class="wx24-metrics center">
|
||||||
|
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||||
|
<em>
|
||||||
|
Make a difference
|
||||||
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
</em>
|
||||||
<em>
|
</p>
|
||||||
Make a difference
|
</div>
|
||||||
</em>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- BOX -->
|
<!-- BOX -->
|
||||||
<div class="mh5">
|
<div class="mh0 mh5-l">
|
||||||
<div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br0 br2-l pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
|
||||||
|
|
||||||
<table class="f7 tc collapse dt--fixed mb4">
|
<div class="hscroll">
|
||||||
<tbody>
|
|
||||||
|
|
||||||
<tr>
|
<table class="f7 tc collapse dt--fixed mb3">
|
||||||
<td class="truncate pv2 pl2 pr1"></td>
|
<tbody>
|
||||||
<td class="truncate pv2 pl2 pr1 gray">Google Analytics</td>
|
|
||||||
<td class="truncate pv2 pl2 pr1 gray">Matomo</td>
|
|
||||||
<td class="truncate pv2 pl2 pr1 gray">Fathom</td>
|
|
||||||
<td class="truncate pv2 pl2 pr1">Offen</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="bg-near-white">
|
<tr>
|
||||||
<td class="truncate pv2 pl2 pr1">Self host option available</td>
|
<td class="wx-table-a truncate pv2 pl2 pr1"></td>
|
||||||
<td class="truncate pv2 pl2 pr1">⚫</td>
|
<td class="wx-table-b truncate pv2 pl2 pr1 gray">Google Analytics</td>
|
||||||
<td class="truncate pv2 pl2 pr1">⚫</td>
|
<td class="wx-table-b truncate pv2 pl2 pr1 gray">Matomo On-Premise</td>
|
||||||
<td class="truncate pv2 pl2 pr1">⚫</td>
|
<td class="wx-table-b truncate pv2 pl2 pr1 gray">Fathom</td>
|
||||||
<td class="truncate pv2 pl2 pr1">⚫</td>
|
<td class="wx-table-b truncate pv2 pl2 pr1">Offen</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
</tbody>
|
<tr class="bg-near-white">
|
||||||
</table>
|
<td class="tl truncate pv2 pl2 pr1">Self host option available</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="tl truncate pv2 pl2 pr1">Open Source code</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="bg-near-white">
|
||||||
|
<td class="tl truncate pv2 pl2 pr1">Data can be exported</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class="tl truncate pv2 pl2 pr1">Data collection is opt in only</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr class="bg-near-white">
|
||||||
|
<td class="tl truncate pv2 pl2 pr1">Users can manage own data</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
<td class="truncate pv2 pl2 pr1">
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
|
||||||
|
</svg>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user