Untitled

#Зверстайте секцію з планом підписки за прикладом

#HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Планы ежемесячной подписки</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <table class="subscription-plan">
      <thead>
        <tr>
          <th class="chose">Choose your plan</th>
          <th class="economy">Econom</th>
          <th class="basic">Starter</th>
          <th class="advanced">Advanced</th>
          <th class="premium">Professional</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Price</td>
          <td>$8/month</td>
          <td>$10/month</td>
          <td>$20/month</td>
          <td>$30/month</td>
        </tr>
        <tr>
          <td>Amount of space</td>
          <td>5 GB</td>
          <td>8 GB</td>
          <td>10 GB</td>
          <td>50 GB</td>
        </tr>
        <tr>
          <td>Bandwidth</td>
          <td>80 GB/month</td>
          <td>210 GB/month</td>
          <td>630 GB/month</td>
          <td>Unlimeted</td>
        </tr>
        <tr>
          <td>E-mail accounts</td>
          <td>1</td>
          <td>15</td>
          <td>50</td>
          <td>Unlimeted</td>
        </tr>
        <tr>
          <td>MySQL databases</td>
          <td>1</td>
          <td>10</td>
          <td>45</td>
          <td>Unlimeted</td>
        </tr>
        <tr>
          <td>24-h support</td>
          <td>Buy E-mail</td>
          <td>Buy E-mail</td>
          <td>Buy E-mail & buy phone</td>
          <td>Buy E-mail & buy phone</td>
        </tr>
        <tr>
          <td><img src="img/clipart-arrow1.jpg" alt="==>"></td>
          <td><a href="https://www.google.com/" class="subscription-plan__button economy">Start</a></td>
          <td><a href="https://www.google.com/" class="subscription-plan__button basic">Start</a></td>
          <td><a href="https://www.google.com/" class="subscription-plan__button advanced">Start</a></td>
          <td><a href="https://www.google.com/" class="subscription-plan__button premium">Start</a></td>
        </tr>
      </tbody>
    </table>


#CSS

.subscription-plan {
  border-collapse: collapse;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 20px;
  width: 100%;
  background-color: #444343;
  color: #fff;
}

.subscription-plan th,
.subscription-plan td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.subscription-plan th {
  font-weight: bold;
}

.subscription-plan th.chose {
  background-color: #0090ef;
}

.subscription-plan th.economy {
  background-color: #006fb9;
  color: #ffffff;
}


.subscription-plan th.basic {
  background-color: #00568f;
  color: #ffffff;
}

.subscription-plan th.advanced {
  background-color: #003a61;
  color: #ffffff;
}

.subscription-plan th.premium {
  background-color: #00192a;
  color: #ffffff;
}

.subscription-plan__button {
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 20px;
  transition: background-color 0.3s ease}

  .subscription-plan__button.economy {
    background-color: #006fb9;
  }
  .subscription-plan__button.basic {
    background-color: #00568f;
  }
  .subscription-plan__button.advanced {
    background-color: #003a61;
  }

  .subscription-plan__button.premium {
    background-color: #00192a;
  }

  .subscription-plan__button:hover {
    opacity: 0.8;
  }