/
Sivodedov
/
dev2
Обзор
Документация
Войти
/
Sivodedov
/
dev2
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
templates/index.html
360 строк
19 KB
Your Name
first_commit
01 апр 2025, 11:02
01 апр 2025, 11:02
3d885e8
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Шаблон сайта</title> <!-- CSS --> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> <!-- ШРИФТЫ --> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Иконки font awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- JS --> <script src="{{ url_for('static', filename='js/script.js') }}" defer></script> </head> <body> <!-- ТЕЛО САЙТА --> <div class="container"> <!-- =================== ВЕРХНИЙ БЛОК (TOP) =================== --> <!-- Блок header содержит логотип, контакты и навигационное меню --> <header class="block top"> <!-- Верхняя часть шапки с логотипом, контактами и кнопкой --> <div class="top-wrapper"> <!-- ЛОГОТИП --> <div class="logo"> <a href="#"> <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Логотип"> <span>Название компании</span> </a> </div> <!-- КОНТАКТЫ --> <div class="contacts"> <!-- Первый контакт (телефон) --> <div class="contact-item"> <i class="fa-solid fa-phone"></i> <a href="tel:+70000000000">+8 (800) 555-08-55</a> </div> <!-- Второй контакт (email) --> <div class="contact-item"> <i class="fa-solid fa-envelope"></i> <a href="mailto:info@example.com">korpmail@bk.ru</a> </div> </div> <!-- КНОПКА обратной связи, ЗАПИСИ ИЛИ НАПРИМЕР ЗАКАЗА ЗВОНКА --> <button id="feedback-btn" class="btn">Записаться на прием</button> </div> <!-- НАВИГАЦИОННОЕ МЕНЮ --> <nav class="menu"> <!-- Список пунктов меню(можно отцентрировать потом в зависимости от дизайна) --> <ul class="menu-list"> <li class="menu-item active"><a href="#">1</a></li> <li class="menu-item"><a href="#block2">2</a></li> <li class="menu-item"><a href="#block3">3</a></li> <li class="menu-item"><a href="#block4">4</a></li> <li class="menu-item"><a href="#block5">5</a></li> </ul> </nav> </header> <!-- =================== БЛОК БАННЕРА =================== --> <!-- Изображение добавить через styles.css в background-image --> <div class="banner"> <div class="banner-content"> <h1>Название компании(class banner)</h1> <p>Краткое описание</p> <button id="cta-btn" class="btn">Записаться на прием</button> </div> </div> <!-- ОСНОВНОЙ КОНТЕНТ --> <!-- Три блока ниже баннера: left, main, right --> <div class="content-wrapper"> <!-- =================== ЛЕВЫЙ БЛОК (LEFT) =================== --> <!--Левая боковая колонка --> <aside class="block left"> <!-- ПЕРВЫЙ БЛОК --> <section id="block1" class="section"> <h2 class="section-title">Заголовок блока 1</h2> <div class="section-content"> <!-- Содержимое первого блока --> <div class="image-block"> <img src="{{ url_for('static', filename='images/image1.jpg') }}" alt="Изображение 1"> </div> <h3>Подзаголовок</h3> <p>Текстовое содержимое блока. Какое либо описание.</p> <div class="extra-images"> <img src="{{ url_for('static', filename='images/extra1.jpg') }}" alt="Дополнительное изображение 2"> <img src="{{ url_for('static', filename='images/extra2.jpg') }}" alt="Дополнительное изображение 3"> </div> </div> </section> <!-- ВТОРОЙ БЛОК --> <section class="section"> <h2 class="section-title">Заголовок блока 2</h2> <div class="section-content"> <!-- Содержимое второго блока --> <p>Текстовая информация 1</p> <p>Текстовая информация 2</p> </div> </section> <!-- ТРЕТИЙ БЛОК --> <section class="section"> <h2 class="section-title">Заголовок блока 3</h2> <div class="section-content"> <!-- Блок социальных сетей или других ссылок с иконками --> <div class="social-links"> <a href="https://ya.ru" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-vk"></i></a> <a href="#" class="social-link"><i class="fab fa-telegram"></i></a> <a href="#" class="social-link"><i class="fab fa-whatsapp"></i></a> </div> </div> </section> </aside> <!-- =================== ЦЕНТРАЛЬНЫЙ БЛОК (MAIN) =================== --> <!-- Основной контент сайта --> <main class="block main"> <!-- БЛОК УСЛУГ ИЛИ ПРОДУКТОВ --> <section id="block3" class="section"> <h2 class="section-title">Заголовок для списка услуг/товаров</h2> <div class="section-content"> <!-- Сетка услуг или товаров --> <div class="services-grid"> <!-- Карточка услуги/товара 1 --> <div class="service-card"> <div class="service-icon"> <i class="fas fa-star"></i> </div> <h3>Название услуги/товара 1</h3> <p>Описание услуги или товара 1</p> <p class="price">Цена 1</p> </div> <!-- Карточка услуги/товара 2 --> <div class="service-card"> <div class="service-icon"> <i class="fas fa-heart"></i> </div> <h3>Название услуги/товара 2</h3> <p>Описание услуги или товара 2</p> <p class="price">Цена 2</p> </div> <!-- Карточка услуги/товара 3 --> <div class="service-card"> <div class="service-icon"> <i class="fas fa-gem"></i> </div> <h3>Название услуги/товара 3</h3> <p>Описание услуги или товара 3</p> <p class="price">Цена 3</p> </div> <!-- Карточка услуги/товара 4 --> <div class="service-card"> <div class="service-icon"> <i class="fas fa-shield-alt"></i> </div> <h3>Название услуги/товара 4</h3> <p>Описание услуги или товара 4</p> <p class="price">Цена 4</p> </div> </div> </div> </section> <!-- БЛОК ГАЛЕРЕИ --> <section id="block4" class="section"> <h2 class="section-title">Заголовок для галереи</h2> <div class="section-content"> <!-- Сетка изображений --> <div class="portfolio-grid"> <!-- Изображение 1 --> <div class="portfolio-item"> <img src="{{ url_for('static', filename='images/item1.jpg') }}" alt="Изображение 1"> </div> <!-- Изображение 2 --> <div class="portfolio-item"> <img src="{{ url_for('static', filename='images/item2.jpg') }}" alt="Изображение 2"> </div> <!-- Изображение 3 --> <div class="portfolio-item"> <img src="{{ url_for('static', filename='images/item3.jpg') }}" alt="Изображение 3"> </div> <!-- Изображение 4 --> <div class="portfolio-item"> <img src="{{ url_for('static', filename='images/item4.jpg') }}" alt="Изображение 4"> </div> <!-- Изображение 5 --> <div class="portfolio-item"> <img src="{{ url_for('static', filename='images/item5.jpg') }}" alt="Изображение 5"> </div> <!-- Изображение 6 --> <div class="portfolio-item"> <img src="{{ url_for('static', filename='images/item6.jpg') }}" alt="Изображение 6"> </div> </div> <!-- Кнопка "Показать больше" --> <div class="more-button"> <a href="#" class="btn">Кнопка "Показать больше"</a> </div> </div> </section> <!-- БЛОК ОТЗЫВОВ --> <section class="section"> <h2 class="section-title">Заголовок для отзывов</h2> <div class="section-content"> <!-- Блок с отзывами --> <div class="reviews"> <!-- Отзыв 1 --> <div class="review-item"> <div class="review-text"> <p>"Текст отзыва 1."</p> </div> <div class="review-author"> <p>Имя автора отзыва 1</p> </div> </div> <!-- Отзыв 2 --> <div class="review-item"> <div class="review-text"> <p>"Текст отзыва 2."</p> </div> <div class="review-author"> <p>Имя автора отзыва 2</p> </div> </div> </div> </div> </section> </main> <!-- =================== ПРАВЫЙ БЛОК (RIGHT) =================== --> <!-- Правая боковая колонка --> <aside class="block right"> <!-- БЛОК КОНТАКТОВ --> <section id="block5" class="section"> <h2 class="section-title">Контактная информация</h2> <div class="section-content"> <!-- Адрес --> <div class="contact-block"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-info"> <h3>Адрес</h3> <p>Город, улица, дом, офис</p> <a href="#">Ссылка на карту</a> </div> </div> <!-- Телефон --> <div class="contact-block"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-info"> <h3>Телефон</h3> <p><a href="tel:+70000000000">+7 (000) 000-00-00</a></p> </div> </div> <!-- Email --> <div class="contact-block"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-info"> <h3>Email</h3> <p><a href="mailto:info@example.com">info@example.com</a></p> </div> </div> </div> </section> </aside> </div> <!-- =================== НИЖНИЙ БЛОК (BOTTOM) =================== --> <!-- Подвал сайта с копирайтом и ссылками --> <footer class="block bottom"> <div class="bottom-content"> <!-- Копирайт --> <div class="copyright"> © 2024 Название компании. Все права защищены. </div> <!-- Дополнительные ссылки --> <div class="footer-links"> <a href="#block3">Вернутся в начало</a> </div> </div> </footer> </div> <!-- Всплывающая форма --> <div id="feedback-modal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2>Заголовок формы</h2> <form class="modal-form"> <!-- Поле для имени --> <div class="form-group"> <label for="name">Имя:</label> <input type="text" id="name" name="name" required> </div> <!-- Поле для телефона --> <div class="form-group"> <label for="phone">Телефон:</label> <input type="tel" id="phone" name="phone" required> </div> <!-- Выпадающий список --> <div class="form-group"> <label for="service">Выбор услуги:</label> <select id="service" name="service" required> <option value="" disabled selected>Выберите вариант</option> <option value="option1">Вариант 1</option> <option value="option2">Вариант 2</option> <option value="option3">Вариант 3</option> <option value="option4">Вариант 4</option> </select> </div> <!-- Поле для даты --> <div class="form-group"> <label for="date">Дата:</label> <input type="date" id="date" name="date" required> </div> <!-- Поле для комментария --> <div class="form-group"> <label for="message">Комментарий:</label> <textarea id="message" name="message"></textarea> </div> <!-- Кнопка отправки формы --> <button type="submit" class="btn">Отправить</button> </form> </div> </div> <!-- Вторая форма --> <div id="cta-modal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2>Тест кнопки</h2> <form class="modal-form"> <div class="form-group"> <label for="quick-name">Имя:</label> <input type="text" id="quick-name" name="quick-name" required> </div> <div class="form-group"> <label for="quick-phone">Телефон:</label> <input type="tel" id="quick-phone" name="quick-phone" required> </div> <button type="submit" class="btn">Отправить заявку</button> </form> </div> </div> </body> </html>