Skip to content

Commit

Permalink
Add trainer section to home
Browse files Browse the repository at this point in the history
  • Loading branch information
@nanoparsec
nanoparsec authored Feb 26, 2024
1 parent 331bcfd commit ac19c55
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 97 deletions.
Binary file added lib/assets/images/trainerinnenkachel.webp
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions lib/components/hero/_hero.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@include for-tablet-landscape-up {
grid-template-columns: 1.3fr 1fr;
gap: $spacer-sm;
padding: $spacer-2xl $spacer-base 0 $spacer-base;
padding: $spacer-2xl $spacer-base $spacer-2xl $spacer-base;
}

display: grid;
Expand All @@ -11,7 +11,7 @@
width: 100%;
max-width: $desktop-xl;
margin: 0 auto;
padding: $spacer-lg $spacer-xs 0 $spacer-xs;
padding: $spacer-lg $spacer-xs $spacer-lg $spacer-xs;
}

.hero_grid-wrapper {
Expand Down
3 changes: 2 additions & 1 deletion lib/components/teaser/_teaser.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// Komponente Teaser (2spalter auf Home)
.teaser {
@include for-tablet-landscape-up {
gap: $spacer-lg;
row-gap: $spacer-md;
column-gap: $spacer-2xl;
}

display: flex;
Expand Down
208 changes: 114 additions & 94 deletions lib/views/home/home.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,113 +57,132 @@ description: Homepage
</header>

<main>
<section class="container container--xl container-vertical-spacing-2xl">
<h2 class="section__title--normal">Beliebte Schulungen</h2>
<ul class="cards">
<li class="card card--isaqb">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
<div class="stripe stripe--white-1">
<section class="container container--xl container-vertical-spacing-xl">
<h2 class="section__title--normal">Beliebte Schulungen</h2>
<ul class="cards">
<li class="card card--isaqb">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Documentation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</div>
</div>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul ARC</p>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Agile Software-Architektur</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul ARC</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</li>
<li class="card card--isaqb">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Agile Software-Architektur</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</div>
</div>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul AGILA</p>
</div>
</li>
<li class="card card--isaqb">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Evaluation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul AGILA</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</li>
<li class="card card--isaqb">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Architecture Evaluation</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sisit.</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</div>
</div>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul ARCEVAL</p>
</div>
</li>
<li class="card">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Cloud Native Infrastruktur</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem.</p>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul ARCEVAL</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</li>
<li class="card">
<div class="card__body card__body--isaqb">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Cloud Native Infrastruktur</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor Lorem.</p>
</div>
<div class="card__body__bottom">
<div class="pills">
<div class="pill"><span class="pill__label">Technik</span><span class="pill__number">20</div>
<div class="pill"><span class="pill__label">Methodik</span><span class="pill__number">—</div>
<div class="pill"><span class="pill__label">Kommunikation</span><span class="pill__number">10</div>
</div>
</div>
</div>
</div>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul CLOUDINFRA</p>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor.</p>
<div class="card__footer card__footer--isaqb">
<p class="card__price">2.100 €</p>
<p class="card__label">iSAQB Modul CLOUDINFRA</p>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor.</p>
</div>
<div class="card__body__bottom">
</div>
</div>
<div class="card__body__bottom">
<div class="card__footer">
<p class="card__price">1.400 €</p>
</div>
</div>
<div class="card__footer">
<p class="card__price">1.400 €</p>
</div>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor.</p>
</li>
<li class="card">
<div class="card__body">
<div class="card__body__top">
<h3 class="card__title"><a href="#" class="card__link">Card Title</a></h3>
<p class="card__text">Card Text Lorem, ipsum dolor.</p>
</div>
<div class="card__body__bottom">
</div>
</div>
<div class="card__body__bottom">
<div class="card__footer">
<p class="card__price">2.100 €</p>
</div>
</div>
<div class="card__footer">
<p class="card__price">2.100 €</p>
</div>
</li>
</ul>
<a href="#" class="btn btn-type--primary">Alle Schulungen</a>
</li>
</ul>
<a href="#" class="btn btn-type--primary">Alle Schulungen</a>
</section>
</div>

<section class="container container--xl container-vertical-spacing-2xl">
<div class="teaser">
<div class="teaser__column">
<h2 class="section__title--normal">Deine Trainer:innen</h2>
<p class="teaser__text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
</p>
<a href="#" class="btn btn--cta">Alle Trainer:innen ansehen</a>
</div>
<div class="teaser__column">
<a href="#">
<img class="" src="/snippet/images/trainerinnenkachel.webp" />
</a>
</div>
</div>
</section>
<div class="stripe stripe--white-1">
<section class="container container--xl container-vertical-spacing-2xl container--centered">
Expand Down Expand Up @@ -211,7 +230,9 @@ description: Homepage
</div>
<div class="teaser__column">
<h2 class="section__title--normal">Wer sind wir?</h2>
<p class="teaser__text">Die socreatory ist ein gemeinsames Projekt von INNOQ und embarc. Hauptberuflich sind wir Technologie-Beratungsunternehmen. Doch wenn wir nicht gerade anspruchsvolle Softwarearchitektur und Software-Lösungen für unsere Kundinnen und Kunden entwickeln, geben wir unser Wissen sehr gerne weiter. So sind wir zu zwei der führenden Schulungsanbieter geworden, die jetzt eine gemeinsame Mission haben: die socreatory.</p>
<p class="teaser__text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
</p>
<a href="#" class="btn btn--cta">Mehr über uns</a>
</div>
</div>
Expand Down Expand Up @@ -257,5 +278,4 @@ description: Homepage
</div>
</div>
</footer>

```

0 comments on commit ac19c55

Please sign in to comment.