{% extends "base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/payement.css' %}">

<div class="container-advantages">
  <div class="first-content-payement">
    <div class="title-container">
      <div class="title-payement">
        <span class="light-title">Bubo Premiu<span class="bold-title">m</span></span>
      </div>
      <a>
        <button class="btn btn-primary btn-payement-title">Free trial for a week</button>
      </a>
    </div>
  </div>

  <div class="container-card-payement">
    <div class="card-payement">
      <div class="card-home c2">
        <div class="title-card">
          <p>FEATURE'S TITLE</p>
        </div>
        <div class="text-card-2">
          <p class="t1">Content Content Content Content Content Content Content</p>
          <p class="t2">Content Content Content Content Content Content Content</p>
        </div>
      </div>
      <div class="num-card n1">1</div>
    </div>

    <div class="card-payement">
      <div class="card-home c2">
        <div class="title-card">
          <p>FEATURE'S TITLE</p>
        </div>
        <div class="text-card-2">
          <p class="t1">Content Content Content Content Content Content Content</p>
          <p class="t2">Content Content Content Content Content Content Content</p>
        </div>
      </div>
      <div class="num-card n2">2</div>
    </div>

    <div class="card-payement last-card">
      <div class="card-home c2">
        <div class="title-card">
          <p>FEATURE'S TITLE</p>
        </div>
        <div class="text-card-2">
          <p class="t1">Content Content Content Content Content Content Content</p>
          <p class="t2">Content Content Content Content Content Content Content</p>
        </div>
      </div>
      <div class="num-card n3">3</div>
    </div>
  </div>

  <div class="container-width-advantages">
    <div class="width-advatages">
      <div class="container-num">
        <p class="num-width">4</p>
      </div>
      <div class="text-card-2 t-width">
        <div class="title-width-advantage">
          <p>FEATURE'S TITLE</p>
        </div>
        <p class="t1">Content Content Content Content Content Content Content</p>
        <p class="t2">Content Content Content Content Content Content Content</p>
      </div>
    </div>
  </div>
</div>

<div class="container-package">
  <div class="container-title-package">
    <span class="title-package">Get your pack <br><span id="now">now.</span></span>
  </div>
  <div class="package-choise">
    <div class="container-beginner-pack">
      <div class="package-level bgn">Beginner</div>
      <a href="#">
        <div class="card-price-payement">
          <p id="price">19.99$</p>
          <p id="duration">for a month</p>
        </div>
      </a>
    </div>
    <div class="container-intermediary-pack">
      <div class="package-level int">Intermediary</div>
      <a href="#">
        <div class="card-price-payement">
          <p id="price-2">49.99$</p>
          <p id="duration-2">for 3 month</p>
        </div>
      </a>
    </div>
    <div class="container-professional-pack">
      <div class="package-level pro">Professional</div>
      <a href="#">
        <div class="card-price-payement">
          <p id="price-3">99.99$</p>
          <p id="duration-2">for a year</p>
        </div>
      </a>
    </div>
  </div>
</div>

<style>
  .container-advantages {
    background: url("{% static 'img/bgg-advantagges-3.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }

  .container-package {
    background: url("{% static 'img/bg-price.png' %}") no-repeat center;
    -webkit-background-size: cover;
    padding-bottom: 10%;
  }
</style>


{% endblock %}