forked from markus/AMPERION_Webpage
140 lines
2.6 KiB
SCSS
140 lines
2.6 KiB
SCSS
/* 1) Container, z. B. 80% Seitenbreite */
|
|
.my-container {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
padding: 40px 0; /* Abstand oben & unten */
|
|
}
|
|
|
|
/* 2) Überschriften zentrieren, falls du kein .text-center in Bootstrap verwendest */
|
|
.why-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.why-subtitle {
|
|
font-size: 1.2rem;
|
|
color: #666;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* 3) Warum-Blocks (linke + rechte Spalte) */
|
|
.why-block p {
|
|
text-align: justify;
|
|
margin-bottom: 40px; /* Abstand zwischen einzelnen Blöcken */
|
|
}
|
|
|
|
.why-block h4 {
|
|
margin: 100px 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 4) Icon + Logo-Größen anpassen */
|
|
.why-icon {
|
|
width: 50px; /* Iconbreite */
|
|
height: auto;
|
|
|
|
margin: 200px;
|
|
}
|
|
|
|
.why-logo {
|
|
max-width: 500px; /* Logo in der Mitte */
|
|
height: auto;
|
|
margin-top: 100px; /* Verschiebt das Logo um 100px nach unten */
|
|
|
|
}
|
|
|
|
/* 5) Optional: Falls du Bootstrap .text-center nicht verwendest, kannst du hier:
|
|
.why-title, .why-subtitle, .why-block, .why-logo {
|
|
text-align: center;
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
.section-title1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px; /* Abstand zwischen Icon und Titel */
|
|
}
|
|
|
|
|
|
|
|
.why-title1 {
|
|
margin: 0; /* Entfernt zusätzliche Ränder */
|
|
}
|
|
|
|
.icon-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.col-icon {
|
|
width: 10px;
|
|
flex: 0 0 10px;
|
|
max-width: 10px;
|
|
}
|
|
|
|
.col-heading {
|
|
width: 100px; /* Beispiel: 100px für die Überschrift */
|
|
flex: 0 0 100px;
|
|
max-width: 100px;
|
|
|
|
white-space: nowrap; /* verhindert Zeilenumbruch */
|
|
|
|
}
|
|
|
|
|
|
.why-icon1 {
|
|
width: 10px; /* Breite des Icons */
|
|
height: auto; /* Höhe automatisch anpassen */
|
|
}
|
|
|
|
.heading-text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.why-block h4 {
|
|
margin: 0; /* Entfernt zusätzliche Ränder */
|
|
}
|
|
|
|
.section-title1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px; /* Abstand zwischen Icon und Titel */
|
|
}
|
|
|
|
.title-icon1 {
|
|
width: 30px; /* Breite des Icons */
|
|
height: auto; /* Höhe automatisch anpassen */
|
|
}
|
|
|
|
.why-title1 {
|
|
margin: 0; /* Entfernt zusätzliche Ränder */
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.col-md-4.text-center .why-logo {
|
|
margin-top: 100px !important; /* Erzwingt die Anwendung der Verschiebung */
|
|
}
|
|
|
|
|
|
/* Fügt einen Abstand unterhalb des "Why Amperion"-Abschnitts hinzu */
|
|
.why-amperion {
|
|
margin-bottom: 400px; /* Passen Sie den Wert nach Bedarf an */
|
|
}
|
|
|
|
/* Alternativ: Fügt einen Abstand oberhalb des "About"-Abschnitts hinzu */
|
|
.about {
|
|
margin-top: 800px; /* Passen Sie den Wert nach Bedarf an */
|
|
}
|
|
|
|
.col-fixed {
|
|
width: 10px;
|
|
flex: 0 0 10px;
|
|
max-width: 10px;
|
|
}
|
|
|