<div class="card mb-5 authbg">
<div class="card-body text-center">
<h4 class="card-title">Обратная связь</h4>
<p class="m-0">Старница обратной связи. Заполнив форму ниже, вы сможете обратиться к администрации проекта. <br> Задать вопрос. Либо, предложить свою идею по улучшению проекта</p>
</div>
</div>

<div class="card mb-5">
<div class="card-body ">
<ul class="timeline">

<li>
<div class="row mb-3 mt-3">
<div class="col-md-6"><input placeholder="Ваше имя" type="text" maxlength="35" name="f4" id="name" class="form-control" required></div>
<div class="col-md-6"><input placeholder="Ваш E-mail" type="email" maxlength="35" name="f1" id="email" class="form-control" required></div>
</div>
</li>

<li>
<div class="form-group mb-3">
<span>Заголовок </span>
<input placeholder="Тема сообщения" type="text" maxlength="45" name="f2" id="subject" class="form-control" required>
</div>
</li>

<li>
<div class="form-group mb-3">
<span>Содержание</span>
<textarea placeholder="Сообщение" name="f3" id="message" rows="8" class="form-control" required></textarea>
</div>
</li>

<li>
<span>Подтверждаем личность</span>
<div>$SECURITY_CODE$</div>
</li>

<li>
<ul class="pl-3" style="text-align: left; list-style: none;">
<li>Запрещены сообщения оскорбительного характера</li>
<li>Запрещён Спам, Оффтоп, сообщения не по теме</li>
<li>Запрещена реклама сторонних ресурсов/проектов</li>
</ul>
<p>При заполнении формы, просьба! Введите электронный адрес(почту) верно. В противном случае ответ на сообщение невозможен.</p>
</li>
</ul>

<button class="btn btn-primary" type="submit" name="send_btn">Отправить</button>
</div>
</div>


<div class="card mb-5 authbg">
<div class="card-body text-center">
<h4 class="card-title">Мы в соц. сетях</h4>
<p class="m-0">Наши группы в социальных сетях. Через которые вы также можете связаться с администрацией.</p>
</div>
</div>

<div class="row row-flex row-flex-wrap">
<div class="col-md-4">
<div class="card mb-5 w-100">
<div class="card-body socb">
<center><i class="fa fa-vk isoc" aria-hidden="true" style="color:#4a76a8;"></i></center>
<a href="https://vk.com/stanislavskiy11" target="_blank" class="mb-3"> <img src="https://pp.userapi.com/c844724/v844724060/1bc526/iNkO0Q-Bwls.jpg?ava=1" alt="vk"> Stanislavskiy11</a>
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?160"></script>

<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 1, width: "auto"}, 137428688);
</script>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card mb-5 w-100">
<div class="card-body soct">
<center><i class="fa fa-telegram isoc" aria-hidden="true" style="color:#29a0da;"></i></center>
<a href="https://vk.com/stanislavskiy11" target="_blank" class="mb-3"> Stanislavskiy11</a>
<a href="https://t.me/fordleru" target="_blank" class="mb-3"> Группа в Telegram</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card mb-5 w-100">
<div class="card-body">
<center><i class="fa fa-youtube-play isoc" aria-hidden="true" style="color:#f00;"></i></center>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCREuBd6aI9Z_Xy5DzA75DYA" data-layout="full" data-count="default"></div>
</div>
</div>
</div>
</div>