homepage background and divider, colors

This commit is contained in:
Federico Justus Denkena 2023-11-03 01:34:12 +01:00
parent 47405888fd
commit 9f5c97612e
Signed by: f-denkena
GPG Key ID: 28F91C66EE36F382
6 changed files with 32 additions and 32 deletions

View File

@ -199,3 +199,18 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
.dc-header {padding: 10vw 0;position: relative;background-position: 50%;background-size: cover}
.dc-header {position: relative;z-index: 3;width: 80%;margin-left: auto;margin-right: auto}
.dc-header .dc-parallax {background-repeat: no-repeat;background-position: top;background-size: cover;background-attachment: fixed;position: absolute;width: 100%;height: 100%;overflow: hidden}
.dc-dark-green {background-color:#47B413!important}
.dc-primary-background {background-color:#fde6a0!important}
.dc-secondary-background {background-color:#995f5e!important}
/*divider*/
.editorial{display: block;width: 100%;height: 30px;max-height: 30px;margin: 0;z-index:5;bottom:0;position:absolute;left:0px;float:left;}
.px1 > use {animation: move-forever1 10s linear infinite;&:nth-child(1){animation-delay: -2s;}}
.px2 > use {animation: move-forever2 8s linear infinite;&:nth-child(1){animation-delay: -2s;}}
.px3 > use {animation: move-forever3 6s linear infinite;&:nth-child(1){animation-delay: -2s;}}
.px4 > use {animation: move-forever4 4s linear infinite;&:nth-child(1){animation-delay: -2s;}}
@keyframes move-forever1 {0% {transform: translate(85px, 0%);}100% {transform: translate(-90px, 0%);}}
@keyframes move-forever2 {0% {transform: translate(-90px, 0%);}100% {transform: translate(85px, 0%);}}
@keyframes move-forever3 {0% {transform: translate(85px, 0%);}100% {transform: translate(-90px, 0%);}}
@keyframes move-forever4 {0% {transform: translate(-90px, 0%);}100% {transform: translate(85px, 0%);}}

BIN
static/pictures/.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 901 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 KiB

View File

@ -5,14 +5,12 @@
<div style="padding-bottom:1%" class="dc-container">
<h1 class="dc-xxlarge dc-center">Kontakt</h1>
<div class="dc-container dc-light-blue dc-half dc-border-right dc-border-white" id="Federico">
<h3 class="dc-large dc-center">Federico Justus Denkena</h3>
<a href="mailto:kontakt@denkena-consulting.com" class="dc-medium">Kontakt: kontakt@denkena-consulting.com<br></a>
<a href="mailto:finanzen@denkena-consulting.com" class="dc-medium">Finanzen: finanzen@denkena-consulting.com<br></a>
<a href="mailto:dringend@denkena-consulting.com" class="dc-medium dc-text-red">Dringende Anfragen: dringend@denkena-consulting.com<br></a>
<div class="dc-container dc-light-blue">
<h3 class="dc-large dc-center">Tagungsbüro</h3>
<a href="mailto:buero@im-puls.org" class="dc-medium dc-center">Mail: buero@im-puls.org<br></a>
</div>
<div class="dc-container dc-light-gray dc-half dc-border-left dc-border-white dc-padding" id="Formular">
<h3 class="dc-large dc-center">Anonymes Formular</h3>
<div class="dc-container dc-light-gray dc-padding-top">
<h3 class="dc-large dc-center">Anonymes Kontaktformular</h3>
<form action="" class="dc-container dc-form" method="post">
{% csrf_token %}
{{ contact_form.non_field_errors }}

View File

@ -2,37 +2,23 @@
{% load static %}
{% block content %}
<section style="padding-bottom:60vh;width:100%"class="dc-header dc-text-white">
<span style="background-image:url({% static 'pictures/hand_licht.webp' %});width:100%;" class="dc-parallax">
<section style="padding-bottom:750px;width:100%"class="dc-header dc-text-white">
<span style="background-image:url({% static 'pictures/background-i.webp' %});width:100%;" class="dc-parallax">
<div class="dc-header dc-center">
<h1 class="dc-jumbo">Geistige IDEALE<br>&<br>irdische REALITÄT</h1>
<span class="dc-xlarge">IM-PULS 2024</span>
</div>
<svg class="editorial" viewBox="0 24 150 28 " preserveAspectRatio="none">
<defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /></defs>
<g class="px1"><use xlink:href="#gentle-wave" x="50" y="3" fill="#fde6a0"/></g>
<g class="px2"><use xlink:href="#gentle-wave" x="50" y="0" fill="#e0be8d"/></g>
<g class="px3"><use xlink:href="#gentle-wave" x="50" y="9" fill="#fee7a1"/></g>
<g class="px4"><use xlink:href="#gentle-wave" x="50" y="6" fill="#995f5e"/></g></svg>
</section>
<section>
<div class="dc-container dc-light-blue" style="padding:128px 16px" id="about">
<h3 class="dc-center">Was sind die IM-PULS-Tagungen?</h3>
<div class="dc-row-padding dc-center" style="margin-top:64px">
<div class="dc-third">
<i class="fa-solid fa-book dc-margin-bottom dc-jumbo dc-center"></i>
<p class="dc-large">Information</p>
<p>Zum Tagungsthema wird es eine Fülle an Informationen und Gesprächsangeboten geben. Da kann jeder noch ein paar Dinge mitnehmen.</p>
</div>
<div class="dc-third">
<i class="fa-solid fa-heart dc-margin-bottom dc-jumbo"></i>
<p class="dc-large">Vernetzung</p>
<p>Neben unvergesslichen Momenten und neuen Freundschaften erhält jeder Teilnehmer eine Kontaktliste - ein Freundesnetzwerk, das sich durch ganz Deutschland zieht.</p>
</div>
<div class="dc-third">
<i class="fa-solid fa-star dc-margin-bottom dc-jumbo dc-center"></i>
<p class="dc-large">Motivation</p>
<p>Als Tagungsteilnehmer wollen wir einander bestärken, Impulse von der Tagung in unser Leben hilfreich einzuweben.</p>
</div>
</div>
</div>
<div class="dc-container dc-dark-grey" style="padding:128px 16px" id="contact">
<h3 class="dc-center">Interesse an der Tagung?</h3>
<div class="dc-container dc-secondary-background" style="padding:128px 16px" id="contact">
<h3 class="dc-center">Interesse an der Tagung?</h3>
<div class="dc-center">
<a href="{% url 'anmeldung' %}" class="dc-btn">Melde dich Hier an!</a>
</div>

View File

@ -1,8 +1,9 @@
<header style="z-index:100 !important" class="dc-top">
<div class="dc-bar dc-white dc-card">
<div class="dc-bar dc-white dc-card dc-primary-background">
<a href="{% url 'homepage' %}" class="dc-bar-item dc-button">Home</a>
<a href="{% url 'newspage' %}" class="dc-bar-item dc-button">News</a>
<a href="{% url 'about' %}" class="dc-bar-item dc-button">Über uns</a>
<a href="{% url 'contact' %}" class="dc-bar-item dc-right dc-button">Kontakt</a>
</div>
</header>
<div style="padding-bottom:6vh"></div>