{% extends 'base.html' %}
{% load static %}

{% block optionalParams %}
<style>

html{
		background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		font-family: Arial, Helvetica, sans-serif;
	}

	#page-wrap{
		padding: 10vh;
    
	}

  @media only screen and (max-width: 600px) {
    #page-wrap{
      display: block;
    }
  }
  h1{
      font-size: xx-large;
  }
  p{
      text-align: left;
  }
  @-webkit-keyframes tracking-in-expand {
		0% {
			letter-spacing: -0.5em;
			opacity: 0;
	}
		40% {
			opacity: 0.6;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes tracking-in-expand {
		0% {
			letter-spacing: -0.5em;
			opacity: 0;
		}
		40% {
			opacity: 0.6;
		}
		100% {
			opacity: 1;
		}
	}

	.tracking-in-expand {
		-webkit-animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
		animation: tracking-in-expand 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
		animation-delay: .3s;
	}
    
	@-webkit-keyframes fade-in-bck {
    0% {
        -webkit-transform: translateZ(80px);
                transform: translateZ(80px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        opacity: 1;
    }
    }
    @keyframes fade-in-bck {
    0% {
        -webkit-transform: translateZ(80px);
                transform: translateZ(80px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        opacity: 1;
    }
    }

        .fade-in-bck {
        -webkit-animation: fade-in-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: fade-in-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

  </style>
{% endblock %}
{% block content %}
<div id="page-wrap" >
<section>
	<h1 class="tracking-in-expand">Нашата цел и основни дейности</h1><br><br>
	<p class="fade-in-bck" style="animation-delay: 0.6s;">
		Основната цел на проекта е запознаване с ползите от рециклирането на учениците и подтикването им да започнат да събират разделно боклук.
		Това е сайт, в който може да се качват видеа и снимки как ученици изхвърлят разделно боклуци.<br><br>  За всеки материал получават конкретен брой точки (ел.валута), която обменят в училище за награди.
		За една снимка получават 2 точки, а за едно видео 3 точки.
		</p>
	</section>
	<hr><br>
	<h1 class="tracking-in-expand" style="animation-delay: 0.6s;">Защо да участвам?</h1>
	<p>
	<ul class="tracking-in-expand" class="emoji" style="text-align: left; padding-left: 5%; margin: auto; animation-delay: 0.9s;">
		<li class="tracking-in-expand" style="animation-delay: 1s"> Награден фонд за участие в проекта.</li><br>
		<li class="tracking-in-expand" style="animation-delay: 1.1s"> Наградите се разпределят спрямо натрупаните точки в сайта.</li><br>
		<li class="tracking-in-expand" style="animation-delay: 1.2s;"> Сертификат за участие в извънкласни дейности от името на училището при натрупани минимум 30 точки.</li><br>
		</p>
	</ul>

	<!-- <br>
	<hr>
	<br>
	<h1>Често задавани въпроси</h1><br>
	<ul class="nothing" style="text-align: left; padding-left: 5%; margin: auto;">
		<li class="question"></li>
		<p>test</p>
	</ul> -->

	<br>
	<hr>
	<br>
    <section id="contact" class="fade-in-bck" style="animation-delay: 1.5s;">
	<h1>Имате въпроси?<br><h2>Свържете се с нас!</h2></h1><br>
	
		<a href="https://discord.gg/twDtbKeVXV"><img src="{% static 'home/img/Discord-Logo.png' %}" style="max-width:100px;"></a>
		<a href="mailto://boyan+revaluate@bobokara.com"><img src="{% static 'home/img/mail.png' %}" style="max-width:100px;"></a>
		<a href="https://www.youtube.com/channel/UCIWblGtjXAxwbTMUbhZ_PDQ"><img src="{% static 'home/img/youtube.png' %}" style="max-width:100px;" ></a>
    </section>
</div>
<footer style="bottom: 0; font-size: medium;">Frontend, backend and planning:<br> <a class="footer" href="{{ github }}" style="color:darkgreen">Boyan</a></footer>

    {% endblock %}