iconbox – Webers Webdesign

Wohlfühlfaktor

Familiäres Betriebsklima und Teamgeist
flache Hierarchien und kurze Entscheidungswege
regelmäßige Mitarbeiter-Events
eigenes IPad ab dem ersten Arbeitstag
Modernste digitale Arbeitsumgebung
kostenlose Getränke & Obst

Karriere und Förderung

große Bandbreite an Aufgaben
Möglichkeit zur Spezialisierung
regelmäßige Feedbackgespräche
Förderung von Berufsexamina und Fortbildungen
Mentorenkonzept
Möglichkeit eines dualen und berufsbegleitenden Studiums

Individuelle
Arbeitszeitmodelle

unbefristete Arbeitsverträge
flexible und auf die persönliche Situation abgestimmte Arbeitszeitmodelle
Führung eines Überstundenkontos / kein Verfall von Überstunden

To better address these special „iconboxes“ give a custom-class to the surrounding color-section f.e.: flexed-columns

and put every „Iconbox-Row“ in an extra color-section

custom-class on each color-section: flexed-columns

do not colorize the iconbox background – this will come from column!

On this page i used the left ( only non responsive ) version

so you can see how the iconboxes are inside the columns.

To get an „icon-box“ imitation – just shift the iconbox inside those columns. If you want to get rid of that in responsive case : let this code be effectiv only on bigger screens.

@media only screen and (min-width: 990px) {
  .flexed-columns .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 120px;
  }

  .flexed-columns .entry-content-wrapper::before,
  .flexed-columns .entry-content-wrapper::after {
    display: none;
  }

  .flexed-columns .entry-content-wrapper .iconbox {
    transform: translateY(-100px);
    margin-bottom: -100px !important;
  }
}

If you want to preserve that looking do not use the media query and give a margin bottom to the columns.

.flexed-columns .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 120px;
}

.flexed-columns .entry-content-wrapper::before,
.flexed-columns .entry-content-wrapper::after {
  display: none;
}

.flexed-columns .entry-content-wrapper .flex_column {
  margin-bottom: 120px !important
}

.flexed-columns .entry-content-wrapper .iconbox {
  transform: translateY(-100px);
  margin-bottom: -100px !important
}

custom-class on each column: icon-box-column

This is the styling only css – that was another demand on board with special settings – not neccessary for the iconbox lookalike.

.icon-box-column .iconbox .iconbox_icon:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 4px;
  width: 100%;
  height: 100%;
  border: 2px solid #2fa7de;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  border-radius: 100%;
  z-index: -1 !important ;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.icon-box-column .iconbox .iconbox_icon {
  position: relative !important;
  color: #2fa7de;
  border: 2px solid #2fa7de;
  background-color: transparent !important
}

.flex_column.icon-box-column {
  transition: all .25s ease-in-out;
}

.flex_column.icon-box-column:hover {
  box-shadow: 0px 15px 34px #a9afac;
  transition: all .25s ease-in-out;
}

.flex_column.icon-box-column:hover .iconbox .iconbox_icon {
  background-color: #2fa7de !important;
}

.flex_column.icon-box-column:hover .iconbox .iconbox_content_title  {
  color: #a47731
}

.flex_column.icon-box-column:hover .iconbox_icon:after {
  background-color: #a9afac;
  border-color: #a9afac
}

.flex_column.icon-box-column:hover .iconbox_icon:before {
  color: #FFF;
  transition: all .25s ease-in-out;
}