basics_01 #1
@ -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
|
||||||
----------------------------------------------------*/
|
----------------------------------------------------*/
|
||||||
|
@ -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 |
@ -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">
|
||||||
|
@ -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 %}
|
||||||
|
Loading…
Reference in New Issue
Block a user