Update index.html

Author: Endscape-Coding

index.html

@@ -484,45 +484,77 @@
         }
 
         /* Download */
+        /* Download section */
         .download {
             padding: 6rem 5%;
             background: var(--darker);
             text-align: center;
         }
-
+        
+        .download-subtitle {
+            max-width: 800px;
+            margin: 0 auto 3rem;
+            text-align: center;
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+        
         .download-options {
             display: flex;
             justify-content: center;
             gap: 2rem;
             flex-wrap: wrap;
-            max-width: 1000px;
-            margin: 3rem auto 0;
+            max-width: 1200px;
+            margin: 0 auto;
         }
-
+        
         .download-card {
             background: var(--gray);
             padding: 2rem;
             border-radius: 15px;
-            width: 280px;
+            width: 100%;
+            max-width: 350px;
             transition: var(--transition);
             border: 1px solid rgba(255, 255, 255, 0.05);
+            display: flex;
+            flex-direction: column;
+            height: 100%;
         }
-
-        .download-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
-            border-color: rgba(110, 72, 170, 0.3);
-        }
-
+        
         .download-icon {
-            font-size: 3rem;
+            font-size: 2.5rem;
             margin-bottom: 1.5rem;
             color: var(--primary);
         }
-
+        
         .download-card h3 {
             margin-bottom: 1.5rem;
             color: white;
+            min-height: 3.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .download-card-content {
+            flex-grow: 1;
+            margin-bottom: 1.5rem;
+        }
+        
+        .download-card-content p {
+            opacity: 0.85;
+            line-height: 1.6;
+        }
+        
+        .download-btn-container {
+            margin-top: auto;
+            padding-top: 1.5rem;
+        }
+        
+        .download-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+            border-color: rgba(110, 72, 170, 0.3);
         }
 
         /* Footer */
@@ -719,14 +751,26 @@
                 justify-content: center;
             }
 
-            .download-options {
+            /**.download-options {
                 flex-direction: column;
                 align-items: center;
             }
 
             .download-card {
                 width: 100%;
                 max-width: 350px;
+            }*//
+        }
+
+        @media (max-width: 768px) {
+            .download-options {
+                flex-direction: column;
+                align-items: center;
+            }
+            
+            .download-card {
+                max-width: 100%;
+                width: 100%;
             }
         }
 
@@ -850,7 +894,7 @@ <h3 data-ru="Богатый набор ПО" data-en="Rich Software">Богат
         <h2 class="section-title animate__animated animate__fadeIn" data-ru="Скриншоты" data-en="Screenshots">Скриншоты</h2>
         <div class="screenshot-grid">
             <div class="screenshot-card animate-on-scroll">
-                <img src="https://via.placeholder.com/600x400/1a1a2e/ffffff?text=EN-OS+Desktop" alt="EN-OS Desktop">
+                <img src="/images/desktop.png" alt="EN-OS Desktop">
                 <div class="screenshot-caption" data-ru="Рабочий стол" data-en="Desktop">Рабочий стол</div>
             </div>
             <div class="screenshot-card animate-on-scroll">
@@ -900,35 +944,47 @@ <h3 data-ru="Установите систему" data-en="Install the system">
 
     <!-- Download -->
     <section class="download" id="download">
-        <h2 class="section-title animate__animated animate__fadeIn" data-ru="Скачать EN-OS" data-en="Download EN-OS">Скачать EN-OS</h2>
-        <p class="animate__animated animate__fadeIn" style="text-align: center; max-width: 800px; margin: 0 auto 2rem;" data-ru="Выберите подходящую версию для загрузки" data-en="Choose the appropriate version to download">Выберите подходящую версию для загрузки</p>
-        <div class="download-options">
-            <div class="download-card animate-on-scroll">
-                <div class="download-icon">
-                    <i class="fas fa-desktop"></i>
-                </div>
-                <h3 data-ru="Стандартная версия" data-en="Standard Edition">Стандартная версия(в разработке)</h3>
+    <h2 class="section-title animate__animated animate__fadeIn" data-ru="Скачать EN-OS" data-en="Download EN-OS">Скачать EN-OS</h2>
+    <p class="animate__animated animate__fadeIn download-subtitle" data-ru="Выберите подходящую версию для загрузки" data-en="Choose the appropriate version to download">Выберите подходящую версию для загрузки</p>
+    <div class="download-options">
+        <div class="download-card animate-on-scroll">
+            <div class="download-icon">
+                <i class="fas fa-desktop"></i>
+            </div>
+            <h3 data-ru="Стандартная версия" data-en="Standard Edition">Стандартная версия (в разработке)</h3>
+            <div class="download-card-content">
                 <p data-ru="Полный набор приложений для повседневного использования" data-en="Complete set of applications for daily use">Полный набор приложений для повседневного использования</p>
-                <a href="#" class="btn" style="margin-top: 1.5rem;" data-ru="Скачать" data-en="Download">Скачать</a>
             </div>
-            <div class="download-card animate-on-scroll">
-                <div class="download-icon">
-                    <i class="fas fa-code"></i>
-                </div>
-                <h3 data-ru="Версия для разработки" data-en="Developer Edition">Версия для разработки (в разработке)</h3>
+            <div class="download-btn-container">
+                <a href="#" class="btn" data-ru="Скачать" data-en="Download">Скачать</a>
+            </div>
+        </div>
+        <div class="download-card animate-on-scroll">
+            <div class="download-icon">
+                <i class="fas fa-code"></i>
+            </div>
+            <h3 data-ru="Версия для разработки" data-en="Developer Edition">Версия для разработки (в разработке)</h3>
+            <div class="download-card-content">
                 <p data-ru="Инструменты для разработки и программирования" data-en="Development and programming tools">Инструменты для разработки и программирования</p>
-                <a href="#" class="btn" style="margin-top: 1.5rem;" data-ru="Скачать" data-en="Download">Скачать</a>
             </div>
-            <div class="download-card animate-on-scroll">
-                <div class="download-icon">
-                    <i class="fas fa-gamepad"></i>
-                </div>
-                <h3 data-ru="Игровая версия" data-en="Gaming Edition">Игровая версия (в разработке)</h3>
+            <div class="download-btn-container">
+                <a href="#" class="btn" data-ru="Скачать" data-en="Download">Скачать</a>
+            </div>
+        </div>
+        <div class="download-card animate-on-scroll">
+            <div class="download-icon">
+                <i class="fas fa-gamepad"></i>
+            </div>
+            <h3 data-ru="Игровая версия" data-en="Gaming Edition">Игровая версия (в разработке)</h3>
+            <div class="download-card-content">
                 <p data-ru="Оптимизировано для игр с предустановленным Steam" data-en="Optimized for gaming with pre-installed Steam">Оптимизировано для игр с предустановленным Steam</p>
-                <a href="#" class="btn" style="margin-top: 1.5rem;" data-ru="Скачать" data-en="Download">Скачать</a>
+            </div>
+            <div class="download-btn-container">
+                <a href="#" class="btn" data-ru="Скачать" data-en="Download">Скачать</a>
             </div>
         </div>
-    </section>
+    </div>
+</section>
 
     <!-- Footer -->
     <footer>