arne
/
feo-homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance contact page design and update development settings.

Browse Source 
Implemented new responsive and visually appealing styles for the contact page, including animations and improved layout organization. Additionally, updated `ALLOWED_HOSTS` in the development settings to allow all hosts for easier testing in development environments.
main
Arne Schauf 2 weeks ago
parent 8295e9fb3e
commit 36970abd77
2 changed files with 180 additions and 62 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 201
      core/templates/core/contact_form_page.html
  2. 1
      feo_homepage/settings/dev.py

201
core/templates/core/contact_form_page.html
Unescape View File

@ -1,77 +1,194 @@
{% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %}
{% block extra_css %}
<style>
/* Contact page specific styles */
.contact-section {
padding: 2rem 0;
}
.section-title {
position: relative;
margin-bottom: 2rem;
}
.section-title:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background-color: var(--bs-primary);
border-radius: 3px;
}
.contact-card {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--box-shadow-medium);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: none;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.contact-info-list li {
padding: 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
}
.contact-info-list li:last-child {
border-bottom: none;
}
.contact-info-list li:hover {
transform: translateX(5px);
}
.contact-info-list i {
color: var(--bs-primary);
font-size: 1.2rem;
width: 30px;
text-align: center;
}
.person-img-container {
overflow: hidden;
border-radius: 12px;
box-shadow: var(--box-shadow-light);
width: 100%;
height: 300px;
}
.person-img-container img {
transition: transform 0.5s ease;
width: 100%;
height: 100%;
object-fit: cover;
}
.person-img-container:hover img {
transform: scale(1.05);
}
.contact-form-card {
padding: 2rem;
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
{% endblock %}
{% block content %}
<div class="row">
<div class="contact-section">
<div class="row">
<!-- Contact Form (Desktop) -->
<div class="col-md-6 d-none d-md-block">
<div class="border-bottom pb-2 mb-3">
<h2>{{ self.form_title }}</h2>
</div>
<form action="{% pageurl self %}" method="POST" class="mb-4">
<div class="col-md-6 d-none d-md-block animate-fade-in-up" style="animation-delay: 0.1s;">
<h2 class="section-title">{{ self.form_title }}</h2>
<div class="card contact-card contact-form-card mb-4">
<form action="{% pageurl self %}" method="POST">
{% csrf_token %}
{{ form|crispy }}
<div class="text-end">
<button type="submit" class="btn btn-primary">Senden</button>
<div class="text-end mt-4">
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Senden
</button>
</div>
</form>
</div>
</div>
<!-- Contact Person -->
<div class="col-md-6 col-12">
<div class="border-bottom pb-2 mb-3">
<h2>Ihr Ansprechpartner</h2>
</div>
<div class="col-md-6 col-12 animate-fade-in-up" style="animation-delay: 0.2s;">
<h2 class="section-title">Ihr Ansprechpartner</h2>
<div class="card contact-card mb-4">
<div class="card-body p-4">
<div class="row">
{% if self.person_img %}
<!-- Desktop Image -->
<div class="col-md-6 d-none d-md-block text-center">
<div class="card mb-4">
{% image self.person_img fill-240x320 class="img-fluid card-img-top" %}
<div class="card-body">
<h4 class="card-title">{{ self.person_name }}</h4>
<p class="card-text">{{ self.person_position }}</p>
</div>
</div>
</div>
<!-- Mobile Image -->
<div class="col-sm-6 col-12 d-md-none">
<div class="card mb-4">
{% image self.person_img fill-240x320 class="img-fluid card-img-top" %}
<div class="card-body">
<h4 class="card-title">{{ self.person_name }}</h4>
<p class="card-text">{{ self.person_position }}</p>
<!-- Person Image -->
<div class="col-md-5 col-sm-6 mb-4 mb-md-0">
<div class="person-img-container">
{% image self.person_img fill-300x400 class="img-fluid rounded" %}
</div>
<div class="text-center mt-3">
<h4 class="mb-1">{{ self.person_name }}</h4>
<p class="text-muted">{{ self.person_position }}</p>
</div>
</div>
{% endif %}
<!-- Contact Information -->
{% if self.address or self.mail_address or self.phone or self.web_address %}
<div class="col-sm-6 col-12">
<ul class="list-unstyled mb-4">
{% if self.address %}<li class="mb-2"><i class="bi bi-house me-2"></i>{{ self.address }}</li>{% endif %}
{% if self.mail_address %}<li class="mb-2"><a href="mailto:{{ self.mail_address }}" class="text-decoration-none"><i class="bi bi-envelope me-2"></i>{{ self.mail_address }}</a></li>{% endif %}
{% if self.phone %}<li class="mb-2"><a href="tel:{{ self.phone }}" class="text-decoration-none"><i class="bi bi-telephone me-2"></i>{{ self.phone }}</a></li>{% endif %}
{% if self.web_address %}<li class="mb-2"><a href="{{ self.web_address }}" class="text-decoration-none"><i class="bi bi-globe me-2"></i>{{ self.web_address }}</a></li>{% endif %}
<div class="col-md-7 col-sm-6">
<h5 class="mb-3">Kontaktdaten</h5>
<ul class="list-unstyled contact-info-list">
{% if self.address %}
<li><i class="bi bi-geo-alt"></i> {{ self.address }}</li>
{% endif %}
{% if self.mail_address %}
<li>
<a href="mailto:{{ self.mail_address }}" class="text-decoration-none text-dark">
<i class="bi bi-envelope"></i> {{ self.mail_address }}
</a>
</li>
{% endif %}
{% if self.phone %}
<li>
<a href="tel:{{ self.phone }}" class="text-decoration-none text-dark">
<i class="bi bi-telephone"></i> {{ self.phone }}
</a>
</li>
{% endif %}
{% if self.web_address %}
<li>
<a href="{{ self.web_address }}" class="text-decoration-none text-dark">
<i class="bi bi-globe"></i> {{ self.web_address }}
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Contact Form (Mobile) -->
<div class="col-12 d-md-none">
<div class="border-bottom pb-2 mb-3">
<h2>{{ self.form_title }}</h2>
</div>
<form action="{% pageurl self %}" method="POST" class="mb-4">
<div class="col-12 d-md-none animate-fade-in-up" style="animation-delay: 0.3s;">
<h2 class="section-title">{{ self.form_title }}</h2>
<div class="card contact-card contact-form-card mb-4">
<form action="{% pageurl self %}" method="POST">
{% csrf_token %}
{{ form|crispy }}
<div class="text-end">
<button type="submit" class="btn btn-primary">Senden</button>
<div class="text-end mt-4">
<button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Senden
</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock content %}

1
feo_homepage/settings/dev.py
Unescape View File

@ -5,6 +5,7 @@ DEBUG = True
TEMPLATE_DEBUG = True
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
ALLOWED_HOSTS = ['*']
try:

Write Preview
Loading…
Cancel
Save