Organigram

by bitstarr

HTML

<div class="orga orga-wrap">
        <div class="orga-wrap orga-group-one">
            <article class="orga-item orga-item-top">
                <div class="orga-content">
                <h2 class="orga-title">Arbeitsvorbereitung</h2><ul>
<li>Beratung zur Kostenoptimierung Ihrer Erzeugnisse</li>
<li>3D-Konstruktion nach Ihren Skizzen, Zeichnungen oder Mustern</li>
</ul>
                </div>
            </article>

            <article class="orga-item orga-item-left">
                <div class="orga-content">
                <h2 class="orga-title">Blechbearbeitung</h2><ul>
<li>Laserschneiden | CNC-Stanzen</li>
<li>Maschinelles Entgraten</li>
<li>CNC-Abkanten</li>
</ul>
                </div>
            </article>

            <div class="orga-wrap orga-group-two">
                <article class="orga-item">
                    <div class="orga-content">
                    <h2 class="orga-title">Mechanische Fertigung</h2><ul>
<li>Drehbearbeitung<br>
bis ⌀320 mm und 1000 mm Länge</li>
<li>Fräsbearbeitung<br>
mit Universal-Fräsmaschinen</li>
<li>Rund- und Flachschleifen</li>
<li>Radial- und Horizontalbohren</li>
<li>Mechanische Bearbeitung von Schweißbaugruppen</li>
<li>Baugruppenmontage</li>
</ul>
                    </div>
                </article>
                <article class="orga-item">
                    <div class="orga-content">
                    <h2 class="orga-title">Fügen</h2><p>Nietverbinden, Tox-Presso, Einsetzen von Verbindungs- und Befestigungsele- menten (Schrauben, Muttern, Buchsen) für elektronische Geräte</p>
                    </div>
                </article>
                <article class="orga-item">
                    <div class="orga-content">
                    <h2 class="orga-title">Schweißen</h2><ul>
<li>Schweißtechnik<br>
(WIG- und MAG-Verfahren)</li>
<li>Punktschweißen</li>
<li>Bolzenschweißen für Stahl, Edelstahl und Aluminium</li>
</ul>
                    </div>
                </article>
                <article...

CSS

html {
    -ms-text-size-adjust: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 1 */
    box-sizing: border-box; /* 1 */
}
*, *:before, *:after { box-sizing: inherit; } /* 3 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section,summary { display: block; }
/* remember to define focus styles! */
:focus { outline: 0; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
/* Webkit-Browser machen einen 2px margin außerhalb von Form-Elementen */
button, input, select, textarea { margin: 0; }
/* Scrollbar erzwingen für nicht IE, verhindert springen der Seite */
html { overflow-y: scroll; }

body {
    font: 1em/1.5 "Source Sans EW", "Nimbus Sans L", "Freesans", sans-serif;
}


.orga {
  margin: 10px;
}
.orga-wrap {
  display: flex;
  flex-wrap: wrap;
}
.orga-item {
  display: flex;
  width: 100%;
  padding: 10px;
  margin: 0;
}
.orga-item ul {
  list-style: disc;
  margin-left: 1em;
}
.orga-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;

  padding: 10px;
  color: #fff;
  background: #004a7b;
}

.orga-title {
  font-size: 1.2em;
  font-weight: 700;
}

.orga-item-left {
  width: 40%;
}
.orga-group-two {
  width: 60%;
}

.orga-group-one {
  width: 75%;
}
.orga-item-right {
  width: 25%;
}