version-04-12

downloads.html

@@ -142,12 +142,10 @@
     </main>
   <footer>
     <div class="footer-left">
-      <a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
-      <a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
+      <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург <a href="license.html" id="license-link">Лицензионное соглашение</a></p>
+      
     </div>
     <div class="footer-center">
-      <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
-      <a href="license.html" id="license-link">Лицензионное соглашение</a>
     </div>
     <div class="footer-right">
       <a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>

index.html

@@ -68,48 +68,45 @@
     </div>
     <div id="blocks-section">
         <div class="info-block">
-            <img src="images/Icons_new/0_1 Deferred_shadow.png" alt="Deferred">
-            <h3>Tested. Trusted. Deferred.</h3>
+            <img src="images/Icons_new/deferred.png" alt="Deferred">
+            <div class="blocks-h3"><h3>Tested. Trusted. Deferred.</h3></div>
             <p>В вашем распоряжении — вся мощь и разнообразие репозитория ALT Sisyphus. Благодаря модели Deferred каждое обновление проходит тщательную проверку, прежде чем попасть к вам.</p>
         </div>
         <div class="info-block">
-            <img src="images/Icons_new/0_2 Minimal Install_shadow.png" alt="">
-            <h3>Минимальная установка</h3>
+            <img src="images/Icons_new/minimal.png" alt="Minimal install">
+            <div class="blocks-h3"><h3>Минимальная установка</h3></div>
             <p>Опционально доступна, позволяет пользователям настроить систему и добавить только необходимые компоненты.</p>
         </div>
         <div class="info-block">
-            <img src="images/Icons_new/0_3 EPM_shadow.png" alt="">
-            <h3>Удобный пакетный менеджер EPM</h3>
+            <img src="images/Icons_new/epm.png" alt="EPM">
+            <div class="blocks-h3"><h3>Пакетный менеджер EPM</h3></div>
             <p>Присутствие удобного пакетного менеджера EPM упрощает процесс установки, обновления и управления программами, делая опыт использования более комфортным.</p>
         </div>
         <div class="info-block">
-            <img src="images/Icons_new/0_4 Games_shadow.png" alt="">
-            <h3>Играйте с максимальной производительностью</h3>
+            <img src="images/Icons_new/games.png" alt="Games">
+            <div class="blocks-h3"><h3>Играйте с максимальной производительностью</h3></div>
             <p>Используем передовые решения для запуска Windows-игр на Linux. PortProton работает из коробки, обеспечивая плавный гейминг без компромиссов.</p>
         </div>
         <div class="info-block">
-            <img src="images/Icons_new/0_5 Telegram_shadow.png" alt="">
-            <h3>Наше комьюнити в Телеграм</h3>
-            <p>Присоединяйся к нашему комьюнити в телеграм. Если вы ищете место, где можно перекусить
-и отдохнуть, место, где можно хорошо выпить и поговорить, место, где вам всегда подскажут, как подзаработать ...</p>
+            <img src="images/Icons_new/tg.png" alt="Telegram">
+            <div class="blocks-h3"><h3>Сообщество в Telegram</h3></div>
+            <p>Дружелюбное сообщество где всегда постораются помочь, рассказать и конечно поделится свежими новостями.</p>
         </div>
         <div class="info-block">
-            <img src="images/Icons_new/0_6 EPM Play_shadow.png" alt="">
-            <h3>EPM Play из коробки</h3>
+            <img src="images/Icons_new/epm_play.png" alt="EPM Play">
+            <div class="blocks-h3"><h3>EPM Play из коробки</h3></div>
             <p>ЕPM Play — инструмент, позволяющий автоматически устанавливать и удалять пакеты, используя заготовленные сценарии, при этом не используя сторонние репозитории.</p>
         </div>
     </div>
-    <div class="variants-text">
+    <div id="blocks-text">
       <h1>Идеальный выбор для каждого</h1>
         <hr class="text-hr">
     </div>
 
-
-
     <div class="distro-showcase">
       <div class="distro-variant">
         <div class="distro-image">
-          <img src="images/mock_1.png" alt="Ximper Linux GNOME">
+          <img src="images/mock_gnome.png" alt="Ximper Linux GNOME">
         </div>
         <div class="distro-content">
           <h2>Ximper Linux GNOME</h2>
@@ -129,7 +126,7 @@
       
       <div class="distro-variant">
         <div class="distro-image">
-          <img src="images/mock_1.png" alt="Ximper Linux Hyprland">
+          <img src="images/mock_hyprland.png" alt="Ximper Linux Hyprland">
         </div>
         <div class="distro-content">
           <h2>Ximper Linux Hyprland</h2>

license.html

@@ -111,17 +111,15 @@
   </main>
   <footer>
     <div class="footer-left">
-      <a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
-      <a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
+      <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург <a href="license.html" id="license-link">Лицензионное соглашение</a></p>
     </div>
     <div class="footer-center">
-      <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
-      <a href="license.html" id="license-link">Лицензионное соглашение</a>
     </div>
     <div class="footer-right">
       <a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
     </div>
   </footer>
   <script src="script.js?v=1.8"></script>
+  <script src="script.js?v=1.8"></script>
 </body>
 </html>

styles.css

@@ -155,7 +155,7 @@ a:not(.button, .social-icon, .home-link, .header-menu, .footer-right, .mobile-me
 .button:hover {
   transform: translateY(-10px) scale(1.02);
   border-color: var(--border);
-  box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
+  box-shadow: 0 15px 45px rgba(255, 255, 255, 0.4);
   color: #fff;
 }
 
@@ -193,7 +193,7 @@ header {
   box-sizing: border-box;
   border: 0px solid var(--border);
   border-radius: 0px;
-  max-width: 1700px;
+
 }
 
 .header-left {
@@ -258,7 +258,7 @@ header {
 }
 
 .header-menu ul li a:hover {
-  background-color: var(--border);
+    background: linear-gradient(38deg,#009dff,#ca00de);
 }
 
 .header-right {
@@ -413,7 +413,7 @@ main {
   padding: 0px 10% 20px 10%;
   position: relative;
   margin-top: 80px;
-  max-width: 1500px;
+
 }
 
 #hero-section {
@@ -432,12 +432,10 @@ main {
 }
 
 .hero-image {
-
   margin-bottom: 20px;
   width: auto;
 }
 .hero-image img {
-  float: left;
   max-width: 50%;
   padding: 20px 0;
   height: auto;
@@ -445,9 +443,8 @@ main {
 }
 
 .hero-text {
-
-  position: left;
-  z-index: 2;
+  float: right;
+  max-width: 60%;
 }
 
 .hero-text h2 {
@@ -512,8 +509,8 @@ main {
   padding: 10px 20px;
   font-size: 18px;
   font-weight: bold;
-  background: linear-gradient(38deg,#009dff,#ca00de);
-  color: #fff;
+  background: var(--fg);
+  color: var(--bg);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
   border: 0px solid var(--border);
@@ -525,7 +522,8 @@ main {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Три карточки в ряд */
   gap: 30px;
-  padding: 60px 20px;
+  padding: 60px 20px 0px 20px;
+  margin-bottom: -40px;
   background-color: var(--bg);
   position: relative;
   overflow: hidden;
@@ -545,15 +543,16 @@ main {
 
 .info-block {
   background: #2d2d32;
-  border-radius: 10px;
+  background-image: url(images/card_bg.png);
+  border-radius: 20px;
   padding: 25px 25px 40px 25px;
   position: relative;
   backdrop-filter: blur(10px);
   transform-style: preserve-3d;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  width: 90%; /* Уменьшаем ширину карточек */
-  height: 90%;
+  width: 80%; /* Уменьшаем ширину карточек */
+  height: 80%;
   margin: 0 auto; /* Центрируем карточки */
 }
 
@@ -580,9 +579,16 @@ main {
 
 }
 
+.blocks-h3 {
+  background: linear-gradient(38deg,#009dff,#ca00de);
+  border-radius: 10px;
+  margin: 0px 7% 12px 7%;
+}
+
 .info-block h3 {
   font-size: 1.4em;
-  margin-bottom: 12px;
+  text-align: center;
+  padding: 3px 5px;
   background: var(--fg);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -631,7 +637,7 @@ main {
 .variants-text {
   background: var(--bg);
   text-align: center;
-  padding: 20px;
+  padding: 0px;
 }
 .variants-text ul {
   list-style-type: none;
@@ -694,7 +700,7 @@ main {
 .download-text-block {
   text-align: center;
   padding: 20px;
-  background: #1d1d20;
+
 }
 
 /* Адаптация карточек для мобильных устройств */
@@ -711,7 +717,7 @@ main {
 /* Стили для футера */
 footer {
   background-color: var(--bg);
-  padding: 15px 0px;
+  padding: 0px 20px;
   color: #fff;
   display: flex;
   justify-content: space-between;
@@ -723,7 +729,7 @@ footer {
   border: 0px solid var(--border);
   border-radius: 0px;
   width: 100%;
-  max-width: 1500px;
+
 }
 
 .footer-left {
@@ -733,7 +739,8 @@ footer {
   flex: 1;
   min-height: 80px;
   margin: 0 0 0 10%;
-  max-width: 20%;
+  max-width: 350px;
+
 }
 
 .footer-center {
@@ -744,6 +751,7 @@ footer {
   text-align: center;
   flex: 1;
   min-width: 0;
+  max-width: 10%;
 }
 
 #contact-info {
@@ -769,7 +777,8 @@ footer {
   align-items: center;
   justify-content: flex-end;
   flex: 1;
-  min-width: 0;
+  min-height: 80px;
+  max-width: 350px;
   margin: 0 10% 0 0;
 }
 
@@ -1013,14 +1022,14 @@ footer {
 }
 
 .button.outline {
-  background: transparent;
+  background: #fff;
   border: 2px solid var(--border);
-  color: #fff;
+  font-weight: bold;
+  color: #000;
   transition: all 0.3s ease;
 }
 
 .button.outline:hover {
-  background: var(--border);
   transform: translateY(-2px);
 }
 
@@ -1182,7 +1191,7 @@ footer {
 .distro-variant {
   display: flex;
   align-items: center;
-  margin-bottom: 80px;
+  margin-bottom: 20px;
   background: rgba(11, 14, 29, 0.0);
   border: 0px solid var(--border);
   border-radius: 20px;
@@ -1202,17 +1211,19 @@ footer {
 .distro-image img {
   width: 100%;
   height: 100%;
+  margin: 0px;
   object-fit: contain;
   transition: transform 0.5s ease;
 }
 
 .distro-variant:hover .distro-image img {
   transform: scale(1.05);
+
 }
 
 .distro-content {
   flex: 1;
-  padding: 40px;
+  padding: 30px;
 }
 
 .distro-content h2 {
@@ -1249,10 +1260,10 @@ footer {
 }
 
 .requirements li {
-  display: flex;
   align-items: center;
   margin-bottom: 10px;
   font-size: 0.95em;
+  flex-wrap: wrap;
 }
 
 .requirements li i {