Spaces:

Starchik1
/

dpkrovlya

Running

App Files Files Community

Starchik1 commited on Mar 8

Commit

d55e8c5

verified ·

1 Parent(s): d9422b0

Update index.html

Browse files

Files changed (1) hide show

index.html +146 -103

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">
@@ -175,6 +175,9 @@
             display: inline-block;
             position: relative;
         }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(3px); }
             to { opacity: 1; transform: translateY(0); }
@@ -273,7 +276,6 @@
             overflow: hidden;
             box-shadow: 0 4px 12px rgba(0,0,0,0.08);
             transition: transform 0.3s;
-            position: relative;
         }
         .material-card:hover {
             transform: translateY(-5px);
@@ -304,79 +306,10 @@
             width: 20px;
             text-align: center;
         }
-        .material-description {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(255, 255, 255, 0.98);
-            padding: 1.5rem;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.3s ease;
-            overflow-y: auto;
-            font-size: 0.9rem;
-            line-height: 1.5;
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-        }
-        .material-card:hover .material-description {
-            opacity: 1;
-            visibility: visible;
-        }
-        @media (max-width: 768px) {
-            :root {
-                --section-padding: 3rem 5%;
-                --section-gap: 1.5rem;
-            }
-            .menu-toggle {
-                display: block;
-            }
-            .nav-links {
-                display: none;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                right: 0;
-                background: white;
-                padding: 1rem;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-            .nav-links.active {
-                display: flex;
-            }
-            .hero {
-                padding: 100px 5% 40px;
-            }
-            .hero h1 {
-                font-size: 2rem;
-            }
-            .swiper {
-                height: 300px;
-            }
-            .cta-button {
-                width: 100%;
-                justify-content: center;
-            }
-            .social-buttons {
-                flex-direction: column;
-            }
-            .material-card {
-                margin: 0 1rem;
-            }
-            .material-description {
-                padding: 1rem;
-                font-size: 0.85rem;
-            }
-            .material-card.active .material-description {
-                opacity: 1;
-                visibility: visible;
-                z-index: 100;
-            }
-        }
         .steps-section {
             padding: var(--section-padding);
             background: var(--light);
@@ -466,6 +399,49 @@
         .footer-links a:hover {
             color: var(--accent);
         }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
@@ -562,7 +538,7 @@
     </section>
     <section class="materials-section" id="materials">
-        <h2 class="section-title">Предоставляемые материалы</h2>
         <div class="materials-grid">
             <div class="material-card">
                 <div class="material-image">
@@ -577,14 +553,102 @@
                         <li><i class="fas fa-tools"></i> Монтаж: бесщелевой</li>
                     </ul>
                 </div>
-                <div class="material-description">
-                    <!-- Ваше описание -->
                 </div>
             </div>
-            <!-- Остальные карточки материалов с аналогичной структурой -->
-            <!-- Добавьте остальные 7 карточек с блоками material-description -->
         </div>
     </section>
@@ -659,19 +723,16 @@
             navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
             grabCursor: true,
         });
         const menuToggle = document.querySelector('.menu-toggle');
         const navLinks = document.querySelector('.nav-links');
         menuToggle.addEventListener('click', () => {
             navLinks.classList.toggle('active');
         });
         document.addEventListener('click', (e) => {
             if (!e.target.closest('.nav')) {
                 navLinks.classList.remove('active');
             }
         });
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
                 e.preventDefault();
@@ -679,7 +740,6 @@
                 target.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         });
         document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
             const operator = button.dataset.operator;
             const phone = button.dataset.phone;
@@ -687,23 +747,6 @@
             button.addEventListener('mouseenter', () => textSpan.textContent = phone);
             button.addEventListener('mouseleave', () => textSpan.textContent = operator);
         });
-        // Обработчики для описаний материалов
-        document.querySelectorAll('.material-card').forEach(card => {
-            card.addEventListener('click', function(e) {
-                if (window.matchMedia("(max-width: 768px)").matches) {
-                    this.classList.toggle('active');
-                }
-            });
-        });
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('.material-card') && window.matchMedia("(max-width: 768px)").matches) {
-                document.querySelectorAll('.material-card').forEach(card => {
-                    card.classList.remove('active');
-                });
-            }
-        });
     </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">
             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); }
             overflow: hidden;
             box-shadow: 0 4px 12px rgba(0,0,0,0.08);
             transition: transform 0.3s;
         }
         .material-card:hover {
             transform: translateY(-5px);
             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);
         .footer-links a:hover {
             color: var(--accent);
         }
+        @media (max-width: 768px) {
+            :root {
+                --section-padding: 3rem 5%;
+                --section-gap: 1.5rem;
+            }
+            .menu-toggle {
+                display: block;
+            }
+            .nav-links {
+                display: none;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                background: white;
+                padding: 1rem;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .nav-links.active {
+                display: flex;
+            }
+            .hero {
+                padding: 100px 5% 40px;
+            }
+            .hero h1 {
+                font-size: 2rem;
+            }
+            .swiper {
+                height: 300px;
+            }
+            .cta-button {
+                width: 100%;
+                justify-content: center;
+            }
+            .social-buttons {
+                flex-direction: column;
+            }
+            .material-card {
+                margin: 0 1rem;
+            }
+        }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
             to { opacity: 1; transform: translateY(0); }
     </section>
     <section class="materials-section" id="materials">
+        <h2 class="section-title">Используемые материалы</h2>
         <div class="materials-grid">
             <div class="material-card">
                 <div class="material-image">
                         <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="Металлочерепица">
+                </div>
+                <div class="material-content">
+                    <h3>Металлочерепица</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-ruler-combined"></i> Толщина: 0.5 мм</li>
+                        <li><i class="fas fa-shield-alt"></i> Гарантия: 25 лет</li>
+                        <li><i class="fas fa-palette"></i> Цвета: 15 вариантов</li>
+                    </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="Гибкая черепица">
+                </div>
+                <div class="material-content">
+                    <h3>Гибкая черепица</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-layer-group"></i> Слои: 3</li>
+                        <li><i class="fas fa-thermometer-three-quarters"></i> Морозостойкость: -60°C</li>
+                        <li><i class="fas fa-tint"></i> Водонепроницаемость: 100%</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="material-card">
+                <div class="material-image">
+                    <img src="https://www.sddu.com.ua/images/1-_enl.jpg" alt="Медная кровля">
+                </div>
+                <div class="material-content">
+                    <h3>Медная кровля</h3>
+                    <ul class="material-props">
+                        <li><i class="fas fa-weight-hanging"></i> Вес: 5-7 кг/м²</li>
+                        <li><i class="fas fa-history"></i> Срок службы: 100+ лет</li>
+                        <li><i class="fas fa-atom"></i> Патина: естественное покрытие</li>
+                    </ul>
                 </div>
             </div>
         </div>
     </section>
             navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
             grabCursor: true,
         });
         const menuToggle = document.querySelector('.menu-toggle');
         const navLinks = document.querySelector('.nav-links');
         menuToggle.addEventListener('click', () => {
             navLinks.classList.toggle('active');
         });
         document.addEventListener('click', (e) => {
             if (!e.target.closest('.nav')) {
                 navLinks.classList.remove('active');
             }
         });
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
                 e.preventDefault();
                 target.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         });
         document.querySelectorAll('.cta-button[data-phone]').forEach(button => {
             const operator = button.dataset.operator;
             const phone = button.dataset.phone;
             button.addEventListener('mouseenter', () => textSpan.textContent = phone);
             button.addEventListener('mouseleave', () => textSpan.textContent = operator);
         });
     </script>
 </body>
 </html>