Звіт буде містити структуру HTML документа для кожної сторінки мого багатосторінкового сайту. Для кожної сторінки я надам HTML-код, який включає в себе теги, елементи і атрибути, що використовуються для побудови сторінки. Таким чином, буде показана загальна структура та розміщення контенту на кожній з сторінок мого сайту.
1. Структура сторінки "index.html" (Головна):
<!doctype html> <html lang="uk"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>The Forest Haven — Головна</title> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet"> </head> <body> <!-- HEADER --> <header role="banner"> <div class="topbar"> <!-- Лого --> <div class="logo"> <a href="/">The Forest Haven</a> </div> <!-- Навігація --> <nav aria-label="Головна навігація"> <ul> <li><a href="index.html">Головна</a></li> <li><a href="about.html">Про нас</a></li> <li><a href="houses.html">Будинки</a></li> <li><a href="territory.html">Територія</a></li> </ul> </nav> <!-- Контакт у шапці --> <div class="header-contacts"> <a href="tel:+380343426292">+38 (034) 342 62 92</a> </div> </div> </header> <!-- MAIN --> <main id="home"> <!-- HERO / ВЕРХНІЙ БЛОК --> <section id="hero" aria-label="Головний банер"> <!-- фонова картинка — додайте через CSS або вставте <img> --> <div class="hero-media"> <img src="img/Group 1.jpg" alt="Два сучасні котеджі в лісі біля водойми" /> </div> <div class="hero-content"> <p class="subtitle">(FROM 2023)</p> <h1>The Forest Haven</h1> <p class="lead"> Новий, сучасний багатофункціональний комплекс для відпочинку, розвитку, занять спортом та оздоровлення весь рік </p> <a href="#booking" class="btn-book">ЗАБРОНЮВАТИ</a> </div> </section> <!-- ABOUT / "Тихе місце для перезавантаження" --> <section class="about"> <div class="container"> <h2 class="section-title">Тихе місце<br>для перезавантаження</h2> <p class="section-subtitle">(Переваги комплексу)</p> <table class="about-table"> <tr> <td><strong>100%</strong></td> <td>Гармонія. Комплекс розташований серед високих сосен і дубів, що забезпечує чисте повітря та затишок.</td> </tr> <tr> <td><strong>0</strong></td> <td>Непотрібних шумів. Абсолютна тиша — ідеальне місце для відпочинку й оздоровлення.</td> </tr> <tr> <td><strong>24/7</strong></td> <td>Охорона. Баланс між приватністю і безпекою.</td> </tr> <tr> <td><strong>100%</strong></td> <td>Унікальна концепція. Максимум гармонії, мінімум суєти.</td> </tr> </table> </div> </section> <!-- HOUSES / Будинки --> <section id="houses" aria-labelledby="houses-title"> <h2 id="houses-title">Будинки</h2> <div class="houses-grid" role="list"> <!-- Картка 1 --> <article class="house-card" role="listitem"> <img src="img/white-red-house-surrounded-by-trees-night 2 1.jpg" alt="Будинок з виходом до озера" /> <h3>Будинок з виходом до озера</h3> <p>Будинок з виходом до озера. 10 кімнат.</p> </article> <!-- Картка 2 --> <article class="house-card" role="listitem"> <img src="img/rustic-patio-furniture-house-deck-with-vegetation 1 1.jpg" alt="Будинок з каміном та двориком" /> <h3>Великий котедж з каміном</h3> <p>Великий будинок з каміном на вулиці — 6 кімнат. Чудово підходить для компаній.</p> </article> <!-- Картка 3 --> <article class="house-card" role="listitem"> <img src="img/photorealistic_house_with_wooden_architecture_timber_structure_1 1.jpg" alt="Котедж на двох" /> <h3>Будинок для двох</h3> <p>Ідеальний варіант, щоб відпочити зі своєю другою половинкою.</p> </article> </div> <!-- Пагінація --> <div class="pagination" aria-label="Навігація по сторінкам будинків"> <a href="#houses?page=1">1</a> <a href="#houses?page=2">2</a> <a href="#houses?page=3">3</a> </div> </section> <!-- GALLERY / Широкий банер --> <section id="gallery" aria-label="Фотографії території"> <div class="wide-photo"> <img src="img/long-shot-mother-daughter-running-outdoors 1 1.jpg" alt="Ділянка комплексу, люди гуляють полем" /> </div> <div class="gallery-footer"> <span>Розваги на території комплексу</span> <a href="#more">Подивитися все →</a> </div> </section> <!-- BOOKING / Форма бронювання --> <section id="booking" aria-labelledby="booking-title"> <h2 id="booking-title">Заплануй свою подорож вже сьогодні!</h2> <form action="/book" method="post" aria-label="Форма бронювання"> <div> <label for="name">Ваше ім'я</label> <input id="name" name="name" type="text" required /> </div> <div> <label for="email">Телефон</label> <input id="email" name="email" type="email" required /> </div> <p class="consent-note">Натискаючи кнопку, ви погоджуєтесь на обробку персональних даних.</p> <div> <button type="submit">ЗАБРОНЮВАТИ</button> </div> <p class="consent-note">Виникли запитання? напишіть нам на info@THEFORESTHAVEN</p> </form> </section> </main> <!-- FOOTER --> <footer id="contacts" role="contentinfo"> <div class="footer-top"> <div class="footer-contacts"> <p>телефон: <a href="tel:+380963526984">+38 (096) 352 69 84</a></p> <p>email: <a href="mailto:info@foresthaven">INFO@FORESTHAVEN</a></p> </div> <div class="footer-social"> <p>social media</p> <a href="#" aria-label="Instagram">Instagram</a> </div> </div> <div class="footer-bottom"> <p>The Forest Haven</p> <p>© 2025 The Forest Haven. All rights reserved.</p> </div> </footer> </body> </html>
2. Структура сторінки "about.html" (Про нас):
<!doctype html> <html lang="uk"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>The Forest Haven — Про нас</title> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet"> </head> <body> <!-- HEADER --> <header role="banner"> <div class="topbar"> <!-- Лого --> <div class="logo"> <a href="/">The Forest Haven</a> </div> <!-- Навігація --> <nav aria-label="Головна навігація"> <ul> <li><a href="index.html">Головна</a></li> <li><a href="about.html">Про нас</a></li> <li><a href="houses.html">Будинки</a></li> <li><a href="territory.html">Територія</a></li> </ul> </nav> <!-- Контакт у шапці --> <div class="header-contacts"> <a href="tel:+380343426292">+38 (034) 342 62 92</a> </div> </div> </header> <!-- MAIN --> <main id="home"> <!-- HERO / ВЕРХНІЙ БЛОК --> <section id="hero" aria-label="Головний банер"> <!-- фонова картинка — додайте через CSS або вставте <img> --> <div class="hero-media"> <img src="img/Group 1.jpg" alt="Два сучасні котеджі в лісі біля водойми" /> </div> <div class="hero-content"> <p class="subtitle">(FROM 2023)</p> <h1>The Forest Haven</h1> <p class="lead"> Новий, сучасний багатофункціональний комплекс для відпочинку, розвитку, занять спортом та оздоровлення весь рік. </p> <a href="#booking" class="btn-book">ЗАБРОНЮВАТИ</a> </div> </section> <!-- ABOUT SECTION --> <section aria-labelledby="about-title" class="about-section"> <h2 id="about-title">Про нас</h2> <p class="about-text"> <strong>Forest Haven</strong> — місце, де природа лікує. </p> <p> Це простір, де природа і сучасний комфорт поєднуються, створюючи ідеальне місце для відновлення сил. Ми віримо, що справжній відпочинок — це гармонія тиші, чистого повітря та затишку. Наш комплекс розроблений так, щоб кожен гість міг відчути себе вдома, але далеко від шуму міста. </p> <!-- Блоки місія/підхід/атмосфера --> <div class="about-highlights"> <article class="highlight-card"> <h3>Наша місія</h3> <p>Подарувати відпочинок, який не просто розслабляє, а надихає.</p> </article> <article class="highlight-card"> <h3>Наш підхід</h3> <p>Поєднання екологічності, сучасного дизайну та турботи про комфорт гостей.</p> </article> <article class="highlight-card"> <h3>Наша атмосфера</h3> <p>Гармонія дерев’яних котеджів та спокою, який чути у кожному подиху.</p> </article> </div> <p> Тут ви зможете відключитись від ритму міста, відновити баланс і повернутися додому з новими силами. </p> </section> </main> <!-- FOOTER --> <footer id="contacts" role="contentinfo"> <div class="footer-top"> <div class="footer-contacts"> <p>телефон: <a href="tel:+380963526984">+38 (096) 352 69 84</a></p> <p>email: <a href="mailto:info@foresthaven">INFO@FORESTHAVEN</a></p> </div> <div class="footer-social"> <p>social media</p> <a href="#" aria-label="Instagram">Instagram</a> </div> </div> <div class="footer-bottom"> <p>The Forest Haven</p> <p>© 2025 The Forest Haven. All rights reserved.</p> </div> </footer> </body> </html>