newPages
This commit is contained in:
parent
5b16d988f5
commit
890b83e168
@ -95,6 +95,24 @@ $innerShadow: inset 0 0 15px rgba(255, 255, 255, 0.5)
|
|||||||
transform: scale(1)
|
transform: scale(1)
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
|
@keyframes float
|
||||||
|
0%, 100%
|
||||||
|
transform: scale(1) translate(0, 0)
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 5px #f9f9f9
|
||||||
|
|
||||||
|
25%
|
||||||
|
transform: scale(1.025) translate(1px, -3px)
|
||||||
|
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 0 5px #f9f9f9
|
||||||
|
|
||||||
|
50%
|
||||||
|
transform: scale(1.035) translate(3px, -1px)
|
||||||
|
box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.7), 0 0 0 5px #f9f9f9
|
||||||
|
|
||||||
|
75%
|
||||||
|
transform: scale(1.025) translate(1px, 1px)
|
||||||
|
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 0 5px #f9f9f9
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body
|
body
|
||||||
overflow-x: hidden
|
overflow-x: hidden
|
||||||
|
|||||||
@ -156,6 +156,7 @@ onUnmounted(() => {
|
|||||||
z-index: 1
|
z-index: 1
|
||||||
height: auto
|
height: auto
|
||||||
max-height: 100%
|
max-height: 100%
|
||||||
|
max-width: 350px
|
||||||
object-fit: contain
|
object-fit: contain
|
||||||
|
|
||||||
.content, h1, h2, h3
|
.content, h1, h2, h3
|
||||||
|
|||||||
@ -145,7 +145,7 @@ const navigationLinks = [
|
|||||||
label: 'services',
|
label: 'services',
|
||||||
subNav: [
|
subNav: [
|
||||||
{ routeKey: 'services-cms', label: 'menuCms' },
|
{ routeKey: 'services-cms', label: 'menuCms' },
|
||||||
{ routeKey: 'services-seo', label: 'menuSEO' },
|
/* { routeKey: 'services-seo', label: 'menuSEO' }, */
|
||||||
{ routeKey: 'services-accessibility', label: 'menuAccessibility' },
|
{ routeKey: 'services-accessibility', label: 'menuAccessibility' },
|
||||||
{ routeKey: 'services-ai', label: 'menuAi' },
|
{ routeKey: 'services-ai', label: 'menuAi' },
|
||||||
]
|
]
|
||||||
@ -433,7 +433,7 @@ header
|
|||||||
top: 3rem
|
top: 3rem
|
||||||
right: 5%
|
right: 5%
|
||||||
background-color: rgba(white, .95)
|
background-color: rgba(white, .95)
|
||||||
padding: 2rem
|
padding: 2rem 2rem 1rem 2rem
|
||||||
text-align: left
|
text-align: left
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
border-bottom-left-radius: 1rem
|
border-bottom-left-radius: 1rem
|
||||||
@ -486,6 +486,13 @@ header
|
|||||||
font-size: 1rem
|
font-size: 1rem
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
margin: 0 .8rem
|
margin: 0 .8rem
|
||||||
|
&.desk
|
||||||
|
.sub-nav
|
||||||
|
top: 1.5rem
|
||||||
|
right: 2%
|
||||||
|
background-color: transparent
|
||||||
|
background-image: linear-gradient(to bottom, transparent 0%, white 15%)
|
||||||
|
|
||||||
.logoBox
|
.logoBox
|
||||||
align-items: left
|
align-items: left
|
||||||
svg
|
svg
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
<li>{{ $t('pages.services.explain.bullet4') }}</li>
|
<li>{{ $t('pages.services.explain.bullet4') }}</li>
|
||||||
<li>{{ $t('pages.services.explain.bullet5') }}</li>
|
<li>{{ $t('pages.services.explain.bullet5') }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button @click="navigateTo(localePath('accessibility'))">Informationen zu barrierefreien Webseiten</button>
|
<NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -8,10 +8,6 @@
|
|||||||
headline2: 'pages.services.accessibility.hero.headline2',
|
headline2: 'pages.services.accessibility.hero.headline2',
|
||||||
headline3: 'pages.services.accessibility.hero.headline3'
|
headline3: 'pages.services.accessibility.hero.headline3'
|
||||||
}"
|
}"
|
||||||
overlay-image="/uploads/DML_Access_Key_3ccf07fbb4.webp"
|
|
||||||
overlay-alt-text="barrierefreiheit symbol"
|
|
||||||
:overlay-width="'30%'"
|
|
||||||
:overlay-position="{ bottom: '5%', right: '1vw' }"
|
|
||||||
:dark-background="true"
|
:dark-background="true"
|
||||||
/>
|
/>
|
||||||
<section class="targetGroup">
|
<section class="targetGroup">
|
||||||
@ -115,10 +111,10 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
|
|||||||
margin: 8vh 0
|
margin: 8vh 0
|
||||||
.targetGroup
|
.targetGroup
|
||||||
img
|
img
|
||||||
float: left
|
float: right
|
||||||
width: 30%
|
width: 30%
|
||||||
max-width: 400px
|
max-width: 350px
|
||||||
margin: 1rem 2rem 2rem 0
|
margin: 1rem 0 2rem 2rem
|
||||||
.implementation
|
.implementation
|
||||||
margin: 8vh 0
|
margin: 8vh 0
|
||||||
padding: 1vh 0 3vh 0
|
padding: 1vh 0 3vh 0
|
||||||
|
|||||||
@ -145,6 +145,7 @@ definePageMeta({
|
|||||||
color: white
|
color: white
|
||||||
padding: 12vh 0
|
padding: 12vh 0
|
||||||
margin: 8vh 0
|
margin: 8vh 0
|
||||||
|
|
||||||
.whyAI
|
.whyAI
|
||||||
padding: 3% 0
|
padding: 3% 0
|
||||||
img
|
img
|
||||||
@ -170,4 +171,9 @@ definePageMeta({
|
|||||||
width: 60%
|
width: 60%
|
||||||
transform: translateX(10%)
|
transform: translateX(10%)
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
margin-top: 1rem
|
||||||
|
@media (max-width: $breakPointSM)
|
||||||
|
.text
|
||||||
|
p
|
||||||
|
width: 80vw
|
||||||
</style>
|
</style>
|
||||||
@ -10,23 +10,383 @@
|
|||||||
}"
|
}"
|
||||||
:dark-background="true"
|
:dark-background="true"
|
||||||
/>
|
/>
|
||||||
|
<section class="whatIs">
|
||||||
|
<div class="container-10">
|
||||||
|
<NuxtImg
|
||||||
|
src="/uploads/Headless_CMS_c1370c8823.webp"
|
||||||
|
provider="strapi"
|
||||||
|
alt="Traditional vs. Headless CMS"
|
||||||
|
/>
|
||||||
|
<h2>Was ist ein Headless Content-Management-System (CMS)?</h2>
|
||||||
|
<p>Ein Headless CMS ist ein modernes Content-Management-System, das Inhalte unabhängig vom Design verwaltet. Im Gegensatz zu klassischen Systemen wie WordPress oder Joomla ist es nicht an ein festes Frontend gebunden. Inhalte werden über eine API bereitgestellt – und können so überall ausgespielt werden: auf Webseiten, Apps, Smart TVs oder sogar Sprachassistenten.</p>
|
||||||
|
<!-- <h3>Vorteile eines Headless CMS gegenüber herkömmlichen, monolithischen Systemen wie WordPress & Co</h3>
|
||||||
|
<ul class="check">
|
||||||
|
<li><b>Maximale Flexibilität</b> Inhalte können frei gestaltet und an jede Plattform angepasst werden – ohne Design- oder Technologiebeschränkungen.</li>
|
||||||
|
<li><b>Höchste Performance</b> Schnelle Ladezeiten dank moderner Front-End-Technologien wie Nuxt3 und einer sauberen Trennung von Backend und Darstellung.</li>
|
||||||
|
<li><b>Multi-Channel-Fähigkeit</b> Veröffentliche Inhalte gleichzeitig auf Website, App oder anderen digitalen Kanälen – zentral verwaltet, überall verfügbar.</li>
|
||||||
|
<li><b>Mehr Sicherheit</b> Da das CMS keine direkte Verbindung zur öffentlichen Website hat, sinkt die Angriffsfläche deutlich.</li>
|
||||||
|
<li><b>Einfache Skalierbarkeit</b> Egal ob Start-up oder Konzern – Headless CMS wachsen problemlos mit deinen Anforderungen mit.</li>
|
||||||
|
<li><b>API-first Architektur</b> Inhalte werden per Schnittstelle ausgeliefert – das ermöglicht eine schnelle, strukturierte Integration in jede Umgebung.</li>
|
||||||
|
<li><b>Bessere SEO-Möglichkeiten</b> Durch sauberen Code, optimierte Meta-Tags und strukturierte Daten rankt deine Website besser bei Google & Co.</li>
|
||||||
|
</ul> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="compare">
|
||||||
|
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
|
||||||
|
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
||||||
|
</svg>
|
||||||
|
<div class="container-10">
|
||||||
|
<h2>Wie unterscheiden sich traditionelle von headless Content-Management-Systemen?</h2>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="compare-table">
|
||||||
|
<div class="compare-row header">
|
||||||
|
<div>Kriterium</div>
|
||||||
|
<div>Traditionelles CMS</div>
|
||||||
|
<div>Headless CMS</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="compare-row"
|
||||||
|
v-for="row in rows"
|
||||||
|
:key="row[0]"
|
||||||
|
>
|
||||||
|
<div>{{ row[0] }}</div>
|
||||||
|
<div>{{ row[1] }}</div>
|
||||||
|
<div>{{ row[2] }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
|
||||||
|
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
||||||
|
</svg>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="evolution">
|
||||||
|
<div class="container-10">
|
||||||
|
<h2>Die Evolution der Webentwicklung und deren Content-Management-Systeme</h2>
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeline-item" v-for="item in timeline" :key="item.period">
|
||||||
|
<div class="circle">
|
||||||
|
<div class="label">
|
||||||
|
<span class="period">{{ item.period }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-box">
|
||||||
|
<h3>{{ item.era }}</h3>
|
||||||
|
<p>{{ item.description }}</p>
|
||||||
|
<h4>Technologien</h4>
|
||||||
|
<div class="logos">
|
||||||
|
<NuxtImg v-for="logo in item.logos" :key="logo" :src="logo" alt="logo" provider="strapi"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="howWeDo">
|
||||||
|
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
|
||||||
|
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
||||||
|
</svg>
|
||||||
|
<div class="container-10">
|
||||||
|
<h2>Unsere Lösung für Ihre digitale Zukunft</h2>
|
||||||
|
<p>
|
||||||
|
Für unsere Headless-Projekte setzen wir konsequent auf moderne Technologien: <strong>Nuxt 3</strong> im Frontend und <strong>Strapi</strong> als leistungsfähiges Headless CMS im Backend.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Diese Kombination vereint maximale Flexibilität, schnelle Ladezeiten und eine zukunftssichere Architektur.
|
||||||
|
</p>
|
||||||
|
<p>Inhalte werden einmalig in Strapi gepflegt und lassen sich über eine API auf beliebige Kanäle ausspielen. Ganz egal ob Website, App oder Social Media.
|
||||||
|
</p>
|
||||||
|
<ul class="check">
|
||||||
|
<li><strong>Performance</strong> <br>Nuxt 3 liefert ultraschnelle Seiten mit Server-Rendering oder statischem Output.</li>
|
||||||
|
<li><strong>Freiheit im Design</strong> <br>Keine starren Templates. Das Frontend wird passgenau auf Marken und Nutzerführung abgestimmt.</li>
|
||||||
|
<li><strong>Zentrale Inhaltspflege</strong> <br>Inhalte werden medienneutral in Strapi gepflegt und über Schnittstellen überall verfügbar gemacht.</li>
|
||||||
|
<li><strong>Skalierbarkeit</strong> <br>Die Architektur ist modular erweiterbar, ideal für wachsende Projekte.</li>
|
||||||
|
<li><strong>Modern & wartungsarm</strong> <br>Keine veralteten Plugins oder Sicherheitslücken, sondern moderne APIs, klarer Code und automatisierte Updates.</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
So entsteht ein digitales Fundament, das nicht nur heute überzeugt, sondern auch morgen noch tragfähig ist.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
|
||||||
|
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
||||||
|
</svg>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<CallToActionBox
|
||||||
|
headline="Bereit für eine digitale Transformation?"
|
||||||
|
text="Wir bringen Ihre Webseite auf das nächste Level!"
|
||||||
|
button-text="Sprechen Sie mit uns!"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<MarqueeBanner
|
||||||
|
:items="projectItems"
|
||||||
|
:logo-height="200"
|
||||||
|
title="Aus der Praxis: Unsere Projekte mit Headless Architektur"
|
||||||
|
link="projekt"
|
||||||
|
aria-label="Headless CMS Projekte"
|
||||||
|
speed="15"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FAQArea
|
||||||
|
page-link="/leistungen/headless-cms"
|
||||||
|
headline="Fragen und Antworten zu Content-Management-Systemen"
|
||||||
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
alias: [
|
|
||||||
'/leistungen/headless-cms', // Deutsch
|
|
||||||
'/services/headless-cms', // Englisch
|
|
||||||
'/services/headless-cms', // Französisch
|
|
||||||
'/servizi/headless-cms', // Italienisch
|
|
||||||
'/servicios/headless-cms', // Spanisch
|
|
||||||
'/hizmetler/headless-cms' // Türkisch
|
|
||||||
],
|
|
||||||
name: 'services-cms'
|
name: 'services-cms'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
import { useMainStore } from '@/stores/main';
|
||||||
|
const mainStore = useMainStore();
|
||||||
|
const { projects } = storeToRefs(mainStore)
|
||||||
|
console.log(projects.value[2])
|
||||||
|
const projectItems = computed(() => {
|
||||||
|
return projects.value
|
||||||
|
.filter(project =>
|
||||||
|
project.customer &&
|
||||||
|
project.projectImages.length > 0 &&
|
||||||
|
Array.isArray(project.technologies) &&
|
||||||
|
project.technologies.some(tech => tech.titel === 'Strapi')
|
||||||
|
)
|
||||||
|
.map(project => ({
|
||||||
|
text: project.customer?.company || '',
|
||||||
|
image: {
|
||||||
|
url: project.projectImages[0]?.url || '',
|
||||||
|
alternativeText: project.projectImages[0]?.alternativeText || project.customer?.company || ''
|
||||||
|
},
|
||||||
|
link: '/projekt/' + (project.link || '')
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
['Struktur', 'Frontend & Backend untrennbar gekoppelt', 'Frontend und Backend sind strikt getrennt'],
|
||||||
|
['Flexibilität im Design', 'Stark vom CMS-Theme und Plugins abhängig', 'Vollständig frei – jedes Frontend möglich'],
|
||||||
|
['Performance', 'Oft langsam durch Plugins und Overhead', 'Höchste Geschwindigkeit dank API und modernem Frontend'],
|
||||||
|
['Sicherheit', 'Große Angriffsfläche durch Plugin-Ökosystem', 'Weniger Risiko durch entkoppeltes Backend'],
|
||||||
|
['Skalierbarkeit', 'Begrenzt durch Systemarchitektur', 'Hervorragend – wächst mit den Anforderungen'],
|
||||||
|
['Multi-Channel-Fähigkeit', 'Nur eine Website im Fokus', 'Website, App, Voice u. v. m. gleichzeitig bespielbar'],
|
||||||
|
['Content-Wartung', 'Im Kontext des Layouts', 'Zentral und unabhängig vom Design'],
|
||||||
|
['SEO-Optimierung', 'Teilweise limitiert durch Themes', 'Technisch ideal umsetzbar mit strukturierten Daten'],
|
||||||
|
['Entwicklungsfreiheit', 'CMS-zentriert, wenig flexibel', 'Freie Wahl moderner Frameworks wie Nuxt3'],
|
||||||
|
['Updates & Wartung', 'Viele Plugins & Themes einzeln pflegen', 'Zentrale Pflege des CMS – unabhängig vom Frontend']
|
||||||
|
]
|
||||||
|
|
||||||
|
const timeline = [
|
||||||
|
{
|
||||||
|
period: '1990 – 2000',
|
||||||
|
era: 'Statische Ära',
|
||||||
|
description: 'Webseiten wurden manuell in HTML geschrieben und per FTP auf Server geladen – ohne CMS, ohne Dynamik.',
|
||||||
|
logos: ['/uploads/Logo_HTML_d35e99cee0.webp']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
period: '2000 – 2010',
|
||||||
|
era: 'Dynamische Ära',
|
||||||
|
description: 'Klassische CMS wie WordPress, TYPO3 oder Joomla dominierten. PHP und MySQL bildeten das Fundament.',
|
||||||
|
logos: [
|
||||||
|
'/uploads/php_1_logo_png_transparent_89dd277d4b.webp',
|
||||||
|
'/uploads/mysql_PNG_3_8ffbd31d8f.webp',
|
||||||
|
'/uploads/Logo_Wordpress_91e875f393.webp',
|
||||||
|
'/uploads/Que_es_Typo3_36452b50a7.webp',
|
||||||
|
'/uploads/Joomla_Logo_wine_b02534a76a.webp',
|
||||||
|
'/uploads/contao_logo_orange_768ca4a997.webp'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
period: '2010 – 2016',
|
||||||
|
era: 'API-fähige / Hybrid-CMS-Ära',
|
||||||
|
description: 'Erste Headless-Ansätze mit API-zentrierten Systemen wie Drupal. Parallel gewannen Frontend-Frameworks wie React, AngularJS und VueJS an Bedeutung.',
|
||||||
|
logos: [
|
||||||
|
'/uploads/Drupal_logo_b3af071c6b.webp',
|
||||||
|
'/uploads/react_Logo_b22d0ba7b6.webp',
|
||||||
|
'/uploads/angular_js_logo_png_seeklogo_299138_a34cf0a3a6.webp',
|
||||||
|
'/uploads/vue_Logo_b6d76ec351.webp'
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
period: '2016 – 2022',
|
||||||
|
era: 'JAMstack / Headless-Ära',
|
||||||
|
description: 'Trennung von Content & Präsentation. Git, Markdown & APIs. Headless CMS + moderne Frontends wie Nuxt & Gatsby setzen sich durch.',
|
||||||
|
logos: [
|
||||||
|
'/uploads/nuxtjs_80e2fe3ec4.webp',
|
||||||
|
'/uploads/netlify_1e40347dd9.webp',
|
||||||
|
'/uploads/Strapi_vertical_logo_dark_6e414dd744.webp'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
period: '2022 – heute',
|
||||||
|
era: 'Edge & AI Ära',
|
||||||
|
description: 'Serverless, AI, globale Edge-Funktionen. Systeme werden intelligenter, performanter – und extrem nutzerzentriert.',
|
||||||
|
logos: [
|
||||||
|
'/uploads/vercel_Logo_601fec4c71.webp' ,
|
||||||
|
'/uploads/chat_GPT_0a7e882c07.webp',
|
||||||
|
'/uploads/Cloudflare_logo_ee9df880dd.webp',
|
||||||
|
'/uploads/nuxt3_logo_1ea432e01c.webp'
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
|
.cmsPage
|
||||||
|
.whatIs
|
||||||
|
margin: 4rem 0
|
||||||
|
img
|
||||||
|
float: right
|
||||||
|
width: 100%
|
||||||
|
max-width: 300px
|
||||||
|
margin: 1rem 0 2rem 2rem
|
||||||
|
.evolution
|
||||||
|
|
||||||
|
padding: 2rem 0
|
||||||
|
|
||||||
|
h2
|
||||||
|
margin-bottom: 3rem
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.timeline
|
||||||
|
position: relative
|
||||||
|
margin-left: 2rem
|
||||||
|
padding-left: 0
|
||||||
|
border-left: 10px solid $lightgrey
|
||||||
|
|
||||||
|
.timeline-item
|
||||||
|
display: flex
|
||||||
|
align-items: flex-start
|
||||||
|
margin-bottom: 4rem
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
margin-bottom: 0
|
||||||
|
|
||||||
|
.circle
|
||||||
|
position: absolute
|
||||||
|
left: -5.2rem
|
||||||
|
top: 0
|
||||||
|
width: 10rem
|
||||||
|
height: 7rem
|
||||||
|
background: #37857C
|
||||||
|
border-radius: $loopShape
|
||||||
|
border: 2px solid white
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
color: white
|
||||||
|
text-align: center
|
||||||
|
font-size: 0.8rem
|
||||||
|
font-family: 'Mainfont-Bold'
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
|
||||||
|
|
||||||
|
.label
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
|
||||||
|
.period
|
||||||
|
font-weight: bold
|
||||||
|
font-size: 1rem
|
||||||
|
font-family: monospace
|
||||||
|
|
||||||
|
.content-box
|
||||||
|
background: white
|
||||||
|
border-radius: 1rem
|
||||||
|
padding: 1.5rem 3rem 2rem 4rem
|
||||||
|
margin-left: 3rem
|
||||||
|
margin-top: 2rem
|
||||||
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2)
|
||||||
|
flex: 1
|
||||||
|
|
||||||
|
h3
|
||||||
|
text-transform: uppercase
|
||||||
|
color: #2B3E3F
|
||||||
|
font-family: 'Mainfont-Bold'
|
||||||
|
margin: 1rem 0
|
||||||
|
h4
|
||||||
|
color: #37857C
|
||||||
|
font-family: 'Mainfont-Bold'
|
||||||
|
text-transform: uppercase
|
||||||
|
font-size: 1rem
|
||||||
|
p
|
||||||
|
margin: 0 0 1rem 0
|
||||||
|
font-size: 1rem
|
||||||
|
|
||||||
|
.logos
|
||||||
|
display: flex
|
||||||
|
flex-wrap: wrap
|
||||||
|
gap: 1rem
|
||||||
|
|
||||||
|
img
|
||||||
|
height: 2rem
|
||||||
|
width: auto
|
||||||
|
filter: grayscale(1)
|
||||||
|
|
||||||
|
|
||||||
|
.compare
|
||||||
|
background-image: linear-gradient(to bottom right, #37857C, #2B3E3F)
|
||||||
|
padding: 8% 0
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.compare-table
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
width: 100%
|
||||||
|
border-collapse: collapse
|
||||||
|
padding: 0 5vw
|
||||||
|
|
||||||
|
.compare-row
|
||||||
|
display: grid
|
||||||
|
grid-template-columns: 1fr 1fr 1fr
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1)
|
||||||
|
|
||||||
|
div
|
||||||
|
padding: 1rem
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.1)
|
||||||
|
@media(max-width: $breakPointSM)
|
||||||
|
font-size: .8rem
|
||||||
|
hyphens: auto
|
||||||
|
|
||||||
|
div:last-child
|
||||||
|
border-right: none
|
||||||
|
|
||||||
|
div:nth-child(1)
|
||||||
|
background-image: linear-gradient(to right, #2B3E3F, #326863)
|
||||||
|
color: white
|
||||||
|
font-weight: 600
|
||||||
|
font-family: 'Mainfont-Bold'
|
||||||
|
|
||||||
|
|
||||||
|
.compare-row.header
|
||||||
|
background: rgba(255, 255, 255, 0.1)
|
||||||
|
|
||||||
|
div
|
||||||
|
font-weight: 700
|
||||||
|
font-family: 'Mainfont-Bold'
|
||||||
|
|
||||||
|
.howWeDo
|
||||||
|
background-image: linear-gradient(to bottom right, #37857C, #2B3E3F)
|
||||||
|
padding: 8% 0
|
||||||
|
color: white
|
||||||
|
|
||||||
|
@for $i from 1 through 10
|
||||||
|
$duration: 5s + ($i * 0.2s) // deutlich langsamer
|
||||||
|
$delay: random(800) + ms
|
||||||
|
|
||||||
|
.cmsPage .evolution .timeline .timeline-item:nth-child(#{$i}) .circle
|
||||||
|
background: darken(#37857C, ($i - 1) * 4%)
|
||||||
|
//animation: float #{$duration} ease-in-out infinite
|
||||||
|
//animation-delay: #{$delay}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user