{% extends "base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/about.css' %}">
<div id="particles-js">
  <div class="header-about">
    <p class="title-header">ARTIFICIAL <br>NEURAL<br> NETWORK <span class="subtitle-header">ANNs</span></p>
  </div>
</div>

<script src="{% static 'js/particles.js' %}"></script>
<script src="{% static 'js/app.js' %}"></script>


<div class="first-part">
  <div class="container-text-algo">
    <div class="first-container-text">
      <p class="t1">Computing systems vaguely inspired by the biological neural networks that constitute <span
          style="color: #ffcc00">animal brains</span>.
        <br><br>
        An ANN is based on a collection of connected units or nodes called <span style="color: #ffcc00">artificial
          neuron</span>. Each connection neurons can transmit a signal from one to another.</p>
    </div>
    <div class="second-container-text">
      <p class="t1">The artificial neurons that receives the signal can process it and then signal artificial neurons
        connected to it.<br>
        The original goal of the ANN approach was to solve problemes in the <span style="color: #ff8400">same way that a
          human brain would</span>.
        <br><br>
        However, overtime, attention focused on matching specific tasks, leading to deviations from biology.</p>
    </div>
    <div class="third-container-text">
      <div class="ANNs"> ANNs</div>
      <p class="t1-2">
        ANNs have been used on a variety of tasks, including computer vision, speech recognition, machine translation,
        social network filtering, playing board and video games and medical diagnosis.
      </p>
    </div>
  </div>
</div>

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


<div class="header2-about">
  <p class="title2-header">
    <span style="font-family: 'Raleway ExtraBold', sans-serif;">Our Algorithm</span><br>
    <span style="font-family: 'Raleway Medium', sans-serif;">Step by</span><br>
    <span style="font-family: 'Raleway Light', sans-serif;">Step</span></p>
</div>

<style>
  .header2-about {
    width: 100%;
    background: url("{% static 'img/bg-second-part2.png' %}") no-repeat center;
    -webkit-background-size: cover;
    /*background-size: cover;*/
    margin-bottom: 5%;
  }
</style>

<div class="number-step ns-left" style="color: #ff5800;">1.</div>
<div class="step">
  <div class="step-title">
    Data
  </div>
  <div class="step-content">
    <div class="step-text">
      <span class="t1 t3">
        <p>
          Esse quis diligat quemquam stabilis est erunt est usu sollicita
          semper diffluentes cognitam potest est est semper nec pro circumfluere
          diffluentes fiducia locus velit velit usu rerum ipse quam si diligat
          qui est atque atque disputabunt diffluentes nulla neque erunt quis homines
          neque si fides quando abundantia copiis erunt in abundantia hominum semper.
        </p>
      </span>
    </div>
    <div class="img-step">
      <img src="{% static 'img/step-img.png' %}" class="step-img">
      <style>
        .step-img {
          background: url("{% static 'img/img-first-feature.png' %}") no-repeat center;
          -webkit-background-size: cover;
        }
      </style>
    </div>
  </div>
</div>

<div class="number-step ns-right" style="color: #ff5800;">.2</div>
<div class="step">
  <div class="step-title">
    Data
  </div>
  <div class="step-content">
    <div class="step-text">
      <span class="t1 t3">
        <p>
          Esse quis diligat quemquam stabilis est erunt est usu sollicita
          semper diffluentes cognitam potest est est semper nec pro circumfluere
          diffluentes fiducia locus velit velit usu rerum ipse quam si diligat
          qui est atque atque disputabunt diffluentes nulla neque erunt quis homines
          neque si fides quando abundantia copiis erunt in abundantia hominum semper.
        </p>
      </span>
    </div>
    <div class="img-step">
      <img src="{% static 'img/step-img.png' %}" class="step-img">
      <style>
        .step-img {
          background: url("{% static 'img/img-first-feature.png' %}") no-repeat center;
          -webkit-background-size: cover;
        }
      </style>
    </div>
  </div>
</div>

<div class="number-step ns-left" style="color: #ff5800;">3.</div>
<div class="step">
  <div class="step-title">
    Data
  </div>
  <div class="step-content">
    <div class="step-text">
      <span class="t1 t3">
        <p>
          Esse quis diligat quemquam stabilis est erunt est usu sollicita
          semper diffluentes cognitam potest est est semper nec pro circumfluere
          diffluentes fiducia locus velit velit usu rerum ipse quam si diligat
          qui est atque atque disputabunt diffluentes nulla neque erunt quis homines
          neque si fides quando abundantia copiis erunt in abundantia hominum semper.
        </p>
      </span>
    </div>
    <div class="img-step">
      <img src="{% static 'img/step-img.png' %}" class="step-img">
      <style>
        .step-img {
          background: url("{% static 'img/img-first-feature.png' %}") no-repeat center;
          -webkit-background-size: cover;
        }
      </style>
    </div>
  </div>
</div>
{% endblock %}