Sliders (JS)
To define the number of slides, a configuration must be stored via the element with the attribute data-nbk-slider
Example:data-nbk-slider="{slidesPerView':{'default':2.1,'sm':3,'md':4,'lg':5,'xl':6}}"
The object key defines the breakpoint
#01 City slider
Top Regionen in Deutschland
<section class="nbk-section nbk-section--outer-spacing-bottom nbk-section--overflow-hidden">
<div class="container">
<div class="row">
<div class="col">
<section class="nbk-title-section " >
<span class="nbk-title-section__top ">Suche in den beliebtesten Städten</span>
<h2 class="nbk-title-section__title ">Top Regionen in Deutschland</h2>
</section> </div>
<div class="col">
<div class="nbk-slider nbk-slider--navigation-offset " >
<div class="nbk-slider__swiper swiper nbk-slider__swiper--overflow-visible"
data-nbk-slider='{"slidesPerView":{"default":2.1,"sm":3,"md":4,"lg":5,"xl":6}}' id="">
<div class="nbk-slider__arrows" data-nbk-slider-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-secondary ">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn-outline-secondary btn--icon-only">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Berlin.png" class="nbk-card__image lazy " alt="Berlin">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Berlin</h4>
<h5 class="nbk-card__subtitle ">125 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Hamburg.png" class="nbk-card__image lazy " alt="Hamburg">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Hamburg</h4>
<h5 class="nbk-card__subtitle ">78 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Muenchen.png" class="nbk-card__image lazy " alt="München">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">München</h4>
<h5 class="nbk-card__subtitle ">150 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Koeln.png" class="nbk-card__image lazy " alt="Köln">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Köln</h4>
<h5 class="nbk-card__subtitle ">95 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Frankfurt.png" class="nbk-card__image lazy " alt="Frankfurt">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Frankfurt</h4>
<h5 class="nbk-card__subtitle ">60 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Duesseldorf.png" class="nbk-card__image lazy " alt="Düsseldorf">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Düsseldorf</h4>
<h5 class="nbk-card__subtitle ">85 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Nuernberg.png" class="nbk-card__image lazy " alt="Nürnberg">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Nürnberg</h4>
<h5 class="nbk-card__subtitle ">45 PROJEKTE</h5>
</section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--radius-larger">
<img data-src="/assets/city-pictures/Stuttgart.png" class="nbk-card__image lazy " alt="Stuttgart">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--larger ">Stuttgart</h4>
<h5 class="nbk-card__subtitle ">22 PROJEKTE</h5>
</section>
</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> #02 News slider
Neuheiten
<section class="nbk-section nbk-section--outer-spacing-bottom nbk-section--overflow-hidden">
<div class="container">
<div class="row">
<div class="col">
<section class="nbk-title-section " >
<h2 class="nbk-title-section__title ">Neuheiten</h2>
</section> </div>
<div class="col">
<div class="nbk-slider nbk-slider--navigation-offset " >
<div class="nbk-slider__swiper swiper nbk-slider__swiper--overflow-visible"
data-nbk-slider='{"slidesPerView":{"default":2.1,"sm":3,"md":3,"lg":4,"xl":4}}' id="">
<div class="nbk-slider__arrows" data-nbk-slider-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-secondary ">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn-outline-secondary btn--icon-only">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?SKYLOFT PARADISE,landmark" class="nbk-card__image lazy " alt="SKYLOFT PARADISE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">SKYLOFT PARADISE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Hamburg-HafenCity</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 3.750.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?GRÜNE OASE,landmark" class="nbk-card__image lazy " alt="GRÜNE OASE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">GRÜNE OASE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Frankfurt-Westend</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 2.950.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?PANTHEON RESIDENZ,landmark" class="nbk-card__image lazy " alt="PANTHEON RESIDENZ">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">PANTHEON RESIDENZ</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Köln-Innenstadt</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 2.200.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?ELYSIUM TOWER DUESSELDORF MEDIENHAFEN,landmark" class="nbk-card__image lazy " alt="ELYSIUM TOWER DUESSELDORF MEDIENHAFEN">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">ELYSIUM TOWER DUESSELDORF MEDIENHAFEN</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Düsseldorf-Medienhafen</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 4.500.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?LUXUS HIDEAWAY,landmark" class="nbk-card__image lazy " alt="LUXUS HIDEAWAY">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">LUXUS HIDEAWAY</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">München-Bogenhausen</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 5.800.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?TRAUMGARTEN VILLA,landmark" class="nbk-card__image lazy " alt="TRAUMGARTEN VILLA">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">TRAUMGARTEN VILLA</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Berlin-Zehlendorf</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 3.300.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?EXKLUSIVES DOMIZIL,landmark" class="nbk-card__image lazy " alt="EXKLUSIVES DOMIZIL">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">EXKLUSIVES DOMIZIL</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Stuttgart-Mitte</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 2.750.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?GRAND RESIDENCE,landmark" class="nbk-card__image lazy " alt="GRAND RESIDENCE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">GRAND RESIDENCE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Hannover-Mitte</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 2.400.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?PALAIS LUMIÈRE,landmark" class="nbk-card__image lazy " alt="PALAIS LUMIÈRE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">PALAIS LUMIÈRE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Leipzig-Zentrum</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 3.150.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?SONNENHOF SUITE,landmark" class="nbk-card__image lazy " alt="SONNENHOF SUITE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">SONNENHOF SUITE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Dresden-Altstadt</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 4.100.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?WASSERSCHLOSS ELEGANZ,landmark" class="nbk-card__image lazy " alt="WASSERSCHLOSS ELEGANZ">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">WASSERSCHLOSS ELEGANZ</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Nürnberg-Sebald</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 4.750.000 €</h6> </section>
</a> </div>
<div class="swiper-slide">
<a href="#" class="nbk-card ">
<header class="nbk-card__header">
<figure class="nbk-card__figure nbk-card__figure--landscape ">
<img data-src="https://source.unsplash.com/random/?BLÜTENTRAUM PENTHOUSE,landmark" class="nbk-card__image lazy " alt="BLÜTENTRAUM PENTHOUSE">
</figure>
</header>
<section class="nbk-card__body ">
<h4 class="nbk-card__title nbk-card__title--condensed ">BLÜTENTRAUM PENTHOUSE</h4>
<h5 class="nbk-card__subtitle nbk-card__subtitle--light ">Bremen-Viertel</h5>
<h6 class="nbk-card__subtitle nbk-card__subtitle--light ">ab 3.600.000 €</h6> </section>
</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> #03 Projects of the month slider
Projekte des Monats
Top Lage
INSTONE REAL ESTATE
WINGS Gallusviertel-Frankfurt
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis1.820.523 - 4.256.000 €
- Wohnfläche104 m2
- Zimmer2 - 6
- BezugsfertigApril 2025
Bezugsfertig
Nassauische Heimstätte
WOHNPARK Am alten Park - Kelkheim
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis325.000 - 780.000 €
- Wohnfläche55 m2 - 140 m2
- Zimmer2 - 4
- BezugsfertigFrühjahr 2024
Bezugsfertig
Wiesbaden, Carl-Bender-Straße 17 und 19
Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main
- Preis325.000 - 780.000 €
- Wohnfläche55 m2 - 140 m2
- Zimmer2 - 4
- BezugsfertigFrühjahr 2024
<section class="nbk-section nbk-section--outer-spacing-bottom nbk-section--overflow-hidden">
<div class="container">
<div class="row">
<div class="col">
<section class="nbk-title-section " >
<h2 class="nbk-title-section__title ">Projekte des Monats</h2>
</section> </div>
<div class="col">
<div class="nbk-slider " >
<div class="nbk-slider__swiper swiper "
data-nbk-slider='{"slidesPerView":{"default":1},"notDraggable":"true"}' id="project-of-the-month">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="nbk-project-card ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Top Lage</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/gallusviertel/gallusviertel.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title">INSTONE REAL ESTATE</h4>
<h2 class="nbk-project-card__title">WINGS Gallusviertel-Frankfurt</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">1.820.523 - 4.256.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">104 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 6</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">April 2025</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
<div class="swiper-slide">
<div class="nbk-project-card ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Bezugsfertig</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/1.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/2.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/3.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/4.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/5.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/6.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/7.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure nbk-project-card__figure--shadow ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/8.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title">Nassauische Heimstätte</h4>
<h2 class="nbk-project-card__title">WOHNPARK Am alten Park - Kelkheim</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">325.000 - 780.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">55 m2 - 140 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 4</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">Frühjahr 2024</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
<div class="swiper-slide">
<div class="nbk-project-card ">
<header class="nbk-project-card__header">
<div class="container">
<div class="row justify-content-between">
<div class="col-auto col-md-auto me-auto">
<span class="badge rounded-pill bg-primary nbk-project-card__badge">Bezugsfertig</span>
</div>
<div class="col-auto ms-auto">
<button class="btn btn--icon-only nbk-project-card__btn-favorite ">
<span class="btn__icon btn__icon--lg"> <svg width="28" height="25" viewbox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.2796 3.13867L15.2799 3.13834C17.7491 0.513379 21.6869 0.136215 24.304 2.43374C27.3654 5.12589 27.5314 9.97951 24.7814 12.9035L24.7812 12.9036L14.4155 23.9314C14.0223 24.3495 13.4018 24.3495 13.0086 23.9314L2.6431 12.904C2.643 12.9039 2.6429 12.9037 2.64281 12.9036C-0.102015 9.97963 0.0639981 5.1261 3.12512 2.43395C5.74253 0.13595 9.68553 0.513713 12.149 3.13783L12.1498 3.13867L13.2051 4.25913L13.7147 4.80013L14.2243 4.25913L15.2796 3.13867Z"
fill="currentColor" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span></button>
</div>
</div>
</div>
</header>
<section class="nbk-project-card__main">
<div class="row g-0">
<div class="col-12 col-md-6 d-flex">
<div class="nbk-project-card__media-container">
<div class="swiper nbk-project-card__slider" data-nbk-project-card-slider>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/1.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/2.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/3.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/4.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/5.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/6.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/7.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
<div class="swiper-slide">
<figure class="nbk-project-card__figure nbk-project-card__figure--shadow ">
<img data-src="/assets/project-pictures/wohnheimkelkheim/8.jpg" width="1600" height="900"
class="lazy nbk-project-card__image"/>
</figure>
</div>
</div>
<div class="nbk-project-card__slider-shadow-overlay"></div>
<div class="swiper-pagination nbk-project-card__slider-pagination"></div>
<div class="nbk-project-card__slider-arrows d-none d-md-block" data-nbk-project-card-navigation>
<button class="swiper-button-prev btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.45711 0.792893C7.84763 1.18342 7.84763 1.81658 7.45711 2.20711L2.66421 7L7.45711 11.7929C7.84763 12.1834 7.84763 12.8166 7.45711 13.2071C7.06658 13.5976 6.43342 13.5976 6.04289 13.2071L0.542893 7.70711C0.152369 7.31658 0.152369 6.68342 0.542893 6.29289L6.04289 0.792893C6.43342 0.402369 7.06658 0.402369 7.45711 0.792893Z"/>
</svg>
</span>
</button>
<button class="swiper-button-next btn btn-sm btn--icon-only btn-outline-light btn-outline-transparent">
<span class="btn__icon">
<svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="nbk-project-card__content">
<div class="row">
<div class="col col-12 col-md-9">
<h4 class="nbk-project-card__sub-title"></h4>
<h2 class="nbk-project-card__title">Wiesbaden, Carl-Bender-Straße 17 und 19</h2>
<p class="nbk-project-card__description">Neubau von 84 Doppel- und Reihenhäusern Kleyerstraße 11-16, 60326 Frankfurt am Main</p>
</div>
<div class="col-12 col-md-6">
<ul class="row nbk-project-card__list">
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Preis</div>
<span class="nbk-project-card__spec-value">325.000 - 780.000 €</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Wohnfläche</div>
<span class="nbk-project-card__spec-value">55 m2 - 140 m2</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Zimmer</div>
<span class="nbk-project-card__spec-value">2 - 4</span>
</li>
<li class="col-6 col-md-12 nbk-project-card__spec-item">
<div class="nbk-project-card__spec-label">Bezugsfertig</div>
<span class="nbk-project-card__spec-value">Frühjahr 2024</span>
</li>
</ul>
</div>
<div class="col-12 col-md-auto ms-md-auto flex-column justify-content-end d-none d-md-flex">
<div class="nbk-project-card__cta-content">
<div class="nbk-project-card__cta-content-item">
<a href="#">
<img class="lazy nbk-project-card__side-image" data-src="/assets/investor.svg" alt="investor logo">
</a>
</div>
<div class="nbk-project-card__cta-content-item">
<a href="/project.html" class="btn btn-outline-secondary" type="button" >
Zum Projekt
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="nbk-project-card__footer">
<a href="/project.html" class="nbk-project-card__mobile_project-cta">
<span class="nbk-project-card__mobile_project-cta-text">Zum Projekt</span>
<span class="nbk-project-card__footer-icon"> <svg width="8" height="14" viewbox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.542893 13.2071C0.152369 12.8166 0.152369 12.1834 0.542893 11.7929L5.33579 7L0.542893 2.20711C0.152369 1.81658 0.152369 1.18342 0.542893 0.792894C0.933417 0.402369 1.56658 0.402369 1.95711 0.792894L7.45711 6.29289C7.84763 6.68342 7.84763 7.31658 7.45711 7.70711L1.95711 13.2071C1.56658 13.5976 0.933417 13.5976 0.542893 13.2071Z"/>
</svg>
</span>
</a>
</footer>
</div>
</div>
</div>
<div class="swiper-pagination nbk-slider__pagination"></div>
</div>
</div>
</div>
</div>
</div>
</section>