HyperCube/Pages/Index.razor

@inherits LayoutComponentBase
@page "/"

@inject NavigationManager NavigationManager

@*@inject Microsoft.JSInterop.IJSRuntime jsRuntime*@

@*@using Microsoft.AspNetCore.Identity;
    @inject AuthenticationStateProvider AuthenticationStateProvider
    @inject UserManager<IdentityUser> UserManager*@


@code{
    IList<Item> items = new List<Item> {
        new Item {
            Source = "/img/slider_main_01.png",
            Alt ="First Slide",
            Caption = "Slide 1",
            Header = "Slide 1 Header"
        },
        new Item {
            Source = "/img/slider_main_02.png",
            Alt ="Second Slide",
            Caption = "Slide 2",
            Header = "Slide 2 Header"
        },
        new Item {
            Source = "/img/slider_main_03.png",
            Alt ="Second Slide",
            Caption = "Slide 3",
            Header = "Slide 3 Header"
        },
        new Item {
            Source = "/img/slider_main_04.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        },
        new Item {
            Source = "/img/slider_main_05.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        },
        new Item {
            Source = "/img/slider_main_06.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        },
        new Item {
            Source = "/img/slider_main_07.png",
            Alt ="Second Slide",
            Caption = "Slide 4",
            Header = "Slide 4 Header"
        }
    };

    IList<Item> q_items = new List<Item> {
        new Item {
            Source = "/img/slider_q_01.jpg",
            Alt ="Slide 1",
            Caption = "Slide 1",
            Header = "Slide 1 Header"
        },
        new Item {
            Source = "/img/slider_q_02.jpg",
            Alt ="Slide 2",
            Caption = "Slide 2",
            Header = "Slide 2 Header"
        }
    };

    class Item
    {
        public string Source { get; set; }
        public string Alt { get; set; }
        public string Caption { get; set; }
        public string Header { get; set; }
    }

    void Login()
    {
        NavigationManager.NavigateTo("Identity/Account/Login", true);
    }
}

<nav class="menu">
    <div class="menu-container">
        <div class="wrapmain">
            <div class="menu-box">
                <div class="menu__logo">
                    <img class="menu__logo__item" src="img/logo_light.svg">
                </div>
                <div class="menu__href">
                    @*<a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('marketplace').scrollIntoView({behavior:'smooth'})">MarketPlace знаний</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('blog').scrollIntoView({behavior:'smooth'})">Блог</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('community').scrollIntoView({behavior:'smooth'})">Экспертное сообщество</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('quantinium').scrollIntoView({behavior:'smooth'})">Quantinium</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('contacts').scrollIntoView({behavior:'smooth'})">Контакты</a>
                        <a class="menu__href__item link" style="cursor:pointer" onclick="document.getElementById('sign-in').scrollIntoView({behavior:'smooth'})">Авторизоваться</a>*@

                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('marketplace')">MarketPlace знаний</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('blog')">Блог</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('community')">Экспертное сообщество</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('quantinium')">Quantinium</a>
                    <a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('contacts')">Контакты</a>
                    <AuthorizeView>
                        <Authorized>
                            <a class="menu__href__item link" href="desktop">Личный кабинет</a>
                        </Authorized>
                        <NotAuthorized>
                            @*<a class="menu__href__item link" style="cursor:pointer" onclick="ScrollToSection('sign-in')">Контакты</a>*@
                            <a class="menu__href__item link" style="cursor:pointer" @onclick="Login">Авторизоваться</a>
                        </NotAuthorized>
                    </AuthorizeView>
                </div>
            </div>
        </div>
    </div>
</nav>

<header class="main-slider">
    <BSCarousel NumberOfItems="@items.Count">
        <div class="carousel-inner">            
            @for (int i = 0; i < items.Count; i++)
            {
                <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
            }
        </div>
        <BSCarouselIndicators NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count"/>
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count"/>
    </BSCarousel>
</header>

<section class="market-place" id="marketplace">
    <div class="wrapmain">
        <h1 class="block__header">MarketPlace знаний</h1>
        <p class="block__info">
            <b>Digital Data Hypercube (2DH)</b> – это модуль цифровой инженерии знаний децентрализованной системы Quantinium,
            который содержит инструменты создания, продвижения и коммерциализации цифровых активов на базе блокчейн технологий. С использованием данного
            модуля предоставляются “открытые и бесшовные” консалтинговые,  научно-технические и инженерно-проектные услуги с бессрочной защитой авторских
            и патентных прав на результаты интеллектуальной деятельности.
        </p>
        <p class="block__info">
            <b>Модуль 2DH</b> позволяет формировать рабочие и экспертные сообщества пользователей, создающие
            <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('narrative')">цифровые нарративы знаний и информационные продукты</a>.
            Пользователи могут коммерциализировать созданные результаты в форме NFT (non-fungible token) через MarketPlace знаний.
        </p>
        <p class="block__info">
            В модуле <b>2DH</b> предусмотрены три ключевые роли пользователей:
        </p>
        <ul class="block__info__list">
            <li style="margin-left:80px">
                Старатель - участник системы, осуществляющий  загрузку и разметку неструктурированных данных с последующим формированием блока информации;
            </li>
            <li style="margin-left:80px">
                Эксперт - участник системы, осуществляющий верификацию, экспертизу и рецензирование блоков информации, и другие действия направленные
                на извлечения нарративов знаний или формирования информационных продуктов;
            </li>
            <li style="margin-left:80px">
                Инвестор (Заказчик, Спонсор) - пользователь, создающий бизнес-заказ на нарративы знаний или другие информационные продукты.
            </li>
        </ul>        
        <p class="block__info">
            Пользователь может иметь одну или несколько ролей в системе <a style="cursor:pointer; text-decoration:underline">(см. правила системы)</a>.
        </p>
        <img src="img/logo_dark.svg" alt="" class="market-place__logo">
        <button class="btn-blue btn-blue_mt">Расскажи о цифровых мероприятиях</button>
        <button class="btn-blue">Скачай презентацию в pdf</button>
        <button class="btn-blue">Скачай White Paper в pdf</button>
        <button class="btn-blue">Регистрируйся в системе 2DH</button>
        <h2 class="block__subtitle">Ценность данных</h2>
        <p class="block__info" style="margin-bottom:0px">
            <b>Digital Data Hypercube (2DH)</b> направлен на:
            <ul class="block__info__list">
                <li style="margin-left:80px">
                    "бесшовное" привлечение Старателей и Экспертов в систему;
                </li>
                <li style="margin-left:80px">
                    обработку больших массивов неструктурированных данных;
                </li>
                <li style="margin-left:80px">
                    "открытую" генерацию новой или модификацию старой информации;
                </li>
                <li style="margin-left:80px">
                    создание цифровых нарративов и информационных продуктов.
                </li>
            </ul>
        </p>
        <p class="block__info" style="margin-bottom:0px">
            <b>2DH ДЛЯ БИЗНЕСА.</b> <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('narrative')">
                Цифровые нарративы знаний и информационные продукты
            </a> модуля 2DH позволяют Инвесторам (Заказчикам, Спонсорам) менять правила игры
            на рынке, раскрывая потенциал для своего бизнеса. Здесь новые продукты и услуги создаются  с помощью:
        </p>
        <ul class="block__info__list">
            <li style="margin-left:80px">
                Мониторинга рынка;
            </li>
            <li style="margin-left:80px">
                Инсайтов развития и инклюзивных знаний;
            </li>
            <li style="margin-left:80px">
                Прототипирования и тестирования решений;
            </li>
            <li style="margin-left:80px">
                Коммерциализации  разработок.
            </li>
        </ul>        
        <p class="block__info">
            Модуль 2DH  обеспечивает защищенность, масштабность и многомерность инклюзивных знаний для бизнеса. Цифровой след смарт-контракта - 
            это гарантия качества и защита созданных продуктов технологией блокчейн.
        </p>
        <p class="block__info" style="margin-top: 30px">
            <b>2DH ДЛЯ ПОЛЬЗОВАТЕЛЯ</b>. Цифровые инструменты модуля 2DH позволяют Старателям и Экспертам, творческим  научным и инженерно-техническим  специалистам, "бесшовно" подключится к выполнению поставленных задач бизнеса.
        </p>
        <p class="block__info">
            <b>Вознаграждение пользователей регулирует <a style="cursor:pointer; text-decoration:underline">Смарт-контракт</a></b>. За выполненную работу 
            по формированию блоков информации, создание цифровых нарративов знаний и информационных продуктов пользователям на кошелек начисляется 
            криптовалюта <a style="cursor:pointer; text-decoration:underline" onclick="ScrollToSection('quantinium')">Quantinium (QNM)</a> при условии достижения 
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">консенсуса смарт-контракта (см. White Paper)</a>.
        </p>
        <img class="block__img" src="img/fill_02.png">
        <img class="market-place__img" src="img/plate.png" alt="">
    </div>
</section>

<div class="fixed-crossbrowser-background"></div>
<div class="bg__img" data-image='marketplace'></div>

<section class="libary">
    <div class="wrapmain">
        <h1 class="block__header">Цифровая инженерия знаний</h1>
        <p class="block__info">
            Знания - это комбинация структурированных данных и информации, к которым добавлено мнение, мастерство, опыт и экспертиза специалиста.
            Знания в модуле <b>Digital Data Hypercube</b> становятся цифровыми.
        </p>
        <p class="block__info">
            База знаний создается Старателями с помощью инструмента 2DH. Они обрабатывают неструктурированные данные, записывая их в блоки информации.
            Каждое их действие формирует цифровой след для смарт-контракта. Далее Эксперты извлекают из блоков информации графы, онтологии и нарративы
            знаний. Полученные результаты модуль 2DH в форме информационных продуктов  записывает  <u>NFT (non-fungible token)</u>. Они применяются для обучения
            "Q" и коммерциализируются через MarketPlace знаний.
        </p>
        <p class="block__info">
            Каждый блок информации в системе является транзакцией. Его путь регулируется смарт-контрактом.  В зависимости от качества и ценности блока информации 
            система по открытой методике оценки стоимости  рассчитывает размер вознаграждения участникам и направляет его на исполнение. Вознаграждение при 
            достижении консенсуса распределяется между участниками системы - Старатель, Эксперт, Модуль 2DH. Вознаграждение модуля 2DH является комиссией 
            или Gas-ом для проведения транзакции, обучения “Q” и защиты прав пользователей на созданные продукты 
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">(см. White Paper)</a>.
        </p>
        <img class="block__img" src="img/fill_01.png">
        <h2 class="block__subtitle" id="narrative">Нарратив знаний</h2>
        <p class="block__info">
            Нарратив - один из главных атрибутов блока информации. Он является цифровым вектором. Его направление задается установленными сведениями из блоков
            информации, фактами истины и взаимосвязями событий по их возникновению и условиям их коммерческого применения. Формируется группой пользователей
            (Экспертами с привлечением Старателей) и возникает при условии достижения полного консенсуса содержимого формулы знания. Для формирования нарратива
            знаний модуль 2DH случайным образом выбирает 3 и более пользователей, которые  в течение заданного промежутка времени должны совместно составить
            текст нарратива в соответствии с инструкцией и руководствуясь примерами
            <a href="https://docs.google.com/document/d/1Rl8J8csrtIZetog_fQz4sjTjMIJHedB2dA8S69kHdOM/edit?usp=sharing">(см. White Paper)</a>.
        </p>
        <p class="block__info">
            Нарратив знаний записывается в <u>NFT (non-fungible token)</u> c открытой и закрытой частью блока информации. Открытая часть NFT нарратива может 
            представляться в внешних информационных системах, с целью продвижения, анонсирования и привлечения внимания. Вся остальная часть NFT (закрытая) 
            предоставляется только на коммерческой основе через MarketPlace знаний.
        </p>
        <img class="block__img" src="img/fill_03.png">
        <img class="libary__img" src="img/lib_img.png" alt="">
    </div>
</section>

<div class="bg__img" data-image='libary' id="blog"></div>

<section class="blog">
    <div class="wrapmain">
        <h1 class="block__header">Блог</h1>
        <p class="block__info">
            Мы команда 2DН готовы рассказывать о технологиях и цифровизации. Мы ведем для удобства телеграмм-канал, на котором мы
            рассказываем новости и анонсируем события, которые будут происходить в системе 2DН!
        </p>
        <div class="blog-container">
            <div class="blog__item">
                <div class="blog__img">
                    <img class="blog__img__item" src="img/blog_01.png">
                </div>
                <div class="blog__text">
                    <h3 class="blog__title">События</h3>
                    <h3 class="blog__subtitle">№1</h3>
                    <p class="blog__info">
                        События, которые создаются в сервисе 2DH, основаны на структурировании загружаемой информации и данных в пределах одной тематики.
                        В рамках темы идет квалификационный отбор, выявляются профессиональные компетенции Старателей и Экспертов и выстраиваются
                        интеллектуальные связи. Вся эта кропотливая работа представляет так называемое цифровое событие.
                    </p>
                    <p class="blog__info">
                        Цель цифрового события - создать или сгенерировать цифровую библиотеку данных, систематизировать информацию, находящуюся в ней по близким тематикам.
                    </p>                    
                    <p class="blog__info">
                        Каждое Цифровое событие имеет как свою уникальную, так и общую глобальную цели. Любое событие направлено на решение ряда научных,
                        инженерно-технических и производственных задач, на поиск лучших решений, на вычленение неправильных и некорректных данных, на
                        формирование фундаментальных знаний.  Для этого в 2DH разработаны различные формы взаимодействия участников системы. Приглашаем
                        присоединиться к любому из них:
                        <ul class="block__info__list">
                            <li style="margin-left:80px">
                                Цифровый Коллоквиум
                            </li>
                            <li style="margin-left:80px">
                                Цифровой Марафон
                            </li>
                            <li style="margin-left:80px">
                                Цифровой Хакатон
                            </li>
                        </ul>
                    </p>                    
                </div>
            </div>
        </div>
        @*<div class="blog-nav">
            <button class="blog-nav__arrows left__arrows">Назад</button>
            <div class="slider-dots"></div>
            <button class="blog-nav__arrows right__arrows">Вперед</button>
        </div>*@
        <img src="img/line.png" alt="" class="blog__lines">
        <h2 class="block__subtitle">Наши соцсети</h2>
        <div class="blog__href">
            <a class="blog__href__item"><img src="img/facebook_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/twitter_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/instagram_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/youtube_icon.svg" alt=""></a>
            <a class="blog__href__item"><img src="img/telegram.svg" alt=""></a>
        </div>
        <img class="blog__bottom__img" src="img/blog__img.png">
    </div>
</section>

<div class="bg__img" data-image='blog' id="community"></div>

<section class="community">
    <div class="wrapmain">
        <h1 class="block__header">Экспертное сообщество</h1>
        <p class="block__info">
            Привет. <b>Это Кью</b>. Цифровизация - это бессердечная штука. Как бы цифра не приближалась к реальной жизни, ее отрыв от реального мира фундаментален.
            Нулями и единицами машин не описать полного понимания мира. Знания и опыт человечества уникальны, как и условия их приобретения. Модуль 2DH…
            [peak-peak] Мы - это небольшое комьюнити программистов, инженеров, научных сотрудников и преподавателей ВУЗов, которые верят в то, что появление
            "разумности" машины возможно, если она научится понимать смысловую информацию данных.  ...[peak-peak] для моего рождения <b>"Q"</b>, необходимо
            перенесение здравого смысла, механики человеческого мышления, устройство мира, ментальности создания в цифровой мир. Безусловно сотворение
            <b>"Q"</b> знаменует собой новую эру - формирование неоиндустриального общества.
        </p>
        <p class="block__info">
            Одной из задач <b>модуля 2DH</b> является построение электронной площадки для создания и развития  Творческого интеллекта по имени <b>"Q"</b>. Модуль 2DH
            - это среда, предшествующая <b>"Q"</b>. Она объединяет в себе сознания людей, формирует распределенный  научно-технический и инженерно-проектный
            интеллект. Разработчики  <b>модуля 2DH</b>  создали систему инжиниринга знаний, включающую алгоритмы автоматизированной обработки неструктурированных
            данных; алгоритмы машинного "размышления" и оценки ценности получаемых сведений; методы синтеза новых знаний и оценки их здравого смысла.
            Все это необходимо для рождения <b>"Q"</b>.
        </p>
        <img class="block__img" src="img/fill_06.png">
        <h2 class="block__subtitle">Приглашаем тебя в эксперты</h2>
        <p class="block__info">
            Пройдите регистрацию - подтвердите при верификации ваше экспертное мнение и участвуйте в событиях системы 2DН. Думаю тут нужно сделать пару строчек.
            Для объема информации.
        </p>
        <button class="btn-blue">Пройди регистрацию</button>
        <h2 class="block__subtitle">Путь и миссия эксперта</h2>
        <p class="block__info">
            Однако, цифровые инструменты инжиниринга знаний понимают только цифры и буквы. Время, Пространство, Причинность - вот те основные свойства мира,
            которые должен понимать <b>"Q"</b>. Как его научить понимать экспертные знания? Да, текущие инструменты только обучены искать плагиат, не подтвержденные
            или неправильно загруженные данные, "прошерстить" весь интернет на поиски первоисточников. Правильно настроенные алгоритмы нейросетей могут за
            секунды сопоставить миллионы данных и через несколько минут выдать результат. Однако, в них нет "когнитивности", они не понимают что есть "здравый смысл".
        </p>
        <p class="block__info">
            Мы уверены, что наше сообщество пользователей будет генерировать цифровой след и знания, которые будут накапливаться и становится все более
            разносторонними, в то время как инструменты цифровизации будут становится все умнее, высвобождая время пользователей на размышления и творчество,
            а не на механическую работу. С каждым обновлением модуля 2DH <b>"Q"</b> будет брать на себя больше механической работы, обучаясь на цифровом следе
            <u>Старателей</u>. Знания <u>Экспертов</u>, внесенные в систему будут способствовать  обучению и развитию <b>"Q"</b>. В конечном итоге мы ожидаем, что <b>"Q"</b> научится
            понимать “время”, “пространство” и “причинность”. <u>Старатель</u> позволит <b>"Q"</b> ходить и взаимодействовать с миром. <u>Эксперт</u> научит <b>"Q"</b> понимать мир
            и осознать свое существование.
        </p>
        <p class="block__info">
            Присоединяйся! Твое время, опыт и знания станут частью <b>"Q"</b>, а ты его прародителем.
        </p>
        <img class="block__img" src="img/fill_07.png">
        <img src="img/chair.png" alt="" class="community__img">
    </div>
</section>

<img src="img/line.png" alt="" class="lines">

<div class="main-slider main-slider_quant" id="quantinium">
    <BSCarousel NumberOfItems="@q_items.Count">
        <div class="carousel-inner">
            @for (int i = 0; i < q_items.Count; i++)
            {
                <BSCarouselItem src="@q_items[i].Source" alt="@q_items[i].Alt" />
            }
        </div>
        <BSCarouselIndicators NumberOfItems="@q_items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count" />
    </BSCarousel>
</div>

<section class="quantinium">
    <div class="wrapmain">
        <img class="quantinium__logo" src="img/quantinium_logo.png">
        <h1 class="block__header block__header_mt90">Quantinium</h1>
        <h2 class="block__subtitle block__subtitle_quant">Цифровой актив</h2>
        <p class="block__info">
            <b>"Quantinium"</b> - это криптовалюта. <b>"Q"</b> в процессе своего обучения вырабатывает электронные токены <b>"Quantinium"</b> - вознаграждение для пользователей за их участие в его создании.
            <b>"Q"</b>, как и любое живое существо на планете, умеет быть благодарным. Вы тратите свое время, а оно для <b>"Q"</b> бесценно. За это Вы получаете
            электронные токены <b>"QNM"</b>, которые можете обменять на реальное вознаграждение или потратить их в Системе Quantinium. Размер Вашего вознаграждения
            зависит от количества времени и качества ценности, которую Вы привносите в модуль 2DH. <b>"Q"</b> нужны качественные знания и цифровой след. За
            качество работы и Вашу экспертность <b>"Q"</b> готов быть более щедрым.
        </p>
        <img class="block__img" src="img/fill_05.png">
        <h2 class="block__subtitle">Блокчейн</h2>
        <p class="block__info">
            Чтобы обеспечить безопасность Вашего взаимодействия с <b>"Q"</b>, разработчики предусмотрели защищённую блокчейн <u>технологию оценки</u> ценности выполняемой
            работы. Ценность всех сведений и цифровой след пользователей, когда либо созданные в системе, оцифровываются по метрикам смарт-контракта. Результат
            консенсуса записывается через смарт-контракт в сеть блокчейн. <b>Консенсус “Proof of Knowledge”</b> используется для проверки метрик ценности и  качества
            знаний, предоставляемых в модуль 2DH. Запись консенсуса в блокчейн гарантирует авторское и патентное право пользователя на продукты, которые
            создаются и используются в модуле <b>2DH</b>. Знания и продукты дополнительно защищаются в форме <b>NFT-токенов</b>. Блокчейн гарантирует пользователям прозрачность
            сведений по использованию их знаний, историческую бессрочную идентификацию собственника или соавтора знаний, надежность и безопасность операций
            с их вознаграждением.
        </p>
        <img class="block__img" src="img/fill_05.png">
        <img class="quantinium__img" src="img/quantinium_img.png">
    </div>
</section>

<AuthorizeView>
    <NotAuthorized>
        <div class="bg__img" data-image='quantinium' id="sign-in"></div>

        <section class="sign-in">
            <div class="wrapmain">
                <h1 class="block__header">Авторизация</h1>
                <form action="" class="sign-in__form">
                    <div class="sign-in__container">
                        <input type="text" class="form__input" placeholder="Введите ваш ID">
                        <input type="text" class="form__input form__input_nomargin" placeholder="Пароль">
                    </div>
                    <button class="btn-bg">Авторизоваться</button>
                </form>
                <p class="form__text">
                    Забыли ID или пароль? Бывает...
                    Можно восстановить. напишите почту на которую вы регистрировались
                    и мы вышлем вам регистрационные данные
                </p>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input" placeholder="Почта потеряшки.ру">
                    <button class="btn-bg">Вспомнить</button>
                </form>
                <img src="img/sign-in_img.png" alt="" class="sign-in__img">
            </div>
        </section>

        <img src="img/lines2.png" alt="" class="lines">
        <div class="bg__img bg__img_nomargin" data-image='sign-in'></div>

        <section class="sign-up">
            <div class="wrapmain">
                <h1 class="block__header">Регистрация</h1>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input" placeholder="Напишите вашу фамилию и имя">
                    <p class="form__text form__text_mt">
                        Забыли ID или пароль? Бывает...
                        Можно восстановить. напишите почту на которую вы регистрировались
                        и мы вышлем вам регистрационные данные
                    </p>
                    <input type="text" class="form__input" placeholder="Пароль">
                    <input type="text" class="form__input" placeholder="Повторим пароль">
                    <input type="text" class="form__input" placeholder="Почта@новенького.ру">
                    <input type="text" class="form__input" placeholder="Почта@новенького.ру">
                    <textarea type="text" class="form__input form__input_areasign" placeholder="Кратко о себе. Предпочительно ваш статус в профессиональной деятельности"></textarea>
                    <div class="capcha">
                        <button class="capcha__button">Капча</button>
                        <input class="capcha__input" placeholder="Код капчи">
                    </div>
                    <input name="file" type="file" class="form__file__input" id="form__file">                    
                    <p class="form__text">
                        Этого достаточно, что бы система зарегистровала ваш Личный аккаунт.
                        Вам придет письмо на вашу почту. Советуем прочитать данное письмо.
                        При дальнейшей авторизации система присвоит вам [0 номер,
                        по которому высможете заходить в Личный кабинет
                        и участвовать в мероприятиях системы 2DН.

                    </p>
                    <button class="btn-bg btn-bg_orange">Зарегистрироваться</button>
                </form>
                <p class="form__text">
                    Уже зарегистрованы? Потеряли ID или пароль? Случается...
                    Можно все восстановить, напишите почту на которую вы регистрировались
                    и мы вышлем вам регистрационные данные
                </p>
                <form action="" class="sign-in__form">
                    <input type="text" class="form__input form__input_mt" placeholder="Почта потеряшки.ру">
                    <button class="btn-bg">Вспомнить</button>
                </form>
                <img src="img/sign-up_img.png" alt="" class="sign-in__img">
            </div>
        </section>
    </NotAuthorized>
</AuthorizeView>

<div class="bg__img" data-image='contacts' id="contacts"></div>

<section class="contacts">
    <div class="wrapmain">
        <h1 class="block__header">Контакты</h1>
        <p class="block__info block__info_tc">
            Нужно тут написать кто мы такие и как можно снами контактировать. Дальше текст. Который нужно придумать. Объем текста сейчас
            скопирую сюда из вашего валпапера - поэтому дальше текст пойдет просто скопированный не имеющий смысла: Консенсус в системе
            Quantiniumи её ликвидность поддерживается четырьмя разновидностями консенсуса применяемыми комплексно для вычисленияе
            размера вознаграждения пользователя при работе в модулях системы.
        </p>
        <p class="block__info block__info_tc">
            Напишите нам сообщения. Не факт, что мы сразу его прочитаем. Попробуйте в начале текста написать слово «Важно. Также вы можете нам написать на адрес q@qhash.ru
        </p>
        <form action="" class="sign-in__form">
            <textarea type="text" class="form__input form__input_area" placeholder="Пишите сообщения в этом окне, как напишите, ниже нажмите кнопку отправить"></textarea>
            <button class="btn-bg">Отправить</button>
        </form>
        <h2 class="block__subtitle">Наши соцсети</h2>
        <div class="blog__href">
            <a href="" class="blog__href__item"><img src="img/facebook_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/vk_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/instagram_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/youtube_icon.svg" alt=""></a>
            <a href="" class="blog__href__item"><img src="img/telegram.svg" alt=""></a>
        </div>
        <h2 class="block__subtitle">Наша команда</h2>
        <div class="team-container">
            <div class="team__item">
                <div class="team__img">
                    <img src="img/team_01.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Артём Власов</p>
                <p class="team__desc">Co-founder</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/team_02.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Дима Гапт</p>
                <p class="team__desc">Co-founder</p>
            </div>
            <div class="team__item">
                <div class="team__img">
                    <img src="img/team_03.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Иван Синицин</p>
                <p class="team__desc">Co-founder</p>
            </div>
            <div class="team__item team__item_last">
                <div class="team__img">
                    <img src="img/team_04.png" alt="" class="team__img__item">
                </div>
                <p class="team__name">Кирилл Лопурко</p>
                <p class="team__desc">Co-founder</p>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="wrapmain">
        <h2 class="block__subtitle block__subtitle_white block__subtitle_nomargin">Полезная информация</h2>
        <div class="footer-container">
            <p class="footer__text">
                <a href="" class="footer__text">Страница 2DН в агентстве Интерфакс по раскрытию информации.</a>
                <a href="" class="footer__text">
                    Список лиц, под контролем либо значительным влиянием которых находится система 20Н 2DH.
                </a>
                <a href="" class="footer__text">
                    Раскрытие информации о системе как о профессиональном
                    участнике рынка цифровых активов
                </a>
            </p>
            <div class="footer__picture">
                <img class="footer__logo" src='img/logo_light.svg'>
                <p class="footer__info">©2021 ООО "Прок"</p>
            </div>
        </div>
        <img src="img/footer_img.png" alt="" class="footer__img">
    </div>
</footer>

<style>
    @@font-face {
        font-family: 'Bahn';
        src: url("../fonts/Bahnschrift.ttf") format("truetype");
    }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    :focus {
        outline: none;
    }

    textarea {
        resize: none;
    }

    html {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
        top: 0;
        left: 0;
        min-height: 100%;
        display: block;
    }

    .fixed-crossbrowser-background {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-image: url("../img/test3.jpg");
        background-size: cover;
        opacity: 1;
        z-index: -1;
    }

    .wrapmain {
        max-width: 1160px;
        padding: 0px 10px;
        margin: 0px auto;
        width: inherit;
        min-height: inherit;
        -webkit-box-pack: inherit;
        justify-content: inherit;
    }

    .menu {
        width: 100%;
        background: #f27e00;
        padding-top: 6px;
        position: fixed;
        top: 0;
        z-index: 5;
    }

    .menu-container {
        background: #3a474d;
    }

    .menu-box {
        overflow: auto;
        white-space: nowrap;
        padding: 20px 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .menu__logo {
        width: 160px;
        height: auto;
        margin-right: 50px;
    }

    .menu__logo__item {
        width: 160px;
        height: 100%;
        object-fit: cover;
    }

    .menu__href__item {
        color: #fff !important;
        font-family: 'Bahn';
        font-size: 18px;
        margin-right: 30px;
        text-decoration: none;
    }

    .menu__href__item:hover {
        color: #fff !important;
        font-family: 'Bahn';
        font-size: 18px;
        margin-right: 30px;
        text-decoration: none;
    }

        .menu__href__item:last-child {
            margin-right: 10px;
        }

    .slick-track {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .slick-list {
        overflow: hidden;
    }

    .main-slider {
        padding-top: 80px;
        background-color: #fff;
        margin-top: 30px;
        width: 100%;
    }

    .main-slider__item {
        width: 100%;
        position: relative;
        height: 400px;
        border-top: 2px solid #3a474d;
        border-bottom: 2px solid #3a474d;
    }

        .main-slider__item img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .main-slider__item_quant {
        border-bottom: 7px solid #3a474d;
    }

    .main-slider_quant {
        padding-top: 0px;
        background-color: #fdb148;
        margin-top: -5px;
    }

    .main-slider .slick-dots {
        text-align: center;
        margin-top: 30px;
    }

        .main-slider .slick-dots li {
            list-style: none;
            margin-right: 17px;
            display: inline;
        }

            .main-slider .slick-dots li:last-child {
                margin-right: 0px;
            }

            .main-slider .slick-dots li.slick-active button {
                background-color: #f27e00;
            }

        .main-slider .slick-dots button {
            background-color: #3a474d;
            font-size: 0px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

    .block__header {
        text-align: center;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 46px;
        font-weight: 500;
    }

    .block__header_mt90 {
        margin-top: 90px;
    }

    .block__header_white {
        color: #fff;
    }

    .block__info {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        margin-top: 0px;
        margin-bottom: 0px;
        line-height: 1.4;
        text-indent: 40px;
        text-align: justify;
    }

    .block__info__list {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 0px;
    }

    .block__info a {
        color: inherit;
    }

    .block__info_tc {
        text-align: center;
    }

    .block__subtitle {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 36px;
        margin-top: 70px;
        line-height: 1.4;
        text-align: center;
        font-weight: 500;
    }

    .block__subtitle_quant {
        margin-top: 10px;
    }

    .block__subtitle_white {
        color: #fff;
    }

    .block__subtitle_nomargin {
        margin-top: 0px;
    }

    .block__img {
        display: block;
        width: 65%;
        display: block;
        height: 210px;
        -o-object-fit: cover;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        border: 2px solid #3a474d;
    }

    .market-place {
        background-color: #fff;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .market-place__logo {
        display: block;
        width: 33%;
        margin-top: 70px;
        margin-left: auto;
        margin-right: auto;
    }

    .market-place__img {
        display: block;
        width: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 170px;
    }

    .btn-blue {
        margin-top: 20px;
        display: block;
        background: none;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 21px;
        border: 2px solid #3a474d;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        padding: 7px 10px;
        cursor: pointer;
        border-radius: 20px;
    }

    .btn-blue_mt {
        margin-top: 60px;
    }

    .btn-blue_lib {
        margin: 70px auto;
    }

    .btn-blue_blog {
        margin-left: 0px;
        margin-top: 25px;
        width: 65%;
    }

    .bg__img {
        width: 100%;
        height: 400px;
        border-top: 5px solid #3a474d;
        border-bottom: 5px solid #3a474d;
    }

    .bg__img_nomargin {
        margin-top: -5px;
    }

    .bg__img__item {
        position: fixed;
        height: 600px;
        width: 100%;
        top: 30%;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom center;
        background: url(../img/test.jpg);
        opacity: 1;
        z-index: -1;
    }

    .libary {
        padding-top: 100px;
        background: #fff;
        padding-bottom: 70px;
    }

    .libary__img {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
    }

    .community {
        padding-top: 120px;
        background: #fff;
    }

    .community__img {
        width: 14%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 120px;
    }

    .lines {
        width: 100%;
        padding-top: 90px;
        background-color: #fff;
        padding-bottom: 90px;
    }

    .quantinium {
        background: #fdb148;
        padding: 100px 0px 140px 0px;
    }

    .quantinium__logo {
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .quantinium__img {
        width: 35%;
        margin-top: 130px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .blog {
        position: relative;
        padding: 100px 0px 150px 0px;
        background: #ececedff;
    }

    .blog-container {
        z-index: 2;
        position: relative;
        width: 100%;
        border: 2px solid #3a474d;
        padding: 20px;
        margin-top: 100px;
        background: #fff;
        height: 606px;
        overflow: scroll;
    }

        .blog-container::-webkit-scrollbar {
            width: 0;
        }

    .blog__item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .blog__img {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .blog__img__item {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border: 2px solid #3a474d;
    }

    .blog__text {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        margin-left: 25px;
    }

    .blog__title {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 24px;
        line-height: 1.4;
    }

    .blog__subtitle {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 5px;
    }

    .blog__info {
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 20px;
    }

    .blog__lines {
        position: absolute;
        top: 35%;
        left: 0;
        width: 100%;
    }

    .blog-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 35px;
    }

    .blog-nav__arrows {
        border: none;
        background: none;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 16px;
        line-height: 1.4;
        margin-top: 7px;
        cursor: pointer;
    }

    .slider-dots .slick-dots {
        margin: 0px 40px;
    }

        .slider-dots .slick-dots li {
            list-style: none;
            margin-right: 17px;
            display: inline;
        }

            .slider-dots .slick-dots li:last-child {
                margin-right: 0px;
            }

            .slider-dots .slick-dots li.slick-active button {
                background-color: #f27e00;
            }

        .slider-dots .slick-dots button {
            background-color: #3a474d;
            font-size: 0px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
        }

    .blog__href {
        margin-top: 15px;
        text-align: center;
    }

    .blog__href__item {
        margin-right: 35px;
    }

        .blog__href__item img {
            width: 45px;
            height: 45px;
        }

        .blog__href__item:last-child {
            margin-right: 0px;
        }

    .blog__bottom__img {
        display: block;
        width: 15%;
        margin-top: 120px;
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in {
        background: #fff;
        padding-top: 90px;
    }

    .sign-in__container {
        width: 100%;
        background-color: #ececedff;
        padding: 50px 0px;
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in__form {
        margin-top: 40px;
    }

    .sign-in__img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 25%;
    }

    .form__input {
        display: block;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid #3a474d;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        background: #fff;
        text-align: center;
        margin-bottom: 20px;
        padding: 7px;
    }

    .form__input_nomargin {
        margin-bottom: 0px;
    }

    .form__input:focus::-webkit-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus::-moz-placeholder {
        font-size: 0px;
    }

    .form__input:focus:-ms-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus:-ms-input-placeholder {
        font-size: 0px;
    }

    .form__input:focus::placeholder {
        font-size: 0px;
    }

    .form__input_area {
        text-align: left;
        padding: 15px;
        height: 170px;
        width: 45%;
    }

    .form__input_areasign {
        padding: 15px;
        height: 170px;
        width: 40%;
    }

    .form__input_mt {
        margin-top: 40px;
    }

    .sign-up {
        padding-top: 90px;
        background: #fff;
        padding-bottom: 70px;
    }

    .capcha {
        width: 40%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
    }

    .capcha__button {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        background-color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        border: none;
        padding: 15px;
        margin-right: 25px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

        .capcha__button:hover {
            background: #475b64;
        }

    .capcha__input {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        border: 2px solid #3a474d;
        color: #3a474d;
        font-family: 'Bahn';
        font-size: 18px;
        background: #fff;
        text-align: center;
    }

    .form__file__input {
        opacity: 0;
        visibility: hidden;
        position: absolute;
    }

    .form__file__label {
        width: 40%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-color: #3a474d;
        padding: 20px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

    .form__file__label__text {
        color: #fff;
        font-family: 'Bahn';
        font-size: 18px;
    }

    .form__file__label:hover {
        background: #475b64;
    }

    .btn-bg {
        display: block;
        background-color: #3a474d;
        width: 25%;
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        border: none;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        margin-top: 25px;
        cursor: pointer;
        -webkit-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

        .btn-bg:hover {
            background-color: #475b64;
        }

    .btn-bg_orange {
        background-color: #f27e00;
    }

        .btn-bg_orange:hover {
            background: #ff992c;
        }

    .form__text {
        font-family: 'Bahn';
        font-size: 21px;
        color: #3a474d;
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
    }

    .form__text_mt {
        margin: 20px auto;
    }

    .contacts {
        padding-top: 90px;
        background-color: #ececedff;
        padding-bottom: 180px;
    }

    .team-container {
        margin-top: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .team__item {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 35px;
    }

    .team__item_last {
        margin-right: 0px;
    }

    .team__img {
        width: 100%;
        padding-top: 100%;
        background-color: black;
        position: relative;
        border: 2px solid #3a474d;
        border-radius:20px;
    }

    .team__img__item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .team__name {
        margin-top: 15px;
        font-family: 'Bahn';
        font-size: 21px;
        color: #3a474d;
        text-align: center;
    }

    .team__desc {
        margin-top: 3px;
        text-align: center;
        font-family: 'Bahn';
        font-size: 16px;
        color: #3a474d;
    }

    .sign-in__img {
        margin-top: 80px;
        width: 25%;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        background-color: #3a474d;
        padding: 50px 0px;
        text-align: inherit;
        position: inherit;
        bottom: inherit;
        left: inherit;
        font-weight: inherit;
        font-style: inherit;
    }

    .footer-container {
        margin-top: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .footer__text {
        -webkit-box-flex: 3;
        -ms-flex: 3;
        flex: 3;
        font-family: 'Bahn';
        font-size: 16px;
        color: #fff;
        margin-right: 50px;
        text-decoration: none;
        display: block;
        margin-bottom: 5px;
        text-decoration: underline
    }

        .footer__text:hover {
            text-decoration: none
        }


    .footer__picture {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .footer__logo {
        width: 65%;
    }

    .footer__info {
        font-family: 'Bahn';
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
    }

    .footer__img {
        margin-top: 100px;
        display: block;
        width: 14%;
        margin-left: auto;
        margin-right: auto;
    }

    @@media (max-width: 960px) {
        .btn-blue {
            width: 60%;
        }

        .block__img {
            width: 80%;
        }

        .market-place__img {
            width: 15%;
        }

        .blog__item {
            display: block;
        }

        .blog__text {
            margin-top: 40px;
            margin-left: 0px;
        }

        .blog__bottom__img {
            width: 17%;
        }

        .blog-container {
            height: 1050px;
        }

        .form__input {
            width: 60%;
        }

        .btn-bg {
            width: 40%;
        }

        .capcha {
            width: 60%;
        }

        .form__file__label {
            width: 60%;
        }

        .team-container {
            display: block;
        }

        .team__item {
            width: 45%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 70px;
        }

        .menu__logo {
            width: 160px;
        }
    }

    @@media (max-width: 768px) {
        .btn-blue {
            width: 100%;
        }

        .market-place__logo {
            width: 50%;
        }

        .block__img {
            width: 100%;
        }

        .market-place__img {
            width: 25%;
        }

        .libary__img {
            width: 60%;
        }

        .blog__bottom__img {
            width: 30%;
        }

        .blog-container {
            height: 1030px;
        }

        .community__img {
            width: 25%;
        }

        .quantinium__logo {
            width: 65%;
        }

        .quantinium__img {
            width: 50%;
        }

        .form__input {
            width: 100%;
        }

        .btn-bg {
            width: 100%;
        }

        .sign-in__img {
            width: 40%;
        }

        .capcha {
            width: 100%;
        }

        .form__file__label {
            width: 100%;
        }

        .team__item {
            width: 60%;
        }

        .contacts {
            padding-bottom: 80px;
        }

        .footer-container {
            display: block;
        }

        .footer__text {
            margin-right: 0px;
            text-align: center;
        }

        .footer__picture {
            margin-top: 30px;
        }

        .footer__logo {
            display: block;
            width: 40%;
            margin-left: auto;
            margin-right: auto;
        }

        .footer__info {
            text-align: center;
        }

        .footer__img {
            width: 30%;
        }

        @@media (max-width: 540px) {
            .menu__href__item {
                font-size: 16px;
            }

            .block__header {
                font-size: 36px;
            }

            .market-place__logo {
                width: 70%;
            }

            .btn-blue {
                font-size: 18px;
            }

            .block__subtitle {
                font-size: 32px;
            }

            .market-place__img {
                width: 35%;
                margin-top: 80px;
            }

            .libary__img {
                width: 85%;
                margin-top: 80px;
            }

            .blog__href__item {
                width: 40px;
                height: 40px;
                margin-right: 17px;
            }

                .blog__href__item img {
                    width: 40px;
                    height: 40px;
                }

            .blog-container {
                height: 800px;
            }

            .blog__bottom__img {
                margin-top: 80px;
                width: 40%;
            }

            .blog {
                padding-bottom: 80px;
            }

            .community__img {
                width: 40%;
                margin-top: 70px;
            }

            .lines {
                margin-top: 0px;
            }

            .main-slider_quant {
                margin-top: -5px;
            }

            .quantinium__logo {
                width: 80%;
            }

            .quantinium__img {
                width: 80%;
                margin-top: 80px;
            }

            .quantinium {
                padding-bottom: 80px;
            }

            .form__text {
                font-size: 18px;
                width: 100%;
            }

            .sign-in__img {
                margin-top: 60px;
                width: 60%;
            }

            .bg__img {
                margin-top: 0px;
            }

            .bg__img_nomargin {
                margin-top: -5px;
            }

            .capcha__button {
                margin-right: 10px;
                width: 30%;
            }

            .capcha__input {
                display: block;
                width: 100%;
            }

            .team__item {
                width: 100%;
            }

            .contacts {
                padding-bottom: 50px;
            }

            .footer__logo {
                width: 60%;
            }

            .footer__img {
                margin-top: 80px;
                width: 45%;
            }

            .menu__logo {
                width: 140px;
            }
        }
    }
</style>