hero section
This commit is contained in:
Jannik Menzel
parent
d31e4399a6
commit
477ef2dde8
4 changed files with 137 additions and 18 deletions
|
|
@ -40,7 +40,8 @@ Anschließend kannst du die Website im Browser unter [http://localhost:1313](htt
|
|||
- `content/` – Inhalte der Website (Seiten im Markdown Format)
|
||||
- `layouts/` – Individuelle Layouts und Templates
|
||||
- `static/` – Statische Dateien (z.B. Bilder, PDFs)
|
||||
- `static/` – CSS, JavaScript Dateien und Images
|
||||
- `assets/` – CSS, JavaScript Dateien und Images
|
||||
- `data/` – Navigation Config-Datei
|
||||
- `hugo.toml` – Hauptkonfigurationsdatei für Hugo
|
||||
|
||||
## 💡 Entwicklungs-Hinweise
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@
|
|||
Farbvariablen
|
||||
======================== */
|
||||
:root {
|
||||
--color-background: #f8f9fa;
|
||||
--color-background: #F8F9Fa;
|
||||
--color-text: #191A23;
|
||||
--color-text-dark: #F3F3F3;
|
||||
--color-accent: #BBE04C;
|
||||
--color-primary-button-dark: #191A23;
|
||||
--color-primary-button-light: #FFFFFF;
|
||||
--color-link: #607C0E;
|
||||
--color-error: #d9534f;
|
||||
--color-off: #F3F3F3;
|
||||
--color-light: #f8f9fa;
|
||||
--color-light: #F8F9Fa;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
|
@ -224,7 +225,6 @@ li .dropdown-item-mobile {
|
|||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -243,35 +243,73 @@ li .dropdown-item-mobile {
|
|||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.hero-card a {
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.dark .hero-card.left-1 svg {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.hero-card.left-1 a:hover,
|
||||
.hero-card.left-1 a:active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.hero-card.left-1 svg {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.hero-card.right-1 svg {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.hero-card.right-1 svg:hover,
|
||||
.hero-card.right-1 svg:active{
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.left-1 {
|
||||
height: 12rem;
|
||||
height: 15rem;
|
||||
width: 17rem;
|
||||
right: 5rem;
|
||||
z-index: 2;
|
||||
border-radius: 0 30px 30px 0;
|
||||
padding: 1rem 0 1rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.left-2 {
|
||||
height: 10rem;
|
||||
width: 12rem;
|
||||
right: 5rem;
|
||||
bottom: 3rem;
|
||||
z-index: 1;
|
||||
border-radius: 0 30px 30px 0;
|
||||
bottom: 5rem;
|
||||
}
|
||||
|
||||
.right-1 {
|
||||
height: 15rem;
|
||||
width: 12rem;
|
||||
left: 5rem;
|
||||
top: 1rem;
|
||||
height: 18rem;
|
||||
width: 8rem;
|
||||
z-index: 2;
|
||||
border-radius: 30px 0 0 30px;
|
||||
top: 0;
|
||||
padding: 0 0 0 2.7rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.right-2 {
|
||||
height: 15rem;
|
||||
width: 18rem;
|
||||
left: 5rem;
|
||||
bottom: 8rem;
|
||||
height: 14rem;
|
||||
width: 16rem;
|
||||
z-index: 1;
|
||||
border-radius: 30px 0 0 30px;
|
||||
bottom: 12rem;
|
||||
}
|
||||
|
||||
/* ========================
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
|
||||
<link rel="preload" href="/images/logo.svg" as="image" type="image/svg+xml">
|
||||
<link rel="preload" href="/icons/dark.svg" as="image" type="image/svg+xml">
|
||||
<link rel="preload" href="/icons/light.svg" as="image" type="image/svg+xml">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
|
|
|
|||
|
|
@ -14,11 +14,88 @@
|
|||
|
||||
<div class="hero-card-wrapper">
|
||||
<div class="hero-card-column left">
|
||||
<div class="hero-card left-1"></div>
|
||||
<div class="hero-card left-1">
|
||||
<a href="https://ese.ifsr.de/" class="d-flex align-items-center mb-2">
|
||||
<svg class="me-2" fill="none" height="41" viewBox="0 0 41 41" width="41" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20.5" cy="20.5" fill="currentColor" r="20.5"/>
|
||||
<path d="m11.25 24.7009c-.7174.4142-.9633 1.3316-.549 2.0491.4142.7174 1.3316.9632 2.049.549zm19.5194-8.3127c.2144-.8002-.2605-1.6227-1.0607-1.8371l-13.04-3.4941c-.8002-.2144-1.6227.2605-1.8371 1.0607s.2605 1.6227 1.0607 1.8371l11.5911 3.1058-3.1058 11.5911c-.2145.8002.2604 1.6227 1.0606 1.8372.8002.2144 1.6227-.2605 1.8371-1.0607zm-18.7694 9.6118.75 1.299 17.3205-10-.75-1.299-.75-1.2991-17.3205 10z"
|
||||
fill="var(--color-text-dark)"/>
|
||||
</svg>
|
||||
ESE Website
|
||||
</a>
|
||||
<a href="/events" class="d-flex align-items-center mb-2">
|
||||
<svg class="me-2" fill="none" height="41" viewBox="0 0 41 41" width="41" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20.5" cy="20.5" fill="currentColor" r="20.5"/>
|
||||
<path d="m11.25 24.7009c-.7174.4142-.9633 1.3316-.549 2.0491.4142.7174 1.3316.9632 2.049.549zm19.5194-8.3127c.2144-.8002-.2605-1.6227-1.0607-1.8371l-13.04-3.4941c-.8002-.2144-1.6227.2605-1.8371 1.0607s.2605 1.6227 1.0607 1.8371l11.5911 3.1058-3.1058 11.5911c-.2145.8002.2604 1.6227 1.0606 1.8372.8002.2144 1.6227-.2605 1.8371-1.0607zm-18.7694 9.6118.75 1.299 17.3205-10-.75-1.299-.75-1.2991-17.3205 10z"
|
||||
fill="var(--color-text-dark)"/>
|
||||
</svg>
|
||||
Events
|
||||
</a>
|
||||
<a href="/neuigkeiten" class="d-flex align-items-center">
|
||||
<svg class="me-2" fill="none" height="41" viewBox="0 0 41 41" width="41" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20.5" cy="20.5" fill="currentColor" r="20.5"/>
|
||||
<path d="m11.25 24.7009c-.7174.4142-.9633 1.3316-.549 2.0491.4142.7174 1.3316.9632 2.049.549zm19.5194-8.3127c.2144-.8002-.2605-1.6227-1.0607-1.8371l-13.04-3.4941c-.8002-.2144-1.6227.2605-1.8371 1.0607s.2605 1.6227 1.0607 1.8371l11.5911 3.1058-3.1058 11.5911c-.2145.8002.2604 1.6227 1.0606 1.8372.8002.2144 1.6227-.2605 1.8371-1.0607zm-18.7694 9.6118.75 1.299 17.3205-10-.75-1.299-.75-1.2991-17.3205 10z"
|
||||
fill="var(--color-text-dark)"/>
|
||||
</svg>
|
||||
Neuigkeiten
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-card left-2"></div>
|
||||
</div>
|
||||
<div class="hero-card-column right">
|
||||
<div class="hero-card right-1"></div>
|
||||
<div class="hero-card right-1">
|
||||
<a href="https://www.instagram.com/ifsrde" class="d-flex align-items-center">
|
||||
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17_63)">
|
||||
<path d="M24 4.32187C30.4125 4.32187 31.1719 4.35 33.6938 4.4625C36.0375 4.56562 37.3031 4.95938 38.1469 5.2875C39.2625 5.71875 40.0688 6.24375 40.9031 7.07812C41.7469 7.92188 42.2625 8.71875 42.6938 9.83438C43.0219 10.6781 43.4156 11.9531 43.5188 14.2875C43.6313 16.8187 43.6594 17.5781 43.6594 23.9813C43.6594 30.3938 43.6313 31.1531 43.5188 33.675C43.4156 36.0188 43.0219 37.2844 42.6938 38.1281C42.2625 39.2438 41.7375 40.05 40.9031 40.8844C40.0594 41.7281 39.2625 42.2438 38.1469 42.675C37.3031 43.0031 36.0281 43.3969 33.6938 43.5C31.1625 43.6125 30.4031 43.6406 24 43.6406C17.5875 43.6406 16.8281 43.6125 14.3063 43.5C11.9625 43.3969 10.6969 43.0031 9.85313 42.675C8.7375 42.2438 7.93125 41.7188 7.09688 40.8844C6.25313 40.0406 5.7375 39.2438 5.30625 38.1281C4.97813 37.2844 4.58438 36.0094 4.48125 33.675C4.36875 31.1438 4.34063 30.3844 4.34063 23.9813C4.34063 17.5688 4.36875 16.8094 4.48125 14.2875C4.58438 11.9437 4.97813 10.6781 5.30625 9.83438C5.7375 8.71875 6.2625 7.9125 7.09688 7.07812C7.94063 6.23438 8.7375 5.71875 9.85313 5.2875C10.6969 4.95938 11.9719 4.56562 14.3063 4.4625C16.8281 4.35 17.5875 4.32187 24 4.32187ZM24 0C17.4844 0 16.6688 0.028125 14.1094 0.140625C11.5594 0.253125 9.80625 0.665625 8.2875 1.25625C6.70312 1.875 5.3625 2.69062 4.03125 4.03125C2.69063 5.3625 1.875 6.70313 1.25625 8.27813C0.665625 9.80625 0.253125 11.55 0.140625 14.1C0.028125 16.6687 0 17.4844 0 24C0 30.5156 0.028125 31.3312 0.140625 33.8906C0.253125 36.4406 0.665625 38.1938 1.25625 39.7125C1.875 41.2969 2.69063 42.6375 4.03125 43.9688C5.3625 45.3 6.70313 46.125 8.27813 46.7344C9.80625 47.325 11.55 47.7375 14.1 47.85C16.6594 47.9625 17.475 47.9906 23.9906 47.9906C30.5063 47.9906 31.3219 47.9625 33.8813 47.85C36.4313 47.7375 38.1844 47.325 39.7031 46.7344C41.2781 46.125 42.6188 45.3 43.95 43.9688C45.2812 42.6375 46.1063 41.2969 46.7156 39.7219C47.3063 38.1938 47.7188 36.45 47.8313 33.9C47.9438 31.3406 47.9719 30.525 47.9719 24.0094C47.9719 17.4938 47.9438 16.6781 47.8313 14.1188C47.7188 11.5688 47.3063 9.81563 46.7156 8.29688C46.125 6.70312 45.3094 5.3625 43.9688 4.03125C42.6375 2.7 41.2969 1.875 39.7219 1.26562C38.1938 0.675 36.45 0.2625 33.9 0.15C31.3313 0.028125 30.5156 0 24 0Z"
|
||||
fill="currentColor"/>
|
||||
<path d="M24 11.6719C17.1938 11.6719 11.6719 17.1938 11.6719 24C11.6719 30.8062 17.1938 36.3281 24 36.3281C30.8062 36.3281 36.3281 30.8062 36.3281 24C36.3281 17.1938 30.8062 11.6719 24 11.6719ZM24 31.9969C19.5844 31.9969 16.0031 28.4156 16.0031 24C16.0031 19.5844 19.5844 16.0031 24 16.0031C28.4156 16.0031 31.9969 19.5844 31.9969 24C31.9969 28.4156 28.4156 31.9969 24 31.9969Z"
|
||||
fill="currentColor"/>
|
||||
<path d="M39.6937 11.1843C39.6937 12.778 38.4 14.0624 36.8156 14.0624C35.2219 14.0624 33.9375 12.7687 33.9375 11.1843C33.9375 9.59053 35.2313 8.30615 36.8156 8.30615C38.4 8.30615 39.6937 9.5999 39.6937 11.1843Z"
|
||||
fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17_63">
|
||||
<rect width="48" height="48" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://github.com/fsr" class="d-flex align-items-center">
|
||||
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_910_44)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M24.0199 0C10.7375 0 0 10.8167 0 24.1983C0 34.895 6.87988 43.9495 16.4241 47.1542C17.6174 47.3951 18.0545 46.6335 18.0545 45.9929C18.0545 45.4319 18.0151 43.509 18.0151 41.5055C11.3334 42.948 9.94198 38.6209 9.94198 38.6209C8.86818 35.8164 7.27715 35.0956 7.27715 35.0956C5.09022 33.6132 7.43645 33.6132 7.43645 33.6132C9.86233 33.7735 11.1353 36.0971 11.1353 36.0971C13.2824 39.7827 16.7422 38.7413 18.1341 38.1002C18.3328 36.5377 18.9695 35.456 19.6455 34.8552C14.3163 34.2942 8.70937 32.211 8.70937 22.9161C8.70937 20.2719 9.66321 18.1086 11.1746 16.4261C10.9361 15.8253 10.1008 13.3409 11.4135 10.0157C11.4135 10.0157 13.4417 9.3746 18.0146 12.4996C19.9725 11.9699 21.9916 11.7005 24.0199 11.6982C26.048 11.6982 28.1154 11.979 30.0246 12.4996C34.5981 9.3746 36.6262 10.0157 36.6262 10.0157C37.9389 13.3409 37.1031 15.8253 36.8646 16.4261C38.4158 18.1086 39.3303 20.2719 39.3303 22.9161C39.3303 32.211 33.7234 34.2539 28.3544 34.8552C29.2296 35.6163 29.9848 37.0583 29.9848 39.3421C29.9848 42.5871 29.9454 45.1915 29.9454 45.9924C29.9454 46.6335 30.383 47.3951 31.5758 47.1547C41.12 43.9491 47.9999 34.895 47.9999 24.1983C48.0392 10.8167 37.2624 0 24.0199 0Z"
|
||||
fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_910_44">
|
||||
<rect width="48" height="48" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://t.me/s/ifsrde" class="d-flex align-items-center">
|
||||
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_318_75)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24ZM24.8601 17.7179C22.5257 18.6888 17.8603 20.6984 10.8638 23.7466C9.72766 24.1984 9.13251 24.6404 9.07834 25.0726C8.98677 25.803 9.90142 26.0906 11.1469 26.4822C11.3164 26.5355 11.4919 26.5907 11.6719 26.6492C12.8973 27.0475 14.5457 27.5135 15.4026 27.5321C16.1799 27.5489 17.0475 27.2284 18.0053 26.5707C24.5423 22.158 27.9168 19.9276 28.1286 19.8795C28.2781 19.8456 28.4852 19.803 28.6255 19.9277C28.7659 20.0524 28.7521 20.2886 28.7372 20.352C28.6466 20.7383 25.0562 24.0762 23.1982 25.8036C22.619 26.3421 22.2081 26.724 22.1242 26.8113C21.936 27.0067 21.7443 27.1915 21.56 27.3692C20.4215 28.4667 19.5678 29.2896 21.6072 30.6336C22.5873 31.2794 23.3715 31.8135 24.1539 32.3463C25.0084 32.9282 25.8606 33.5085 26.9632 34.2313C27.2442 34.4155 27.5125 34.6068 27.7738 34.7931C28.7681 35.5019 29.6615 36.1388 30.7652 36.0373C31.4065 35.9782 32.0689 35.3752 32.4053 33.5767C33.2004 29.3263 34.7633 20.1169 35.1244 16.3219C35.1561 15.9895 35.1163 15.5639 35.0843 15.3771C35.0523 15.1904 34.9855 14.9242 34.7427 14.7272C34.4552 14.4939 34.0113 14.4447 33.8127 14.4482C32.91 14.4641 31.5251 14.9456 24.8601 17.7179Z"
|
||||
fill="currentColor"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_318_75">
|
||||
<rect width="48" height="48" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://toot.kif.rocks/@iFSR" class="d-flex align-items-center">
|
||||
<svg width="40" height="40" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M46.7806 10.4922C46.0881 5.40012 41.6015 1.38719 36.2829 0.609589C35.3856 0.478192 31.9859 0 24.1104 0H24.0516C16.174 0 14.4839 0.478192 13.5867 0.609589C8.4162 1.36565 3.69444 4.97148 2.54884 10.1239C1.99783 12.6613 1.93902 15.4745 2.04138 18.055C2.18731 21.7556 2.21562 25.4497 2.55538 29.1353C2.79026 31.5834 3.20001 34.012 3.78156 36.4029C4.87053 40.8186 9.27868 44.4934 13.5975 45.9926C18.2215 47.5561 23.1942 47.8156 27.9589 46.7422C28.483 46.6216 29.0014 46.4815 29.5139 46.3222C30.6704 45.9582 32.0273 45.551 33.0248 44.8359C33.0384 44.8258 33.0497 44.8129 33.0576 44.798C33.0655 44.7831 33.0699 44.7665 33.0705 44.7497V41.1784C33.0702 41.1627 33.0664 41.1472 33.0594 41.1331C33.0523 41.119 33.0421 41.1066 33.0296 41.0969C33.0171 41.0872 33.0025 41.0804 32.987 41.0769C32.9714 41.0735 32.9553 41.0736 32.9398 41.0771C29.8871 41.7983 26.7589 42.1598 23.6204 42.1541C18.2191 42.1541 16.7664 39.6189 16.3504 38.5634C16.0161 37.6512 15.8037 36.6997 15.7188 35.733C15.718 35.7168 15.721 35.7006 15.7276 35.6857C15.7343 35.6709 15.7444 35.6577 15.7571 35.6475C15.7699 35.6372 15.7849 35.63 15.8009 35.6266C15.817 35.623 15.8336 35.6234 15.8495 35.6275C18.8513 36.3438 21.9285 36.7053 25.0165 36.7045C25.7591 36.7045 26.4996 36.7045 27.2423 36.6851C30.3481 36.599 33.6215 36.4417 36.6771 35.8515C36.7534 35.8364 36.8296 35.8235 36.895 35.8041C41.7147 34.8886 46.3014 32.0152 46.7675 24.7389C46.785 24.4524 46.8285 21.7383 46.8285 21.4411C46.8307 20.4309 47.1574 14.2747 46.7806 10.4922ZM39.3625 28.6485H34.2945V16.3705C34.2945 13.7857 33.2055 12.4675 30.9905 12.4675C28.5556 12.4675 27.336 14.027 27.336 17.1072V23.8277H22.2984V17.1072C22.2984 14.027 21.0766 12.4675 18.6417 12.4675C16.4397 12.4675 15.3399 13.7857 15.3377 16.3705V28.6485H10.274V15.9979C10.274 13.4131 10.9412 11.3596 12.2755 9.83738C13.652 8.31881 15.4575 7.53909 17.6986 7.53909C20.2925 7.53909 22.2527 8.52558 23.5594 10.4966L24.8205 12.5903L26.0837 10.4966C27.3904 8.52558 29.3506 7.53909 31.9402 7.53909C34.1791 7.53909 35.9845 8.31881 37.3654 9.83738C38.6998 11.3581 39.3669 13.4116 39.3669 15.9979L39.3625 28.6485Z"
|
||||
fill="currentColor"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-card right-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue