Aufgabe: ein Item selektieren

aufgabe-ein-item-selektieren.markdown

Aufgabe: ein Item selektieren

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<ul class="item-list">
  <li class="item-list__item">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__body"></div>
      <div class="card__footer"></div>
    </div>
  </li>
  <li class="item-list__item">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__body"></div>
      <div class="card__footer"></div>
    </div>
  </li>
  <li class="item-list__item">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__body"></div>
      <div class="card__footer"></div>
    </div>
  </li>
  <li class="item-list__item">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__body"></div>
      <div class="card__footer"></div>
    </div>
  </li>
  <li class="item-list__item">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__body"></div>
      <div class="card__footer"></div>
    </div>
  </li>
  <li class="item-list__item">
    <div class="card">
      <div class="card__header"></div>
      <div class="card__body"></div>
      <div class="card__footer"></div>
    </div>
  </li>
</ul>

style.css

.item-list { 
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
}

.item-list__item {
  flex: 1;
  min-width: 25%;
  margin: 0 10px 10px 0;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
}
.card__header {
  background-color: #F57F17;
  height: 30px;
}
.card__body {
  background-color: #FBC02D;
  height: 60px;
}

.card__footer {
  background-color: #FFCA28;
  height: 30px;
}


/* Abweichung - Pseudocode */
.card__header.abweichung {
  background-color: #0097A7;
}
.card__body.abweichung {
  background-color: #00ACC1;
}

.card__footer.abweichung {
  background-color: #0097A7;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />