basics_01 #3

Merged
hendr-ik merged 21 commits from basics_01 into main 2023-11-13 09:46:15 +01:00
4 changed files with 45 additions and 12 deletions
Showing only changes of commit 3d883cd8c5 - Show all commits

View File

@ -1,16 +1,38 @@
/* --------------------------------------------------- /* ---------------------------------------------------
COLORS COLORS
----------------------------------------------------*/ ----------------------------------------------------*/
.bgColor-extra { .colorSalmon {
background-color: #4B1202;
}
.color-extra {
color: #F5BEA7; color: #F5BEA7;
} }
.colorWhite {
color: #FAFEFF;
}
.bgColorWine {
background-color: #4B1202;
}
.bgColorOrange {
background-color: #E9500A;
}
/* --------------------------------------------------- /* ---------------------------------------------------
LAYOUT LAYOUT
----------------------------------------------------*/ ----------------------------------------------------*/
.paddingExtra {
padding-left: 0;
padding-right: 0;
}
@media only screen and (max-width: 48rem) {
.paddingExtra {
padding-left: 1rem;
padding-right: 1rem;
}
}
.buttonPadding {
padding-top: 0.8rem;
padding-right: 3rem;
padding-bottom: 0.75rem;
padding-left: 3rem;
}
/* --------------------------------------------------- /* ---------------------------------------------------
TYPOGRAPHY TYPOGRAPHY
@ -18,6 +40,11 @@ TYPOGRAPHY
.trackedWide { .trackedWide {
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
.trackedExtraWide {
letter-spacing: 0.15em;
}
/* --------------------------------------------------- /* ---------------------------------------------------
IMAGES IMAGES
----------------------------------------------------*/ ----------------------------------------------------*/

View File

@ -1,5 +1,5 @@
<svg width="768" height="416" viewBox="0 0 768 416" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="768" height="432" viewBox="0 0 768 432" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="768" height="416" fill="#E9500A"/> <rect width="768" height="432" fill="#E9500A"/>
<ellipse cx="70" cy="97" rx="70" ry="69" fill="#D9D9D9"/> <ellipse cx="70" cy="97" rx="70" ry="69" fill="#D9D9D9"/>
<ellipse cx="70" cy="319" rx="70" ry="69" fill="#D9D9D9"/> <ellipse cx="70" cy="319" rx="70" ry="69" fill="#D9D9D9"/>
<ellipse cx="698" cy="97" rx="70" ry="69" fill="#D9D9D9"/> <ellipse cx="698" cy="97" rx="70" ry="69" fill="#D9D9D9"/>

After

Width:  |  Height:  |  Size: 748 B

View File

@ -31,7 +31,7 @@
--> -->
</head> </head>
{% endblock %} {% endblock %}
<body class="poppins f4 f2-ns trackedWide lh-title no-js color-extra bgColor-extra"> <body class="poppins f4 f2-ns trackedWide lh-title no-js colorSalmon bgColorWine">
<main class="w-100"> <main class="w-100">
<div class="mw7 center"> <div class="mw7 center">

View File

@ -2,17 +2,23 @@
{% set index = True %} {% set index = True %}
{% block content %} {% block content %}
<div class="pt3 ph3 ph0-l"> <div class="pt3 paddingExtra">
<h1 class="f4 trackedWide ma0 mb3"> <h1 class="f4 trackedWide ma0 mb3">
<span class="fw4">offen.</span><span class="fw7">software</span> <span class="fw4">offen.</span><span class="fw7">software</span>
</h1> </h1>
</div> </div>
<div class="w-100"> <div class="w-100">
<img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" class="db imageCrop"> <img src="/theme/images/gfx-index.svg" alt="pattern" width="768px" height="432" class="db imageCrop">
</div> </div>
<div class="ph3 pa0-l"> <div class="paddingExtra">
<p class="ma0"> <p class="trackedWide ma0 mt3">
<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> <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>
</p> </p>
</div> </div>
<div class="w-100">
<div class="flex flex-column items-center">
<a class="link dim br1 f5 fw7 ttu trackedExtraWide dib buttonPadding colorWhite bgColorOrange" href="###" rel="noopener">Learn more</a>
</div>
</div>
{% endblock %} {% endblock %}