new
This commit is contained in:
commit
1d8da2b6dd
824 changed files with 76366 additions and 0 deletions
305
assets/scss/custom.scss
Normal file
305
assets/scss/custom.scss
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
// Add your custom code
|
||||
|
||||
.title-custom {
|
||||
color: #046e6e;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Reduziert den Abstand zwischen den Sections */
|
||||
section {
|
||||
margin-bottom: 0px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
/* Zusätzliche optionale Stile für eine bessere Darstellung */
|
||||
#welcome.section, #service.section {
|
||||
padding-top: 90px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 4px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 22px; /* Standard Schriftgröße */
|
||||
line-height: 1.5;
|
||||
padding-top: 90px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px; /* Kleinere Schriftgröße für Tablets */
|
||||
padding-top: 70px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 16px; /* Noch kleinere Schriftgröße für Handys */
|
||||
padding-top: 50px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px; /* Abstand um die Bilder */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px; /* Abstand um die Bilder */
|
||||
}
|
||||
|
||||
.fact-image {
|
||||
height: 250px; /* Einheitliche Höhe für alle Bilder */
|
||||
width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
|
||||
object-fit: contain; /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
|
||||
border-radius: 8px; /* Abgerundete Ecken für die Bilder */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
|
||||
}
|
||||
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-right: 15px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image {
|
||||
margin-left: 15px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
max-width: 150px; /* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.bg-service1 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service2 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service3 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service4 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service5 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service6 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service7 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service8 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px; /* Feste Breite, die du anpassen kannst */
|
||||
height: auto; /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */
|
||||
}
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px; /* Optional: Padding hinzufügen */
|
||||
border-radius: 100px; /* Optional: Abgerundete Ecken hinzufügen */
|
||||
color: #8a0909; /* Optional: Textfarbe auf Weiß setzen */
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-right: 0px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
margin-left: 0px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.fixed-text {
|
||||
width: 600px; /* Feste Breite für den Text */
|
||||
margin-right: 15px; /* Optional: Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
max-width: 600px; /* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
margin: 0; /* Entfernt zusätzliche Margins */
|
||||
padding: 0; /* Entfernt zusätzliches Padding */
|
||||
border: none; /* Entfernt jegliche Standardrahmen */
|
||||
display: block; /* Verhindert zusätzliche Ränder bei inline-block-Elementen */
|
||||
}
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff; /* Weiß als Hintergrundfarbe */
|
||||
z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 20px; /* 40px Abstand sowohl horizontal als auch vertikal */
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* => Standard: 3 Spalten für größere Bildschirme */
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* => mittlere Screens: nur 2 Spalten */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
/* => kleine Screens: 1 Spalte */
|
||||
}
|
||||
}
|
||||
|
||||
/* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
|
||||
.service-item-fixed {
|
||||
width: 100%;
|
||||
height: auto; /* Oder "auto" falls die Höhe flexibel sein soll */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px; /* Abgerundete Ecken */
|
||||
}
|
||||
|
||||
.zoom-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.zoom-wrap a {
|
||||
display: block; /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
|
||||
text-decoration: none; /* Entfernt die Unterstreichung des Links */
|
||||
color: inherit; /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */
|
||||
}
|
||||
|
||||
.zoom-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Das "dunkle Overlay" */
|
||||
.zoom-wrap .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3); /* dunkler Schleier (30% schwarz) */
|
||||
z-index: 1; /* Overlay unter dem Text, aber über dem Bild */
|
||||
pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2; /* Höher als das Overlay */
|
||||
}
|
||||
|
||||
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gif-background {
|
||||
background-image: url('/images/BackgroundAnimation.svg'); /* Pfad zu Ihrem GIF */
|
||||
background-size: cover; /* Deckt den gesamten Hintergrund ab */
|
||||
background-position: center -220px; /* Positioniert das GIF oben in der Mitte */
|
||||
background-repeat: no-repeat; /* Verhindert die Wiederholung des GIFs */
|
||||
position: relative; /* Stellt sicher, dass das Overlay korrekt positioniert wird */
|
||||
}
|
||||
|
||||
.gif-background::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8); /* Weißer Overlay mit 70% Deckkraft */
|
||||
pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */
|
||||
}
|
||||
|
||||
.custom-image {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
max-width: 70%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue