basics_01 #3
@ -53,6 +53,27 @@ LAYOUT
|
|||||||
.gapExtra {
|
.gapExtra {
|
||||||
grid-gap: 1rem;
|
grid-gap: 1rem;
|
||||||
}
|
}
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
SPACING
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.hExtra20 {
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
.wExtra24 {
|
||||||
|
width: 24rem;
|
||||||
|
}
|
||||||
|
.wExtra32 {
|
||||||
|
width: 32rem;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 60rem) {
|
||||||
|
.hExtra20 {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.wExtra24,
|
||||||
|
.wExtra32 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
/* ---------------------------------------------------
|
||||||
TYPOGRAPHY
|
TYPOGRAPHY
|
||||||
|
|||||||
20
website/theme/static/images/gfx-content-3.svg
Normal file
20
website/theme/static/images/gfx-content-3.svg
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<svg width="768" height="128" viewBox="0 0 768 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_90_2)">
|
||||||
|
<rect x="320" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect x="512" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<rect y="64" width="64" height="64" rx="2" fill="#4B1202"/>
|
||||||
|
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="288" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="416" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="480" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="608" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="672" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
<circle cx="736" cy="32" r="32" fill="#4B1202"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_90_2">
|
||||||
|
<rect width="768" height="128" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 832 B |
10
website/theme/static/images/gfx-detail-1.svg
Normal file
10
website/theme/static/images/gfx-detail-1.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_85_316)">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_85_316">
|
||||||
|
<rect width="64" height="64" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 291 B |
11
website/theme/static/images/gfx-detail-2.svg
Normal file
11
website/theme/static/images/gfx-detail-2.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<svg width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_86_327)">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_86_327">
|
||||||
|
<rect width="64" height="128" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 342 B |
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
<div class="splashContent">
|
<div class="splashContent">
|
||||||
|
|
||||||
<div class="w-100 h3">
|
<div class="w-100 mw9-ns center-ns h3">
|
||||||
<h1 class="f4 ma0 pt3 ml3">
|
<h1 class="f4 ma0 pt3 ml3">
|
||||||
<span class="fw4">offen.</span><span class="fw7">software</span>
|
<span class="fw4">offen.</span><span class="fw7">software</span>
|
||||||
</h1>
|
</h1>
|
||||||
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
<div class="w-100 bgColorOrange">
|
<div class="w-100 bgColorOrange">
|
||||||
<div class="mw7 center">
|
<div class="mw7 center">
|
||||||
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448" class="db imageCrop">
|
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448px" class="db imageCrop">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -39,16 +39,16 @@
|
|||||||
|
|
||||||
<div class="w-100 bgColorOrange">
|
<div class="w-100 bgColorOrange">
|
||||||
<div class="mw7 center">
|
<div class="mw7 center">
|
||||||
<img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
|
<img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mw7 center mv5 ph3 ph0-ns">
|
<div class="mw7 center mv5 ph3 ph0-ns">
|
||||||
|
|
||||||
<p class="ma0 mb4 ml4 ml6-ns">
|
<p class="ma0 mb4 ml6-l">
|
||||||
The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span>
|
The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mr4 mr6-ns">
|
<p class="ma0 mr4 mr6-l">
|
||||||
We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-ns">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
|
We want to enable the makers that are driving this change by providing them with <span class="fw7 f4 f2-ns">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
@ -56,19 +56,19 @@
|
|||||||
|
|
||||||
<div class="w-100 bgColorOrange">
|
<div class="w-100 bgColorOrange">
|
||||||
<div class="mw7 center">
|
<div class="mw7 center">
|
||||||
<img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
|
<img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192px" class="db imageCrop">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mw7 center mv5 ph3 ph0-ns">
|
<div class="mw7 center mt5 ph3 ph0-ns">
|
||||||
|
|
||||||
<p class="ma0 mb4 ml4 ml6-ns">
|
<p class="ma0 mb4 ml6-l">
|
||||||
<span class="fw7 f4 f2-ns">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
|
<span class="fw7 f4 f2-ns">Located in Berlin</span>, we’re a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb4 mr4 mr6-ns">
|
<p class="ma0 mb4 mr6-l">
|
||||||
<span class="fw7 f4 f2-ns">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
|
<span class="fw7 f4 f2-ns">Working fully open source </span>allows us to be transparent, keep in touch with the community, and contribute back to an ever growing common body of freely available knowledge.
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 ml4 ml6-ns">
|
<p class="ma0 ml6-l">
|
||||||
Our clients value <span class="fw7 f4 f2-ns">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
|
Our clients value <span class="fw7 f4 f2-ns">simple, resilient and accessible tools </span>that are effortless to run and maintain, and that everyone can use, reuse and benefit from.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex justify-center pv5">
|
<div class="flex justify-center pv5">
|
||||||
@ -81,30 +81,34 @@
|
|||||||
|
|
||||||
<!-- FOLD 2 -->
|
<!-- FOLD 2 -->
|
||||||
|
|
||||||
<div class="w-100 w-auto-ns pt5 pb6 ph3">
|
<div class="w-100 mw9-l center-l mv5-l">
|
||||||
|
|
||||||
<div class="flex flex-wrap justify-center gapExtra">
|
<div class="flex flex-wrap justify-center">
|
||||||
|
|
||||||
<div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
|
||||||
<p class="fw7 f4 f2-ns ma0 mb3">
|
|
||||||
We offer
|
<div class="flex flex-column-l flex-wrap justify-center">
|
||||||
</p>
|
<div class="wExtra32 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
|
||||||
<p class="ma0 mb2">
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
Web Application and website development
|
We offer
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
Independent infrastructure solutions
|
Web Application and website development
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0">
|
<p class="ma0 mb2">
|
||||||
Support and guidance with self hosting
|
Independent infrastructure solutions
|
||||||
</p>
|
</p>
|
||||||
|
<p class="ma0">
|
||||||
|
Support and guidance with self hosting
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h3 h-auto-ns w-100 w4-ns bgColorOrange">
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
|
<div class="wExtra24 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
|
||||||
<p class="fw7 f4 f2-ns ma0 mb3">
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
We created
|
We created
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
@ -118,14 +122,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
|
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
|
<div class="wExtra24 h-auto h5-l colorWhite bgColorOrange ph3 pv4 pa4-l">
|
||||||
</div>
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
|
||||||
<div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
|
|
||||||
<p class="fw7 f4 f2-ns ma0 mb3">
|
|
||||||
We worked with
|
We worked with
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
@ -142,51 +142,53 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h3 h-auto-ns w-100 w4-ns bgColorOrange">
|
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
||||||
|
|
||||||
|
<div class="flex flex-column-l flex-wrap justify-center">
|
||||||
|
<div class="wExtra32 hExtra20 colorWhite bgColorOrange ph3 pv4 pa4-l">
|
||||||
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
|
We are
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb2">
|
||||||
|
Frederik Ring, interested in
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb2">
|
||||||
|
Minimal Kubernetes distributions
|
||||||
|
</p>
|
||||||
|
<p class="ma0 mb2">
|
||||||
|
Open Source Tomato Seeds
|
||||||
|
</p>
|
||||||
|
<p class="ma0">
|
||||||
|
Psychological aspects of Software Development
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
|
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
|
<div class="wExtra32 hExtra20 colorWhite bgColorOrange ph3 pv4 pa4-l">
|
||||||
<p class="fw7 f4 f2-ns ma0 mb3">
|
<p class="fw7 f4 f2-l ma0 mb3">
|
||||||
We are
|
And we are
|
||||||
</p>
|
|
||||||
<p class="ma0 mb2">
|
|
||||||
Frederik Ring, interested in
|
|
||||||
</p>
|
|
||||||
<p class="ma0 mb2">
|
|
||||||
Minimal Kubernetes distributions
|
|
||||||
</p>
|
|
||||||
<p class="ma0 mb2">
|
|
||||||
Open Source Tomato Seeds
|
|
||||||
</p>
|
|
||||||
<p class="ma0">
|
|
||||||
Psychological aspects of Software Development
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="h2 h-auto-ns w-100 w3-ns bgColorOrange">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-100 w-auto-ns colorWhite bgColorOrange pa4">
|
|
||||||
<p class="fw7 f4 f2-ns ma0 mb3">
|
|
||||||
We are
|
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
Hendrik Niefeld, interested in
|
Hendrik Niefeld, interested in
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
Generative systems
|
Make things look good
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
Literal present tense in Korean
|
Literal present tense in Korean
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0">
|
<p class="ma0">
|
||||||
###
|
Generative systems
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -195,10 +197,16 @@
|
|||||||
|
|
||||||
<div class="w-100 colorWine bgColorOrange pt5 pb6 ph3 ph5-ns">
|
<div class="w-100 colorWine bgColorOrange pt5 pb6 ph3 ph5-ns">
|
||||||
|
|
||||||
<div class="flex flex-row-l flex-column justify-between">
|
<div class="flex flex-wrap justify-between">
|
||||||
|
|
||||||
|
<div class="w-100 h3">
|
||||||
|
<h1 class="f2 ma0">
|
||||||
|
<span class="fw4">offen.</span><span class="fw7">software</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="w-100 w-50-ns">
|
<div class="w-100 w-50-ns">
|
||||||
<p class="fw7 ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
hi@offen.software
|
hi@offen.software
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mb2">
|
<p class="ma0 mb2">
|
||||||
@ -222,6 +230,12 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="w-100 bgColorOrange">
|
||||||
|
<div class="mw7 center">
|
||||||
|
<img src="/theme/images/gfx-content-3.svg" alt="pattern" width="768px" height="128px" class="db imageCrop">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user