Лендинг пейдж (Landing Page) на HTML и CSS
Вот код полностью рабочего лендинга с основными элементами:
html
Copy
Download
Run
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Marketing Agency | Главная</title> <style> /* Общие стили */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; } body { line-height: 1.6; color: #333; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* Шапка */ header { background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: fixed; width: 100%; z-index: 100; } nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { font-size: 24px; font-weight: 700; color: #2c3e50; text-decoration: none; } .logo span { color: #3498db; } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 30px; } .nav-links a { text-decoration: none; color: #2c3e50; font-weight: 500; transition: color 0.3s; } .nav-links a:hover { color: #3498db; } .btn { display: inline-block; background: #3498db; color: #fff; padding: 10px 25px; border-radius: 50px; text-decoration: none; font-weight: 500; transition: background 0.3s; } .btn:hover { background: #2980b9; } /* Герой секция */ .hero { padding: 150px 0 100px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); text-align: center; } .hero h1 { font-size: 48px; margin-bottom: 20px; color: #2c3e50; } .hero p { font-size: 20px; color: #7f8c8d; max-width: 700px; margin: 0 auto 30px; } .cta-buttons { display: flex; justify-content: center; gap: 20px; } .btn-secondary { background: #fff; color: #3498db; border: 2px solid #3498db; } .btn-secondary:hover { background: #f8f9fa; } /* Особенности */ .features { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-size: 36px; color: #2c3e50; margin-bottom: 15px; } .section-title p { color: #7f8c8d; max-width: 700px; margin: 0 auto; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .feature-card { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center; transition: transform 0.3s; } .feature-card:hover { transform: translateY(-10px); } .feature-icon { width: 80px; height: 80px; background: #e3f2fd; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .feature-icon i { font-size: 36px; color: #3498db; } .feature-card h3 { font-size: 22px; margin-bottom: 15px; color: #2c3e50; } /* Отзывы */ .testimonials { padding: 80px 0; background: #f8f9fa; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .testimonial-card { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .testimonial-text { font-style: italic; margin-bottom: 20px; color: #7f8c8d; } .testimonial-author { display: flex; align-items: center; } .author-img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; } .author-info h4 { font-size: 18px; margin-bottom: 5px; color: #2c3e50; } .author-info p { color: #7f8c8d; font-size: 14px; } /* CTA секция */ .cta { padding: 100px 0; background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%); color: #fff; text-align: center; } .cta h2 { font-size: 36px; margin-bottom: 20px; } .cta p { font-size: 20px; max-width: 700px; margin: 0 auto 30px; opacity: 0.9; } .cta .btn { background: #fff; color: #3498db; font-size: 18px; padding: 15px 40px; } /* Подвал */ footer { background: #2c3e50; color: #fff; padding: 50px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 40px; } .footer-column h3 { font-size: 20px; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-column h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background: #3498db; } .footer-column p { margin-bottom: 15px; opacity: 0.8; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s; } .footer-links a:hover { opacity: 1; } .social-links { display: flex; gap: 15px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; color: #fff; transition: background 0.3s; } .social-links a:hover { background: #3498db; } .copyright { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); opacity: 0.7; font-size: 14px; } /* Адаптивность */ @media (max-width: 768px) { nav { flex-direction: column; text-align: center; } .nav-links { margin-top: 20px; } .nav-links li { margin: 0 10px; } .hero h1 { font-size: 36px; } .hero p { font-size: 18px; } .cta-buttons { flex-direction: column; align-items: center; } .section-title h2 { font-size: 30px; } } </style> <!-- Иконочный шрифт --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Шапка --> <header> <div class="container"> <nav> <a href="#" class="logo">Digital<span>Agency</span></a> <ul class="nav-links"> <li><a href="#">Главная</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Кейсы</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Блог</a></li> <li><a href="#" class="btn">Консультация</a></li> </ul> </nav> </div> </header> <!-- Герой секция --> <section class="hero"> <div class="container"> <h1>Продвижение бизнеса в цифровой эре</h1> <p>Мы помогаем компаниям увеличивать продажи с помощью современных digital-инструментов и стратегий маркетинга.</p> <div class="cta-buttons"> <a href="#" class="btn">Начать проект</a> <a href="#" class="btn btn-secondary">Узнать больше</a> </div> </div> </section> <!-- Особенности --> <section class="features"> <div class="container"> <div class="section-title"> <h2>Наши услуги</h2> <p>Мы предлагаем комплексные решения для развития вашего бизнеса в интернете</p> </div> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-chart-line"></i> </div> <h3>SEO оптимизация</h3> <p>Повышаем видимость вашего сайта в поисковых системах и приводим целевых клиентов</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-ad"></i> </div> <h3>Контекстная реклама</h3> <p>Настраиваем эффективные рекламные кампании в Google и Яндекс с гарантией результата</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-laptop-code"></i> </div> <h3>Разработка сайтов</h3> <p>Создаем современные и удобные сайты, которые приносят прибыль</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-bullhorn"></i> </div> <h3>SMM продвижение</h3> <p>Развиваем ваше присутствие в социальных сетях и увеличиваем вовлеченность аудитории</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-envelope-open-text"></i> </div> <h3>Email-маркетинг</h3> <p>Создаем персонализированные рассылки, которые действительно читают</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-analytics"></i> </div> <h3>Аналитика</h3> <p>Отслеживаем эффективность всех каналов и оптимизируем маркетинговый бюджет</p> </div> </div> </div> </section> <!-- Отзывы --> <section class="testimonials"> <div class="container"> <div class="section-title"> <h2>Отзывы клиентов</h2> <p>Что говорят о нас предприниматели, которые уже работают с нами</p> </div> <div class="testimonials-grid"> <div class="testimonial-card"> <p class="testimonial-text">"Сотрудничаем с DigitalAgency уже больше года. За это время трафик на сайт вырос в 3 раза, а количество заявок увеличилось на 150%. Очень доволен результатом!"</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Иван Петров" class="author-img"> <div class="author-info"> <h4>Иван Петров</h4> <p>Директор, ООО "ТехноПром"</p> </div> </div> </div> <div class="testimonial-card"> <p class="testimonial-text">"Передали агентству все рекламные каналы и ни разу не пожалели. Они не просто настраивают рекламу, а действительно думают о нашей прибыли. Рекомендую!"</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Елена Смирнова" class="author-img"> <div class="author-info"> <h4>Елена Смирнова</h4> <p>Владелец, "Бьюти Салон"</p> </div> </div> </div> <div class="testimonial-card"> <p class="testimonial-text">"После запуска нового сайта и SEO-продвижения наш интернет-магазин вышел на прибыль уже через 3 месяца. Спасибо за профессиональный подход!"</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Алексей Козлов" class="author-img"> <div class="author-info"> <h4>Алексей Козлов</h4> <p>Основатель, "Модный Дом"</p> </div> </div> </div> </div> </div> </section> <!-- CTA секция --> <section class="cta"> <div class="container"> <h2>Готовы увеличить продажи?</h2> <p>Оставьте заявку и получите бесплатную консультацию нашего специалиста</p> <a href="#" class="btn">Оставить заявку</a> </div> </section> <!-- Подвал --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-column"> <h3>О компании</h3> <p>DigitalAgency - современное digital-агентство полного цикла. Мы помогаем бизнесу расти в интернете с 2015 года.</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="footer-column"> <h3>Услуги</h3> <ul class="footer-links"> <li><a href="#">SEO-оптимизация</a></li> <li><a href="#">Контекстная реклама</a></li> <li><a href="#">Разработка сайтов</a></li> <li><a href="#">SMM продвижение</a></li> <li><a href="#">Email-маркетинг</a></li> </ul> </div> <div class="footer-column"> <h3>Компания</h3> <ul class="footer-links"> <li><a href="#">О нас</a></li> <li><a href="#">Команда</a></li> <li><a href="#">Кейсы</a></li> <li><a href="#">Блог</a></li> <li><a href="#">Вакансии</a></li> </ul> </div> <div class="footer-column"> <h3>Контакты</h3> <p><i class="fas fa-map-marker-alt"></i> Москва, ул. Тверская, 18</p> <p><i class="fas fa-phone"></i> +7 (495) 123-45-67</p> <p><i class="fas fa-envelope"></i> info@digitalagency.ru</p> </div> </div> <div class="copyright"> <p>© 2023 DigitalAgency. Все права защищены.</p> </div> </div> </footer> </body> </html>
Особенности этого лендинга:
- Полностью адаптивный дизайн - корректно отображается на всех устройствах
- Современный внешний вид с анимациями при наведении
- Все ключевые секции лендинга:
- Шапка с навигацией
- Герой-секция с призывом к действию
- Блок услуг/преимуществ
- Отзывы клиентов
- CTA-секция (призыв к действию)
- Подвал с контактами и ссылками
- Готов к использованию - просто скопируйте код в HTML-файл и откройте в браузере
Как можно доработать:
- Добавить реальные изображения вместо placeholder'ов
- Подключить формы обратной связи (можно использовать сервисы типа Formspree)
- Добавить больше анимаций (например, при скролле)
- Интегрировать с CMS или системой управления контентом
Нужна ли вам помощь с какой-то конкретной доработкой этого лендинга?
