90 подписчиков

Готовый шаблон HTML сайта по услугам сантехники

14 августа14 авг

14 мин

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Профессиональные сантехнические услуги - СантехМастер</title> <style> /* Основные стили */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; color: #333; line-height: 1.6; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Шапка сайта */ header { background: linear-gradient(135deg, #1e5799 0%, #207cca 100%); color: white; padding: 15px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; } .logo h1 { font-size: 24px; margin-left: 10px; } .logo-icon { font-size: 32px; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 25px; } nav ul li

<!DOCTYPE html>

<head>

<title>Профессиональные сантехнические услуги - СантехМастер</title>

<style>

/* Основные стили */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: #f5f7fa;

color: #333;

line-height: 1.6;

}

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Шапка сайта */

header {

background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);

color: white;

padding: 15px 0;

position: sticky;

top: 0;

z-index: 100;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

.header-content {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

display: flex;

align-items: center;

}

.logo h1 {

font-size: 24px;

margin-left: 10px;

}

.logo-icon {

font-size: 32px;

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin-left: 25px;

}

nav ul li a {

color: white;

text-decoration: none;

font-weight: 500;

transition: all 0.3s ease;

}

nav ul li a:hover {

color: #ffd700;

}

.contacts {

text-align: right;

}

.phone {

font-size: 20px;

font-weight: bold;

margin-bottom: 5px;

}

.callback-btn {

background: #ffd700;

color: #1e5799;

border: none;

padding: 8px 15px;

border-radius: 30px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

}

.callback-btn:hover {

background: #ffc400;

transform: translateY(-2px);

}

/* Герой-секция */

.hero {

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231e5799"/><path d="M0 0L100 100M100 0L0 100" stroke="%23207cca" stroke-width="1"/></svg>') center/cover;

color: white;

padding: 100px 0;

text-align: center;

position: relative;

}

.hero-content {

max-width: 800px;

margin: 0 auto;

}

.hero h2 {

font-size: 48px;

margin-bottom: 20px;

text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}

.hero p {

font-size: 20px;

margin-bottom: 30px;

}

.cta-button {

background: #ffd700;

color: #1e5799;

border: none;

padding: 15px 40px;

border-radius: 50px;

font-size: 18px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}

.cta-button:hover {

background: #ffc400;

transform: translateY(-3px);

box-shadow: 0 6px 15px rgba(0,0,0,0.3);

}

/* Секция услуг */

.services {

padding: 80px 0;

background-color: white;

}

.section-title {

text-align: center;

margin-bottom: 50px;

}

.section-title h2 {

font-size: 36px;

color: #1e5799;

position: relative;

display: inline-block;

padding-bottom: 15px;

}

.section-title h2::after {

content: '';

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 3px;

background: #ffd700;

}

.services-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.service-card {

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 5px 15px rgba(0,0,0,0.1);

transition: transform 0.3s ease;

}

.service-card:hover {

transform: translateY(-10px);

}

.service-icon {

background: #1e5799;

color: white;

font-size: 40px;

text-align: center;

padding: 25px;

}

.service-content {

padding: 25px;

}

.service-content h3 {

color: #1e5799;

margin-bottom: 15px;

}

.price {

color: #ff6b6b;

font-weight: bold;

font-size: 20px;

margin: 15px 0;

}

/* Секция преимуществ */

.benefits {

padding: 80px 0;

background: linear-gradient(to bottom, #f0f8ff, #e6f7ff);

}

.benefits-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 30px;

}

.benefit-item {

text-align: center;

padding: 30px 20px;

background: white;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}

.benefit-icon {

font-size: 40px;

color: #1e5799;

margin-bottom: 20px;

}

/* Секция отзывов */

.testimonials {

padding: 80px 0;

background-color: white;

}

.testimonials-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

gap: 30px;

}

.testimonial-card {

background: #f9f9f9;

border-radius: 10px;

padding: 30px;

position: relative;

box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}

.testimonial-card::before {

content: '"';

position: absolute;

top: 20px;

left: 20px;

font-size: 60px;

color: #ffd700;

opacity: 0.3;

font-family: serif;

}

.client-info {

display: flex;

align-items: center;

margin-top: 20px;

}

.client-info img {

width: 50px;

height: 50px;

border-radius: 50%;

margin-right: 15px;

object-fit: cover;

}

/* Форма заявки */

.contact-form {

padding: 80px 0;

background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);

color: white;

}

.form-container {

max-width: 600px;

margin: 0 auto;

background: rgba(255, 255, 255, 0.1);

padding: 40px;

border-radius: 10px;

backdrop-filter: blur(10px);

}

.form-container h2 {

text-align: center;

margin-bottom: 30px;

}

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

}

.form-group input,

.form-group textarea {

width: 100%;

padding: 12px;

border-radius: 5px;

border: 1px solid rgba(255,255,255,0.2);

background: rgba(255,255,255,0.1);

color: white;

font-size: 16px;

}

.form-group input::placeholder,

.form-group textarea::placeholder {

color: rgba(255,255,255,0.6);

}

.submit-btn {

width: 100%;

padding: 15px;

background: #ffd700;

color: #1e5799;

border: none;

border-radius: 5px;

font-size: 18px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

}

.submit-btn:hover {

background: #ffc400;

}

/* Игра в футере */

.game-section {

background: #222;

padding: 20px 0;

text-align: center;

}

.game-container {

max-width: 600px;

margin: 0 auto;

padding: 20px;

}

.game-title {

color: white;

margin-bottom: 15px;

}

.game-description {

color: #aaa;

margin-bottom: 20px;

}

#gameCanvas {

background: #333;

border-radius: 5px;

display: block;

margin: 0 auto;

border: 2px solid #ffd700;

}

.game-controls {

margin-top: 15px;

color: #ddd;

}

/* Подвал */

footer {

background: #111;

color: #aaa;

padding: 30px 0;

text-align: center;

}

.footer-content {

display: flex;

flex-direction: column;

align-items: center;

}

.copyright {

margin-top: 20px;

}

/* Адаптивность */

@media (max-width: 768px) {

.header-content {

flex-direction: column;

text-align: center;

}

nav ul {

margin: 20px 0;

}

nav ul li {

margin: 0 10px;

}

.contacts {

text-align: center;

}

.hero h2 {

font-size: 36px;

}

.hero p {

font-size: 18px;

}

</style>

</head>

<body>

<h1>СантехМастер</h1>

</div>

<nav>

<ul>

<li><a href="#services">Услуги</a></li>

<li><a href="#benefits">Преимущества</a></li>

<li><a href="#testimonials">Отзывы</a></li>

<li><a href="#contact">Контакты</a></li>

</ul>

</nav>

<button class="callback-btn">Заказать звонок</button>

</div>

</header>

<h2>Профессиональные сантехнические услуги</h2>

<p>Быстрое решение любых проблем с сантехникой, отоплением и канализацией. Работаем 24/7 с гарантией качества!</p>

<button class="cta-button">Вызвать мастера</button>

</div>

</section>

<h2>Наши услуги</h2>

</div>

<h3>Устранение протечек</h3>

<p>Оперативное устранение протечек труб, кранов, радиаторов и других сантехнических элементов.</p>

</div>

<h3>Установка сантехники</h3>

<p>Профессиональный монтаж унитазов, раковин, смесителей, душевых кабин и другой сантехники.</p>

</div>

<h3>Прочистка засоров</h3>

<p>Эффективная прочистка канализационных труб и устранение засоров любой сложности.</p>

</div>

<h3>Ремонт отопления</h3>

<p>Установка, замена и ремонт радиаторов отопления, труб и других элементов системы.</p>

</div>

<h3>Замена канализации</h3>

<p>Полная или частичная замена канализационных труб, стояков и других элементов системы.</p>

</div>

<h3>Аварийный ремонт</h3>

<p>Круглосуточный выезд мастера для устранения аварийных ситуаций в сантехнике.</p>

</div>

</section>

<h2>Почему выбирают нас</h2>

</div>

<h3>Быстрый выезд</h3>

<p>Мастер приедет в течение 60 минут после вашего звонка</p>

</div>

<h3>Опытные мастера</h3>

<p>Работают специалисты с опытом от 5 лет</p>

</div>

<h3>Гарантия качества</h3>

<p>Гарантия на все виды работ до 2 лет</p>

</div>

<h3>Фиксированные цены</h3>

<p>Цена оговаривается до начала работ и не меняется</p>

</div>

</section>

<h2>Отзывы клиентов</h2>

</div>

<p>Вызвал мастера ночью из-за прорыва трубы. Приехал через 40 минут, быстро все починил. Цена соответствовала озвученной по телефону. Очень доволен оперативностью и качеством работы!</p>

<div>

<h4>Иван Петров</h4>

<p>Москва, 12 мая 2023</p>

</div>

<p>Заказывала установку новой душевой кабины. Мастер приехал точно в назначенное время, аккуратно выполнил работу, убрал за собой. Качеством довольна, цена адекватная. Буду рекомендовать знакомым!</p>

<div>

<h4>Ольга Сидорова</h4>

<p>Московская обл., 28 апреля 2023</p>

</div>

<p>Проблема с канализацией в частном доме. Долго не мог найти специалистов, которые могли бы качественно решить проблему. Эти ребята приехали с необходимым оборудованием, прочистили засор, дали гарантию. Спасибо!</p>

<div>

<h4>Алексей Козлов</h4>

<p>Подольск, 3 мая 2023</p>

</div>

</section>

<h2>Оставьте заявку</h2>

<form>

</div>

<label for="phone">Телефон</label>

</div>

<label for="service">Услуга</label>

<option value="">Выберите услугу</option>

<option value="leak">Устранение протечек</option>

<option value="installation">Установка сантехники</option>

<option value="cleaning">Прочистка засоров</option>

<option value="heating">Ремонт отопления</option>

<option value="sewer">Замена канализации</option>

<option value="emergency">Аварийный ремонт</option>

</select>

</div>

<label for="message">Сообщение (необязательно)</label>

</div>

<button type="submit" class="submit-btn">Вызвать мастера</button>

</form>

</div>

</section>

<h3 class="game-title">Игра "Сантехник"</h3>

<p class="game-description">Помогите сантехнику перепрыгнуть протечки! Нажмите пробел, чтобы прыгнуть.</p>

<p class="game-controls">Управление: пробел или стрелка вверх для прыжка</p>

</div>

</section>

<h1 style="color: #ddd;">СантехМастер</h1>

</div>

<p>Круглосуточно, без выходных</p>

</div>

</div>

</footer>

// Игра "Сантехник"

document.addEventListener('DOMContentLoaded', function() {

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// Размеры персонажа

const plumberWidth = 30;

const plumberHeight = 50;

const plumberX = 50;

let plumberY = canvas.height - plumberHeight - 10;

// Переменные для прыжка

let isJumping = false;

let jumpPower = 0;

const gravity = 0.6;

const jumpStrength = 12;

// Препятствия (протечки)

let leaks = [];

const leakWidth = 20;

const leakHeight = 30;

let leakSpeed = 5;

let leakInterval = 1500; // миллисекунды

let lastLeakTime = 0;

// Игровые переменные

let score = 0;

let gameSpeed = 1;

let gameRunning = false;

// Изображения

const plumberImg = new Image();

plumberImg.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 50"><rect width="30" height="50" fill="%231e5799"/><circle cx="15" cy="15" r="10" fill="%23ffd700"/><rect x="10" y="25" width="10" height="20" fill="%23ffd700"/></svg>';

const leakImg = new Image();

leakImg.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 30"><path d="M10 0 Q15 10 10 20 Q5 30 10 30 Q15 30 10 20 Q5 10 10 0" fill="%23ff6b6b"/></svg>';

// Управление

document.addEventListener('keydown', function(event) {

if ((event.code === 'Space' || event.key === 'ArrowUp') && !isJumping && gameRunning) {

isJumping = true;

jumpPower = jumpStrength;

}

// Запуск игры при нажатии пробела

if (!gameRunning && (event.code === 'Space' || event.key === 'ArrowUp')) {

startGame();

}

});

// Функция запуска игры

function startGame() {

gameRunning = true;

score = 0;

leaks = [];

plumberY = canvas.height - plumberHeight - 10;

gameSpeed = 1;

leakSpeed = 5;

leakInterval = 1500;

lastLeakTime = 0;

gameLoop();

}

// Главный игровой цикл

function gameLoop(timestamp) {

if (!gameRunning) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Отрисовка земли

ctx.fillStyle = '#555';

ctx.fillRect(0, canvas.height - 10, canvas.width, 10);

// Отрисовка сантехника

ctx.drawImage(plumberImg, plumberX, plumberY, plumberWidth, plumberHeight);

// Физика прыжка

if (isJumping) {

plumberY -= jumpPower;

jumpPower -= gravity;

if (plumberY >= canvas.height - plumberHeight - 10) {

plumberY = canvas.height - plumberHeight - 10;

isJumping = false;

}

// Создание новых протечек

if (timestamp - lastLeakTime > leakInterval) {

leaks.push({

x: canvas.width,

y: canvas.height - leakHeight - 10,

width: leakWidth,

height: leakHeight

});

lastLeakTime = timestamp;

// Увеличение сложности

if (leakInterval > 800) {

leakInterval -= 10;

}

if (leakSpeed < 10) {

leakSpeed += 0.1;

}

// Отрисовка и движение протечек

for (let i = 0; i < leaks.length; i++) {

const leak = leaks[i];

leak.x -= leakSpeed;

ctx.drawImage(leakImg, leak.x, leak.y, leak.width, leak.height);

// Удаление протечек, вышедших за экран

if (leak.x + leak.width < 0) {

leaks.splice(i, 1);

i--;

score++;

continue;

}

// Проверка столкновений

if (

plumberX < leak.x + leak.width &&

plumberX + plumberWidth > leak.x &&

plumberY < leak.y + leak.height &&

plumberY + plumberHeight > leak.y

) {

gameOver();

return;

}

// Отрисовка счета

ctx.fillStyle = 'white';

ctx.font = '20px Arial';

ctx.fillText('Счет: ' + score, 20, 30);

requestAnimationFrame(gameLoop);

}

// Функция завершения игры

function gameOver() {

gameRunning = false;

ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'white';

ctx.font = '30px Arial';

ctx.textAlign = 'center';

ctx.fillText('Игра окончена!', canvas.width / 2, canvas.height / 2 - 20);

ctx.font = '24px Arial';

ctx.fillText('Ваш счет: ' + score, canvas.width / 2, canvas.height / 2 + 20);

ctx.font = '18px Arial';

ctx.fillText('Нажмите пробел, чтобы играть снова', canvas.width / 2, canvas.height / 2 + 60);

}

// Начальная отрисовка экрана приветствия

drawWelcomeScreen();

function drawWelcomeScreen() {

ctx.fillStyle = '#333';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'white';

ctx.font = '24px Arial';

ctx.textAlign = 'center';

ctx.fillText('Игра "Сантехник"', canvas.width / 2, canvas.height / 2 - 30);

ctx.font = '18px Arial';

ctx.fillText('Нажмите пробел или стрелку вверх, чтобы начать', canvas.width / 2, canvas.height / 2 + 20);

ctx.fillStyle = '#ffd700';

ctx.font = '16px Arial';

ctx.fillText('Перепрыгивайте протечки воды!', canvas.width / 2, canvas.height / 2 + 60);

}

});

</script>

</body>

</html>