animation #21
@ -116,3 +116,179 @@ IMAGES
|
|||||||
.imageCrop {
|
.imageCrop {
|
||||||
object-fit: none;
|
object-fit: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------------------------
|
||||||
|
ANIMATION
|
||||||
|
----------------------------------------------------*/
|
||||||
|
.a-040-010 circle {
|
||||||
|
animation: show-hide-14 14s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.a-040-010 rect {
|
||||||
|
opacity: 0;
|
||||||
|
animation: hide-show-14 14s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
/* ---------- */
|
||||||
|
.a-040-030 circle {
|
||||||
|
animation: show-hide-10 10s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
/* ---------- */
|
||||||
|
.a-040-070 circle {
|
||||||
|
animation: show-hide-16 16s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
.a-040-070 rect {
|
||||||
|
opacity: 0;
|
||||||
|
animation: hide-show-16 16s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
/* ---------- */
|
||||||
|
.a-040-090 rect {
|
||||||
|
animation: show-hide-10 10s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
/* ---------- */
|
||||||
|
.a-040-120 rect {
|
||||||
|
animation: show-hide-20 20s ease infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- KEYFRAMES --- */
|
||||||
|
/* --- 10 ------------------ */
|
||||||
|
@keyframes show-hide-10 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
22% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
26% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
46% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* --- 14 ------------------ */
|
||||||
|
@keyframes show-hide-14 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
46% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
48% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
98% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes hide-show-14 {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
48% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
96% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
98% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* --- 16 ------------------ */
|
||||||
|
@keyframes show-hide-16 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
56% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
58% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
98% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes hide-show-16 {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
58% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
96% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
98% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* --- 20 ------------------ */
|
||||||
|
@keyframes show-hide-20 {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
74% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
76% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
86% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
88% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -37,12 +37,16 @@
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
<body class="poppins f4 trackedWide lh-title no-js colorSalmon bgColorWine">
|
<body class="poppins f4 trackedWide lh-title no-js colorSalmon bgColorWine">
|
||||||
{% if template == 'index' %}
|
{% if template == 'index' %}
|
||||||
<div class="w-100 mw9-ns center-ns h3 colorSalmonLink">
|
<div class="w-100 colorSalmonLink">
|
||||||
<a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
|
<div class="mw9-ns center-ns h3">
|
||||||
|
<a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="w-100 mw9-ns center-ns h3 colorWineLink bgColorOrange">
|
<div class="w-100 colorWineLink bgColorOrange">
|
||||||
<a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
|
<div class="mw9-ns center-ns h3">
|
||||||
|
<a class="link dim" href="/"><h1 class="f4 logoPadding ma0 ml3 ml5-l"><span class="fw4">offen.</span><span class="fw7">software</span></h1></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|||||||
@ -38,7 +38,7 @@
|
|||||||
<div class="mw7 center mv5 ph3 ph0-l">
|
<div class="mw7 center mv5 ph3 ph0-l">
|
||||||
|
|
||||||
<p class="ma0 mb4 ml6-l">
|
<p class="ma0 mb4 ml6-l">
|
||||||
The world is in flux, and it’s a unique opportunity to <span class="fw7 f4 f2-l">facilitate change for the better.</span>
|
The world is in flux, and it's a unique opportunity to <span class="fw7 f4 f2-l">facilitate change for the better.</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="ma0 mr4 mr6-l">
|
<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-l">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-l">independent, fair and tailor made software </span>that meet the highest standards when it comes to transparency, integrity and privacy.
|
||||||
@ -55,7 +55,7 @@
|
|||||||
<div class="mw7 center mt5 ph3 ph0-l">
|
<div class="mw7 center mt5 ph3 ph0-l">
|
||||||
|
|
||||||
<p class="ma0 mb4 ml6-l">
|
<p class="ma0 mb4 ml6-l">
|
||||||
<span class="fw7 f4 f2-l">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-l">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 mr6-l">
|
<p class="ma0 mb4 mr6-l">
|
||||||
<span class="fw7 f4 f2-l">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-l">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.
|
||||||
@ -79,7 +79,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-wrap justify-center">
|
<div class="flex flex-wrap justify-center">
|
||||||
|
|
||||||
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
|
<div class="self-start pl5 pa0-l">
|
||||||
|
<svg class="a-040-010 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<rect width="64" height="64" rx="2" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
|
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
|
||||||
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
|
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
|
||||||
@ -101,11 +106,23 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db ml5 ma0-l">
|
<div class="ml5 ma0-l">
|
||||||
|
<svg class="s-040-020 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
<div class="self-end pr5 pa0-l">
|
||||||
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-end pr5 pa0-l">
|
<svg class="a-040-030 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="self-end pr5 pa0-l">
|
||||||
|
<svg class="s-040-040 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="64" height="64" rx="2" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
|
<div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
|
||||||
<div class="mw6-m center-m">
|
<div class="mw6-m center-m">
|
||||||
@ -124,7 +141,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
|
<div class="self-start pl5 pa0-l">
|
||||||
|
<svg class="s-040-050 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
|
<div class="wExtra24 colorSalmon ph3 pv4 pa4-l">
|
||||||
<div class="mw6-m center-m">
|
<div class="mw6-m center-m">
|
||||||
@ -146,8 +168,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-start pl5 pa0-l">
|
<div class="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">
|
<svg class="s-040-060 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="self-end pr5 pa0-l">
|
||||||
|
<svg class="a-040-070 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<rect width="64" height="64" rx="2" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
|
<div class="w-100 w-auto-l flex flex-column-l flex-wrap justify-center">
|
||||||
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
|
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
|
||||||
@ -169,11 +202,24 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db mr5 ma0-l">
|
<div class="mr5 ma0-l">
|
||||||
|
<svg class="s-040-080 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
|
<div class="self-start pr5 pa0-l">
|
||||||
<img src="/theme/images/gfx-detail-1.svg" alt="pattern" width="64px" height="64px" class="db self-start pl5 pa0-l">
|
<svg class="a-040-090 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="64" height="64" rx="2" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="self-start pl5 pa0-l">
|
||||||
|
<svg class="s-040-100 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
|
<div class="wExtra32 colorSalmon ph3 pv4 pa4-l">
|
||||||
<div class="mw6-m center-m">
|
<div class="mw6-m center-m">
|
||||||
@ -195,11 +241,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="/theme/images/gfx-detail-2.svg" alt="pattern" width="64px" height="128px" class="db self-end pr5 pa0-l">
|
<div class="self-end pr5 pa0-l">
|
||||||
<img src="/theme/images/gfx-detail-3.svg" alt="pattern" width="64px" height="64px" class="db self-start pr5 pa0-l">
|
<svg class="s-040-110 db" width="64" height="128" viewBox="0 0 64 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="32" cy="32" r="32" fill="#E9500A"/>
|
||||||
|
<circle cx="32" cy="96" r="32" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="self-start pr5 pa0-l">
|
||||||
|
<svg class="a-040-120 db" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="64" height="64" rx="2" fill="#E9500A"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user