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. 199
      core/templates/core/contact_form_page.html
  2. 1
      feo_homepage/settings/dev.py

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

@ -1,77 +1,194 @@
{% extends "core/base.html" %} {% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %} {% 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 %} {% block content %}
<div class="contact-section">
<div class="row"> <div class="row">
<!-- Contact Form (Desktop) --> <!-- Contact Form (Desktop) -->
<div class="col-md-6 d-none d-md-block"> <div class="col-md-6 d-none d-md-block animate-fade-in-up" style="animation-delay: 0.1s;">
<div class="border-bottom pb-2 mb-3"> <h2 class="section-title">{{ self.form_title }}</h2>
<h2>{{ self.form_title }}</h2> <div class="card contact-card contact-form-card mb-4">
</div> <form action="{% pageurl self %}" method="POST">
<form action="{% pageurl self %}" method="POST" class="mb-4">
{% csrf_token %} {% csrf_token %}
{{ form|crispy }} {{ form|crispy }}
<div class="text-end"> <div class="text-end mt-4">
<button type="submit" class="btn btn-primary">Senden</button> <button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Senden
</button>
</div> </div>
</form> </form>
</div> </div>
</div>
<!-- Contact Person --> <!-- Contact Person -->
<div class="col-md-6 col-12"> <div class="col-md-6 col-12 animate-fade-in-up" style="animation-delay: 0.2s;">
<div class="border-bottom pb-2 mb-3"> <h2 class="section-title">Ihr Ansprechpartner</h2>
<h2>Ihr Ansprechpartner</h2> <div class="card contact-card mb-4">
</div> <div class="card-body p-4">
<div class="row"> <div class="row">
{% if self.person_img %} {% if self.person_img %}
<!-- Desktop Image --> <!-- Person Image -->
<div class="col-md-6 d-none d-md-block text-center"> <div class="col-md-5 col-sm-6 mb-4 mb-md-0">
<div class="card mb-4"> <div class="person-img-container">
{% image self.person_img fill-240x320 class="img-fluid card-img-top" %} {% image self.person_img fill-300x400 class="img-fluid rounded" %}
<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>
</div> </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>
</div> </div>
{% endif %} {% endif %}
<!-- Contact Information --> <!-- Contact Information -->
{% if self.address or self.mail_address or self.phone or self.web_address %} {% if self.address or self.mail_address or self.phone or self.web_address %}
<div class="col-sm-6 col-12"> <div class="col-md-7 col-sm-6">
<ul class="list-unstyled mb-4"> <h5 class="mb-3">Kontaktdaten</h5>
{% if self.address %}<li class="mb-2"><i class="bi bi-house me-2"></i>{{ self.address }}</li>{% endif %} <ul class="list-unstyled contact-info-list">
{% 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.address %}
{% 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 %} <li><i class="bi bi-geo-alt"></i> {{ self.address }}</li>
{% 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 %} {% 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> </ul>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div>
</div>
<!-- Contact Form (Mobile) --> <!-- Contact Form (Mobile) -->
<div class="col-12 d-md-none"> <div class="col-12 d-md-none animate-fade-in-up" style="animation-delay: 0.3s;">
<div class="border-bottom pb-2 mb-3"> <h2 class="section-title">{{ self.form_title }}</h2>
<h2>{{ self.form_title }}</h2> <div class="card contact-card contact-form-card mb-4">
</div> <form action="{% pageurl self %}" method="POST">
<form action="{% pageurl self %}" method="POST" class="mb-4">
{% csrf_token %} {% csrf_token %}
{{ form|crispy }} {{ form|crispy }}
<div class="text-end"> <div class="text-end mt-4">
<button type="submit" class="btn btn-primary">Senden</button> <button type="submit" class="btn btn-primary">
<i class="bi bi-send me-2"></i>Senden
</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div>
</div>
{% endblock content %} {% endblock content %}

1
feo_homepage/settings/dev.py
Unescape View File

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

Write Preview
Loading…
Cancel
Save