redesign

index.html

@@ -32,7 +32,6 @@
   </header>
   <main>
     <div id="hero-section">
-      <img src="images/mainmokup.jpg" alt="Ximper" class="hero-img">
       <div class="hero-text">
         <h2>Ximper Linux</h2>
         <p>Роллинг-релиз дистрибутив на основе ALT Sisyphus с рабочим столом GNOME</p>
@@ -87,14 +86,14 @@
       <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>
     </div>
-    <div class="footer-right">
-      <a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
-    </div>
     <div id="contact-info">
       <!-- Контактная информация -->
       <p>© ООО «Этерсофт». Санкт-Петербург</p>
     </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"></script>
+  <script src="script.js"></script>\
 </body>
 </html>

styles.css

+:root {
+  --border: #7E01FF;
+  --bg: #18073d;
+}
+
 /* Общие стили */
 body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   color: #fff;
-  background: linear-gradient(270deg, #5300ff, #e300ff);
-  background-size: 400% 400%;
-  animation: gradientAnimation 15s ease infinite;
+  background: #000; /* Темный фон для контраста */
+  position: relative; /* Для позиционирования псевдоэлемента */
 }
 
-/* Анимация для градиента */
-@keyframes gradientAnimation {
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 120vw;
+  height: 120vh;
+  background: radial-gradient(circle, rgba(75, 0, 130, 0.6), rgba(0, 0, 0, 0));
+  filter: blur(150px);
+  animation: glowAnimation 30s infinite ease-in-out;
+  z-index: -1;
+  pointer-events: none;
+}
+
+@keyframes glowAnimation {
   0% {
-    background-position: 0% 50%;
+    transform: translate(0%, 0%) scale(1);
+    opacity: 0; /* Полностью прозрачный в начале */
   }
-  50% {
-    background-position: 100% 50%;
+  10% {
+    transform: translate(-30%, -30%) scale(1.2);
+    opacity: 0.4; /* Плавное появление */
+  }
+  40% {
+    transform: translate(30%, -30%) scale(1.4);
+    opacity: 1; /* Максимальная яркость */
+  }
+  60% {
+    transform: translate(-30%, 30%) scale(1.2);
+    opacity: 0.4; /* Плавное исчезновение */
+  }
+  90% {
+    transform: translate(30%, 30%) scale(1.3);
+    opacity: 0.2; /* Минимальная яркость */
   }
   100% {
-    background-position: 0% 50%;
+    transform: translate(0%, 0%) scale(1);
+    opacity: 0; /* Полностью прозрачный в конце */
   }
 }
 
 /* Стили для хедера */
 header {
-  background-color: #333;
+  background-color: var(--bg);
   color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
+  padding: 8px;
   position: fixed;
-  width: 100%;
-  top: 0;
+  width: calc(100% - 24px); /* Учитываем 12px отступа с каждой стороны */
+  top: 12px; /* Отступ сверху */
+  left: 12px; /* Отступ слева */
+  right: 12px; /* Отступ справа */
   z-index: 1000;
   flex-wrap: wrap;
+
+  transition-property: background-color;
+  transition-duration: 0.8s;
+
+  box-sizing: border-box;
+  border: 2px solid var(--border);
+  border-radius: 15px;
 }
 
+
 .header-left {
   display: flex;
   align-items: center;
@@ -45,7 +87,7 @@ header {
 }
 
 .header-left .logo {
-  width: 50px;
+  width: 30px;
   margin-right: 15px;
 }
 
@@ -97,7 +139,7 @@ header {
 
 header h1 {
   margin: 0;
-  font-size: 24px;
+  font-size: 20px;
 }
 
 /* Медиа-запрос для мобильных устройств */
@@ -134,11 +176,15 @@ header h1 {
 
 /* Стили для основного контента */
 main {
-  margin-top: 80px;
   padding-bottom: 20px;
 }
 
 /* Стили для первого блока с картинкой */
+
+button {
+  border-radius: 15px;
+}
+
 #hero-section {
   display: flex;
   justify-content: center;
@@ -177,12 +223,14 @@ main {
 #next-section {
   padding: 10px 20px;
   font-size: 18px;
-  background-color: #007bff;
+  background-color: var(--bg);
   color: #fff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  animation: pulse 2s infinite;
+  transition-property: background-color;
+  transition-duration: 0.8s;
+
+  box-sizing: border-box;
+  border: 2px solid var(--border);
+  border-radius: 15px;
 }
 
 @keyframes pulse {
@@ -203,9 +251,7 @@ main {
   flex-wrap: wrap;
   justify-content: center;
   padding: 20px;
-  background: linear-gradient(270deg, #5300ff, #e300ff);
-  background-size: 400% 400%;
-  animation: gradientAnimation 15s ease infinite;
+  background: transparent;
 }
 
 .info-block {
@@ -242,9 +288,7 @@ main {
   justify-content: space-between;
   align-items: center;
   padding: 50px 20px;
-  background: linear-gradient(270deg, #5300ff, #e300ff);
-  background-size: 400% 400%;
-  animation: gradientAnimation 15s ease infinite;
+  background: transparent
 }
 
 .download-left {
@@ -279,16 +323,18 @@ main {
 
 .download-right .button {
   padding: 10px 20px;
+  
   font-size: 18px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 10px 5px 5px 0;
-  transition: all 0.3s ease;
   text-decoration: none;
-  display: inline-block;
+  
+  background-color: var(--bg);
+  color: #fff;
+  transition-property: background-color;
+  transition-duration: 0.8s;
+
+  box-sizing: border-box;
+  border: 2px solid var(--border);
+  border-radius: 15px;
 }
 
 .download-right .button:hover {
@@ -327,13 +373,29 @@ main {
 
 /* Стили для футера */
 footer {
-  background-color: #333;
+  background-color: var(--bg);
   padding: 10px;
   color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
+  position: absolute;
+
+
+  width: calc(100% - 24px); /* Учитываем 12px отступа с каждой стороны */
+  bottom: 12px; /* Отступ сверху */
+  left: 12px; /* Отступ слева */
+  right: 12px; /* Отступ справа */
+
+  flex-wrap: wrap;
+
+  transition-property: background-color;
+  transition-duration: 0.8s;
+
+  box-sizing: border-box;
+  border: 2px solid var(--border);
+  border-radius: 15px;
 }
 
 .footer-left, .footer-right {
@@ -357,10 +419,10 @@ footer {
 }
 
 #contact-info {
-  width: 100%;
+  display: inline-block;
   text-align: center;
-  margin-top: 0px;
   font-size: 12px;
+  align-self: flex-end;
 }
 
 /* Медиа-запрос для мобильных устройств для футера */