Rebrand project from web4beginners to ikfreunde

This commit is contained in:
2026-03-06 14:05:59 +01:00
parent fd9ea482bf
commit a2bddefb47
65 changed files with 698 additions and 696 deletions

View File

@@ -1,4 +1,4 @@
# web4beginners WYSIWYG Multi-Route Deploy
# ikfreunde WYSIWYG Multi-Route Deploy
This project runs a local-content WYSIWYG editor behind Traefik and supports multiple route instances on one domain.
@@ -28,10 +28,10 @@ docker compose -f docker-compose.traefik-routes.yml up -d --build
```
What it does:
1. Creates route data folder: `/srv/web4beginners/webpage4/`
1. Creates route data folder: `/srv/ikfreunde/webpage4/`
2. Seeds files if missing:
- `/srv/web4beginners/webpage4/web4beginners.com.html`
- `/srv/web4beginners/webpage4/site-content.de.json`
- `/srv/ikfreunde/webpage4/ikfreunde.com.html`
- `/srv/ikfreunde/webpage4/site-content.de.json`
3. Injects `webpage4` service into `docker-compose.traefik-routes.yml`
Then redeploy:
@@ -78,7 +78,7 @@ Security note:
- `content/.editor-rate-limit.json`
## Optional env overrides
- `ROOT_BASE` (default: `/srv/web4beginners`)
- `ROOT_BASE` (default: `/srv/ikfreunde`)
- `COMPOSE_FILE` (default: `docker-compose.traefik-routes.yml`)
Example:

View File

@@ -1,21 +1,21 @@
{
"meta": {
"title": "Home | web4beginners.com",
"title": "Home | ikfreunde.com",
"description": "Daten. Websites. Skills. Anwendungen.",
"open_graph": {
"og:description": "Daten. Websites. Skills. Anwendungen.",
"og:image": "https://web4beginners.com/user/pages/_assets/Share_Img_DF.jpg",
"og:site_name": "Klar. Innovativ. Digital - web4beginners GmbH",
"og:title": "Klar. Innovativ. Digital - web4beginners GmbH",
"og:url": "https://web4beginners.com/"
"og:image": "https://ikfreunde.com/user/pages/_assets/Share_Img_DF.jpg",
"og:site_name": "Klar. Innovativ. Digital - ikfreunde GmbH",
"og:title": "Klar. Innovativ. Digital - ikfreunde GmbH",
"og:url": "https://ikfreunde.com/"
},
"twitter": {
"twitter:card": "summary_large_image",
"twitter:image": "https://web4beginners.com/user/pages/_assets/twitter_card.jpg",
"twitter:image:alt": "web4beginners"
"twitter:image": "https://ikfreunde.com/user/pages/_assets/twitter_card.jpg",
"twitter:image:alt": "ikfreunde"
},
"other": {
"title": "Klar. Innovativ. Digital - web4beginners GmbH"
"title": "Klar. Innovativ. Digital - ikfreunde GmbH"
}
},
"shared": {
@@ -30,10 +30,10 @@
"common_008": "Mehr erfahren",
"common_009": "Ablehnen",
"common_010": "Stimme zu",
"common_011": "web4beginners GmbH",
"common_011": "ikfreunde GmbH",
"common_012": "Schillerstraße 21",
"common_013": "22767 Hamburg",
"common_014": "info@web4beginners.com",
"common_014": "info@ikfreunde.com",
"common_015": "040 / 35 73 69 11"
},
"navigation": {
@@ -85,7 +85,7 @@
},
"images": {
"img_001": {
"src": "web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg",
"src": "ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg",
"alt": ""
}
}
@@ -127,51 +127,51 @@
},
"images": {
"img_001": {
"src": "web4beginners.com_files/ic_monitoring_1_brown.svg",
"src": "ikfreunde.com_files/ic_monitoring_1_brown.svg",
"alt": "Icon"
},
"img_002": {
"src": "web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg",
"src": "ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg",
"alt": ""
},
"img_003": {
"src": "web4beginners.com_files/ic_coins_brown.svg",
"src": "ikfreunde.com_files/ic_coins_brown.svg",
"alt": "Icon"
},
"img_004": {
"src": "web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg",
"src": "ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg",
"alt": ""
},
"img_005": {
"src": "web4beginners.com_files/ic_bildung_1_brown.svg",
"src": "ikfreunde.com_files/ic_bildung_1_brown.svg",
"alt": "Icon"
},
"img_006": {
"src": "web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg",
"src": "ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg",
"alt": ""
},
"img_007": {
"src": "web4beginners.com_files/ic_mobility_brown.svg",
"src": "ikfreunde.com_files/ic_mobility_brown.svg",
"alt": "Icon"
},
"img_008": {
"src": "web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg",
"src": "ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg",
"alt": ""
},
"img_009": {
"src": "web4beginners.com_files/ic_wasser_1_brown.svg",
"src": "ikfreunde.com_files/ic_wasser_1_brown.svg",
"alt": "Icon"
},
"img_010": {
"src": "web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg",
"src": "ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg",
"alt": ""
},
"img_011": {
"src": "web4beginners.com_files/ic_mic_brown.svg",
"src": "ikfreunde.com_files/ic_mic_brown.svg",
"alt": "Icon"
},
"img_012": {
"src": "web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg",
"src": "ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg",
"alt": ""
}
}
@@ -201,7 +201,7 @@
},
"images": {
"img_001": {
"src": "web4beginners.com_files/ic_fire.svg",
"src": "ikfreunde.com_files/ic_fire.svg",
"alt": "Icon"
}
}
@@ -217,7 +217,7 @@
},
"images": {
"img_001": {
"src": "web4beginners.com_files/ic_team_2_brown.svg",
"src": "ikfreunde.com_files/ic_team_2_brown.svg",
"alt": "Icon"
}
}
@@ -233,27 +233,27 @@
},
"images": {
"img_001": {
"src": "web4beginners.com_files/ic_pokal.svg",
"src": "ikfreunde.com_files/ic_pokal.svg",
"alt": "Icon"
},
"img_002": {
"src": "web4beginners.com_files/dpok@2.png",
"src": "ikfreunde.com_files/dpok@2.png",
"alt": ""
},
"img_003": {
"src": "web4beginners.com_files/grimmeonline@2.png",
"src": "ikfreunde.com_files/grimmeonline@2.png",
"alt": ""
},
"img_004": {
"src": "web4beginners.com_files/leadawards.png",
"src": "ikfreunde.com_files/leadawards.png",
"alt": ""
},
"img_005": {
"src": "web4beginners.com_files/dt_land@2.png",
"src": "ikfreunde.com_files/dt_land@2.png",
"alt": ""
},
"img_006": {
"src": "web4beginners.com_files/prixeuropa@2.png",
"src": "ikfreunde.com_files/prixeuropa@2.png",
"alt": ""
}
}
@@ -262,7 +262,7 @@
"texts": {
"h2_001": "Kunde",
"h2_002": "werden",
"a_001": "info@web4beginners.com",
"a_001": "info@ikfreunde.com",
"a_002": "040 / 35 73 69 11"
},
"images": []
@@ -277,55 +277,55 @@
},
"images": {
"img_001": {
"src": "web4beginners.com_files/ic_smiley.svg",
"src": "ikfreunde.com_files/ic_smiley.svg",
"alt": "Icon"
},
"img_002": {
"src": "web4beginners.com_files/tagesschau@2.png",
"src": "ikfreunde.com_files/tagesschau@2.png",
"alt": ""
},
"img_003": {
"src": "web4beginners.com_files/zdf@2x.png",
"src": "ikfreunde.com_files/zdf@2x.png",
"alt": ""
},
"img_004": {
"src": "web4beginners.com_files/ndr@2x.png",
"src": "ikfreunde.com_files/ndr@2x.png",
"alt": ""
},
"img_005": {
"src": "web4beginners.com_files/google@2x.png",
"src": "ikfreunde.com_files/google@2x.png",
"alt": ""
},
"img_006": {
"src": "web4beginners.com_files/stifterverband@2x.png",
"src": "ikfreunde.com_files/stifterverband@2x.png",
"alt": ""
},
"img_007": {
"src": "web4beginners.com_files/gdv@2x.png",
"src": "ikfreunde.com_files/gdv@2x.png",
"alt": ""
},
"img_008": {
"src": "web4beginners.com_files/telefonica@2x.png",
"src": "ikfreunde.com_files/telefonica@2x.png",
"alt": ""
},
"img_009": {
"src": "web4beginners.com_files/brandeins@2x.png",
"src": "ikfreunde.com_files/brandeins@2x.png",
"alt": ""
},
"img_010": {
"src": "web4beginners.com_files/shz@2x.png",
"src": "ikfreunde.com_files/shz@2x.png",
"alt": ""
},
"img_011": {
"src": "web4beginners.com_files/tide@2x.png",
"src": "ikfreunde.com_files/tide@2x.png",
"alt": ""
},
"img_012": {
"src": "web4beginners.com_files/detektorfm@2x.png",
"src": "ikfreunde.com_files/detektorfm@2x.png",
"alt": ""
},
"img_013": {
"src": "web4beginners.com_files/spon@2x.png",
"src": "ikfreunde.com_files/spon@2x.png",
"alt": ""
}
}

View File

@@ -1 +1 @@
web4beginners.com.html
ikfreunde.com.html

View File

@@ -1 +1 @@
web4beginners.com_files
ikfreunde.com_files

View File

@@ -3,10 +3,10 @@ services:
build:
context: .
dockerfile: Dockerfile
container_name: web4beginners-webpage1
container_name: ikfreunde-webpage1
volumes:
- /srv/web4beginners/webpage1/web4beginners.com.html:/app/web4beginners.com.html
- /srv/web4beginners/webpage1/site-content.de.json:/app/content/site-content.de.json
- /srv/ikfreunde/webpage1/ikfreunde.com.html:/app/ikfreunde.com.html
- /srv/ikfreunde/webpage1/site-content.de.json:/app/content/site-content.de.json
restart: unless-stopped
networks:
- proxy
@@ -26,10 +26,10 @@ services:
build:
context: .
dockerfile: Dockerfile
container_name: web4beginners-webpage2
container_name: ikfreunde-webpage2
volumes:
- /srv/web4beginners/webpage2/web4beginners.com.html:/app/web4beginners.com.html
- /srv/web4beginners/webpage2/site-content.de.json:/app/content/site-content.de.json
- /srv/ikfreunde/webpage2/ikfreunde.com.html:/app/ikfreunde.com.html
- /srv/ikfreunde/webpage2/site-content.de.json:/app/content/site-content.de.json
restart: unless-stopped
networks:
- proxy
@@ -49,10 +49,10 @@ services:
build:
context: .
dockerfile: Dockerfile
container_name: web4beginners-webpage3
container_name: ikfreunde-webpage3
volumes:
- /srv/web4beginners/webpage3/web4beginners.com.html:/app/web4beginners.com.html
- /srv/web4beginners/webpage3/site-content.de.json:/app/content/site-content.de.json
- /srv/ikfreunde/webpage3/ikfreunde.com.html:/app/ikfreunde.com.html
- /srv/ikfreunde/webpage3/site-content.de.json:/app/content/site-content.de.json
restart: unless-stopped
networks:
- proxy

View File

@@ -3,7 +3,7 @@ services:
build:
context: .
dockerfile: Dockerfile
container_name: web4beginners-editor
container_name: ikfreunde-editor
ports:
- "4173:4173"
volumes:

View File

@@ -14,7 +14,7 @@ Create a first-stage extraction workflow that converts the existing HTML snapsho
Content updates are currently tied to manual HTML edits. A JSON representation is needed so text and selected image properties can be adapted more easily and later edited through an interface.
## Proposed Solution
Build a deterministic DOM-to-JSON extraction flow for `web4beginners.com.html` that captures visible text, selected metadata, and image fields (`src`, `alt`).
Build a deterministic DOM-to-JSON extraction flow for `ikfreunde.com.html` that captures visible text, selected metadata, and image fields (`src`, `alt`).
The JSON structure should be DOM-first with section-based top-level subtopics, matching the brainstorm decisions and keeping context for editors. Duplicate text handling should follow the agreed hybrid policy: keep section-local duplicates; dedupe only clearly global/common items.
@@ -54,7 +54,7 @@ Edge cases to cover:
- Cookie/modal/footer content that may be conditionally visible
## Acceptance Criteria
- [x] A single extraction run generates one nested JSON file from `web4beginners.com.html`.
- [x] A single extraction run generates one nested JSON file from `ikfreunde.com.html`.
- [x] JSON includes visible page text grouped by section subtopics.
- [x] JSON includes `title`, `description`, Open Graph, and Twitter metadata values.
- [x] JSON includes `img src` and `img alt` values where present.
@@ -84,5 +84,5 @@ Mitigations:
## References & Research
- Brainstorm: `docs/brainstorms/2026-03-03-dom-json-wysiwyg-sync-brainstorm.md`
- Source snapshot: `web4beginners.com.html`
- Existing site bundle references: `web4beginners.com_files/*`
- Source snapshot: `ikfreunde.com.html`
- Existing site bundle references: `ikfreunde.com_files/*`

View File

@@ -16,7 +16,7 @@ This plan is limited to content editing and synchronization behavior. It explici
The repository now has extractable structured content (`content/site-content.de.json`) but no practical editing surface for creators. Editors need direct, low-friction page editing (double-click text, click image) while keeping HTML and JSON in sync.
## Proposed Solution
Add an in-page edit mode with inline `contenteditable` text editing and an image overlay editor for `src` and `alt`. Implement autosave (blur/enter) plus manual save/undo controls. Persist edits via a local helper service that writes both `web4beginners.com.html` and `content/site-content.de.json`.
Add an in-page edit mode with inline `contenteditable` text editing and an image overlay editor for `src` and `alt`. Implement autosave (blur/enter) plus manual save/undo controls. Persist edits via a local helper service that writes both `ikfreunde.com.html` and `content/site-content.de.json`.
Synchronization is bidirectional in model intent, with conflict default set to HTML wins when the same mapped key diverges.
@@ -68,7 +68,7 @@ Conflict flow:
- [x] Text autosaves on blur/enter and also supports explicit save/undo controls.
- [x] Clicking editable images opens an overlay with `src` and `alt` fields.
- [x] Image ratio check warns (non-blocking) when replacement differs by >15% aspect ratio.
- [x] Save operation persists both `web4beginners.com.html` and `content/site-content.de.json`.
- [x] Save operation persists both `ikfreunde.com.html` and `content/site-content.de.json`.
- [x] Sync mapping updates the correct JSON key for edited text/image values.
- [x] Conflict resolution follows HTML-wins default.
- [x] No CSS/layout properties are modified by editor actions.
@@ -100,4 +100,4 @@ Mitigations:
- Brainstorm input: `docs/brainstorms/2026-03-04-wysiwyg-inline-editor-sync-brainstorm.md`
- Prior extraction plan: `docs/plans/2026-03-04-feat-dom-to-json-content-extraction-plan.md`
- Extractor/source contract: `scripts/extract_dom_content.php`, `content/site-content.de.json`
- Target HTML: `web4beginners.com.html`
- Target HTML: `ikfreunde.com.html`

View File

@@ -18,7 +18,7 @@
ownerEmail: "",
};
const apiBase = computeApiBasePath();
const TOKEN_STORAGE_KEY = "web4beginners_editor_token";
const TOKEN_STORAGE_KEY = "ikfreunde_editor_token";
const SECTION_ROOTS = {
hero: "main section.module-hero-teaser",

614
ikfreunde.com.html Normal file
View File

@@ -0,0 +1,614 @@
<!DOCTYPE html>
<html><head lang="de">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | ikfreunde.com</title>
<meta name="generator" content="GravCMS">
<meta name="title" content="Klar. Innovativ. Digital - ikfreunde GmbH">
<meta name="description" content="Daten. Websites. Skills. Anwendungen.">
<meta property="og:image" content="https://ikfreunde.com/user/pages/_assets/Share_Img_DF.jpg">
<meta property="og:site_name" content="Klar. Innovativ. Digital - ikfreunde GmbH">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="ikfreunde">
<meta name="twitter:image" content="https://ikfreunde.com/user/pages/_assets/twitter_card.jpg">
<meta name="og:url" content="https://ikfreunde.com/">
<meta name="og:title" content="Klar. Innovativ. Digital - ikfreunde GmbH">
<meta name="og:description" content="Daten. Websites. Skills. Anwendungen.">
<link rel="apple-touch-icon" sizes="180x180" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/android-chrome-512x512.png">
<link rel="mask-icon" href="https://ikfreunde.com/user/themes/ikfreunde/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link href="ikfreunde.com_files/ee792949df0da81967291f5675ce6b3b.css" type="text/css" rel="stylesheet">
<link href="editor/wysiwyg-editor.css" type="text/css" rel="stylesheet">
<script src="ikfreunde.com_files/f73f70e70b0ac5f1d474abd842fb4b24.js"></script>
<script data-name="google_analytics" async="" src="ikfreunde.com_files/google-analytics_analytics.js"></script></head>
<body data-ua="G-79HSR2GSX9" class="search_plugin_added">
<div class="spacer"></div>
<div class="main-stage">
<header class="page-head" style="top: 0rem;">
<div class="page-head__inner">
<nav class="prm-nav page-head__navigation" role="navigation">
<input type="checkbox" class="prm-nav__mobile-toggle" id="prm-nav__mobile-toggle-checkbox">
<label for="prm-nav__mobile-toggle-checkbox" class="prm-nav__mobile-toggle-icon">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
</label>
<div class="prn-nav__content">
<ul class="prm-nav__list">
<li class=""><a href="#_projects">Projekte</a></li>
<li class=""><a href="#_services-teaser">Awesome</a></li>
<li class="prm-nav__break">
</li><li class=""><a href="#_team-teaser">Team</a></li>
<li class=""><a href="#_contact-teaser">Robbi</a></li>
</ul>
<ul class="prm-nav__meta">
<li class="font-link-text-small"><a href="https://ikfreunde.com/impressum">Impressum</a></li>
<li class="font-link-text-small"><a href="https://ikfreunde.com/datenschutz">Datenschutz</a></li>
</ul>
</div>
</nav>
<a href="https://ikfreunde.com/" title="" class="page-head__logo">
<picture>
<source srcset="ikfreunde.com_files/logo-df.svg 1x" media="(max-width: 992px)">
<source srcset="" media="(min-width: 993px)">
<img class="page-head__logo-image" loading="lazy" src="https://mindboost.app/images/logo.svg" alt="mindboost Logo">
</source></source></picture>
</a>
</div>
</header>
<div class="page-head__spacer" style="height: 181px;"></div>
<main id="main" role="main" class="cf">
<section class="module-hero-teaser brush-bottom-white">
<div class="module-hero-teaser__content">
<h1 class="font-headline-1 module-hero-teaser__headline animation brush-overlay-hero animate">Klar.<br>Crazy.<br>Fiktiv.</h1>
<div class="font-intro module-hero-teaser__intro animation animate">Musik. Websites. Skills. Anwendungen.</div>
</div>
<div class="module-hero-teaser__background animation animate">
<picture>
<source srcset="ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, ikfreunde.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, ikfreunde.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(min-width: 993px)">
<img class="module-hero-teaser__background-image" loading="lazy" src="ikfreunde.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg" alt="">
</source></source></picture>
</div>
</section>
<section class="page-header">
<div class="page-header__copytext font-copy">Die richtige Form der Kommunikation - individuell, innovativ und auf Augenhöhe. <br>
Wir beraten, planen und gestalten. Und wir setzen Ideen um - alles aus einer Hand.</div>
</section>
<a class="jump-to-anchor" name="_projects"></a>
<section class="module-projects-teaser">
<section class="module-project-teaser animation animate">
<div class="module-project-teaser__content module-project-teaser__align-left">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Festivals</h2>
<p class="font-copy animation animate">Entwicklungen in der Bildungslandschaft kontinuierlich im Blick behalten mit Hilfe von Bildungsmonitoring.</p>
<img loading="lazy" src="ikfreunde.com_files/ic_monitoring_1_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://ikfreunde.com/projects/bildungsmonitoring" title="" class="btn btn-standard module-project-teaser__button" target="">Dream</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white animate">
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/bildungsmonitoring">
<picture>
<source srcset="ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, ikfreunde.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, ikfreunde.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation animate">
<div class="module-project-teaser__content module-project-teaser__align-right">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser animate">Cofinpro AG</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Banken-Check</h2>
<p class="font-copy animation animate">So gesund sind Deutschlands Finanzinstitute. Bankenanalyse-Tool mit mehr als 1.400 Finanzinstituten.</p>
<img loading="lazy" src="ikfreunde.com_files/ic_coins_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://ikfreunde.com/projects/banken-check" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white animate">
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/banken-check">
<picture>
<source srcset="ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, ikfreunde.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, ikfreunde.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation animate">
<div class="module-project-teaser__content module-project-teaser__align-left">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Bildungs-bericht</h2>
<p class="font-copy animation">Die Bildungslandschaft 2020 im Ruhrgebiet sichtbar und wissenschaftliche Erkenntnisse erfassbar machen.</p>
<img loading="lazy" src="ikfreunde.com_files/ic_bildung_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://ikfreunde.com/projects/bildungsbericht" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/bildungsbericht">
<picture>
<source srcset="ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, ikfreunde.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, ikfreunde.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation">
<div class="module-project-teaser__content module-project-teaser__align-right">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser">Telefónica Deutschland</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Mobilität verstehen</h2>
<p class="font-copy animation">„So bewegt sich Deutschland“ - eine Karte zeigt Bewegungsmuster in ganz Deutschland anhand anonymisierter Mobilfunk-Daten.</p>
<img loading="lazy" src="ikfreunde.com_files/ic_mobility_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://ikfreunde.com/projects/telefonica" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/telefonica">
<picture>
<source srcset="ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, ikfreunde.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, ikfreunde.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation">
<div class="module-project-teaser__content module-project-teaser__align-left">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser">Forschungszentrum Jülich</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Wasser-monitor</h2>
<p class="font-copy animation">Das Ziel besteht darin, die Prognosen für den Wasserhaushalt im Boden zu visualisieren.</p>
<img loading="lazy" src="ikfreunde.com_files/ic_wasser_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://ikfreunde.com/projects/wassermonitor" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/wassermonitor">
<picture>
<source srcset="ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, ikfreunde.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, ikfreunde.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation">
<div class="module-project-teaser__content module-project-teaser__align-right">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser">Tide</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Webseite Relaunch</h2>
<p class="font-copy animation">TIDE ist Hamburgs Communitysender. Zeitgemäße Überarbeitung der Website mit besonderem Fokus auf mobiler Nutzbarkeit.</p>
<img loading="lazy" src="ikfreunde.com_files/ic_mic_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://ikfreunde.com/projects/tide" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://ikfreunde.com/projects/tide">
<picture>
<source srcset="ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, ikfreunde.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(max-width: 992px)">
<source srcset="ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, ikfreunde.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="ikfreunde.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<div class="module-projects-teaser__button_more_container animation">
<a href="https://ikfreunde.com/projects" title="" class="font-link-text module-projects-teaser__button_more">Mehr Projekte</a>
</div>
</section>
<a class="jump-to-anchor" name="_services-teaser"></a>
<section class="large-teaser-base bg-brown brush-top-white brush-bottom-white animation">
<div class="large-teaser-base__head">
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Wir tun<br>
es mit<br>
Leiden<br>
schaft</h2>
<img loading="lazy" class="large-teaser-base__icon" src="ikfreunde.com_files/ic_fire.svg" alt="Icon">
</div>
<div class="large-teaser-base__content services-teaser__content">
<div class="services-teaser__content-block">
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Konzept &amp; Beratung</h3>
<ul class="services-teaser__content-list">
<li>Konzeption</li>
<li>Innovationsberatung</li>
<li>Workshops</li>
<li>Digitale Strategien</li>
<li>Voice UX</li>
</ul>
</div>
<div class="services-teaser__content-block">
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Design</h3>
<ul class="services-teaser__content-list">
<li>UI/UX Design</li>
<li>Visualisierungen</li>
<li>Interaktionsdesign</li>
</ul>
</div>
<div class="services-teaser__content-block">
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Lösungen</h3>
<ul class="services-teaser__content-list">
<li>Websites</li>
<li>Sprachanwendungen</li>
<li>Prototypen</li>
<li>Datenanalysen</li>
<li>Web-Anwendungen</li>
</ul>
</div>
</div>
</section>
<a class="jump-to-anchor" name="_team-teaser"></a>
<section class="text-image animation">
<h2 class="text-image__headline font-headline-1">Der Mensch<br>dahinter ist toll</h2>
<div class="html-content text-image__copy animation"><p>Unaufgeregt. Innovativ. Unkompliziert. Offen. Partnerschaftlich. Zuhörend.<br>
Auf das Wesentliche konzentriert. Die Details im Blick. </p>
<p>Wir bauen Brücken zwischen Nutzern und Inhalten, Menschen und Maschinen, Unternehmen und Technologie.</p></div>
<img loading="lazy" class="text-image___icon" src="ikfreunde.com_files/ic_team_2_brown.svg" alt="Icon">
<picture>
<source srcset="" media="(max-width: 992px)">
<source srcset="" media="(min-width: 993px)">
<img class="text-image__image animation" loading="lazy" src="" alt="">
</source></source></picture>
<div class="text-image__button-container">
<a href="https://ikfreunde.com/team" title="" class="btn btn-standard text-image__button" target="">Das Team kennenlernen
</a>
</div>
</section>
<section class="large-teaser-base bg-blue brush-top-white brush-bottom-white animation">
<div class="large-teaser-base__head">
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Darauf<br>
sind wir<br>
besonders<br>
stolz</h2>
<img loading="lazy" class="large-teaser-base__icon" src="ikfreunde.com_files/ic_pokal.svg" alt="Icon">
</div>
<div class="large-teaser-base__content awards-teaser__content">
<p class="font-copy">Wir durften in den letzten
Jahren für unsere Arbeit viele Preise entgegennehmen. Jeder ehrt uns und
bedeutet uns sehr viel. Einige auf die wir besonders stolz sind:</p>
<div class="awards-teaser__content-list">
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="ikfreunde.com_files/dpok@2.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="ikfreunde.com_files/grimmeonline@2.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="ikfreunde.com_files/leadawards.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="ikfreunde.com_files/dt_land@2.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="ikfreunde.com_files/prixeuropa@2.png">
</div>
<p class="awards-teaser__content-entry awards-teaser__content-text font-copy-bold">und viele mehr</p>
</div>
</div>
</section>
<a class="jump-to-anchor" name="_contact-teaser"></a> <section class="contact-teaser animation">
<h2 class="contact-teaser__headline animation font-headline-1">Kunde<br>
werden</h2>
<div class="contact-teaser__content animation">
<a href="mailto:info@ikfreunde.com" title="" class="font-link-text contact-teaser__link contact-teaser__email">info@ikfreunde.com</a>
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="font-link-text contact-teaser__link contact-teaser__phone">040 / 35 73 69 11</a>
</div>
</section>
<section class="large-teaser-base bg-yellow brush-top-white brush-bottom-white animation">
<div class="large-teaser-base__head">
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Mitein<wbr>ander<br>
erfolg<wbr>reich</wbr></wbr></h2>
<img loading="lazy" class="large-teaser-base__icon" src="ikfreunde.com_files/ic_smiley.svg" alt="Icon">
</div>
<div class="large-teaser-base__content clients-teaser__content">
<div class="clients-teaser__content-list">
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/tagesschau@2.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/zdf@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/ndr@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/google@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/stifterverband@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/gdv@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/telefonica@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/brandeins@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/shz@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/tide@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/detektorfm@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="ikfreunde.com_files/spon@2x.png">
</div>
<p class="clients-teaser__content-entry clients-teaser__content-text font-copy-bold">und viele andere</p>
</div>
</div>
</section>
<section class="text-image animation">
<h2 class="text-image__headline font-headline-1">Kooperationen &amp; Partner</h2>
<div class="html-content text-image__copy animation"><p>Unsere
Arbeit lebt von Kooperationen und dem Austausch mit anderen
Unternehmen, die in verwandten Themenbereichen ihrer Schwerpunkte haben.</p></div>
<picture>
<source srcset="" media="(max-width: 992px)">
<source srcset="" media="(min-width: 993px)">
<img class="text-image__image animation" loading="lazy" src="" alt="">
</source></source></picture>
<div class="text-image__button-container">
<a href="https://ikfreunde.com/kooperationspartner" title="" class="btn btn-standard text-image__button" target="">Zu den Partnern
</a>
</div>
</section>
<a href="#top" title="Zum Anfang der Seite springen" class="btn btn-scroll-up"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg class="icon btn-scroll-up__icon" height="13" viewbox="0 0 20 13" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m2.3583594 13 7.6416406-8.0384421 7.641641 8.0384421 2.358359-2.480738-10-10.519262-10 10.519262z"></path></svg>
</a>
</main>
<div id="cookie-layer" class="">
<div class="cookie-layer__content font-copy">
Wir nutzen Cookies auf unserer Website. Einige von ihnen
sind essenziell, während andere uns helfen, diese Website und Ihre
Erfahrung zu verbessern.
<a class="cookie-layer__link cookie-layer__privacy font-link-text-cookie-layer" href="https://ikfreunde.com/datenschutz" title="Mehr erfahren">Mehr erfahren</a>
</div>
<div class="cookie-layer__buttons">
<a class="font-link-text-cookie-layer cookie-layer__link cookie-layer__decline" href="#" title="Ablehnen">Ablehnen</a>
<a href="#" title="" class="btn btn-standard cookie-layer__accept" target="">Stimme zu
</a>
</div>
</div>
<footer class="site-footer bg-brown brush-top-white">
<div class="site-footer__block-company ">
<h3 class="site-footer__headline font-headline-footer">ikfreunde GmbH</h3>
<p class="site-footer__address font-copy">Schillerstraße 21<br>
22767 Hamburg</p>
</div>
<div class="site-footer__block-contact">
<h3 class="site-footer__headline headline-border font-headline-footer">Robbi</h3>
<a href="mailto:info@ikfreunde.com" title="" class="site-footer__link font-link-text-footer">info@ikfreunde.com</a>
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="site-footer__link font-link-text-footer">040 / 35 73 69 11</a>
</div>
<div class="site-footer__block-products">
<div class="site-footer__meta-links">
<a href="https://ikfreunde.com/impressum" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Impressum</a>
<a href="https://ikfreunde.com/datenschutz" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Datenschutz</a>
</div>
</div>
</footer>
</div>
<div class="spacer"></div>
<script src="ikfreunde.com_files/1698d822c6d3fe9b0c50b3ab44ef524a.js"></script>
<script src="editor/wysiwyg-editor.js"></script>
</body></html>

View File

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

View File

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

View File

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@@ -1 +1 @@
web4beginners.com.html
ikfreunde.com.html

View File

@@ -16,7 +16,7 @@ if [[ ! "$NAME" =~ ^[a-zA-Z0-9][a-zA-Z0-9_-]*$ ]]; then
exit 1
fi
ROOT_BASE="${ROOT_BASE:-/srv/web4beginners}"
ROOT_BASE="${ROOT_BASE:-/srv/ikfreunde}"
COMPOSE_FILE="${COMPOSE_FILE:-docker-compose.traefik-routes.yml}"
ROOT="${ROOT_BASE}/${NAME}"
@@ -27,9 +27,9 @@ fi
mkdir -p "$ROOT"
if [[ ! -f "$ROOT/web4beginners.com.html" ]]; then
cp web4beginners.com.html "$ROOT/web4beginners.com.html"
echo "Created: $ROOT/web4beginners.com.html"
if [[ ! -f "$ROOT/ikfreunde.com.html" ]]; then
cp ikfreunde.com.html "$ROOT/ikfreunde.com.html"
echo "Created: $ROOT/ikfreunde.com.html"
fi
if [[ ! -f "$ROOT/site-content.de.json" ]]; then
@@ -49,9 +49,9 @@ else
build:
context: .
dockerfile: Dockerfile
container_name: web4beginners-${NAME}
container_name: ikfreunde-${NAME}
volumes:
- ${ROOT}/web4beginners.com.html:/app/web4beginners.com.html
- ${ROOT}/ikfreunde.com.html:/app/ikfreunde.com.html
- ${ROOT}/site-content.de.json:/app/content/site-content.de.json
restart: unless-stopped
networks:

View File

@@ -2,7 +2,7 @@
declare(strict_types=1);
const PROJECT_ROOT = __DIR__ . '/..';
const HTML_PATH = PROJECT_ROOT . '/web4beginners.com.html';
const HTML_PATH = PROJECT_ROOT . '/ikfreunde.com.html';
const JSON_PATH = PROJECT_ROOT . '/content/site-content.de.json';
const CREDENTIALS_PATH = PROJECT_ROOT . '/content/.editor-credentials.json';
const RESET_PATH = PROJECT_ROOT . '/content/.editor-reset.json';

View File

@@ -1,7 +1,7 @@
#!/usr/bin/env bash
set -euo pipefail
INPUT_HTML="${1:-web4beginners.com.html}"
INPUT_HTML="${1:-ikfreunde.com.html}"
OUTPUT_JSON="${2:-content/site-content.de.json}"
mkdir -p "$(dirname "$OUTPUT_JSON")"

View File

@@ -6,5 +6,5 @@ cd "$ROOT_DIR"
PORT="${1:-4173}"
ln -sf web4beginners.com.html index.html
ln -sf ikfreunde.com.html index.html
php -d opcache.enable_cli=0 -S 127.0.0.1:"$PORT" scripts/editor_server.php

View File

@@ -16,7 +16,7 @@ fi
rm -f "$PID_FILE"
ln -sf web4beginners.com.html index.html
ln -sf ikfreunde.com.html index.html
nohup python3 -m http.server "$PORT" --bind 127.0.0.1 >"$LOG_FILE" 2>&1 &
SERVER_PID=$!
echo "$SERVER_PID" > "$PID_FILE"

View File

@@ -1,614 +0,0 @@
<!DOCTYPE html>
<html><head lang="de">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | web4beginners.com</title>
<meta name="generator" content="GravCMS">
<meta name="title" content="Klar. Innovativ. Digital - web4beginners GmbH">
<meta name="description" content="Daten. Websites. Skills. Anwendungen.">
<meta property="og:image" content="https://web4beginners.com/user/pages/_assets/Share_Img_DF.jpg">
<meta property="og:site_name" content="Klar. Innovativ. Digital - web4beginners GmbH">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="web4beginners">
<meta name="twitter:image" content="https://web4beginners.com/user/pages/_assets/twitter_card.jpg">
<meta name="og:url" content="https://web4beginners.com/">
<meta name="og:title" content="Klar. Innovativ. Digital - web4beginners GmbH">
<meta name="og:description" content="Daten. Websites. Skills. Anwendungen.">
<link rel="apple-touch-icon" sizes="180x180" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/android-chrome-512x512.png">
<link rel="mask-icon" href="https://web4beginners.com/user/themes/web4beginners/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link href="web4beginners.com_files/ee792949df0da81967291f5675ce6b3b.css" type="text/css" rel="stylesheet">
<link href="editor/wysiwyg-editor.css" type="text/css" rel="stylesheet">
<script src="web4beginners.com_files/f73f70e70b0ac5f1d474abd842fb4b24.js"></script>
<script data-name="google_analytics" async="" src="web4beginners.com_files/google-analytics_analytics.js"></script></head>
<body data-ua="G-79HSR2GSX9" class="search_plugin_added">
<div class="spacer"></div>
<div class="main-stage">
<header class="page-head" style="top: 0rem;">
<div class="page-head__inner">
<nav class="prm-nav page-head__navigation" role="navigation">
<input type="checkbox" class="prm-nav__mobile-toggle" id="prm-nav__mobile-toggle-checkbox">
<label for="prm-nav__mobile-toggle-checkbox" class="prm-nav__mobile-toggle-icon">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
</label>
<div class="prn-nav__content">
<ul class="prm-nav__list">
<li class=""><a href="#_projects">Projekte</a></li>
<li class=""><a href="#_services-teaser">Awesome</a></li>
<li class="prm-nav__break">
</li><li class=""><a href="#_team-teaser">Team</a></li>
<li class=""><a href="#_contact-teaser">Robbi</a></li>
</ul>
<ul class="prm-nav__meta">
<li class="font-link-text-small"><a href="https://web4beginners.com/impressum">Impressum</a></li>
<li class="font-link-text-small"><a href="https://web4beginners.com/datenschutz">Datenschutz</a></li>
</ul>
</div>
</nav>
<a href="https://web4beginners.com/" title="" class="page-head__logo">
<picture>
<source srcset="web4beginners.com_files/logo-df.svg 1x" media="(max-width: 992px)">
<source srcset="" media="(min-width: 993px)">
<img class="page-head__logo-image" loading="lazy" src="https://mindboost.app/images/logo.svg" alt="mindboost Logo">
</source></source></picture>
</a>
</div>
</header>
<div class="page-head__spacer" style="height: 181px;"></div>
<main id="main" role="main" class="cf">
<section class="module-hero-teaser brush-bottom-white">
<div class="module-hero-teaser__content">
<h1 class="font-headline-1 module-hero-teaser__headline animation brush-overlay-hero animate">Klar.<br>Crazy.<br>Fiktiv.</h1>
<div class="font-intro module-hero-teaser__intro animation animate">Musik. Websites. Skills. Anwendungen.</div>
</div>
<div class="module-hero-teaser__background animation animate">
<picture>
<source srcset="web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, web4beginners.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg 1x, web4beginners.com_files/524569d400cf68ef1cf160c58a8b501a139a8a81-heroimage1200x62532.jpg 2x" media="(min-width: 993px)">
<img class="module-hero-teaser__background-image" loading="lazy" src="web4beginners.com_files/0ffcdedcfc816182f817ac2520731c5868840c6e-heroimage1200x6253.jpg" alt="">
</source></source></picture>
</div>
</section>
<section class="page-header">
<div class="page-header__copytext font-copy">Die richtige Form der Kommunikation - individuell, innovativ und auf Augenhöhe. <br>
Wir beraten, planen und gestalten. Und wir setzen Ideen um - alles aus einer Hand.</div>
</section>
<a class="jump-to-anchor" name="_projects"></a>
<section class="module-projects-teaser">
<section class="module-project-teaser animation animate">
<div class="module-project-teaser__content module-project-teaser__align-left">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Festivals</h2>
<p class="font-copy animation animate">Entwicklungen in der Bildungslandschaft kontinuierlich im Blick behalten mit Hilfe von Bildungsmonitoring.</p>
<img loading="lazy" src="web4beginners.com_files/ic_monitoring_1_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://web4beginners.com/projects/bildungsmonitoring" title="" class="btn btn-standard module-project-teaser__button" target="">Dream</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white animate">
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/bildungsmonitoring">
<picture>
<source srcset="web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, web4beginners.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg 1x, web4beginners.com_files/e679b01b355748edfb67d2d16f52570f63266e6c-kobimoprojekteimage.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/c54c8a64fe535bf7249d676fc7cb69cd6f27c3d7-kobimoprojekteimage.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation animate">
<div class="module-project-teaser__content module-project-teaser__align-right">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser animate">Cofinpro AG</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Banken-Check</h2>
<p class="font-copy animation animate">So gesund sind Deutschlands Finanzinstitute. Bankenanalyse-Tool mit mehr als 1.400 Finanzinstituten.</p>
<img loading="lazy" src="web4beginners.com_files/ic_coins_brown.svg" class="svg-icon module-project-teaser__icon animation animate" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://web4beginners.com/projects/banken-check" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white animate">
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/banken-check">
<picture>
<source srcset="web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, web4beginners.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg 1x, web4beginners.com_files/b1b5ffb75041c644f7fe52034c6e71e0ddabc103-projektteasercofinp.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/026d3a0dcea46e3c6ea8418280abc143a883560f-projektteasercofinp.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation animate">
<div class="module-project-teaser__content module-project-teaser__align-left">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser animate">RuhrFutur gGmbH</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1 animate">Bildungs-bericht</h2>
<p class="font-copy animation">Die Bildungslandschaft 2020 im Ruhrgebiet sichtbar und wissenschaftliche Erkenntnisse erfassbar machen.</p>
<img loading="lazy" src="web4beginners.com_files/ic_bildung_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://web4beginners.com/projects/bildungsbericht" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/bildungsbericht">
<picture>
<source srcset="web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, web4beginners.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg 1x, web4beginners.com_files/3915f694fef49b9b513d693e0e6a5b1c347aa7c0-ruhrfuturprojteaser.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/3b61b2909589fd44ec1af7c47f8a89c1515aebc1-ruhrfuturprojteaser.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation">
<div class="module-project-teaser__content module-project-teaser__align-right">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser">Telefónica Deutschland</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Mobilität verstehen</h2>
<p class="font-copy animation">„So bewegt sich Deutschland“ - eine Karte zeigt Bewegungsmuster in ganz Deutschland anhand anonymisierter Mobilfunk-Daten.</p>
<img loading="lazy" src="web4beginners.com_files/ic_mobility_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://web4beginners.com/projects/telefonica" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/telefonica">
<picture>
<source srcset="web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, web4beginners.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg 1x, web4beginners.com_files/307019ce368b35d809ed78f56dc025ce04c0cc07-telefonicateaser2x.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/07eb52c038c4c75165c7ec1a757d022015dd12f1-telefonicateaser.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation">
<div class="module-project-teaser__content module-project-teaser__align-left">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser">Forschungszentrum Jülich</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Wasser-monitor</h2>
<p class="font-copy animation">Das Ziel besteht darin, die Prognosen für den Wasserhaushalt im Boden zu visualisieren.</p>
<img loading="lazy" src="web4beginners.com_files/ic_wasser_1_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://web4beginners.com/projects/wassermonitor" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-right brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/wassermonitor">
<picture>
<source srcset="web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, web4beginners.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg 1x, web4beginners.com_files/20dc495acdb78d71a5e6cf98a8556e5bef366e8c-wassermonitorteaser.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/15542365f25229683d4a118ad7e05d35f620d42a-wassermonitorteaser.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<section class="module-project-teaser animation">
<div class="module-project-teaser__content module-project-teaser__align-right">
<div class="module-project-teaser__content-inner ">
<span class="animation font-topline-teaser">Tide</span>
<h2 class="module-project-teaser__headline animation brush-overlay-headline font-headline-1">Webseite Relaunch</h2>
<p class="font-copy animation">TIDE ist Hamburgs Communitysender. Zeitgemäße Überarbeitung der Website mit besonderem Fokus auf mobiler Nutzbarkeit.</p>
<img loading="lazy" src="web4beginners.com_files/ic_mic_brown.svg" class="svg-icon module-project-teaser__icon animation" alt="Icon">
<div class="module-project-teaser__button-container">
<a href="https://web4beginners.com/projects/tide" title="" class="btn btn-standard module-project-teaser__button" target="">Ansehen
</a>
</div>
</div>
</div>
<div class="animation module-project-teaser__image-container module-project-teaser__align-left brush-bottom-white">
<a class="module-project-teaser__image-link" href="https://web4beginners.com/projects/tide">
<picture>
<source srcset="web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, web4beginners.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(max-width: 992px)">
<source srcset="web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg 1x, web4beginners.com_files/6b404ebe8b24e5c0d6b7c65482dcbe896ed51ab7-tideprojektteaser85.jpg 2x" media="(min-width: 993px)">
<img class="module-project-teaser__image grayscale-on-hover" loading="lazy" src="web4beginners.com_files/9faf87d7e48c5116e700e47a7cd48abf995fdbed-tideprojektteaser85.jpg" alt="">
</source></source></picture>
</a>
</div>
</section>
<div class="module-projects-teaser__button_more_container animation">
<a href="https://web4beginners.com/projects" title="" class="font-link-text module-projects-teaser__button_more">Mehr Projekte</a>
</div>
</section>
<a class="jump-to-anchor" name="_services-teaser"></a>
<section class="large-teaser-base bg-brown brush-top-white brush-bottom-white animation">
<div class="large-teaser-base__head">
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Wir tun<br>
es mit<br>
Leiden<br>
schaft</h2>
<img loading="lazy" class="large-teaser-base__icon" src="web4beginners.com_files/ic_fire.svg" alt="Icon">
</div>
<div class="large-teaser-base__content services-teaser__content">
<div class="services-teaser__content-block">
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Konzept &amp; Beratung</h3>
<ul class="services-teaser__content-list">
<li>Konzeption</li>
<li>Innovationsberatung</li>
<li>Workshops</li>
<li>Digitale Strategien</li>
<li>Voice UX</li>
</ul>
</div>
<div class="services-teaser__content-block">
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Design</h3>
<ul class="services-teaser__content-list">
<li>UI/UX Design</li>
<li>Visualisierungen</li>
<li>Interaktionsdesign</li>
</ul>
</div>
<div class="services-teaser__content-block">
<h3 class="services-teaser__content-headline font-headline-2 headline-border">Lösungen</h3>
<ul class="services-teaser__content-list">
<li>Websites</li>
<li>Sprachanwendungen</li>
<li>Prototypen</li>
<li>Datenanalysen</li>
<li>Web-Anwendungen</li>
</ul>
</div>
</div>
</section>
<a class="jump-to-anchor" name="_team-teaser"></a>
<section class="text-image animation">
<h2 class="text-image__headline font-headline-1">Der Mensch<br>dahinter ist toll</h2>
<div class="html-content text-image__copy animation"><p>Unaufgeregt. Innovativ. Unkompliziert. Offen. Partnerschaftlich. Zuhörend.<br>
Auf das Wesentliche konzentriert. Die Details im Blick. </p>
<p>Wir bauen Brücken zwischen Nutzern und Inhalten, Menschen und Maschinen, Unternehmen und Technologie.</p></div>
<img loading="lazy" class="text-image___icon" src="web4beginners.com_files/ic_team_2_brown.svg" alt="Icon">
<picture>
<source srcset="" media="(max-width: 992px)">
<source srcset="" media="(min-width: 993px)">
<img class="text-image__image animation" loading="lazy" src="" alt="">
</source></source></picture>
<div class="text-image__button-container">
<a href="https://web4beginners.com/team" title="" class="btn btn-standard text-image__button" target="">Das Team kennenlernen
</a>
</div>
</section>
<section class="large-teaser-base bg-blue brush-top-white brush-bottom-white animation">
<div class="large-teaser-base__head">
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Darauf<br>
sind wir<br>
besonders<br>
stolz</h2>
<img loading="lazy" class="large-teaser-base__icon" src="web4beginners.com_files/ic_pokal.svg" alt="Icon">
</div>
<div class="large-teaser-base__content awards-teaser__content">
<p class="font-copy">Wir durften in den letzten
Jahren für unsere Arbeit viele Preise entgegennehmen. Jeder ehrt uns und
bedeutet uns sehr viel. Einige auf die wir besonders stolz sind:</p>
<div class="awards-teaser__content-list">
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="web4beginners.com_files/dpok@2.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="web4beginners.com_files/grimmeonline@2.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="web4beginners.com_files/leadawards.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="web4beginners.com_files/dt_land@2.png">
</div>
<div class="awards-teaser__content-entry">
<img class="awards-teaser__content-image" src="web4beginners.com_files/prixeuropa@2.png">
</div>
<p class="awards-teaser__content-entry awards-teaser__content-text font-copy-bold">und viele mehr</p>
</div>
</div>
</section>
<a class="jump-to-anchor" name="_contact-teaser"></a> <section class="contact-teaser animation">
<h2 class="contact-teaser__headline animation font-headline-1">Kunde<br>
werden</h2>
<div class="contact-teaser__content animation">
<a href="mailto:info@web4beginners.com" title="" class="font-link-text contact-teaser__link contact-teaser__email">info@web4beginners.com</a>
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="font-link-text contact-teaser__link contact-teaser__phone">040 / 35 73 69 11</a>
</div>
</section>
<section class="large-teaser-base bg-yellow brush-top-white brush-bottom-white animation">
<div class="large-teaser-base__head">
<h2 class="large-teaser-base__headline font-haedline font-headline-1">Mitein<wbr>ander<br>
erfolg<wbr>reich</wbr></wbr></h2>
<img loading="lazy" class="large-teaser-base__icon" src="web4beginners.com_files/ic_smiley.svg" alt="Icon">
</div>
<div class="large-teaser-base__content clients-teaser__content">
<div class="clients-teaser__content-list">
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/tagesschau@2.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/zdf@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/ndr@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/google@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/stifterverband@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/gdv@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/telefonica@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/brandeins@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/shz@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/tide@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/detektorfm@2x.png">
</div>
<div class="clients-teaser__content-entry">
<img class="clients-teaser__content-image" src="web4beginners.com_files/spon@2x.png">
</div>
<p class="clients-teaser__content-entry clients-teaser__content-text font-copy-bold">und viele andere</p>
</div>
</div>
</section>
<section class="text-image animation">
<h2 class="text-image__headline font-headline-1">Kooperationen &amp; Partner</h2>
<div class="html-content text-image__copy animation"><p>Unsere
Arbeit lebt von Kooperationen und dem Austausch mit anderen
Unternehmen, die in verwandten Themenbereichen ihrer Schwerpunkte haben.</p></div>
<picture>
<source srcset="" media="(max-width: 992px)">
<source srcset="" media="(min-width: 993px)">
<img class="text-image__image animation" loading="lazy" src="" alt="">
</source></source></picture>
<div class="text-image__button-container">
<a href="https://web4beginners.com/kooperationspartner" title="" class="btn btn-standard text-image__button" target="">Zu den Partnern
</a>
</div>
</section>
<a href="#top" title="Zum Anfang der Seite springen" class="btn btn-scroll-up"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg class="icon btn-scroll-up__icon" height="13" viewbox="0 0 20 13" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m2.3583594 13 7.6416406-8.0384421 7.641641 8.0384421 2.358359-2.480738-10-10.519262-10 10.519262z"></path></svg>
</a>
</main>
<div id="cookie-layer" class="">
<div class="cookie-layer__content font-copy">
Wir nutzen Cookies auf unserer Website. Einige von ihnen
sind essenziell, während andere uns helfen, diese Website und Ihre
Erfahrung zu verbessern.
<a class="cookie-layer__link cookie-layer__privacy font-link-text-cookie-layer" href="https://web4beginners.com/datenschutz" title="Mehr erfahren">Mehr erfahren</a>
</div>
<div class="cookie-layer__buttons">
<a class="font-link-text-cookie-layer cookie-layer__link cookie-layer__decline" href="#" title="Ablehnen">Ablehnen</a>
<a href="#" title="" class="btn btn-standard cookie-layer__accept" target="">Stimme zu
</a>
</div>
</div>
<footer class="site-footer bg-brown brush-top-white">
<div class="site-footer__block-company ">
<h3 class="site-footer__headline font-headline-footer">web4beginners GmbH</h3>
<p class="site-footer__address font-copy">Schillerstraße 21<br>
22767 Hamburg</p>
</div>
<div class="site-footer__block-contact">
<h3 class="site-footer__headline headline-border font-headline-footer">Robbi</h3>
<a href="mailto:info@web4beginners.com" title="" class="site-footer__link font-link-text-footer">info@web4beginners.com</a>
<a href="tel:040%20/%2035%2073%2069%2011" title="" class="site-footer__link font-link-text-footer">040 / 35 73 69 11</a>
</div>
<div class="site-footer__block-products">
<div class="site-footer__meta-links">
<a href="https://web4beginners.com/impressum" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Impressum</a>
<a href="https://web4beginners.com/datenschutz" title="" class="site-footer__link site-footer__meta-link font-link-text-footer">Datenschutz</a>
</div>
</div>
</footer>
</div>
<div class="spacer"></div>
<script src="web4beginners.com_files/1698d822c6d3fe9b0c50b3ab44ef524a.js"></script>
<script src="editor/wysiwyg-editor.js"></script>
</body></html>

1
web4beginners.com.html Symbolic link
View File

@@ -0,0 +1 @@
ikfreunde.com.html

1
web4beginners.com_files Symbolic link
View File

@@ -0,0 +1 @@
ikfreunde.com_files

File diff suppressed because one or more lines are too long