pentest process

by linoskoczek

HTML

<table class="pentest-process">
<tr>
  <td>
    Analiza
  </td>
  <td>
    <ul>
      <li>Jaki test da najwięcej korzyści?</li>
      <li>Jakie są największe ryzyka?</li>
      <li>Które komponenty są najbardziej krytyczne?</li>
    </ul>
  </td>
</tr>
<tr>
  <td><div class="arrow down"></div></td>
</tr>
<tr>
  <td>
    Wycena
  </td>
  <td>
    <ul>
      <li>Ile czasu trzeba poświęcić na test?</li>
      <li>Na co poświęcić najwięcej uwagi?</li>
    </ul>
  </td>
</tr>
<tr>
  <td><div class="arrow down"></div></td>
</tr>
<tr>
  <td>
    Test
  </td>
  <td><i>Zespół AFINE szuka błędów bezpieczeństwa w Twoim rozwiązaniu...</i></td>
</tr>
<tr>
  <td><div class="arrow down"></div></td>
</tr>
<tr>
  <td>
    Raport
  </td>
  <td>
    <ul>
      <li>Zebranie znalezionych zagrożeń.</li>
      <li>Przedstawienie środków naprawczych i zaleceń.</li>
    </ul></td>
</tr>
<tr>
  <td><div class="arrow down"></div></td>
</tr>
<tr>
  <td>
    Poprawki
  </td>
  <td>
    <ul>
     <li>Wdrażasz poprawki korzystając z naszych rekomendacji.</li>
     <li>Weryfikujemy, czy wprowadzone zmiany <u>skutecznie</u> usuwają zagrożenie.</li>
    </ul>
  </td>
</tr>
<tr>
  <td><div class="arrow down"></div></td>
</tr>
</table>

CSS

.pentest-process tr td:first-child {
  text-align: center;
}

.pentest-process tr:nth-child(odd) td:first-child {
  text-transform: uppercase;
  border-radius: 15px;
  background: linear-gradient(90deg, #d04114 0%, #db6016 45%, #d13815 100%);
  color: #FFF;
  height: 100px;
  min-width: 200px;
}

.pentest-process tr td:nth-child(2) ul {
  padding-left: 15px;
}

.pentest-process tr td:nth-child(2) {
  padding-left: 30px;
}

.arrow {
  margin: 30px auto;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}