mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
layout tweeks, text emphasis
This commit is contained in:
parent
324122aa57
commit
b9ab5cfdd7
@ -168,7 +168,7 @@ LAYOUT
|
|||||||
height: 24rem;
|
height: 24rem;
|
||||||
}
|
}
|
||||||
.hx-metrics {
|
.hx-metrics {
|
||||||
height: 124rem;
|
height: 128rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -182,7 +182,7 @@ LAYOUT
|
|||||||
height: 50rem;
|
height: 50rem;
|
||||||
}
|
}
|
||||||
.hx-metrics {
|
.hx-metrics {
|
||||||
height: 128rem;
|
height: 132rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -254,11 +254,11 @@ LAYOUT
|
|||||||
}
|
}
|
||||||
@media only screen and (min-width: 60em) {
|
@media only screen and (min-width: 60em) {
|
||||||
.stackbox-10 {
|
.stackbox-10 {
|
||||||
top: -2rem;
|
top: -6rem;
|
||||||
left: 34rem;
|
left: 34rem;
|
||||||
}
|
}
|
||||||
.stackbox-20 {
|
.stackbox-20 {
|
||||||
top: 14rem;
|
top: 10rem;
|
||||||
left: 6rem;
|
left: 6rem;
|
||||||
}
|
}
|
||||||
.stackbox-30 {
|
.stackbox-30 {
|
||||||
@ -328,6 +328,13 @@ ul {
|
|||||||
padding-inline-start: 1rem;
|
padding-inline-start: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #777777;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ?????? */
|
||||||
.tracked-min {
|
.tracked-min {
|
||||||
letter-spacing: .03em;
|
letter-spacing: .03em;
|
||||||
}
|
}
|
||||||
@ -568,7 +575,7 @@ STACKING IMAGES
|
|||||||
z-index : 530;
|
z-index : 530;
|
||||||
}
|
}
|
||||||
.bg-metrics-bulb {
|
.bg-metrics-bulb {
|
||||||
top: 7rem;
|
top: 8.5rem;
|
||||||
left: calc(100% - 10rem);
|
left: calc(100% - 10rem);
|
||||||
z-index : 550;
|
z-index : 550;
|
||||||
}
|
}
|
||||||
@ -608,7 +615,7 @@ STACKING IMAGES
|
|||||||
left: -50%;
|
left: -50%;
|
||||||
}
|
}
|
||||||
.bg-metrics-bulb {
|
.bg-metrics-bulb {
|
||||||
top: -1rem;
|
top: -3rem;
|
||||||
left: calc(100% - 20rem);
|
left: calc(100% - 20rem);
|
||||||
}
|
}
|
||||||
.bg-cta-pfeil {
|
.bg-cta-pfeil {
|
||||||
@ -629,7 +636,7 @@ BACKROUND IMAGES
|
|||||||
}
|
}
|
||||||
|
|
||||||
#bg-pattern {
|
#bg-pattern {
|
||||||
background: url(/theme/images/gfx-bg-pattern.svg) 1rem 2rem;
|
background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bg-explainer {
|
#bg-explainer {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
@ -50,7 +50,7 @@
|
|||||||
</em>
|
</em>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="wx18 center ma0">
|
<p class="wx18 center ma0">
|
||||||
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
|
<i>Our</i> open source code <i>can be fully audited by the community. It will always be</i> available for free. <i>Seriously.</i>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -65,7 +65,7 @@
|
|||||||
</em>
|
</em>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="wx18 center ma0">
|
<p class="wx18 center ma0">
|
||||||
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
|
Comply with GDPR <i>guidelines. Don't share data with third parties. Your</i> users have full access <i>to their data.</i>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -87,7 +87,7 @@
|
|||||||
</em>
|
</em>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="wx18 center ma0">
|
<p class="wx18 center ma0">
|
||||||
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
|
Pay respect <i>to your website visitors. Gain valuable insights at the same time. All data is</i> encrypted end-to-end.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -108,9 +108,9 @@
|
|||||||
<p class="f1-ns f2 lh-solid ma0 mt6">
|
<p class="f1-ns f2 lh-solid ma0 mt6">
|
||||||
Gain insights in an ethical way
|
Gain insights in an ethical way
|
||||||
</p>
|
</p>
|
||||||
<div class="mw6 center">
|
<div class="mw7 center">
|
||||||
<p class="f5 ma0 mt3 mb6 gray">
|
<p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
|
||||||
Web analytics is still an unfair and impenetrable business. A proper alternative to common tools is missing. Therefore we develop one. <a class="b link dim gray" href="/deep-dive/">Learn more</a>
|
Web analytics <i>is still an unfair and impenetrable business.</i> A proper alternative to common tools <i>is missing. Therefore we develop one.</i> <a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -123,22 +123,21 @@
|
|||||||
<!-- COMPARE A -->
|
<!-- COMPARE A -->
|
||||||
<div class="w-50-l w-100 cclr-bg-yellow-mid">
|
<div class="w-50-l w-100 cclr-bg-yellow-mid">
|
||||||
|
|
||||||
<div id="">
|
|
||||||
<div class="w-100 dib">
|
|
||||||
<div class="wx24 center">
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<div class="absolute bg-compare-a-pfeil">
|
<div class="w-100 dib">
|
||||||
<img src="/theme/images/gfx-compare-a-pfeil.png" alt="arrow" width="40px" height=="120px">
|
<div class="wx24 center">
|
||||||
</div>
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute bg-compare-a-pfeil">
|
||||||
|
<img src="/theme/images/gfx-compare-a-pfeil.png" alt="arrow" width="40px" height=="120px">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="f25 lh-solid ma0 mt6 mb3">
|
|
||||||
Your job
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<p class="f25 lh-solid ma0 mt6 mb3">
|
||||||
|
Your job
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
<div class="w-100 hx24 dib cclr-bg-white-fade">
|
||||||
@ -150,16 +149,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="w-80 mt4">
|
<div class="w-80 mt4">
|
||||||
<p class="ma0 ml3">
|
<p class="ma0 ml3">
|
||||||
Self host Offen and thereby comply with GDPR guidelines.
|
Self host <i>Offen and thereby comply with GDPR guidelines.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 ml3 mt4">
|
<p class="ma0 ml3 mt4">
|
||||||
Integrate the code snippet into pages you want to track.
|
<i>Integrate the</i> code snippet <i>into pages you want to track.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 ml3 mt4">
|
<p class="ma0 ml3 mt4">
|
||||||
Make your users aware of the access to their data.
|
<i>Make your</i> users aware <i>of the access to their data.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 ml3 mt4 mb5">
|
<p class="ma0 ml3 mt4 mb5">
|
||||||
Improve your services with fair and transparent insights.
|
<i>Improve your services with</i> fair and transparent insights.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -167,6 +166,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- COMPARE B -->
|
<!-- COMPARE B -->
|
||||||
@ -199,13 +199,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="w-80 mt4">
|
<div class="w-80 mt4">
|
||||||
<p class="ma0 ml3">
|
<p class="ma0 ml3">
|
||||||
Opt in to data collection or decide to not participate at all.
|
Opt in to data collection <i>or decide to not participate at all.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 ml3 mt4">
|
<p class="ma0 ml3 mt4">
|
||||||
Review own data with detailed explanations of metrics and terms.
|
Review own data <i>with detailed explanations of metrics and terms.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 ml3 mt4">
|
<p class="ma0 ml3 mt4">
|
||||||
Only delete usage data or opt out completly at any time.
|
Only delete usage data <i>or opt out completly at any time.</i>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -220,62 +220,67 @@
|
|||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 hx-compare-c dib cclr-bg-white-fade">
|
<div class="w-100 hx-compare-c dib cclr-bg-white-fade">
|
||||||
<div class="wx24 center">
|
<div class="h-100" id="bg-pattern">
|
||||||
<p class="f25 lh-solid ma0 mt5 mb4">
|
|
||||||
<em>
|
|
||||||
What you see
|
|
||||||
</em>
|
|
||||||
</p>
|
|
||||||
<p class="ma0 mb2 mr6-ns gray">
|
|
||||||
Data of all pages where your Offen installation is active.
|
|
||||||
</p>
|
|
||||||
<p class="ma0 mb4 gray">
|
|
||||||
For example:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- BOX -->
|
|
||||||
<div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
|
|
||||||
|
|
||||||
<div class="relative">
|
<div class="wx24 center">
|
||||||
<div class="absolute bg-compare-c-pfeil">
|
<p class="f25 lh-solid ma0 mt5 mb4">
|
||||||
<img src="/theme/images/gfx-compare-c-pfeil.png" alt="arrow" width="150px" height="150px">
|
<em>
|
||||||
|
What you see
|
||||||
|
</em>
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb2 mr6-ns gray">
|
||||||
|
Data of all pages where your Offen installation is active.
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb4 gray">
|
||||||
|
For example:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- BOX -->
|
||||||
|
<div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute bg-compare-c-pfeil">
|
||||||
|
<img src="/theme/images/gfx-compare-c-pfeil.png" alt="arrow" width="150px" height="150px">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p class="f25 lh-solid ma0 mb2">
|
||||||
|
478
|
||||||
|
</p>
|
||||||
|
<p class="f7 lh-solid ma0 mb4">
|
||||||
|
Unique users
|
||||||
|
</p>
|
||||||
|
<p class="f25 lh-solid ma0 mb2">
|
||||||
|
2.530
|
||||||
|
</p>
|
||||||
|
<p class="f7 lh-solid ma0 mb4">
|
||||||
|
Unique sessions
|
||||||
|
</p>
|
||||||
|
<p class="f7 lh-solid pt2 ma0 mb3">
|
||||||
|
Top pages
|
||||||
|
</p>
|
||||||
|
<table class="f7 collapse dt--fixed mb4">
|
||||||
|
<tbody>
|
||||||
|
<tr class="striped--near-white">
|
||||||
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="striped--near-white">
|
||||||
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="striped--near-white">
|
||||||
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/landing/</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="striped--near-white">
|
||||||
|
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="striped--near-white">
|
||||||
|
<td class="truncate pv2 pl2 pr1">https://sub.yourpage.org/</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="f25 lh-solid ma0 mb2">
|
|
||||||
478
|
|
||||||
</p>
|
|
||||||
<p class="f7 lh-solid ma0 mb4">
|
|
||||||
Unique users
|
|
||||||
</p>
|
|
||||||
<p class="f25 lh-solid ma0 mb2">
|
|
||||||
2.530
|
|
||||||
</p>
|
|
||||||
<p class="f7 lh-solid ma0 mb4">
|
|
||||||
Unique sessions
|
|
||||||
</p>
|
|
||||||
<p class="f7 lh-solid pt2 ma0 mb3">
|
|
||||||
Top pages
|
|
||||||
</p>
|
|
||||||
<table class="f7 collapse dt--fixed mb4">
|
|
||||||
<tbody>
|
|
||||||
<tr class="striped--near-white">
|
|
||||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="striped--near-white">
|
|
||||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="striped--near-white">
|
|
||||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/landing/</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="striped--near-white">
|
|
||||||
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="striped--near-white">
|
|
||||||
<td class="truncate pv2 pl2 pr1">https://sub.yourpage.org/</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -287,6 +292,10 @@
|
|||||||
<div class="w-50-l w-100">
|
<div class="w-50-l w-100">
|
||||||
|
|
||||||
<div class="w-100 hx-compare-d dib cclr-bg-white-fade">
|
<div class="w-100 hx-compare-d dib cclr-bg-white-fade">
|
||||||
|
<div class="h-100" id="bg-pattern">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="wx24 center">
|
<div class="wx24 center">
|
||||||
<p class="f25 lh-solid ma0 mt5 mb4">
|
<p class="f25 lh-solid ma0 mt5 mb4">
|
||||||
<em class="em-mint-2">
|
<em class="em-mint-2">
|
||||||
@ -333,6 +342,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -353,16 +365,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="w-80 mt4">
|
<div class="w-80 mt4">
|
||||||
<p class="ma0">
|
<p class="ma0">
|
||||||
All your accounts can be shared within your team.
|
All your accounts can be shared <i>within your team.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mt4">
|
<p class="ma0 mt4">
|
||||||
User data is only stored for 6 months and then deleted.
|
<i>User data is only</i> stored for 6 months <i>and then deleted.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mt4">
|
<p class="ma0 mt4">
|
||||||
Use the in-browser screen for an more intuitive setup.
|
<i>Use the</i> in-browser screen <i>for an more intuitive setup.</i>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mt4 mb5">
|
<p class="ma0 mt4 mb5">
|
||||||
A detailed documentation on how to run Offen is available.
|
<i>A</i> detailed documentation <i>on how to run Offen is available.</i>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -381,7 +393,7 @@
|
|||||||
Try as user
|
Try as user
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mt4 mr0 mr4-ns">
|
<p class="ma0 mt4 mr0 mr4-ns">
|
||||||
Offen is installed on this website. Access your actual usage data now.
|
<i>Offen is installed on this website. Access</i> your actual usage data <i>now.</i>
|
||||||
</p>
|
</p>
|
||||||
<div class="mt4">
|
<div class="mt4">
|
||||||
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
|
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
|
||||||
@ -396,90 +408,91 @@
|
|||||||
|
|
||||||
<!-- METRICS -->
|
<!-- METRICS -->
|
||||||
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
|
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
|
||||||
|
<div class="h-100" id="bg-pattern">
|
||||||
|
|
||||||
|
<div class="wx24-metrics center">
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute bg-metrics-bulb">
|
||||||
|
<img src="/theme/images/gfx-metrics-bulb.png" alt="smile" width="170px" height="170px">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="wx24-metrics center">
|
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||||
|
<em>
|
||||||
|
Essential metrics
|
||||||
|
</em>
|
||||||
|
</p>
|
||||||
|
<p class="ma0 ml0 ml5-l w-100 w-33-l mb5">
|
||||||
|
All important statistics <i>that help you to improve your service. Collected</i> without violating the privacy of your users.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BOX 10 Real -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="absolute bg-metrics-bulb">
|
<div class="relative absolute-m absolute-l stackbox-10 center">
|
||||||
<img src="/theme/images/gfx-metrics-bulb.png" alt="smile" width="170px" height="170px">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
|
<p class="lh-solid ma0 mb4">
|
||||||
|
Real time
|
||||||
|
</p>
|
||||||
|
<img src="/theme/images/gfx-metrics-real.svg" alt="temp" width="320px" class="mb3">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- BOX 20 Bars -->
|
||||||
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
<div class="relative">
|
||||||
<em>
|
<div class="relative absolute-m absolute-l stackbox-20 center">
|
||||||
Essential metrics
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
</em>
|
<p class="lh-solid ma0 mb4">
|
||||||
</p>
|
Page views and users
|
||||||
<p class="ma0 ml0 ml5-l w-100 w-33-l gray">
|
</p>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
|
<img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px" class="mb3">
|
||||||
</p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BOX 10 Real -->
|
|
||||||
<div class="relative">
|
|
||||||
<div class="relative absolute-m absolute-l stackbox-10 center">
|
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
||||||
<p class="lh-solid ma0 mb4">
|
|
||||||
Real time
|
|
||||||
</p>
|
|
||||||
<img src="/theme/images/gfx-metrics-real.svg" alt="temp" width="320px" class="mb3">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BOX 20 Bars -->
|
<!-- BOX 30 Key -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-20 center">
|
<div class="relative absolute-m absolute-l stackbox-30 center">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Page views and users
|
Key metrics
|
||||||
</p>
|
</p>
|
||||||
<img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px" class="mb3">
|
<img src="/theme/images/gfx-metrics-key.svg" alt="temp" width="320px" class="mb3">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BOX 30 Key -->
|
<!-- BOX 40 Pages -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-30 center">
|
<div class="relative absolute-m absolute-l stackbox-40 center">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Key metrics
|
Top pages
|
||||||
</p>
|
</p>
|
||||||
<img src="/theme/images/gfx-metrics-key.svg" alt="temp" width="320px" class="mb3">
|
<img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px" class="mb3">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- BOX 40 Pages -->
|
<!-- BOX 50 Retention -->
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="relative absolute-m absolute-l stackbox-40 center">
|
<div class="relative absolute-m absolute-l stackbox-50 center mb5 mb0-ns">
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
||||||
<p class="lh-solid ma0 mb4">
|
<p class="lh-solid ma0 mb4">
|
||||||
Top pages
|
Weekly retention
|
||||||
</p>
|
</p>
|
||||||
<img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px" class="mb3">
|
<img src="/theme/images/gfx-metrics-retention.svg" alt="temp" width="320px" class="mb3">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- BOX 50 Retention -->
|
|
||||||
<div class="relative">
|
|
||||||
<div class="relative absolute-m absolute-l stackbox-50 center mb5 mb0-ns">
|
|
||||||
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
|
|
||||||
<p class="lh-solid ma0 mb4">
|
|
||||||
Weekly retention
|
|
||||||
</p>
|
|
||||||
<img src="/theme/images/gfx-metrics-retention.svg" alt="temp" width="320px" class="mb3">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -499,13 +512,13 @@
|
|||||||
</p>
|
</p>
|
||||||
<div class="flex flex flex-wrap justify-center">
|
<div class="flex flex flex-wrap justify-center">
|
||||||
<div class="mw5 mb5 mh0 mh4-ns">
|
<div class="mw5 mb5 mh0 mh4-ns">
|
||||||
<p class="tc f5 ma0 gray mb3">
|
<p class="tc f5 ma0 mb3 gray ">
|
||||||
Single binary file for Linux, Windows or MacOS
|
Single binary file for Linux, Windows or MacOS
|
||||||
</p>
|
</p>
|
||||||
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a>
|
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="mw5 mb7 mh0 mh4-ns">
|
<div class="mw5 mb7 mh0 mh4-ns">
|
||||||
<p class="tc f5 ma0 gray mb3">
|
<p class="tc f5 ma0 mb3">
|
||||||
All you need to use Offen in production
|
All you need to use Offen in production
|
||||||
</p>
|
</p>
|
||||||
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
|
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user