Skip to content

X
Ximper-Linux-Site
Commit 98e276f9 authored by Roman Alifanov's avatar Roman Alifanov
Browse files
Options

redesign

parent cd37f787
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 43 deletions
index.html
View file @ 98e276f9
......@@ -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
View file @ 98e276f9
: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;
}
/* Медиа-запрос для мобильных устройств для футера */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment