Hugging Face's logo

Spaces:
Starchik1
/
dpkrovlya
Running

App Files Community
Starchik1 commited on
Commit
25690b8
·
verified ·
1 Parent(s): f45ca93

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +94 -100
index.html CHANGED
@@ -170,18 +170,6 @@
170
  left: 50%;
171
  top: 50%;
172
  }
173
- .cta-button .button-text {
174
- transition: all 0.3s ease;
175
- display: inline-block;
176
- position: relative;
177
- }
178
- .cta-button:hover .button-text {
179
- animation: fadeIn 0.3s ease;
180
- }
181
- @keyframes fadeIn {
182
- from { opacity: 0; transform: translateY(3px); }
183
- to { opacity: 1; transform: translateY(0); }
184
- }
185
  .services {
186
  padding: var(--section-padding);
187
  background: linear-gradient(175deg, #fff 60%, var(--light) 100%);
@@ -306,10 +294,12 @@
306
  width: 20px;
307
  text-align: center;
308
  }
309
- .material-props i.fa-wave-square { color: var(--accent); }
 
310
  .material-props i.fa-temperature-low { color: #2dd4bf; }
311
  .material-props i.fa-snowflake { color: #38bdf8; }
312
  .material-props i.fa-boxes { color: #f59e0b; }
 
313
  .steps-section {
314
  padding: var(--section-padding);
315
  background: var(--light);
@@ -474,13 +464,13 @@
474
  <div class="hero-content">
475
  <h1>Профессиональные кровельные работы</h1>
476
  <p>Качественный монтаж и ремонт кровли с гарантией 5 лет</p>
477
- <a href="tel:+380979752177" class="cta-button" data-operator="Киевстар" data-phone="+380 97 975 2177">
478
  <i class="fas fa-phone-alt"></i>
479
- <span class="button-text">Киевстар</span>
480
  </a>
481
- <a href="tel:+380959009448" class="cta-button" data-operator="Водафон" data-phone="+380 95 900 9448">
482
  <i class="fas fa-phone-alt"></i>
483
- <span class="button-text">Водафон</span>
484
  </a>
485
  </div>
486
  </section>
@@ -503,12 +493,12 @@
503
  <p>Качественное восстановление и усиление конструкций</p>
504
  </div>
505
  <div class="service-card">
506
- <div class="service-icon">
507
- <i class="fas fa-building"></i>
508
- </div>
509
- <h3>Обслуживание кровли</h3>
510
- <p>Регулярный осмотр, чистка и профилактические работы для поддержания кровли в идеальном состоянии</p>
511
- </div>
512
  </div>
513
  </section>
514
 
@@ -537,79 +527,89 @@
537
  </div>
538
  </section>
539
 
540
- <section class="materials-section" id="materials">
541
- <h2 class="section-title">Используемые материалы</h2>
542
- <div class="materials-grid">
543
- <div class="material-card">
544
- <div class="material-image">
545
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-3-360-263-falc-370x270.jpg" alt="Фальцевая кровля">
546
- </div>
547
- <div class="material-content">
548
- <h3>Фальцевая кровля</h3>
549
- <ul class="material-props">
550
- <li><i class="fas fa-layer-group"></i> Материал: оцинкованная сталь/медь</li>
551
- <li><i class="fas fa-lock"></i> Шов: двойной замок</li>
552
- <li><i class="fas fa-calendar"></i> Срок службы: 50 лет</li>
553
- <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
554
- </ul>
555
- </div>
556
  </div>
557
- <div class="material-card">
558
- <div class="material-image">
559
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
560
- </div>
561
- <div class="material-content">
562
- <h3>Профнастил</h3>
563
- <ul class="material-props">
564
- <li><i class="fas fa-ruler"></i> Толщина: 0.4-0.7 мм</li>
565
- <li><i class="fas fa-paint-brush"></i> Покрытие: полимерное</li>
566
- <li><i class="fas fa-wave-square"></i> Высота волны: 20-40 мм</li>
567
- <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
568
- </ul>
569
- </div>
570
  </div>
571
- <div class="material-card">
572
- <div class="material-image">
573
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
574
- </div>
575
- <div class="material-content">
576
- <h3>Подшивка (софит)</h3>
577
- <ul class="material-props">
578
- <li><i class="fas fa-box"></i> Материал: ПВХ/металл</li>
579
- <li><i class="fas fa-wind"></i> Вентиляция: перфорированный</li>
580
- <li><i class="fas fa-ruler-horizontal"></i> Ширина: 30-50 см</li>
581
- <li><i class="fas fa-sun"></i> УФ-защита</li>
582
- </ul>
583
- </div>
584
  </div>
585
- <div class="material-card">
586
- <div class="material-image">
587
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
588
- </div>
589
- <div class="material-content">
590
- <h3>Мансардные окна</h3>
591
- <ul class="material-props">
592
- <li><i class="fas fa-window-maximize"></i> Остекление: 2-3 камеры</li>
593
- <li><i class="fas fa-cube"></i> Материал: дерево/ПВХ</li>
594
- <li><i class="fas fa-temperature-low"></i> Теплоизоляция</li>
595
- <li><i class="fas fa-cog"></i> Механизм открывания</li>
596
- </ul>
597
- </div>
598
  </div>
599
- <div class="material-card">
600
- <div class="material-image">
601
- <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
602
- </div>
603
- <div class="material-content">
604
- <h3>Водосточные системы</h3>
605
- <ul class="material-props">
606
- <li><i class="fas fa-tint"></i> Материал: ПВХ/металл</li>
607
- <li><i class="fas fa-ruler-vertical"></i> Диаметр: 100-150 мм</li>
608
- <li><i class="fas fa-snowflake"></i> Морозостойкость</li>
609
- <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
610
- </ul>
611
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
612
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
613
  <div class="material-card">
614
  <div class="material-image">
615
  <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
@@ -623,6 +623,7 @@
623
  </ul>
624
  </div>
625
  </div>
 
626
  <div class="material-card">
627
  <div class="material-image">
628
  <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
@@ -636,6 +637,7 @@
636
  </ul>
637
  </div>
638
  </div>
 
639
  <div class="material-card">
640
  <div class="material-image">
641
  <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
@@ -699,7 +701,7 @@
699
  <div class="footer-section">
700
  <h3>Контакты</h3>
701
  <p>+380 97 975 2177</p>
702
- <p>+380 95 900 9448</p>
703
  <p>[email protected]</p>
704
  </div>
705
  <div class="footer-section">
@@ -740,14 +742,6 @@
740
  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
741
  });
742
  });
743
- document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
744
- const operator = button.dataset.operator;
745
- const phone = button.dataset.phone;
746
- const textSpan = button.querySelector('.button-text');
747
-
748
- button.addEventListener('mouseenter', () => textSpan.textContent = phone);
749
- button.addEventListener('mouseleave', () => textSpan.textContent = operator);
750
- });
751
  </script>
752
  </body>
753
  </html>
 
170
  left: 50%;
171
  top: 50%;
172
  }
 
 
 
 
 
 
 
 
 
 
 
 
173
  .services {
174
  padding: var(--section-padding);
175
  background: linear-gradient(175deg, #fff 60%, var(--light) 100%);
 
294
  width: 20px;
295
  text-align: center;
296
  }
297
+
298
+ .material-props i.fa-wave-square { color: var(--accent); }
299
  .material-props i.fa-temperature-low { color: #2dd4bf; }
300
  .material-props i.fa-snowflake { color: #38bdf8; }
301
  .material-props i.fa-boxes { color: #f59e0b; }
302
+
303
  .steps-section {
304
  padding: var(--section-padding);
305
  background: var(--light);
 
464
  <div class="hero-content">
465
  <h1>Профессиональные кровельные работы</h1>
466
  <p>Качественный монтаж и ремонт кровли с гарантией 5 лет</p>
467
+ <a href="tel:+380979752177" class="cta-button">
468
  <i class="fas fa-phone-alt"></i>
469
+ Киевстар
470
  </a>
471
+ <a href="tel:+380959009448" class="cta-button">
472
  <i class="fas fa-phone-alt"></i>
473
+ Водафон
474
  </a>
475
  </div>
476
  </section>
 
493
  <p>Качественное восстановление и усиление конструкций</p>
494
  </div>
495
  <div class="service-card">
496
+ <div class="service-icon">
497
+ <i class="fas fa-building"></i>
498
+ </div>
499
+ <h3>Обслуживание</h3>
500
+ <p>Регулярный осмотр и профилактические работы</p>
501
+ </div>
502
  </div>
503
  </section>
504
 
 
527
  </div>
528
  </section>
529
 
530
+ <!-- Обновлённая секция материалов -->
531
+ <section class="materials-section" id="materials">
532
+ <h2 class="section-title">Используемые материалы</h2>
533
+ <div class="materials-grid">
534
+ <!-- Фальцевая кровля -->
535
+ <div class="material-card">
536
+ <div class="material-image">
537
+ <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-3-360-263-falc-370x270.jpg" alt="Фальцевая кровля">
 
 
 
 
 
 
 
 
538
  </div>
539
+ <div class="material-content">
540
+ <h3>Фальцевая кровля</h3>
541
+ <ul class="material-props">
542
+ <li><i class="fas fa-layer-group"></i> Материал: оцинкованная сталь/медь</li>
543
+ <li><i class="fas fa-lock"></i> Шов: двойной замок</li>
544
+ <li><i class="fas fa-calendar"></i> Срок службы: 50 лет</li>
545
+ <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
546
+ </ul>
 
 
 
 
 
547
  </div>
548
+ </div>
549
+
550
+ <!-- Профнастил -->
551
+ <div class="material-card">
552
+ <div class="material-image">
553
+ <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
 
 
 
 
 
 
 
554
  </div>
555
+ <div class="material-content">
556
+ <h3>Профнастил</h3>
557
+ <ul class="material-props">
558
+ <li><i class="fas fa-ruler"></i> Толщина: 0.4-0.7 мм</li>
559
+ <li><i class="fas fa-paint-brush"></i> Покрытие: полимерное</li>
560
+ <li><i class="fas fa-wave-square"></i> Высота волны: 20-40 мм</li>
561
+ <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
562
+ </ul>
 
 
 
 
 
563
  </div>
564
+ </div>
565
+
566
+ <!-- Подшивка (софит) -->
567
+ <div class="material-card">
568
+ <div class="material-image">
569
+ <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
570
+ </div>
571
+ <div class="material-content">
572
+ <h3>Подшивка (софит)</h3>
573
+ <ul class="material-props">
574
+ <li><i class="fas fa-box"></i> Материал: ПВХ/металл</li>
575
+ <li><i class="fas fa-wind"></i> Вентиляция: перфорированный</li>
576
+ <li><i class="fas fa-ruler-horizontal"></i> Ширина: 30-50 см</li>
577
+ <li><i class="fas fa-sun"></i> УФ-защита</li>
578
+ </ul>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Мансардные окна -->
583
+ <div class="material-card">
584
+ <div class="material-image">
585
+ <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
586
+ </div>
587
+ <div class="material-content">
588
+ <h3>Мансардные окна</h3>
589
+ <ul class="material-props">
590
+ <li><i class="fas fa-window-maximize"></i> Остекление: 2-3 камеры</li>
591
+ <li><i class="fas fa-cube"></i> Материал: дерево/ПВХ</li>
592
+ <li><i class="fas fa-temperature-low"></i> Теплоизоляция</li>
593
+ <li><i class="fas fa-cog"></i> Механизм открывания</li>
594
+ </ul>
595
  </div>
596
+ </div>
597
+
598
+ <!-- Водосточные системы -->
599
+ <div class="material-card">
600
+ <div class="material-image">
601
+ <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
602
+ </div>
603
+ <div class="material-content">
604
+ <h3>Водосточные системы</h3>
605
+ <ul class="material-props">
606
+ <li><i class="fas fa-tint"></i> Материал: ПВХ/металл</li>
607
+ <li><i class="fas fa-ruler-vertical"></i> Диаметр: 100-150 мм</li>
608
+ <li><i class="fas fa-snowflake"></i> Морозостойкость</li>
609
+ <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
610
+ </ul>
611
+ </div>
612
+ </div>
613
  <div class="material-card">
614
  <div class="material-image">
615
  <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
 
623
  </ul>
624
  </div>
625
  </div>
626
+
627
  <div class="material-card">
628
  <div class="material-image">
629
  <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
 
637
  </ul>
638
  </div>
639
  </div>
640
+
641
  <div class="material-card">
642
  <div class="material-image">
643
  <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
 
701
  <div class="footer-section">
702
  <h3>Контакты</h3>
703
  <p>+380 97 975 2177</p>
704
+ <p>+380 95 900 9448</p>
705
  <p>[email protected]</p>
706
  </div>
707
  <div class="footer-section">
 
742
  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
743
  });
744
  });
 
 
 
 
 
 
 
 
745
  </script>
746
  </body>
747
  </html>