diff --git a/templates/main.html b/templates/main.html
new file mode 100644
index 0000000..fa1903a
--- /dev/null
+++ b/templates/main.html
@@ -0,0 +1,120 @@
+{% 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"></picture>
+</main>
+<div id="modalVideo" class="modal" style="display: none;">
+    <span class="close" onclick="videocloseModalButton()" style="z-index: 2;">&times;</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 type="text/css">
+    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 %}
\ No newline at end of file