572 lines
14 KiB
HTML
572 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Beyond Heroes - Official Website</title>
|
|
<!-- <link rel="stylesheet" href="demo3.css"> -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Mozilla+Headline" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<style type="text/css">
|
|
:root {
|
|
--primary-color: #009020; /* Accents */
|
|
--primary-dark-color: #006020; /* Secondary Accents */
|
|
--secondary-color: #333; /* Dark gray for text */
|
|
--background-color: #1a1a1a; /* Dark background */
|
|
--card-bg-color: #2a2a2a; /* Background for cards */
|
|
/* --font-family: 'Montserrat', sans-serif;*/
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Alte DIN 1451 Mittelschrift';
|
|
src: url('mittelschrift.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
|
|
}
|
|
body {
|
|
font-family: 'Alte DIN 1451 Mittelschrift', sans-serif;
|
|
}
|
|
|
|
/* Allgemeine Stile (General Styles) */
|
|
body {
|
|
margin: 0;
|
|
/* font-family: var(--font-family);*/
|
|
color: white;
|
|
background-color: var(--background-color);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2 {
|
|
font-family: 'Mozilla Headline';
|
|
letter-spacing: -1px;
|
|
margin: 0;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
section {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid #444;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
/* Hero-Bereich (Hero Section) */
|
|
.hero-section {
|
|
position: relative;
|
|
height: 100vh; /* Volle Bildschirmhöhe (Full viewport height) */
|
|
background-size: cover;
|
|
background-position: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.hero-content {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
padding: 40px;
|
|
margin: 0px 20%;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.hero-section h1 {
|
|
font-size: 4.7em;
|
|
font-weight: bold;
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.hero-section p {
|
|
margin-block-start: 0;
|
|
font-size: 1.2em;
|
|
font-weight: lighter;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.discord-button {
|
|
background-color: var(--primary-color);
|
|
color: var(--background-color);
|
|
padding: 15px 30px;
|
|
letter-spacing: +0.8px;
|
|
border-radius: 50px;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.discord-button:hover {
|
|
background-color: var(--primary-dark-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Team-Bereich (Team Section) */
|
|
.team-container {
|
|
display: flex;
|
|
gap: 40px;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.dev-cards-column {
|
|
flex: 6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.dev-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
background-color: var(--card-bg-color);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.dev-card:hover, .dev-card.active {
|
|
background-color: var(--primary-color);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
.dev-card:hover .dev-info p, .dev-card.active .dev-info p {
|
|
color: var(--background-color);
|
|
}
|
|
|
|
.dev-card img {
|
|
border-radius: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.dev-info h3 {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.dev-info p {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
font-style: italic;
|
|
color: #bbb;
|
|
}
|
|
|
|
.dev-bio-column {
|
|
flex: 10;
|
|
}
|
|
|
|
#dev-bio-box {
|
|
background-color: var(--card-bg-color);
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
min-height: 975px; /* Stellt sicher, dass die Box groß genug ist (Ensures the box is large enough) */
|
|
}
|
|
|
|
#dev-bio-box p {
|
|
margin-block-start: 5px;
|
|
margin-block-end: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
#dev-bio-box h3 {
|
|
color: var(--primary-color);
|
|
margin-block-end: 0;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/* NEUE NAV-BAR (NEW NAV BAR) */
|
|
#navbar {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 00px;
|
|
z-index: 1000;
|
|
transition: background-color 0.3s ease, padding 0.3s ease;
|
|
}
|
|
|
|
#navbar .nav-brand{
|
|
margin-left: 40px;
|
|
}
|
|
|
|
#navbar .nav-links-div{
|
|
margin-right: 40px;
|
|
}
|
|
|
|
#navbar.scrolled {
|
|
position: fixed;
|
|
padding: 20px 40px;
|
|
top: 0;
|
|
background-color: var(--background-color); /* Feste Hintergrundfarbe (Solid background color) */
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
|
|
padding: 10px 40px;
|
|
}
|
|
|
|
#navbar.scrolled .nav-brand{
|
|
margin-left: 0px;
|
|
}
|
|
|
|
#navbar.scrolled .nav-links-div{
|
|
margin-right: 80px;
|
|
}
|
|
|
|
.nav-brand {
|
|
font-weight: bold;
|
|
font-size: 1.5em;
|
|
color: white;
|
|
}
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
letter-spacing: +0.6px;
|
|
display: flex;
|
|
gap: 30px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: white;
|
|
font-weight: bold;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links button {
|
|
color: white;
|
|
font-weight: bold;
|
|
transition: color 0.3s ease;
|
|
background: transparent;
|
|
box-shadow: 0 0 0 #000;
|
|
border-width: 0;
|
|
font-size: 1em;
|
|
padding: 0px;
|
|
}
|
|
|
|
.nav-links a:hover, button:hover{
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Responsive Design (Für kleinere Bildschirme) (For smaller screens) */
|
|
@media (max-width: 768px) {
|
|
.hero-section h1 {
|
|
font-size: 2.5em;
|
|
}
|
|
.hero-content p {
|
|
font-size: 1em;
|
|
}
|
|
.news-container, .team-container {
|
|
grid-template-columns: 1fr;
|
|
flex-direction: column;
|
|
}
|
|
.dev-bio-column {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
/* NEUE ALLGEMEINE HILFSKLASSE (NEW GENERAL HELPER CLASS) */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
/* NEUER SUPPORT-BEREICH (NEW SUPPORT SECTION) */
|
|
#support-section {
|
|
/* margin-top: 90px;*/
|
|
padding: 80px 20px;
|
|
/* background-color: var(--card-bg-color);*/
|
|
}
|
|
|
|
#support-section h2 {
|
|
color: var(--primary-color);
|
|
font-size: 2.5em;
|
|
margin-bottom: 40px;
|
|
color: #eee;
|
|
}
|
|
|
|
#support-section h3 {
|
|
margin: 20px;
|
|
color: #ddd;
|
|
}
|
|
|
|
#support-section p {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
font-size: 1.1em;
|
|
color: #bbb;
|
|
}
|
|
|
|
/* NEUER SUPPORT-BEREICH (NEW SUPPORT SECTION) */
|
|
#about-section {
|
|
padding: 80px 20px;
|
|
background-color: var(--card-bg-color);
|
|
}
|
|
|
|
#about-section h2 {
|
|
color: var(--primary-color);
|
|
font-size: 2.5em;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
#about-section h3 {
|
|
margin: 20px;
|
|
}
|
|
|
|
#about-section p {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
font-size: 1.1em;
|
|
color: #ccc;
|
|
}
|
|
|
|
/* Fußzeile (Footer) */
|
|
footer {
|
|
background-color: #111;
|
|
text-align: center;
|
|
padding: 30px;
|
|
margin-top: 50px;
|
|
font-size: 0.9em;
|
|
color: #bbb;
|
|
}
|
|
footer p {
|
|
margin: 0;
|
|
}
|
|
.footer-socials {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.footer-socials a {
|
|
color: #fff;
|
|
font-size: 2em; /* Größe der Icons (Size of the icons) */
|
|
margin: 0 50px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
.footer-socials a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Neuigkeiten-Bereich (News Section) */
|
|
#news-section h2, #team-section h2 {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
font-size: 2.5em;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* NEUE STILE FÜR DEN NEUIGKEITEN-BEREICH (NEW STYLES FOR NEWS SECTION) */
|
|
.news-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
flex-wrap: wrap; /* Erlaubt das Umbrechen auf kleineren Bildschirmen (Allows wrapping on smaller screens) */
|
|
}
|
|
|
|
.news-post {
|
|
background-color: var(--card-bg-color);
|
|
border-radius: 8px;
|
|
overflow: hidden; /* Stellt sicher, dass das Bild innerhalb der Form bleibt (Ensures the image stays within the shape) */
|
|
width: 350px; /* Feste Breite für jede Karte (Fixed width for each card) */
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.news-post:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.news-post img {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.post-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.news-post h3 {
|
|
color: var(--primary-color);
|
|
margin-block-end: 0;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.news-post p {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.news-post p.news-date {
|
|
margin-block-start: 0;
|
|
margin-block-end: 0;
|
|
font-style: italic;
|
|
font-size: 0.9em;
|
|
color: #bbb;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.news-post .read-more {
|
|
display: inline-block;
|
|
color: var(--primary-color);
|
|
font-weight: bold;
|
|
margin-top: 10px;
|
|
}
|
|
.news-post .read-more:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ... Der Rest des CSS-Codes bleibt gleich ... */
|
|
|
|
/* Responsive Design (Für kleinere Bildschirme) */
|
|
@media (max-width: 768px) {
|
|
/* ... Die bereits existierenden Media-Query-Styles bleiben bestehen ... */
|
|
.news-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.news-post {
|
|
width: 90%; /* Nimmt fast die ganze Breite ein (Takes up almost the full width) */
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
|
|
/*********************************************************************************************/
|
|
|
|
/* NEUER SUPPORT-BEREICH (NEW SUPPORT SECTION) */
|
|
#supporters-carousel {
|
|
padding-top: 50px;
|
|
text-align: center;
|
|
/* background-color: var(--card-bg-color);*/
|
|
}
|
|
#supporters-carousel h3 {
|
|
color: white;
|
|
font-size: 2em;
|
|
margin-bottom: 30px;
|
|
}
|
|
.carousel-container {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
max-width: 100%;
|
|
}
|
|
.carousel-content {
|
|
display: inline-block;
|
|
animation: scroll-left 20s linear infinite; /* Animation für das Karussell (Animation for the carousel) */
|
|
}
|
|
.supporter-item {
|
|
display: inline-block;
|
|
background-color: var(--card-bg-color);
|
|
border: 1px solid var(--primary-color);
|
|
color: white;
|
|
padding: 15px 25px;
|
|
border-radius: 8px;
|
|
margin: 0 10px;
|
|
text-align: center;
|
|
min-width: 150px;
|
|
}
|
|
.supporter-item h4 {
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
.supporter-item p {
|
|
margin: 5px 0 0;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
/* Animation Keyframes für das Scrollen (Animation keyframes for scrolling) */
|
|
@keyframes scroll-left {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<nav id="navbar">
|
|
<div class="nav-brand">Beyond Heroes</div>
|
|
<div class="nav-links-div">
|
|
<ul class="nav-links">
|
|
{% if user.is_authenticated %}
|
|
<li><a href="/#news-section">News</a></li>
|
|
{% else %}
|
|
<li><a href="/#hero-section">Home</a></li>
|
|
{% endif %}
|
|
<li><a href="/#about-section">About</a></li>
|
|
<li><a href="/dev/support">Support Us</a></li>
|
|
{% if user.is_authenticated %}
|
|
<li class="nav-item">
|
|
<form action="{% url 'Logout' %}" method="post">
|
|
{% csrf_token %}
|
|
<button class="nav-link" type="submit">Logout</button>
|
|
</form>
|
|
</li>
|
|
{% else %}
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link" href="{% url 'Login' %}">Login</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{% url 'Register' %}">Register</a>
|
|
</li> -->
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
{% block content %}
|
|
|
|
{% endblock %}
|
|
|
|
<footer>
|
|
<div class="footer-socials">
|
|
<a href="https://www.youtube.com/@BeyondHeroesWWII/" target="blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
|
<a href="https://discord.gg/gnnfKKuumg" target="blank" aria-label="Discord"><i class="fab fa-discord"></i></a>
|
|
<!-- <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a> -->
|
|
<a href="https://www.reddit.com/r/beyondheroes/" target="blank" aria-label="Reddit"><i class="fab fa-reddit"></i></a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="text/javascript">
|
|
const navbar = document.getElementById('navbar');
|
|
const heroSection = document.querySelector('.hero-section');
|
|
|
|
if (heroSection == null) {
|
|
navbar.classList.add('scrolled');
|
|
}
|
|
else {
|
|
window.addEventListener('scroll', () => {
|
|
const heroHeight = heroSection.offsetHeight;
|
|
if (window.scrollY > heroHeight - 70) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |