<div class="base">
<div class="base__subnavbar">
<div class="bg-faded">Subnavbar Container</div>
</div>
<div class="base__content">
<div class="bg-faded">Content Container</div>
</div>
<div class="base__related">
<div class="bg-faded">Related Container</div>
</div>
</div>
<hr />
<div class="base">
<div class="base__subnavbar">
<div class="bg-faded">Subnavbar Container</div>
</div>
<div class="base__content--wide">
<div class="bg-faded">Wide-Content Container</div>
</div>
</div>
<div class="landing-page">
<div class="landing-page__regular">
<div class="landing-page--content">
<i class="fa fa-phone fa-2x text--primary-color" aria-hidden="true"></i>
<p>
<h3 class="text--light">Kontaktieren Sie uns direkt</h3>
<small>Gerne helfen wir ihnen weiter</small>
</p>
<button class="btn btn-primary" style="width: 50%; margin: 0 auto;">Kontakt</button>
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--content">
<i class="fa fa-file-text fa-2x text--primary-color" aria-hidden="true"></i>
<p>
<h3 class="text--light">Formulare</h3>
<small>Wir bieten Ihnen viele Broschüren und Formulare
zum Download an.</small>
</p>
<button class="btn btn-primary" style="width: 50%; margin: 0 auto;">Downloads</button>
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--content">
<i class="fa fa-info-circle fa-2x text--primary-color" aria-hidden="true"></i>
<p>
<h3 class="text--light">Weiterführende Informationen</h3>
<small>Eine Sammlung aller Links zu unseren Partnern</small>
</p>
<button class="btn btn-primary" style="width: 50%; margin: 0 auto;">Link-Center</button>
</div>
</div>
</div><form action="">
<div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<div class="checkbox">
<input id="first" type="checkbox" checked="checked" />
<label for="first">
First checkbox
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend>Styled Radio buttons</legend>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4" checked="checked">
<label for="optionsRadios4">
First radio
</label>
</div>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5" checked="checked">
<label for="optionsRadios5">
Second radio
</label>
</div>
</fieldset>
<div class="form-group">
<label for="exampleSelect1">Password</label>
<select class="form-control" name="exampleSelect1" id="exampleSelect1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button></form><!-- modals -->
<div class="modal fade" id="jobDeactivationModal" aria-labelledby="jobDeactivationModalLabel" aria-hidden="true" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Stelle abmelden</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">
Bitte füllen Sie die Abmeldeinformationen aus und bestätigen Sie die Abmeldung des Stellenangebots.
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
Sie konnten die Stelle besetzen:
</label>
</div>
<div class="ml-3">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="1">
in Zusammenarbeit mit der regionalen Arbeitsvermittlung (RAV)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2">
in Zusammenarbeit mit der privaten Arbeitsvermittlung (pAV)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3">
Sie konnten die Stelle selber besetzen
</label>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
Sie konnten die Stelle nicht besetzen
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Abmeldung bestätigen</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
<!-- /modals -->
Hier erhalten Sie Hilfe und Ratschläge für Ihre Situation.
In welchem Abschnitt befinden Sie sich?
Vor der Arbeitslosigkeit
Ab Beginn der Arbeitslosigkeit
Aussteuerung beantragen
Arbeitslosigkeit abmelden
<div class="landing-page">
<div class="landing-page__wide">
<div class="landing-page--container process-container bg--main-gray-light text--center-align md-whiteframe-1dp">
<h2 class="text--light">Arbeitslos - was tun?</h2>
<p class="process-container__text">
Hier erhalten Sie Hilfe und Ratschläge für Ihre Situation.<br /> In welchem Abschnitt befinden Sie sich?
</p>
<div class="process">
<div class="process__item">
<p>Vor der Arbeitslosigkeit</p>
</div>
<div class="process__item">
<p>Ab Beginn der Arbeitslosigkeit</p>
</div>
<div class="process__item">
<p>Aussteuerung beantragen</p>
</div>
<div class="process__item">
<p>Arbeitslosigkeit abmelden</p>
</div>
</div>
</div>
</div>
<div class="landing-page__regular landing-page__regular--media">
<div class="landing-page--container md-whiteframe-1dp">
REGULAR / VIDEO
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--container md-whiteframe-1dp">
<div class="landing-page__content">
REGULAR
</div>
<div class="landing-page__action btn btn-primary btn-block">MOBILE</div>
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--container md-whiteframe-1dp">
<div class="landing-page__content">
REGULAR
</div>
<div class="landing-page__action btn btn-primary btn-block">MOBILE</div>
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--container md-whiteframe-1dp">
<div class="landing-page__content">
REGULAR
</div>
<div class="landing-page__action btn btn-primary btn-block">MOBILE</div>
</div>
</div>
<div class="landing-page__half">
<div class="landing-page--container md-whiteframe-1dp">
<div class="landing-page__content">
HALF
</div>
<div class="landing-page__action btn btn-primary btn-block">MOBILE</div>
</div>
</div>
<div class="landing-page__half">
<div class="landing-page--container md-whiteframe-1dp">
<div class="landing-page__content">
HALF
</div>
<div class="landing-page__action btn btn-primary btn-block">MOBILE</div>
</div>
</div>
</div><!-- modals -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<ul class="nav nav-tabs nav--login" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#login" role="tab">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#register" role="tab">Registrieren</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content--job-room">
<div class="tab-content">
<div class="tab-pane active" id="login" role="tabpanel">
<fieldset class="login">
<div class="form-group">
<label for="username" class="col-form-label">Benutzername</label>
<div>
<input class="form-control" type="text" id="username" placeholder="E-Mail, Personennummer, Benutzername" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-form-label">Passwort</label>
<div>
<input class="form-control" type="password" id="password" placeholder="Passwort" />
</div>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal">Login</button>
<a href="#" data-dismiss="modal">Passwort vergessen?</a>
</fieldset>
</div>
<div class="tab-pane" id="register" role="tabpanel">
<fieldset class="login">
<div class="form-group form-group--break">
<label for="sort" class="col-form-label">Registrierung als</label>
<div>
<select class="form-control custom-select" id="sort" required>
<option selected>Registrierung als Stellensuchende / -er</option>
<option value="1">Registrierung als Unternehmen</option>
<option value="2">Registrierung als Arbeitsvermittler</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name1" class="col-form-label">Nachname</label>
<div>
<input class="form-control" type="text" id="name1" placeholder="Nachname" required />
</div>
</div>
<div class="form-group">
<label for="name2" class="col-form-label">Vorname</label>
<div>
<input class="form-control" type="text" id="name2" placeholder="Vorname" required />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-form-label">Geburtsdatum</label>
<div>
<input class="form-control" type="date" id="birthday" required />
</div>
</div>
<div class="form-group">
<label for="email" class="col-form-label">E-Mail</label>
<div>
<input class="form-control" type="text" id="email" placeholder="E-Mail" required />
</div>
</div>
<div class="form-group form-group--optional form-group--break">
<label for="personennummer" class="col-form-label">Personennummer</label>
<div>
<input class="form-control" type="text" id="personennummer" placeholder="Personennummer gemäss Brief xy" />
</div>
</div>
<div class="form-group">
<label for="password1" class="col-form-label">Passwort</label>
<div>
<input class="form-control" type="password" id="password1" placeholder="mind. 6 Zeichen, Buchstaben und Zahlen" />
</div>
</div>
<div class="form-group">
<label for="password2" class="col-form-label">Passwort wiederholen</label>
<div>
<input class="form-control" type="password" id="password2" placeholder="mind. 6 Zeichen, Buchstaben und Zahlen" />
</div>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal">Registrieren</button>
<a href="#" data-dismiss="modal">Passwort vergessen?</a>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /modals -->
<div class="landing-page">
<div class="landing-page__regular">
<div class="landing-page--content">
<p>
<h3 class="text--light">Über uns</h3>
<small>Informieren Sie sich über Ziele, Struktur, Partner
und die Arbeitslosenversicherung.</small>
</p>
<a href="#">Mehr erfahren</a>
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--content">
<p>
<h3 class="text--light">Der Arbeitsmarkt im Mai 2017</h3>
<small>Der Arbeitsmarkt profitier kräftig vom
saisonbedingten Beschäftigungswachstum.</small>
</p>
<a href="#">Mehr erfahren</a>
</div>
</div>
<div class="landing-page__regular">
<div class="landing-page--content">
<p>
<h3 class="text--light">Statistiken</h3>
<small>Unsere Statistiken und Berichte geben Ihnen
Aufschluss über den Arbeitsmarkt.</small>
</p>
<a href="#">Mehr erfahren</a>
</div>
</div>
</div><div class="landing-page">
<div class="landing-page__half">
<div class="landing-page--container md-whiteframe-1dp">
<h3 class="text--light">Stichwortsuche</h3>
</div>
</div>
<div class="landing-page__half">
<div class="landing-page--container md-whiteframe-1dp">
<h3 class="text--light">FAQ / Themen</h3>
</div>
</div>
</div><div class="toolbar toolbar--white" id="toolbar">
<div class="container">
<div class="toolbar-collapse">
<ul class="toolbar-nav toolbar-nav--has-icon">
<li class="nav-title">
<h2 class="light">Unsere Leistungen für</h2>
</li>
<li class="nav-item active">
<a href="#" class="nav-link">
<span>
<span class="nav-link__icon">
<span class="icon__stack">
<i class="fa fa-binoculars" aria-hidden="true"></i>
</span>
</span>
</span>
<span>Stellensuchende</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>
<span class="nav-link__icon">
<span class="icon__stack">
<i class="fa fa-building" aria-hidden="true"></i>
</span>
</span>
</span>
<span>Unternehmen</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>
<span class="nav-link__icon">
<span class="icon__stack">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</span>
</span>
<span>Arbeitsvermittler</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span>
<span class="nav-link__icon">
<span class="icon__stack">
<i class="fa fa-university" aria-hidden="true"></i>
</span>
</span>
</span>
<span>Institutionen</span>
</a>
</li>
</ul>
</div>
</div>
</div>