Vyachowski/frontend-project-11

View on GitHub
template.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>RSS Reader</title>
  </head>
  <body class="d-flex flex-column min-vh-100">
    <main class="flex-grow-1">
      <section class="container-fluid bg-dark p-5">
        <div class="row">
          <div class="col-md-10 col-lg-8 mx-auto text-white">
            <h1 class="display-3 mb-0" data-i18n="rssForm.title">RSS агрегатор</h1>
            <p class="lead" data-i18n="rssForm.subtitle">Начните читать RSS сегодня! Это легко, это красиво.</p>
            <form class="rss-form text-body">
              <div class="row">
                <div class="col-12 col-sm-8 mb-3 mb-sm-0">
                  <div class="form-floating">
                    <input class="form-control w-100" id="url-input" name="url" aria-label="url" autocomplete="off" placeholder="Ссылка RSS" required>
                    <label for="url-input" data-i18n="rssForm.inputText">Ссылка RSS</label>
                  </div>
                </div>
                <div class="col-12 col-sm-4">
                  <button class="h-100 btn btn-lg btn-primary px-sm-5" type="submit" aria-label="add" data-i18n="rssForm.buttonText">Добавить</button>
                </div>
              </div>
            </form>
            <p class="text-muted mt-2 mb-0" data-i18n="rssForm.descriptionText">Пример: https://lorem-rss.hexlet.app/feed</p>
            <p class="feedback m-0 position-absolute small text-danger" data-i18n="rssForm.errorMessages"></p>
          </div>
        </div>
      </section>
      <section class="container-fluid container-xxl p-5">
        <div class="row">
          <div class="col-md-10 col-lg-8 order-1 mx-auto posts">
            <div class="card border-0">
              <div class="card-body posts-card-body">
              </div>
              <ul class="list-group list-group-posts border-0 rounded-0">
              </ul>
            </div>
          </div>
          <div class="col-md-10 col-lg-4 mx-auto order-0 order-lg-1 feeds">
            <div class="card border-0">
              <div class="card-body feeds-card-body">
              </div>
              <ul class="list-group list-group-feeds border-0 rounded-0">
              </ul>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="footer border-top py-3 mt-5 bg-light">
      <div class="container-xl">
        <p class="text-center my-0">
          Created by <a href="https://github.com/Vyachowski/frontend-project-11" target="_blank">Slava Haikin</a>
        </p>
      </div>
    </footer>
  <!--  Modal window -->
    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="modalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-break"></div>
          <div class="modal-footer">
            <a class="btn btn-primary full-article" href="#" target="_blank" data-i18n="modalWindow.mainButton">Читать полностью</a>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-i18n="modalWindow.secondaryButton">Закрыть</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>