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


<div class="header-home">
  <div class="container-info-home">
    <div class="title-header">
      <p>Welcome to Bubo, a sport<br>predictions platform used<br>by professionals.</p>
    </div>

    <div class="learn-more-info">
      <p>Learn more about<br>our compagny</p>
    </div>

    <div class="container-btn-about">
      <a href="{% url 'pages:algo' %}">
        <button type="button" class="btn btn-about">About</button>
      </a>
    </div>
  </div>
</div>

<style>
  .header-home {
    width: 100%;
    background: url("{% static 'img/bg-header.png' %}") no-repeat center;
    -webkit-background-size: cover;
  }
</style>

<div class="container-card-home cch1">
  <div class="card-home c1">
    <a href="#">
      <img src="{% static 'img/RG.png' %}" class="img-card-1">
      <div class="text-card">
        <p class="t1">ROLAND GARROS IS HERE</p>
        <p class="t2">Be the first to get predictions<br>More than 100 matchs</p>
      </div>
      <div class="see-more">
        <a href="#">See more</a>
      </div>
    </a>
  </div>
  <div class="card-home c2">
    <a href="#">
      <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 Content Content Content Content Content
          Content Content</p>
        <p class="t2">Content Content Content Content Content Content Content Content Content Content Content Content
          Content Content</p>
      </div>
    </a>
  </div>
</div>


<div class="card-full-price">
  <div class="card-home c3">
    <a href="#">
      <div class="title-card-3">
        <p class="t1">NEW PACK AVAILABLE</p>
      </div>
      <div class="content-card-3">
        <div class="list-icon">
          <div class="icon-field">
            <img src="{% static 'img/stat.png' %}">
            <span> Statistics</span>
          </div>
          <div class="icon-field">
            <img src="{% static 'img/search.png' %}">
            <span> Search</span>
          </div>
          <div class="icon-field">
            <img src="{% static 'img/gear.png' %}">
            <span> Gear</span>
          </div>
        </div>
        <div class="price-item">
          <div class="container-price">
            <p class="price">$25,99</p>
            <p class="duration">PER MONTHS</p>
          </div>
        </div>
      </div>
      <div class="start-now">
        <a href="{% url 'pages:payement' %}">
          <button type="button" class="btn btn-start-now">START NOW</button>
        </a>
      </div>
    </a>
  </div>
</div>


<div class="container-card-home cch2">
  <div class="card-home c1">
    <a href="#">
      <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 Content Content Content Content Content
          Content Content</p>
        <p class="t2">Content Content Content Content Content Content Content Content Content Content Content Content
          Content Content</p>
      </div>
    </a>
  </div>
  <div class="card-home c2">
    <a href="#">
      <img src="{% static 'img/RG.png' %}" class="img-card-1">
      <div class="text-card">
        <p class="t1">ROLAND GARROS IS HERE</p>
        <p class="t2">Be the first to get predictions<br>More than 100 matchs</p>
      </div>
      <div class="see-more">
        <a href="#">See more</a>
      </div>
    </a>
  </div>
</div>

<style>
  .c3 {
    width: 100%;
    background: url("{% static 'img/bg-card-3.png' %}") no-repeat center;
    -webkit-background-size: cover;
    overflow: hidden;
  }
</style>

<div class="card-full-width">
  <div class="content-card-full">
    <p class="title-card-full">DISCOVER OUR<br>LATEST<br>ALGORITHM</p>
    <p class="text-card-full"><span class="s1">More accurate.</span><br>
      <span class="s2">More powerfull.</span><br>
      <span class="s3">Handier.</span></p>
  </div>

  <div class="check-out">
    <a href="{% url 'pages:about' %}">
      <button type="button" class="btn btn-check-out">Check now</button>
    </a>
  </div>
</div>

<style>
  .card-full-width {
    width: 100%;
    background: url("{% static 'img/bg-card-full-2.png' %}") no-repeat center;
    -webkit-background-size: cover;
    margin-right: 2%;
  }
</style>
{% endblock %}