120 lines
6.8 KiB
HTML
120 lines
6.8 KiB
HTML
{% macro section() -%}
|
||
<main class="c_coxdg">
|
||
<div class="c_2ozmq">
|
||
<h1 class="c_jz6k0">Сервис Автопостинга</h1>
|
||
<p class="c_6wvwc">Сервис создан для художников, скульпторов, искусствоведов, журналистов, галеристов, музеев и
|
||
разных выставочных пространств с возможностью выложить пост картины, скульптуры, новостей, анонсов выставок
|
||
или любую другую информацию, разместив сразу в нескольких Ваших социальных сетях интернета,
|
||
арт-маркетплейсах и сообществах партнёров сервиса одним нажатием!</p>
|
||
<div class="c_zod37">
|
||
<a class="c_kc6kk" href="/about"><span class="c_ifykb">Узнать больше</span></a>
|
||
<button class="c_16ji5" id="openModalButtonVideo" style="padding: unset;"> <span
|
||
class="c_ifykb">Видео-презентация</span> </button>
|
||
</div>
|
||
</div>
|
||
<picture class="c_qa0pb"><img crossorigin="anonymous" fetchpriority="high" class="c_qa0pb" src="/static/painter.svg" alt=""></picture>
|
||
</main>
|
||
<div id="modalVideo" class="modal" style="display: none;">
|
||
<span class="close" onclick="videocloseModalButton()" style="z-index: 2;">×</span>
|
||
<div style="width: 100%;height: 100%; position: absolute; " onclick="videocloseModalButton()"></div>
|
||
<iframe id="modalVideoFrame" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen style="height: 100%;position: absolute;left: 0;transition: none;min-width: 100%;object-fit: scale-down;"></iframe>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
document.getElementById('openModalButtonVideo').addEventListener('click', function() {
|
||
const modalVideoFrame = document.getElementById('modalVideoFrame');
|
||
const modal = document.getElementById('modalVideo');
|
||
modalVideoFrame.src = 'https://vk.com/video_ext.php?oid=-213856894&id=456239020&hd=2';
|
||
modal.style.display = 'flex';
|
||
});
|
||
|
||
|
||
});
|
||
function videocloseModalButton() {
|
||
document.getElementById('modalVideo').style.display = 'none';
|
||
}
|
||
</script>
|
||
{%- endmacro %}
|
||
|
||
{% macro style() -%}
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #fff;
|
||
margin: 15% auto;
|
||
padding: 20px;
|
||
border: 1px solid #888;
|
||
width: 80%;
|
||
}
|
||
|
||
.close {
|
||
color: #aaa;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.close:hover,
|
||
.close:focus {
|
||
color: black;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
iframe {
|
||
width: 100%;
|
||
height: 400px; /* adjust height as needed */
|
||
}
|
||
|
||
|
||
@media (min-width: 901px) {
|
||
.c_jz6k0 { color: #000; font-family: Inter; font-size: 65px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_6wvwc { width: 540px; align-self: stretch; color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_kc6kk { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||
.c_zod37 { display: flex; align-items: flex-start; gap: 20px; }
|
||
.c_2ozmq { display: flex; width: 540px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||
.c_qa0pb { width: 430px; height: 430px; flex-shrink: 0; }
|
||
.c_coxdg { display: flex; box-sizing: unset; justify-content: center; align-items: center; height: 660px; gap: 150px; background: rgba(95, 23, 152, 0.02); }
|
||
}
|
||
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_jz6k0 { align-self: stretch; color: #000; font-family: Inter; font-size: 65px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_6wvwc { width: 700px; align-self: stretch; color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_kc6kk { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||
.c_zod37 { display: flex; align-items: flex-start; gap: 20px; }
|
||
.c_2ozmq { display: flex; width: 800px;min-width: 500px; padding: 0 50px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||
.c_qa0pb { width: 430px; height: 430px; flex-shrink: 0; }
|
||
.c_coxdg { height: 1050px;display: flex; box-sizing: unset; justify-content: center; align-items: center; align-content: center; gap: 50px 0; flex-wrap: wrap; background: rgba(95, 23, 152, 0.02); }
|
||
}
|
||
|
||
@media (max-width: 699px) {
|
||
.c_jz6k0 { height: 78px; align-self: stretch; color: #000; font-family: Inter; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; }
|
||
.c_6wvwc { width: 330px; height: 240px; align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.c_kc6kk { display: flex; width: 145px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||
.c_zod37 { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
|
||
.c_2ozmq { display: flex; width: 375px; padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||
.c_qa0pb { width: 375px; height: 295px; flex-shrink: 0; max-width: 100%;}
|
||
.c_coxdg { height: 850px; display: flex; box-sizing: unset; justify-content: center; align-items: center; align-content: center; gap: 50px 0; flex-wrap: wrap; background: rgba(95, 23, 152, 0.02); }
|
||
}</style>
|
||
{%- endmacro %} |