Spaces:

Starchik1
/

dpkrovlya

Running

App Files Files Community

Starchik1 commited on Mar 8

Commit

3e14da4

verified ·

1 Parent(s): 25690b8

Update index.html

Browse files

Files changed (1) hide show

index.html +95 -89

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Профессиональные кровельные работы любой сложности">
     <title>RoofMaster - Кровельные работы</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -170,6 +170,18 @@
             left: 50%;
             top: 50%;
         }
         .services {
             padding: var(--section-padding);
             background: linear-gradient(175deg, #fff 60%, var(--light) 100%);
@@ -294,12 +306,10 @@
             width: 20px;
             text-align: center;
         }
-		.material-props i.fa-wave-square { color: var(--accent); }
         .material-props i.fa-temperature-low { color: #2dd4bf; }
         .material-props i.fa-snowflake { color: #38bdf8; }
         .material-props i.fa-boxes { color: #f59e0b; }
         .steps-section {
             padding: var(--section-padding);
             background: var(--light);
@@ -464,13 +474,13 @@
         <div class="hero-content">
             <h1>Профессиональные кровельные работы</h1>
             <p>Качественный монтаж и ремонт кровли с гарантией 5 лет</p>
-            <a href="tel:+380979752177" class="cta-button">
                 <i class="fas fa-phone-alt"></i>
-                Киевстар
             </a>
-			<a href="tel:+380959009448" class="cta-button">
                 <i class="fas fa-phone-alt"></i>
-                Водафон
             </a>
         </div>
     </section>
@@ -527,89 +537,79 @@
         </div>
     </section>
-    <!-- Обновлённая секция материалов -->
-<section class="materials-section" id="materials">
-    <h2 class="section-title">Используемые материалы</h2>
-    <div class="materials-grid">
-        <!-- Фальцевая кровля -->
-        <div class="material-card">
-            <div class="material-image">
-                <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-3-360-263-falc-370x270.jpg" alt="Фальцевая кровля">
-            </div>
-            <div class="material-content">
-                <h3>Фальцевая кровля</h3>
-                <ul class="material-props">
-                    <li><i class="fas fa-layer-group"></i> Материал: оцинкованная сталь/медь</li>
-                    <li><i class="fas fa-lock"></i> Шов: двойной замок</li>
-                    <li><i class="fas fa-calendar"></i> Срок службы: 50 лет</li>
-                    <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
-                </ul>
-            </div>
-        </div>
-        <!-- Профнастил -->
-        <div class="material-card">
-            <div class="material-image">
-                <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
-            </div>
-            <div class="material-content">
-                <h3>Профнастил</h3>
-                <ul class="material-props">
-                    <li><i class="fas fa-ruler"></i> Толщина: 0.4-0.7 мм</li>
-                    <li><i class="fas fa-paint-brush"></i> Покрытие: полимерное</li>
-                    <li><i class="fas fa-wave-square"></i> Высота волны: 20-40 мм</li>
-                    <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
-                </ul>
-            </div>
-        </div>
-        <!-- Подшивка (софит) -->
-        <div class="material-card">
-            <div class="material-image">
-                <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
-            </div>
-            <div class="material-content">
-                <h3>Подшивка (софит)</h3>
-                <ul class="material-props">
-                    <li><i class="fas fa-box"></i> Материал: ПВХ/металл</li>
-                    <li><i class="fas fa-wind"></i> Вентиляция: перфорированный</li>
-                    <li><i class="fas fa-ruler-horizontal"></i> Ширина: 30-50 см</li>
-                    <li><i class="fas fa-sun"></i> УФ-защита</li>
-                </ul>
             </div>
-        </div>
-        <!-- Мансардные окна -->
-        <div class="material-card">
-            <div class="material-image">
-                <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
             </div>
-            <div class="material-content">
-                <h3>Мансардные окна</h3>
-                <ul class="material-props">
-                    <li><i class="fas fa-window-maximize"></i> Остекление: 2-3 камеры</li>
-                    <li><i class="fas fa-cube"></i> Материал: дерево/ПВХ</li>
-                    <li><i class="fas fa-temperature-low"></i> Теплоизоляция</li>
-                    <li><i class="fas fa-cog"></i> Механизм открывания</li>
-                </ul>
             </div>
-        </div>
-        <!-- Водосточные системы -->
-        <div class="material-card">
-            <div class="material-image">
-                <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
             </div>
-            <div class="material-content">
-                <h3>Водосточные системы</h3>
-                <ul class="material-props">
-                    <li><i class="fas fa-tint"></i> Материал: ПВХ/металл</li>
-                    <li><i class="fas fa-ruler-vertical"></i> Диаметр: 100-150 мм</li>
-                    <li><i class="fas fa-snowflake"></i> Морозостойкость</li>
-                    <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
-                </ul>
             </div>
-        </div>
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
@@ -623,7 +623,6 @@
                     </ul>
                 </div>
             </div>
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
@@ -637,7 +636,6 @@
                     </ul>
                 </div>
             </div>
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
@@ -701,7 +699,7 @@
             <div class="footer-section">
                 <h3>Контакты</h3>
                 <p>+380 97 975 2177</p>
-				<p>+380 95 900 9448</p>
                 <p>[email protected]</p>
             </div>
             <div class="footer-section">
@@ -742,6 +740,14 @@
                 target.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         });
     </script>
 </body>
 </html>

 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Профессиональные кровельные работы любой сложности">
     <title>RoofMaster - Кровельные работы</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
             left: 50%;
             top: 50%;
         }
+        .cta-button .button-text {
+            transition: all 0.3s ease;
+            display: inline-block;
+            position: relative;
+        }
+        .cta-button:hover .button-text {
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(3px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
         .services {
             padding: var(--section-padding);
             background: linear-gradient(175deg, #fff 60%, var(--light) 100%);
             width: 20px;
             text-align: center;
         }
+        .material-props i.fa-wave-square { color: var(--accent); }
         .material-props i.fa-temperature-low { color: #2dd4bf; }
         .material-props i.fa-snowflake { color: #38bdf8; }
         .material-props i.fa-boxes { color: #f59e0b; }
         .steps-section {
             padding: var(--section-padding);
             background: var(--light);
         <div class="hero-content">
             <h1>Профессиональные кровельные работы</h1>
             <p>Качественный монтаж и ремонт кровли с гарантией 5 лет</p>
+            <a href="tel:+380979752177" class="cta-button" data-operator="Киевстар" data-phone="+380 97 975 2177">
                 <i class="fas fa-phone-alt"></i>
+                <span class="button-text">Киевстар</span>
             </a>
+            <a href="tel:+380959009448" class="cta-button" data-operator="Водафон" data-phone="+380 95 900 9448">
                 <i class="fas fa-phone-alt"></i>
+                <span class="button-text">Водафон</span>
             </a>
         </div>
     </section>
         </div>
     </section>
+    <section class="materials-section" id="materials">
+        <h2 class="section-title">Используемые материалы</h2>
+        <div class="materials-grid">
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-3-360-263-falc-370x270.jpg" alt="Фальцевая кровля">
+                </div>
+                <div class="material-content">
+                    <h3>Фальцевая кровля</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-layer-group"></i> Материал: оцинкованная сталь/медь</li>
+                        <li><i class="fas fa-lock"></i> Шов: двойной замок</li>
+                        <li><i class="fas fa-calendar"></i> Срок службы: 50 лет</li>
+                        <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
+                    </ul>
+                </div>
             </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-4-360-263-profnastil-001-370x270.jpg" alt="Профнастил">
+                </div>
+                <div class="material-content">
+                    <h3>Профнастил</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-ruler"></i> Толщина: 0.4-0.7 мм</li>
+                        <li><i class="fas fa-paint-brush"></i> Покрытие: полимерное</li>
+                        <li><i class="fas fa-wave-square"></i> Высота волны: 20-40 мм</li>
+                        <li><i class="fas fa-palette"></i> Цвета: 20 вариантов</li>
+                    </ul>
+                </div>
             </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/3-4-360-263-soffit-370x270.jpg" alt="Подшивка софит">
+                </div>
+                <div class="material-content">
+                    <h3>Подшивка (софит)</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-box"></i> Материал: ПВХ/металл</li>
+                        <li><i class="fas fa-wind"></i> Вентиляция: перфорированный</li>
+                        <li><i class="fas fa-ruler-horizontal"></i> Ширина: 30-50 см</li>
+                        <li><i class="fas fa-sun"></i> УФ-защита</li>
+                    </ul>
+                </div>
             </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-2-823-289-m.okna-750x263.jpg" alt="Мансардные окна">
+                </div>
+                <div class="material-content">
+                    <h3>Мансардные окна</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-window-maximize"></i> Остекление: 2-3 камеры</li>
+                        <li><i class="fas fa-cube"></i> М��териал: дерево/ПВХ</li>
+                        <li><i class="fas fa-temperature-low"></i> Теплоизоляция</li>
+                        <li><i class="fas fa-cog"></i> Механизм открывания</li>
+                    </ul>
+                </div>
             </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/2-1-397-611-vodostok-002-370x570.jpg" alt="Водосточные системы">
+                </div>
+                <div class="material-content">
+                    <h3>Водосточные системы</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-tint"></i> Материал: ПВХ/металл</li>
+                        <li><i class="fas fa-ruler-vertical"></i> Диаметр: 100-150 мм</li>
+                        <li><i class="fas fa-snowflake"></i> Морозостойкость</li>
+                        <li><i class="fas fa-boxes"></i> Комплектующие в наборе</li>
+                    </ul>
+                </div>
             </div>
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://akm.kiev.ua/image/cache/catalog/glavna/2022/1-1-397-611-metall-005-370x570.jpg" alt="Металлочерепица">
                     </ul>
                 </div>
             </div>
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://www.1d.ua/image/cache/webp/catalog/fotosNew/bitumna-cherepytsia/brava-bitumna-cherepytsia/76331-700x700.webp" alt="Гибкая черепица">
                     </ul>
                 </div>
             </div>
             <div class="material-card">
                 <div class="material-image">
                     <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
             <div class="footer-section">
                 <h3>Контакты</h3>
                 <p>+380 97 975 2177</p>
+                <p>+380 95 900 9448</p>
                 <p>[email protected]</p>
             </div>
             <div class="footer-section">
                 target.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         });
+        document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
+            const operator = button.dataset.operator;
+            const phone = button.dataset.phone;
+            const textSpan = button.querySelector('.button-text');
+            button.addEventListener('mouseenter', () => textSpan.textContent = phone);
+            button.addEventListener('mouseleave', () => textSpan.textContent = operator);
+        });
     </script>
 </body>
 </html>