basics_01 #3

Merged
hendr-ik merged 21 commits from basics_01 into main 2023-11-13 09:46:15 +01:00
5 changed files with 35 additions and 38 deletions
Showing only changes of commit 37a45f262c - Show all commits

View File

@ -30,7 +30,7 @@ COLORS
LAYOUT
----------------------------------------------------*/
.splashContent {
min-height: 85vh;
min-height: 84vh;
}
.splashCta {
position: -webkit-sticky;
@ -48,10 +48,7 @@ LAYOUT
}
}
.buttonPadding {
padding-top: 0.8rem;
padding-right: 3rem;
padding-bottom: 0.75rem;
padding-left: 3rem;
padding-top: 1.4rem;
}
.gapExtra {
grid-gap: 1rem;

View File

@ -1,10 +1,10 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_80_246)">
<rect width="64" height="64" fill="#4B1202"/>
<rect x="704" y="128" width="64" height="64" fill="#4B1202"/>
<rect x="704" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="448" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="256" y="128" width="64" height="64" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<rect x="256" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="224" cy="32" r="32" fill="#4B1202"/>
<circle cx="96" cy="160" r="32" fill="#4B1202"/>
<circle cx="352" cy="96" r="32" fill="#4B1202"/>
<circle cx="672" cy="96" r="32" fill="#4B1202"/>

After

Width:  |  Height:  |  Size: 697 B

View File

@ -1,6 +1,6 @@
<svg width="768" height="192" viewBox="0 0 768 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="128" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="512" y="128" width="64" height="64" fill="#4B1202"/>
<rect x="128" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="352" cy="160" r="32" fill="#4B1202"/>
</svg>

After

Width:  |  Height:  |  Size: 342 B

View File

@ -1,18 +1,18 @@
<svg width="768" height="448" viewBox="0 0 768 448" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_79_77)">
<rect width="64" height="64" fill="#4B1202"/>
<rect x="64" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="192" y="192" width="64" height="64" fill="#4B1202"/>
<rect x="384" y="192" width="64" height="64" fill="#4B1202"/>
<rect x="256" y="256" width="64" height="64" fill="#4B1202"/>
<rect x="320" y="320" width="64" height="64" fill="#4B1202"/>
<rect x="384" y="384" width="64" height="64" fill="#4B1202"/>
<rect x="320" width="64" height="64" fill="#4B1202"/>
<rect x="192" y="64" width="64" height="64" fill="#4B1202"/>
<rect x="448" y="128" width="64" height="64" fill="#4B1202"/>
<rect x="512" y="192" width="64" height="64" fill="#4B1202"/>
<rect x="576" y="256" width="64" height="64" fill="#4B1202"/>
<rect x="704" y="384" width="64" height="64" fill="#4B1202"/>
<rect width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="64" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="192" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="384" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="256" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="320" y="320" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="384" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="320" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="192" y="64" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="448" y="128" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="512" y="192" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="576" y="256" width="64" height="64" rx="2" fill="#4B1202"/>
<rect x="704" y="384" width="64" height="64" rx="2" fill="#4B1202"/>
<circle cx="96" cy="32" r="32" fill="#4B1202"/>
<circle cx="32" cy="96" r="32" fill="#4B1202"/>
<circle cx="96" cy="160" r="32" fill="#4B1202"/>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -7,19 +7,19 @@
<div class="splashContent">
<div class="w-100 pt3 ph3 ph5-ns mb3 mb4-m mb5-l">
<h1 class="f4 ma0">
<div class="w-100 h3">
<h1 class="f4 ma0 pt3 ml3">
<span class="fw4">offen.</span><span class="fw7">software</span>
</h1>
</div>
<div class="w-100 bgColorOrange mb3 mb4-ns">
<div class="w-100 bgColorOrange">
<div class="mw7 center">
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="448" class="db imageCrop">
</div>
</div>
<div class="mw7 center paddingSplash">
<div class="mw7 center paddingSplash mt4">
<h2 class="f4 f2-ns ma0">
<span class="fw4">We </span><span class="fw7">think up, create and ship </span><span class="fw4">software for organisations and individuals who embrace </span><span class="fw7">societal change.</span>
</h2>
@ -28,39 +28,39 @@
</div>
<div class="splashCta bgColorWine">
<div class="flex justify-center pv4">
<a class="link dim br1 f5 fw7 ttu tc trackedExtraWide buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
<div class="flex justify-center pv5">
<a class="link dim br1 f5 fw7 ttu tc trackedExtraWide h3 w5 buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
</div>
</div>
<!-- FOLD -->
<!-- FOLD 1 -->
<div class="w-100 colorWine bgColorOrange pb5 mt5 ph3 ph5-ns">
<div class="w-100 colorWine bgColorOrange">
<div class="w-100 bgColorOrange mb3 mb4-ns">
<div class="w-100 bgColorOrange">
<div class="mw7 center">
<img src="/theme/images/gfx-content-1.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
</div>
</div>
<div class="mw7 center paddingExtra pb4">
<div class="mw7 center paddingExtra ph3 ph5-ns">
<p class="ma0 mb3 ml4 ml6-ns">
The world is in flux, and its a unique opportunity to <span class="fw7 f4 f2-ns">facilitate change for the better.</span>
</p>
<p class="ma0 mb3 mr4 mr6-ns">
<p class="ma0 mr4 mr6-ns">
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>
</div>
<div class="w-100 bgColorOrange mb3 mb4-ns">
<div class="w-100 bgColorOrange">
<div class="mw7 center">
<img src="/theme/images/gfx-content-2.svg" alt="pattern" width="768px" height="192" class="db imageCrop">
</div>
</div>
<div class="mw7 center paddingExtra pt4">
<div class="mw7 center paddingExtra ph3 ph5-ns">
<p class="ma0 mb3 ml4 ml6-ns">
<span class="fw7 f4 f2-ns">Located in Berlin</span>, were a small, reliable and well-rehearsed team of seniors that can take care of your software project from first brainstorming to going live.
@ -79,7 +79,7 @@
</div>
<!-- FOLD -->
<!-- FOLD 2 -->
<div class="w-100 w-auto-ns pt5 pb6 ph3">