offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00
Code Issues Projects Releases Wiki Activity

simplify backgrounds

Browse Source
This commit is contained in:
Hendrik Niefeld 2020-04-26 20:06:13 +02:00
parent 0b19a193ec
commit 324122aa57
5 changed files with 62 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
homepage/theme/static/css/fix.css
View File

@ -627,12 +627,11 @@ BACKROUND IMAGES
background-size: 640px 480px; background-size: 640px 480px;
transform: rotate(180deg); transform: rotate(180deg);
} }
#bg-yellow-pattern {
background: url(/theme/images/gfx-bg-yellow-pattern.svg) #BBD9D3 14rem -1rem; #bg-pattern {
} background: url(/theme/images/gfx-bg-pattern.svg) 1rem 2rem;
#bg-mint-pattern {
background: url(/theme/images/gfx-bg-mint-pattern.svg) #BBD9D3 1rem 2rem;
} }
#bg-explainer { #bg-explainer {
background: background:
url(/theme/images/gfx-bg-explainer.svg) top center repeat-x, url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,

1
homepage/theme/static/images/gfx-bg-mint-pattern.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

3
homepage/theme/static/images/gfx-bg-pattern.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

1
homepage/theme/static/images/gfx-bg-yellow-pattern.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

106
homepage/theme/templates/index.html
View File

@ -30,66 +30,70 @@
</div> </div>
</div> </div>
<div class="w-100 overflow-hidden" id="bg-mint-pattern"> <div class="w-100 overflow-hidden cclr-bg-mint-mid">
<div class="mw8 flex flex-wrap justify-center center tc"> <div id="bg-pattern">
<div class="w-100 w-third-l cclr-bg-mint-fade-a"> <div class="mw8 flex flex-wrap justify-center center tc">
<div class="hx-feature">
<div class="relative"> <div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="absolute bg-feature-1"> <div class="hx-feature">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
<div class="relative">
<div class="absolute bg-feature-1">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
</div>
</div> </div>
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Free & Open
</em>
</h2>
<p class="wx18 center ma0">
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
</p>
</div>
</div>
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-2">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted
</em>
</h2>
<p class="wx18 center ma0">
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
</p>
</div> </div>
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Free & Open
</em>
</h2>
<p class="wx18 center ma0">
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
</p>
</div>
</div>
<div class="w-100 w-third-l cclr-bg-mint-fade-b">
<div class="hx-feature" id="bg-feature-2">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted
</em>
</h2>
<p class="wx18 center ma0">
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
</p>
</div> </div>
</div> <div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="w-100 w-third-l cclr-bg-mint-fade-a"> <div class="relative">
<div class="hx-feature"> <div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
<div class="relative"> </div>
<div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
</div> </div>
</div>
<div> <div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3"> <h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1"> <em class="em-mint-1">
Fair & Secure Fair & Secure
</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 to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
</p> </p>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -117,9 +121,9 @@
<div class="mw8 center flex flex-wrap justify-center"> <div class="mw8 center flex flex-wrap justify-center">
<!-- COMPARE A --> <!-- COMPARE A -->
<div class="w-50-l w-100"> <div class="w-50-l w-100 cclr-bg-yellow-mid">
<div id="bg-yellow-pattern"> <div id="">
<div class="w-100 dib"> <div class="w-100 dib">
<div class="wx24 center"> <div class="wx24 center">
@ -171,7 +175,7 @@
<div class="w-100 dn db-l h3 bg-white"> <div class="w-100 dn db-l h3 bg-white">
</div> </div>
<div class="w-100 dib" id="bg-mint-pattern"> <div class="w-100 dib cclr-bg-mint-mid">
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3"> <p class="f25 lh-solid ma0 mt5 mb3">
Benefits for your users Benefits for your users