http://veselkova-kramnicja.mozello.com/zvukov-knigi/ Веселкова Крамниця - Звукові книги http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4978162/gurtok-veb-programuvannja Wed, 14 May 2025 07:25:00 +0000 <div>перша сторінка<hr class="moze-more-divider"><p>тут код і дизайн головної сторінки</p><p><br></p></div> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Гурток Веб-програмування</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Lobster&amp;family=Open+Sans&amp;display=swap" rel="stylesheet"> <style> :root { --main-color: #ADFF2F; /* Салатовий */ --accent-green: #228B22; /* Зелений */ --accent-yellow: #FFD700; /* Жовтий */ --text-color: #333; --bg-color: #f8fff0; } body { margin: 0; font-family: 'Open Sans', sans-serif; background-color: var(--bg-color); color: var(--text-color); } header { background-color: var(--main-color); padding: 1rem 2rem; text-align: center; } h1 { font-family: 'Lobster', cursive; font-size: 2.5rem; color: var(--accent-green); margin: 0; } nav { background-color: var(--accent-green); display: flex; justify-content: center; gap: 1.5rem; padding: 0.75rem; } nav a { color: var(--accent-yellow); /* Жовтий текст */ text-decoration: none; font-weight: bold; padding: 0.5rem 1rem; transition: background-color 0.3s ease; } nav a:hover { background-color: rgba(255, 215, 0, 0.2); /* Світло-жовтий фон при наведенні */ border-radius: 5px; } nav a:visited { color: var(--accent-yellow); /* Жовтий колір після кліку */ } main { padding: 2rem; } .card { background: white; border-radius: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 1.5rem; margin-bottom: 1.5rem; } .btn { background-color: var(--accent-yellow); color: #333; border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; font-weight: bold; } .btn:hover { background-color: var(--main-color); } footer { text-align: center; padding: 1rem; background-color: var(--accent-green); color: white; margin-top: 2rem; } </style> <header> <h1>Гурток Веб-програмування</h1> </header> <nav> <a href="#">Головна</a> <a href="#">Завдання</a> <a href="#">Журнал</a> <a href="#">Файли учнів</a> <a href="#">Вхід</a> </nav> <main> <div class="card"> <h1><span style="color: #1cbb11">Ласкаво просимо!</span></h1> <p>Це сайт гуртка веб-програмування. Тут учні, батьки та викладач можуть переглядати завдання, відвідуваність та код учнів.</p> <button class="btn" fdprocessedid="en9p1e">Дізнатися більше</button> </div> </main> <footer> © 2025 Гурток Веб-програмування </footer> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4968508/shb-10 Wed, 07 May 2025 09:39:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій стильний блог</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background: linear-gradient(to right, #fafafa, #eaeaea); } .container { display: flex; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; position: relative; } .sidebar { position: fixed; top: 50%; right: 25px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 1000; padding: 0.5rem; } .sidebar button { padding: 0.5rem; border: none; background-color: #0077cc; color: white; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 40px; } .sidebar button:hover { background-color: #005fa3; } main { flex: 1; max-width: 800px; background: white; padding: 1rem; margin-left: 70px; margin-right: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .moze-more-divider { border: none; border-top: 2px dashed #aaa; margin: 1.5rem 0; } .toc-toggle { cursor: pointer; background: #f0f0f0; padding: 0.5rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 5px; } .toc-content { display: none; margin-bottom: 1rem; } .toc-content ul { list-style-type: none; padding-left: 1rem; } .toc-content li a { text-decoration: none; color: #333; } img.left { float: left; margin: 0 1rem 1rem 0; } img.right { float: right; margin: 0 0 1rem 1rem; } h3 { margin-top: 2rem; } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc; text-align: center; font-size: 0.9rem; color: #666; } .related-posts { margin-top: 2rem; padding: 1rem; background: #f9f9f9; border: 1px solid #ddd; } .related-posts h4 { margin-top: 0; } .related-posts ul { list-style: none; padding-left: 1rem; } .related-posts li a { text-decoration: none; color: #0077cc; } @media (max-width: 600px) { .container { flex-direction: column; align-items: center; } .sidebar { position: static; flex-direction: row; justify-content: center; margin-bottom: 1rem; transform: none; } } </style> <div class="sidebar"> <button onclick="scrollToTOC()" title="До змісту">📑</button> <button onclick="scrollToTop()" title="Вгору">⬆️</button> <button onclick="scrollToBottom()" title="Вниз">⬇️</button> </div> <div class="container"> <main> <div> ооооооооооооооооооооооооооооо <hr class="moze-more-divider"> <p>ооооооооооооооооооооооооооооо</p> </div> <div class="toc-toggle" onclick="toggleTOC()">📑 Зміст (натисни, щоб розгорнути)</div> <div class="toc-content" id="toc"></div> <article id="main-content"> <h2>Вступ</h2> <p>Це приклад блогу з підтримкою сучасного вигляду, меню та обтікання зображень.</p> <h3>Перший розділ</h3> <p><img src="https://via.placeholder.com/150" class="left" alt="img">Цей текст обтікає зображення зліва. Додайте більше інформації про розділ тут.</p> <h3>Другий розділ</h3> <p><img src="https://via.placeholder.com/150" class="right" alt="img">Цей текст обтікає зображення справа. Продовжуйте наповнення статті.</p> <h3>Третій розділ</h3> <p>Просто текст без зображень, щоб показати різноманіття форматування.</p> <div class="related-posts"> <h4>Читайте також:</h4> <ul> <li><a href="#">5 трендів літа 2025</a></li> <li><a href="#">Як створити капсульний гардероб</a></li> <li><a href="#">Кольори, які пасують кожному</a></li> </ul> </div> </article> <footer> © 2025 Юля Блог | Слідкуй за мною: <br> <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Telegram</a> </footer> </main> </div> <script> function toggleTOC() { const toc = document.getElementById('toc'); toc.style.display = toc.style.display === 'block' ? 'none' : 'block'; } function generateTOC() { const toc = document.getElementById('toc'); const headers = document.querySelectorAll('article h3'); const ul = document.createElement('ul'); headers.forEach((header, index) => { const id = 'section-' + index; header.setAttribute('id', id); const li = document.createElement('li'); const a = document.createElement('a'); a.setAttribute('href', '#' + id); a.textContent = header.textContent; li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); } function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } function scrollToBottom() { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); } function scrollToTOC() { const toc = document.getElementById('toc'); if (toc) { if (toc.style.display !== 'block') { toc.style.display = 'block'; } toc.scrollIntoView({ behavior: 'smooth' }); } } document.addEventListener('DOMContentLoaded', generateTOC); </script> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4968480/shb7 Wed, 07 May 2025 09:19:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій стильний блог</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background: linear-gradient(to right, #fafafa, #eaeaea); } .container { display: flex; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; position: relative; } .sidebar { position: fixed; top: 50%; left: 25px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 1000; padding: 0.5rem; } .sidebar button { padding: 0.5rem; border: none; background-color: #0077cc; color: white; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 40px; } .sidebar button:hover { background-color: #005fa3; } main { flex: 1; max-width: 800px; background: white; padding: 1rem; margin-left: 70px; margin-right: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .moze-more-divider { border: none; border-top: 2px dashed #aaa; margin: 1.5rem 0; } .toc-toggle { cursor: pointer; background: #f0f0f0; padding: 0.5rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 5px; } .toc-content { display: none; margin-bottom: 1rem; } .toc-content ul { list-style-type: none; padding-left: 1rem; } .toc-content li a { text-decoration: none; color: #333; } img.left { float: left; margin: 0 1rem 1rem 0; } img.right { float: right; margin: 0 0 1rem 1rem; } h3 { margin-top: 2rem; } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc; text-align: center; font-size: 0.9rem; color: #666; } .related-posts { margin-top: 2rem; padding: 1rem; background: #f9f9f9; border: 1px solid #ddd; } .related-posts h4 { margin-top: 0; } .related-posts ul { list-style: none; padding-left: 1rem; } .related-posts li a { text-decoration: none; color: #0077cc; } @media (max-width: 600px) { .container { flex-direction: column; align-items: center; } .sidebar { position: static; flex-direction: row; justify-content: center; margin-bottom: 1rem; transform: none; } } </style> <div class="sidebar"> <button onclick="scrollToTOC()" title="До змісту">📑</button> <button onclick="scrollToTop()" title="Вгору">⬆️</button> <button onclick="scrollToBottom()" title="Вниз">⬇️</button> </div> <div class="container"> <main> <div> ооооооооооооооооооооооооооооо <hr class="moze-more-divider"> <p>ооооооооооооооооооооооооооооо</p> </div> <div class="toc-toggle" onclick="toggleTOC()">📑 Зміст (натисни, щоб розгорнути)</div> <div class="toc-content" id="toc"></div> <article id="main-content"> <h2>Вступ</h2> <p>Це приклад блогу з підтримкою сучасного вигляду, меню та обтікання зображень.</p> <h3>Перший розділ</h3> <p><img src="https://via.placeholder.com/150" class="left" alt="img">Цей текст обтікає зображення зліва. Додайте більше інформації про розділ тут.</p> <h3>Другий розділ</h3> <p><img src="https://via.placeholder.com/150" class="right" alt="img">Цей текст обтікає зображення справа. Продовжуйте наповнення статті.</p> <h3>Третій розділ</h3> <p>Просто текст без зображень, щоб показати різноманіття форматування.</p> <div class="related-posts"> <h4>Читайте також:</h4> <ul> <li><a href="#">5 трендів літа 2025</a></li> <li><a href="#">Як створити капсульний гардероб</a></li> <li><a href="#">Кольори, які пасують кожному</a></li> </ul> </div> </article> <footer> © 2025 Юля Блог | Слідкуй за мною: <br> <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Telegram</a> </footer> </main> </div> <script> function toggleTOC() { const toc = document.getElementById('toc'); toc.style.display = toc.style.display === 'block' ? 'none' : 'block'; } function generateTOC() { const toc = document.getElementById('toc'); const headers = document.querySelectorAll('article h3'); const ul = document.createElement('ul'); headers.forEach((header, index) => { const id = 'section-' + index; header.setAttribute('id', id); const li = document.createElement('li'); const a = document.createElement('a'); a.setAttribute('href', '#' + id); a.textContent = header.textContent; li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); } function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } function scrollToBottom() { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); } function scrollToTOC() { const toc = document.getElementById('toc'); if (toc) { toc.scrollIntoView({ behavior: 'smooth' }); } } document.addEventListener('DOMContentLoaded', generateTOC); </script> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4968466/shb4 Wed, 07 May 2025 09:12:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій стильний блог</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background: linear-gradient(to right, #fafafa, #eaeaea); } .container { display: flex; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; position: relative; } .sidebar { position: fixed; top: 50%; left: 70px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 1000; padding: 0.5rem; } .sidebar button { padding: 0.5rem; border: none; background-color: #0077cc; color: white; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 40px; } .sidebar button:hover { background-color: #005fa3; } main { flex: 1; max-width: 800px; background: white; padding: 1rem; margin-left: 140px; margin-right: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .moze-more-divider { border: none; border-top: 2px dashed #aaa; margin: 1.5rem 0; } .toc-toggle { cursor: pointer; background: #f0f0f0; padding: 0.5rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 5px; } .toc-content { display: none; margin-bottom: 1rem; } .toc-content ul { list-style-type: none; padding-left: 1rem; } .toc-content li a { text-decoration: none; color: #333; } img.left { float: left; margin: 0 1rem 1rem 0; } img.right { float: right; margin: 0 0 1rem 1rem; } h3 { margin-top: 2rem; } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc; text-align: center; font-size: 0.9rem; color: #666; } .related-posts { margin-top: 2rem; padding: 1rem; background: #f9f9f9; border: 1px solid #ddd; } .related-posts h4 { margin-top: 0; } .related-posts ul { list-style: none; padding-left: 1rem; } .related-posts li a { text-decoration: none; color: #0077cc; } @media (max-width: 600px) { .container { flex-direction: column; align-items: center; } .sidebar { position: static; flex-direction: row; justify-content: center; margin-bottom: 1rem; transform: none; } } </style> <div class="sidebar"> <button onclick="scrollToTOC()" title="До змісту">📑</button> <button onclick="scrollToTop()" title="Вгору">⬆️</button> <button onclick="scrollToBottom()" title="Вниз">⬇️</button> </div> <div class="container"> <main> <div> ооооооооооооооооооооооооооооо <hr class="moze-more-divider"> <p>ооооооооооооооооооооооооооооо</p> </div> <div class="toc-toggle" onclick="toggleTOC()">📑 Зміст (натисни, щоб розгорнути)</div> <div class="toc-content" id="toc"></div> <article id="main-content"> <h2>Вступ</h2> <p>Це приклад блогу з підтримкою сучасного вигляду, меню та обтікання зображень.</p> <h3>Перший розділ</h3> <p><img src="https://via.placeholder.com/150" class="left" alt="img">Цей текст обтікає зображення зліва. Додайте більше інформації про розділ тут.</p> <h3>Другий розділ</h3> <p><img src="https://via.placeholder.com/150" class="right" alt="img">Цей текст обтікає зображення справа. Продовжуйте наповнення статті.</p> <h3>Третій розділ</h3> <p>Просто текст без зображень, щоб показати різноманіття форматування.</p> <div class="related-posts"> <h4>Читайте також:</h4> <ul> <li><a href="#">5 трендів літа 2025</a></li> <li><a href="#">Як створити капсульний гардероб</a></li> <li><a href="#">Кольори, які пасують кожному</a></li> </ul> </div> </article> <footer> © 2025 Юля Блог | Слідкуй за мною: <br> <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Telegram</a> </footer> </main> </div> <script> function toggleTOC() { const toc = document.getElementById('toc'); toc.style.display = toc.style.display === 'block' ? 'none' : 'block'; } function generateTOC() { const toc = document.getElementById('toc'); const headers = document.querySelectorAll('article h3'); const ul = document.createElement('ul'); headers.forEach((header, index) => { const id = 'section-' + index; header.setAttribute('id', id); const li = document.createElement('li'); const a = document.createElement('a'); a.setAttribute('href', '#' + id); a.textContent = header.textContent; li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); } function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } function scrollToBottom() { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); } function scrollToTOC() { const toc = document.getElementById('toc'); if (toc) { toc.scrollIntoView({ behavior: 'smooth' }); } } document.addEventListener('DOMContentLoaded', generateTOC); </script> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4968456/shb3 Wed, 07 May 2025 09:05:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій стильний блог</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background: linear-gradient(to right, #fafafa, #eaeaea); } .container { display: flex; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; position: relative; } .sidebar { position: fixed; top: 50%; left: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 1000; padding: 0.5rem; } .sidebar button { padding: 0.5rem; border: none; background-color: #0077cc; color: white; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 40px; } .sidebar button:hover { background-color: #005fa3; } main { flex: 1; max-width: 800px; background: white; padding: 1rem; margin-left: 60px; margin-right: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .moze-more-divider { border: none; border-top: 2px dashed #aaa; margin: 1.5rem 0; } .toc-toggle { cursor: pointer; background: #f0f0f0; padding: 0.5rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 5px; } .toc-content { display: none; margin-bottom: 1rem; } .toc-content ul { list-style-type: none; padding-left: 1rem; } .toc-content li a { text-decoration: none; color: #333; } img.left { float: left; margin: 0 1rem 1rem 0; } img.right { float: right; margin: 0 0 1rem 1rem; } h3 { margin-top: 2rem; } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc; text-align: center; font-size: 0.9rem; color: #666; } .related-posts { margin-top: 2rem; padding: 1rem; background: #f9f9f9; border: 1px solid #ddd; } .related-posts h4 { margin-top: 0; } .related-posts ul { list-style: none; padding-left: 1rem; } .related-posts li a { text-decoration: none; color: #0077cc; } @media (max-width: 600px) { .container { flex-direction: column; align-items: center; } .sidebar { position: static; flex-direction: row; justify-content: center; margin-bottom: 1rem; transform: none; } } </style> <div class="sidebar"> <button onclick="scrollToTOC()" title="До змісту">📑</button> <button onclick="scrollToTop()" title="Вгору">⬆️</button> <button onclick="scrollToBottom()" title="Вниз">⬇️</button> </div> <div class="container"> <main> <div> ооооооооооооооооооооооооооооо <hr class="moze-more-divider"> <p>ооооооооооооооооооооооооооооо</p> </div> <div class="toc-toggle" onclick="toggleTOC()">📑 Зміст (натисни, щоб розгорнути)</div> <div class="toc-content" id="toc"></div> <article id="main-content"> <h2>Вступ</h2> <p>Це приклад блогу з підтримкою сучасного вигляду, меню та обтікання зображень.</p> <h3>Перший розділ</h3> <p><img src="https://via.placeholder.com/150" class="left" alt="img">Цей текст обтікає зображення зліва. Додайте більше інформації про розділ тут.</p> <h3>Другий розділ</h3> <p><img src="https://via.placeholder.com/150" class="right" alt="img">Цей текст обтікає зображення справа. Продовжуйте наповнення статті.</p> <h3>Третій розділ</h3> <p>Просто текст без зображень, щоб показати різноманіття форматування.</p> <div class="related-posts"> <h4>Читайте також:</h4> <ul> <li><a href="#">5 трендів літа 2025</a></li> <li><a href="#">Як створити капсульний гардероб</a></li> <li><a href="#">Кольори, які пасують кожному</a></li> </ul> </div> </article> <footer> © 2025 Юля Блог | Слідкуй за мною: <br> <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Telegram</a> </footer> </main> </div> <script> function toggleTOC() { const toc = document.getElementById('toc'); toc.style.display = toc.style.display === 'block' ? 'none' : 'block'; } function generateTOC() { const toc = document.getElementById('toc'); const headers = document.querySelectorAll('article h3'); const ul = document.createElement('ul'); headers.forEach((header, index) => { const id = 'section-' + index; header.setAttribute('id', id); const li = document.createElement('li'); const a = document.createElement('a'); a.setAttribute('href', '#' + id); a.textContent = header.textContent; li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); } function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } function scrollToBottom() { window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); } function scrollToTOC() { const toc = document.getElementById('toc'); if (toc) { toc.scrollIntoView({ behavior: 'smooth' }); } } document.addEventListener('DOMContentLoaded', generateTOC); </script> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4968377/shb2 Wed, 07 May 2025 08:21:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій стильний блог</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 2rem 1rem; background: linear-gradient(to right, #fafafa, #eaeaea); } main { max-width: 800px; margin: auto; background: white; padding: 1rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .moze-more-divider { border: none; border-top: 2px dashed #aaa; margin: 1.5rem 0; } .toc-toggle { cursor: pointer; background: #f0f0f0; padding: 0.5rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 5px; } .toc-content { display: none; margin-bottom: 1rem; } .toc-content ul { list-style-type: none; padding-left: 1rem; } .toc-content li a { text-decoration: none; color: #333; } img.left { float: left; margin: 0 1rem 1rem 0; } img.right { float: right; margin: 0 0 1rem 1rem; } h3 { margin-top: 2rem; } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc; text-align: center; font-size: 0.9rem; color: #666; } .related-posts { margin-top: 2rem; padding: 1rem; background: #f9f9f9; border: 1px solid #ddd; } .related-posts h4 { margin-top: 0; } .related-posts ul { list-style: none; padding-left: 1rem; } .related-posts li a { text-decoration: none; color: #0077cc; } @media (max-width: 600px) { img.left, img.right { float: none; display: block; margin: 1rem auto; } } </style> <main> <div> ооооооооооооооооооооооооооооо <hr class="moze-more-divider"> <p>ооооооооооооооооооооооооооооо</p> </div> <div class="toc-toggle" onclick="toggleTOC()">📑 Зміст (натисни, щоб розгорнути)</div> <div class="toc-content" id="toc"></div> <article id="main-content"> <h2>Вступ</h2> <p>Це приклад блогу з підтримкою сучасного вигляду, меню та обтікання зображень.</p> <h3>Перший розділ</h3> <p><img src="https://via.placeholder.com/150" class="left" alt="img">Цей текст обтікає зображення зліва. Додайте більше інформації про розділ тут.</p> <h3>Другий розділ</h3> <p><img src="https://via.placeholder.com/150" class="right" alt="img">Цей текст обтікає зображення справа. Продовжуйте наповнення статті.</p> <h3>Третій розділ</h3> <p>Просто текст без зображень, щоб показати різноманіття форматування.</p> <div class="related-posts"> <h4>Читайте також:</h4> <ul> <li><a href="#">5 трендів літа 2025</a></li> <li><a href="#">Як створити капсульний гардероб</a></li> <li><a href="#">Кольори, які пасують кожному</a></li> </ul> </div> </article> <footer> © 2025 Юля Блог | Слідкуй за мною: <br> <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Telegram</a> </footer> </main> <script> function toggleTOC() { const toc = document.getElementById('toc'); toc.style.display = toc.style.display === 'block' ? 'none' : 'block'; } function generateTOC() { const toc = document.getElementById('toc'); const headers = document.querySelectorAll('article h3'); const ul = document.createElement('ul'); headers.forEach((header, index) => { const id = 'section-' + index; header.setAttribute('id', id); const li = document.createElement('li'); const a = document.createElement('a'); a.setAttribute('href', '#' + id); a.textContent = header.textContent; li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); } document.addEventListener('DOMContentLoaded', generateTOC); </script> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4968365/shablon-blogu Wed, 07 May 2025 08:09:00 +0000 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мій стильний блог</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0 1rem; max-width: 800px; margin: auto; } .moze-more-divider { border: none; border-top: 2px dashed #aaa; margin: 1.5rem 0; } .toc-toggle { cursor: pointer; background: #f0f0f0; padding: 0.5rem; margin: 1rem 0; border: 1px solid #ccc; border-radius: 5px; } .toc-content { display: none; margin-bottom: 1rem; } .toc-content ul { list-style-type: none; padding-left: 1rem; } .toc-content li a { text-decoration: none; color: #333; } img.left { float: left; margin: 0 1rem 1rem 0; } img.right { float: right; margin: 0 0 1rem 1rem; } h3 { margin-top: 2rem; } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc; text-align: center; font-size: 0.9rem; color: #666; } .related-posts { margin-top: 2rem; padding: 1rem; background: #f9f9f9; border: 1px solid #ddd; } .related-posts h4 { margin-top: 0; } .related-posts ul { list-style: none; padding-left: 1rem; } .related-posts li a { text-decoration: none; color: #0077cc; } @media (max-width: 600px) { img.left, img.right { float: none; display: block; margin: 1rem auto; } } </style> <div> ооооооооооооооооооооооооооооо <hr class="moze-more-divider"> <p>ооооооооооооооооооооооооооооо</p> </div> <div class="toc-toggle" onclick="toggleTOC()">📑 Зміст (натисни, щоб розгорнути)</div> <div class="toc-content" id="toc"></div> <article id="main-content"> <h2>Вступ</h2> <p>Це приклад блогу з підтримкою сучасного вигляду, меню та обтікання зображень.</p> <h3>Перший розділ</h3> <p><img src="https://via.placeholder.com/150" class="left" alt="img">Цей текст обтікає зображення зліва. Додайте більше інформації про розділ тут.</p> <h3>Другий розділ</h3> <p><img src="https://via.placeholder.com/150" class="right" alt="img">Цей текст обтікає зображення справа. Продовжуйте наповнення статті.</p> <h3>Третій розділ</h3> <p>Просто текст без зображень, щоб показати різноманіття форматування.</p> <div class="related-posts"> <h4>Читайте також:</h4> <ul> <li><a href="#">5 трендів літа 2025</a></li> <li><a href="#">Як створити капсульний гардероб</a></li> <li><a href="#">Кольори, які пасують кожному</a></li> </ul> </div> </article> <footer> © 2025 Юля Блог | Слідкуй за мною: <br> <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Telegram</a> </footer> <script> function toggleTOC() { const toc = document.getElementById('toc'); toc.style.display = toc.style.display === 'block' ? 'none' : 'block'; } function generateTOC() { const toc = document.getElementById('toc'); const headers = document.querySelectorAll('article h3'); const ul = document.createElement('ul'); headers.forEach((header, index) => { const id = 'section-' + index; header.setAttribute('id', id); const li = document.createElement('li'); const a = document.createElement('a'); a.setAttribute('href', '#' + id); a.textContent = header.textContent; li.appendChild(a); ul.appendChild(li); }); toc.appendChild(ul); } document.addEventListener('DOMContentLoaded', generateTOC); </script> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4766465/efekt-anti-mdasa Tue, 14 Jan 2025 14:42:00 +0000 щщщщщщщщщщщщщщщ <hr class="moze-more-divider"> <p>ьььььььььььььььььььь</p> <p> <br> </p> <iframe class="moze-iframe" src="https://www.youtube.com/embed/moesQszuPsQ?si=VgLsxAxXb5xf-ggv" height="315px" width="560px" allowfullscreen="allowfullscreen"></iframe> http://veselkova-kramnicja.mozello.com/zvukov-knigi/params/post/4766460/persha-novina Tue, 14 Jan 2025 14:42:00 +0000 <p>Це демо-текст, щоб продемонструвати як буде виглядати повідомлення в блозі. Видаліть цей пост і додайте свої власні повідомлення.</p> <hr class="moze-more-divider"> <p> </p><ol class="breadcrumb" style="text-align: start; font-weight: 400; font-style: normal"><li class="breadcrumb-item"><a href="https://react-bootstrap.github.io/docs/components/breadcrumb/#" role="button" tabindex="0" style="text-decoration: underline">додому</a></li><li class="breadcrumb-item"><a href="https://getbootstrap.com/docs/4.0/components/breadcrumb/" style="text-decoration: var(--ifm-link-hover-decoration)">Бібліотека</a></li><li class="breadcrumb-item active" aria-current="page">Дані</li></ol> <br><p></p><p>import Breadcrumb from 'react-bootstrap/Breadcrumb'; function BreadcrumbExample() { return ( <breadcrumb> <breadcrumb.item href="#">Home</breadcrumb.item> <breadcrumb.item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/"> Library </breadcrumb.item> <breadcrumb.item active="">Data</breadcrumb.item> </breadcrumb> ); } export default BreadcrumbExample;</p> <p></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>