{% extends 'base.html' %}
{% block title %} Арка | Главная {% endblock %}
{% load static %}

{% block styles %}
    <style>
    main {
        width: 90%;

        margin-left: 8%;

        font-size: 30px;
        font-weight: 900;
    }

    main > h1{
        margin-top: 7%;
        margin-left: 10%;
        width: 60%;
    }

    #intro-wrapper {
        display: flex;
        position: absolute;
        z-index:-1;
        top: 0;
        left: 0;
        right: 0;
        justify-content: right;
    }

    #intro-wrapper > img{
        width: 40%;
    }

    .buttons {
        /* вот тут был display: inline */
        display: flex;
        flex-direction: row ;
        width: 40%;
        height: 10%;
        margin-left: 5%;
        margin-top: 5%;

    }

    .buttons > a {
        color: #eee;
        background: var(--brand-color);

        padding: 3% 5%;
        margin-left: 5%;

        text-decoration: none;
        font-size: 20px;

        border-radius: 12px;

    }

    .slogo {
        box-sizing: border-box;
        display: flex;
        margin-left: 10%;

        margin-bottom: 10%;

        width: 35%;
        height: 10%;
    }

    .slogo > h3 {

         background: rgba(175, 162, 255, 0.06);
         backdrop-filter: blur(5px);
         color: var(--brand-color);
         font-weight: 800;
         font-size: 20px;
         line-height: 27px;

         border-radius: 24px;

         padding: 5% 8%;
         font-style: normal;


    }

    #slogo-cube, #slogo-arc {
        z-index: -1;
        position: absolute;
    }

    #slogo-cube {
        width: 59px;
        height: 66px;
        left: 15%;
        top: 539px;

        transform: rotate(18.48deg);
    }

    #slogo-arc {
        width: 53px;
        height: 49px;
        left: 47%;
        top: 423px;

        transform: rotate(5.86deg);
    }

    </style>
{% endblock %}

{% block content %}

    <div id="intro-wrapper">
        <img src="{% static 'images/intro.webp' %}" alt="">
    </div>

    <h1>Создай объявление и получи ремонт с гарантией качества</h1>

    <div class="slogo">
        <img id="slogo-cube" src="{% static 'images/cube.png' %}" alt="">
        <h3>Здесь вы найдёте проверенного исполнителя или заказчика под любую вашу задачу и профиль</h3>
        <img id="slogo-arc" src="{% static 'images/arc.png' %}" alt="">
    </div>

    <div class="buttons">
        <a href="{% url 'index' %}">Создать заказ</a>
        <a href="{% url 'index' %}">Стать исполнителем</a>
    </div>

    <a href="{% url 'user-agreement' %}">Пользовательское соглашение</a>

{% endblock %}