Skip to content

X
Ximper-Linux-Site
Commit 5a03620d authored by Pavel Beketov's avatar Pavel Beketov
Browse files
Options

global update 0.9.3

parent e1d5981a
Hide whitespace changes
Inline Side-by-side
Showing with 622 additions and 147 deletions
downloads.html
View file @ 5a03620d
......@@ -10,6 +10,15 @@
<link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script>
</head>
<div class="menu-button">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu">
<a href="index.html">Главная</a>
<a href="#">Загрузки</a>
<a href="news.html">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body>
<header>
<div class="header-left">
......@@ -35,13 +44,37 @@
<section class="download-section">
<div class="download-container">
<h2 class="styled-title">Загрузить Ximper Linux прямо сейчас</h2>
<p class="styled-subtitle">Дистрибутив Ximper Linux доступен в двух вариантах: обычный и с поддержкой видеокарт NVIDIA. При наличии современной видеокарты NVIDIA вам потребуется использовать ISO-образ, содержащий драйвера NVIDIA.</p>
<p class="styled-subtitle">Дистрибутив Ximper Linux доступен в нескольких вариантах: классический, hyprland с поддержкой видеокарт NVIDIA и без. При наличии современной видеокарты NVIDIA вам потребуется использовать ISO-образ, содержащий драйвера NVIDIA.</p>
<div class="download-distro">
<div class="download-left">
<img src="images/ximphnvdd.png" alt="">
</div>
<div class="download-right">
<h3>Ximper Linux Hyprland 0.9.3 с поддержкой Nvidia</h3>
<p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (6.4Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a>
</div>
</div>
<div class="download-distro">
<div class="download-right">
<h3>Ximper Linux Hyprland</h3>
<p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (5.6Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso.md5" class="button">Контрольные суммы (md5sum)</a>
</div>
<div class="download-left">
<img src="images/ximpbookhypr.png" alt="">
</div>
</div>
<div class="download-distro">
<div class="download-left">
<img src="images/3.png" alt="">
</div>
<div class="download-right">
<h3>Ximper Linux 0.9.2 с поддержкой Nvidia</h3>
<h3>Ximper Linux 0.9.3 с поддержкой Nvidia</h3>
<p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (6.4Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-nvidia-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
......@@ -50,7 +83,7 @@
</div>
<div class="download-distro">
<div class="download-right">
<h3>Ximper Linux 0.9.2</h3>
<h3>Ximper Linux Classic 0.9.3</h3>
<p>Варианты загрузки:</p>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.iso" class="button">ISO-образ (5.6Гб)</a>
<a href="https://download.etersoft.ru/pub/Etersoft/XimperLinux/0.9.2/ximper-gnome-0.9.2-20240526-x86_64.torrent" class="button">Torrent</a>
......@@ -69,7 +102,7 @@
</div>
<div class="explore-source">
<div class="source-left">
<img src="images/source1.png" alt="">
<img src="images/source.png" alt="">
</div>
<div class="source-right">
<h3>Исследуйте исходный код</h3>
......@@ -90,9 +123,8 @@
<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 id="contact-info">
<!-- Контактная информация -->
<p>© ООО «Этерсофт». Санкт-Петербург</p>
<div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
</div>
<div class="footer-right">
<a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
......
index.html
View file @ 5a03620d
......@@ -9,22 +9,31 @@
<link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script>
</head>
<div class="menu-button">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu">
<a href="#">Главная</a>
<a href="downloads.html">Загрузки</a>
<a href="news.html">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body>
<header>
<div class="header-left">
<img src="images/ximperlinux.svg" alt="InnovateOS Logo" class="logo">
<img src="images/ximperlinux.svg" alt="Ximper" class="logo">
<h1>Ximper Linux</h1>
</div>
<div class="header-center">
<nav class="header-menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="downloads.html">Загрузки</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="https://wiki.ximperlinux.ru">Wiki</a></li>
</ul>
</nav>
</div>
<nav class="header-menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="downloads.html">Загрузки</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="https://wiki.ximperlinux.ru">Wiki</a></li>
</ul>
</nav>
</div>
<div class="header-right">
<a href="https://vk.com/ximperlinux" class="social-icon"><i class="fab fa-vk"></i></a>
<a href="https://t.me/ximperlinux" class="social-icon"><i class="fab fa-telegram"></i></a>
......@@ -32,68 +41,152 @@
</header>
<main>
<div id="hero-section">
<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="hero-text">
<div class="hero-image">
<img src="images/ximperlinux.svg" alt="logo">
</div>
<h2>Ximper Linux</h2>
<p>Роллинг-релиз дистрибутив на основе ALT Sisyphus с рабочим столом GNOME</p>
<p>Роллинг-релиз на базе ALT Sisyphus, создан для тех, кто ищет идеальное сочетание высокой производительности, современного дизайна и стабильности.</p>
<button id="next-section">Узнать больше</button>
</div>
</div>
<div id="blocks-text">
<h1>Возможности и удобства</h1>
</div>
<div id="blocks-section">
<div class="info-block">
<img src="images/app.png" alt="">
<h3>Sisyphus on board</h3>
<p>В наличии обширный репозиторий пакетов Sisyphus, у Вас всегда будет широкий выбор пакетов и приложений для установки.</p>
</div>
<div class="info-block">
<img src="images/easy.png" alt="">
<h3>Минимальная установка</h3>
<p>Опционально доступна, позволяет пользователям настроить систему и добавить только необходимые компоненты.</p>
</div>
<div class="info-block">
<img src="images/circles.png" alt="">
<h3>Однородная цветовая гамма в GTK и QT</h3>
<p>Единая цветовая гамма для GTK и QT придает системе стильный и согласованный внешний вид, повышая ее эстетическое качество.</p>
<div class="info-block">
<img src="images/app.png" alt="">
<h3>Sisyphus on board</h3>
<p>В наличии обширный репозиторий пакетов Sisyphus, у Вас всегда будет широкий выбор пакетов и приложений для установки.</p>
</div>
<div class="info-block">
<img src="images/easy.png" alt="">
<h3>Минимальная установка</h3>
<p>Опционально доступна, позволяет пользователям настроить систему и добавить только необходимые компоненты.</p>
</div>
<div class="info-block">
<img src="images/circles.png" alt="">
<h3>Однородная цветовая гамма в GTK и QT</h3>
<p>Единая цветовая гамма для GTK и QT придает системе стильный и согласованный внешний вид, повышая ее эстетическое качество.</p>
</div>
<div class="info-block">
<img src="images/EPM.png" alt="">
<h3>Удобный пакетный менеджер EPM из коробки</h3>
<p>Присутствие удобного пакетного менеджера EPM упрощает процесс установки, обновления и управления программами, делая опыт использования более комфортным.</p>
</div>
<div class="info-block">
<img src="images/console.png" alt="">
<h3>Хорошая производительность в играх благодаря PortProton</h3>
<p>PortProton — это проект, разработанный для того, чтобы сделать легким и удобным запуск Windows игр на Linux. Работает из коробки.</p>
</div>
<div class="info-block">
<img src="images/file-system.png" alt="">
<h3>Выбор файловой системы при установке</h3>
<p>Возможность выбора файловой системы при установке, включая BTRFS, дополняется интегрированным инструментом резервного копирования Timeshift, что способствует улучшению устойчивости системы.</p>
</div>
</div>
<div class="variants-text">
<h1>Идеальный выбор для каждого</h1>
</div>
<div class="cards-section">
<div class="card">
<img src="images/ximperclassic.png" alt="">
<div class="card-text">
<h3>Ximper Linux Classic</h3>
<p>Классический Ximper Linux с GNOME подходит для тех, кто ценит привычный, стабильный рабочий стол. Идеален для офисной работы, обучения и повседневного использования.</p>
</div>
</div>
<div class="info-block">
<img src="images/EPM.png" alt="">
<h3>Удобный пакетный менеджер EPM из коробки</h3>
<p>Присутствие удобного пакетного менеджера EPM упрощает процесс установки, обновления и управления программами, делая опыт использования более комфортным.</p>
<div class="card">
<img src="images/ximperhypr.png" alt="">
<div class="card-text">
<h3>Ximper Linux Hyprland</h3>
<p>Современный дистрибутив с оконным менеджером Hyprland для продвинутых пользователей, стремящихся к легкости и скорости работы. Идеален для экспериментов и нестандартных конфигураций.</p>
</div>
</div>
<div class="info-block">
<img src="images/console.png" alt="">
<h3>Хорошая производительность в играх благодаря PortProton</h3>
<p>PortProton — это проект, разработанный для того, чтобы сделать легким и удобным запуск Windows игр на Linux. Работает из коробки.</p>
<div class="card">
<img src="images/ximpnvd.png" alt="">
<div class="card-text">
<h3>Ximper Linux NVIDIA</h3>
<p>Оптимизирован для видеокарт NVIDIA, этот вариант обеспечивает наилучшую производительность в играх и графических приложениях. Подходит для геймеров и специалистов в области дизайна.</p>
</div>
</div>
<div class="info-block">
<img src="images/file-system.png" alt="">
<h3>Выбор файловой системы при установке</h3>
<p>Возможность выбора файловой системы при установке, включая BTRFS, дополняется интегрированным инструментом резервного копирования Timeshift, что способствует улучшению устойчивости системы.</p>
<div class="card">
<img src="images/ximphnvd.png" alt="">
<div class="card-text">
<h3>Ximper Linux Hyprland NVIDIA</h3>
<p>Оптимизирован для видеокарт NVIDIA. Обеспечивает быструю работу и высокую эффективность как в играх, так и в ресурсоемких графических приложениях. Идеален для геймеров и дизайнеров, ценящих скорость, стабильность и гибкость.</p>
</div>
</div>
</div>
<div class="download-section">
<div class="download-left">
<img src="images/ximpermonitor.png" alt="">
</div>
<div class="download-right">
<h2>Загрузить Ximper Linux прямо сейчас</h2>
<p>Выберите версию для вашей конфигурации и начните установку прямо сейчас!</p>
<a href="downloads.html" class="button">Загрузить</a>
</div>
</div>
<div class="download-text-block">
<h1>Скачайте Ximper Linux и наслаждайтесь его возможностями!</h1>
<a href="downloads.html" class="button">Перейти на страницу загрузок</a>
</div>
</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>
</div>
<div id="contact-info">
<!-- Контактная информация -->
<p>© ООО «Этерсофт». Санкт-Петербург</p>
<div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</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>
news.html
View file @ 5a03620d
......@@ -10,6 +10,15 @@
<link rel="stylesheet" href="libs/webfonts/css/all.min.css">
<script src="libs/jquery-3.6.0.min.js"></script>
</head>
<div class="menu-button">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu">
<a href="index.html">Главная</a>
<a href="downloads.html">Загрузки</a>
<a href="#">Новости</a>
<a href="https://wiki.ximperlinux.ru">Wiki</a>
</div>
<body>
<header>
<div class="header-left">
......@@ -225,9 +234,8 @@ $ epmi grub-btrfs</br>
<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 id="contact-info">
<!-- Контактная информация -->
<p>© ООО «Этерсофт». Санкт-Петербург</p>
<div class="footer-center">
<p id="contact-info">© ООО «Этерсофт». Санкт-Петербург</p>
</div>
<div class="footer-right">
<a href="https://etersoft.ru"><img src="images/logoteamv2.png" alt="Etersoft" class="logo"></a>
......
script.js
View file @ 5a03620d
......@@ -3,7 +3,83 @@ $(document).ready(function(){
$('#next-section').click(function(){
// Плавная прокрутка к следующему блоку
$('html, body').animate({
scrollTop: $('#blocks-section').offset().top
scrollTop: $('#blocks-text').offset().top
}, 1500); //Время в секундах (можно поигарться)
});
});
// Ждем загрузки DOM
document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".circle-container");
const circles = Array.from(document.querySelectorAll(".circle"));
// Для каждого шарика создаём объект с физическими данными:
// Скорость будет постоянной, а направление определяется случайно
const constantSpeed = 100; // px/с
let circlesData = circles.map(el => {
const style = window.getComputedStyle(el);
let x = parseFloat(style.left);
let y = parseFloat(style.top);
let radius = el.offsetWidth / 2;
// Случайное направление
const angle = Math.random() * 2 * Math.PI;
let vx = Math.cos(angle) * constantSpeed;
let vy = Math.sin(angle) * constantSpeed;
// прозрачность
el.style.opacity = 0.35;
return { el, x, y, vx, vy, radius };
});
let lastTime = performance.now();
function animate(time) {
const dt = (time - lastTime) / 1000; // время в секундах
lastTime = time;
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
circlesData.forEach(circle => {
// Обновляем координаты с постоянной скоростью
circle.x += circle.vx * dt;
circle.y += circle.vy * dt;
// Столкновение с левой/правой границей – отражение по оси X
if (circle.x < 0) {
circle.x = 0;
circle.vx = Math.abs(circle.vx);
} else if (circle.x + circle.el.offsetWidth > containerWidth) {
circle.x = containerWidth - circle.el.offsetWidth;
circle.vx = -Math.abs(circle.vx);
}
// Столкновение с верхней/нижней границей – отражение по оси Y
if (circle.y < 0) {
circle.y = 0;
circle.vy = Math.abs(circle.vy);
} else if (circle.y + circle.el.offsetHeight > containerHeight) {
circle.y = containerHeight - circle.el.offsetHeight;
circle.vy = -Math.abs(circle.vy);
}
// Обновляем позицию элемента
circle.el.style.left = circle.x + "px";
circle.el.style.top = circle.y + "px";
});
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
});
$(document).ready(function () {
$(".menu-button").click(function () {
$(".mobile-menu").toggle();
});
// Закрытие меню при клике вне его области
$(document).click(function (event) {
if (!$(event.target).closest(".menu-button, .mobile-menu").length) {
$(".mobile-menu").hide();
}
});
});
styles.css
View file @ 5a03620d
......@@ -32,47 +32,40 @@ body::before {
@keyframes glowAnimation {
0% {
transform: translate(0%, 0%) scale(1);
opacity: 0; /* Полностью прозрачный в начале */
transform: translate(0, 0) scale(1);
opacity: 0;
}
10% {
transform: translate(-30%, -30%) scale(1.2);
opacity: 0.4; /* Плавное появление */
opacity: 0.4;
}
40% {
transform: translate(30%, -30%) scale(1.4);
opacity: 1; /* Максимальная яркость */
opacity: 1;
}
60% {
transform: translate(-30%, 30%) scale(1.2);
opacity: 0.4; /* Плавное исчезновение */
opacity: 0.4;
}
90% {
transform: translate(30%, 30%) scale(1.3);
opacity: 0.2; /* Минимальная яркость */
opacity: 0.2;
}
100% {
transform: translate(0%, 0%) scale(1);
opacity: 0; /* Полностью прозрачный в конце */
transform: translate(0, 0) scale(1);
opacity: 0;
}
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 18px;
margin-left: 4px;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 16px;
margin: 4px 4px 16px 4px;
text-decoration: none;
background-color: var(--bg);
color: #fff;
transition-property: background-color;
transition-duration: 0.8s;
transition: background-color 0.8s;
box-sizing: border-box;
border: 2px solid var(--border);
border-radius: 15px;
......@@ -93,8 +86,7 @@ header {
right: 12px;
z-index: 1000;
flex-wrap: wrap;
transition-property: background-color;
transition-duration: 0.8s;
transition: background-color 0.8s;
box-sizing: border-box;
border: 2px solid var(--border);
border-radius: 15px;
......@@ -159,32 +151,95 @@ header h1 {
font-size: 20px;
}
/* Мобильная версия */
/* Мобильная версия для хедера */
@media (max-width: 768px) {
.header-center {
order: 1;
flex-grow: 0;
margin: 0;
text-align: center;
}
.header-right {
order: 2;
flex-grow: 0;
margin: 0 0 0 20px;
text-align: left;
}
.header-menu ul li {
margin-right: 15px;
}
.header-right .social-icon {
font-size: 24px;
margin-left: 12px;
}
}
/* Кнопка меню */
.menu-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: var(--bg);
border: 2px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
/* Иконка внутри кнопки */
.menu-button i {
font-size: 24px;
color: var(--text);
}
/* Скрытое мобильное меню */
.mobile-menu {
position: fixed;
bottom: 80px;
right: 20px;
background-color: var(--bg);
border: 2px solid var(--border);
border-radius: 10px;
display: none;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.mobile-menu a {
text-decoration: none;
color: var(--text);
padding: 8px 12px;
display: block;
}
.mobile-menu a:hover {
background-color: var(--border);
border-radius: 5px;
}
/* Скрываем обычное меню на мобильных устройствах */
@media (max-width: 768px) {
.header-center {
display: none;
}
}
/* Скрытие кнопки меню на десктопе */
@media (min-width: 769px) {
.menu-button,
.mobile-menu {
display: none !important;
}
}
/* Стили для основного контента */
main {
flex: 1;
......@@ -201,20 +256,22 @@ main {
text-align: center;
position: relative;
margin-top: -20px;
overflow: hidden;
}
.hero-img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
z-index: -1;
.hero-image {
margin-bottom: 20px;
}
.hero-image img {
max-width: 30%;
height: auto;
border-radius: 15px;
}
.hero-text {
max-width: 600px;
position: relative;
z-index: 1;
}
.hero-text h2 {
......@@ -232,94 +289,171 @@ main {
font-size: 18px;
background-color: var(--bg);
color: #fff;
transition-property: background-color;
transition-duration: 0.8s;
transition: background-color 0.8s;
box-sizing: border-box;
border: 2px solid var(--border);
border-radius: 15px;
}
/* Контейнер с преимуществами */
#blocks-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три карточки в ряд */
gap: 30px;
padding: 60px 20px;
background: transparent;
position: relative;
overflow: hidden;
}
.info-block {
background-color: var(--bg);
margin: 10px;
#blocks-text {
text-align: center;
padding: 20px;
}
.info-block {
background: rgba(11, 14, 29, 0.8);
border: 2px solid var(--border);
border-radius: 15px;
width: calc(35%);
color: #fff;
text-align: center;
border-radius: 20px;
padding: 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%; /* Уменьшаем ширину карточек */
margin: 0 auto; /* Центрируем карточки */
}
.info-block:hover {
transform: translateY(-10px) scale(1.02);
border-color: var(--border); /* Анимация границы при наведении */
box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
}
.info-block:hover::before {
opacity: 1;
}
.info-block img {
max-width: 100%;
height: auto;
width: 70px;
height: 70px;
object-fit: contain;
margin-bottom: 20px;
width: 100px;
filter: drop-shadow(0 4px 6px rgba(126, 1, 255, 0.3));
transition: transform 0.3s;
}
.info-block:hover img {
transform: scale(1.1) rotate(-5deg);
}
.info-block h3 {
font-size: 1.4em;
margin-bottom: 12px;
background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
}
.info-block p {
font-size: 1em;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
position: relative;
z-index: 1;
}
/* Адаптация для планшетов */
@media (max-width: 1024px) {
#blocks-section {
grid-template-columns: repeat(2, 1fr); /* Две карточки в ряд на планшетах */
}
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
#blocks-section {
grid-template-columns: 1fr; /* Одна карточка в ряд на мобильных */
padding: 40px 15px;
}
.info-block {
width: calc(100% - 40px);
padding: 20px;
}
.info-block h3 {
font-size: 1.2em;
}
}
/* Блок с карточками */
.variants-text {
text-align: center;
padding: 20px;
}
.variants-text ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.variants-text li {
margin: 10px 0;
}
.download-section {
/* Блок карточек */
.cards-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 20px;
background: transparent;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
.download-left {
flex: 1;
.card {
width: 24%;
min-width: 280px;
background-color: var(--bg);
border: 2px solid var(--border);
border-radius: 10px;
overflow: hidden;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.download-left img {
.card img {
width: 100%;
height: auto;
border-radius: 10px;
}
.download-right {
flex: 1;
padding: 0 20px;
color: #fff;
position: relative;
text-align: center;
.card-text h3 {
font-size: 1.4em;
margin-bottom: 12px;
background: linear-gradient(45deg, #fff 30%, #b79ced 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 4px rgba(126, 1, 255, 0.3);
}
.download-right h2 {
font-size: 36px;
margin-bottom: 20px;
.card-text p {
padding: 15px;
}
.download-right p {
font-size: 18px;
margin-bottom: 20px;
.download-text-block {
text-align: center;
padding: 20px;
background: transparent;
}
/* Адаптация карточек для мобильных устройств */
@media (max-width: 768px) {
.download-section {
.cards-section {
flex-direction: column;
align-items: center;
}
.download-left, .download-right {
width: 100%;
}
.download-right {
padding: 20px;
}
.download-right h2 {
font-size: 28px;
.card {
width: 90%;
}
}
......@@ -343,9 +477,7 @@ footer {
.footer-left, .footer-right {
display: flex;
align-items: center;
margin-left: 100px;
margin-right: 100px;
justify-content: flex-end;
justify-content: flex-start;
flex-wrap: wrap;
}
......@@ -360,18 +492,152 @@ footer {
width: 180px;
}
#contact-info {
display: inline-block;
.footer-center {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
}
#contact-info {
font-size: 12px;
align-self: flex-end;
}
/* Респонсив для экранов менее 768px */
@media (max-width: 768px) {
footer {
flex-direction: column;
padding: 15px;
}
.footer-left, .footer-right {
margin: 10px 0;
justify-content: center;
width: 100%;
}
.footer-left .social-icon, .footer-right .social-icon {
font-size: 25px;
margin-right: 10px;
}
#contact-info {
font-size: 14px;
text-align: center;
margin-top: 15px;
}
}
/* Для экранов от 770px до 1100px */
@media (min-width: 770px) and (max-width: 1100px) {
footer {
flex-direction: row;
justify-content: space-between;
padding: 10px 15px;
}
.footer-left, .footer-right {
justify-content: flex-start;
margin: 0;
}
.footer-center {
width: auto;
text-align: center;
margin-top: 10px;
}
.footer-left .social-icon, .footer-right .social-icon {
font-size: 28px;
margin-right: 15px;
}
#contact-info {
font-size: 14px;
text-align: center;
margin-top: 0;
}
}
/* Для десктопа, если нужно */
@media (min-width: 1024px) {
.footer-left, .footer-right {
margin-left: 100px;
margin-right: 100px;
}
.footer-center {
width: auto;
}
}
/* Стили для шариков – их позиционирование обновляется через JS */
.circle-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.circle {
position: absolute;
border-radius: 50%;
opacity: 0.8;
}
/* Начальные размеры, позиции и цвета для 50 шариков */
.circle:nth-child(1) { width: 30px; height: 30px; background: #ff4d4d; left: 10%; top: 5%; }
.circle:nth-child(2) { width: 40px; height: 40px; background: #4da6ff; left: 80%; top: 15%; }
.circle:nth-child(3) { width: 35px; height: 35px; background: #4dff4d; left: 20%; top: 25%; }
.circle:nth-child(4) { width: 45px; height: 45px; background: #ffd24d; left: 60%; top: 35%; }
.circle:nth-child(5) { width: 50px; height: 50px; background: #b84dff; left: 30%; top: 45%; }
.circle:nth-child(6) { width: 25px; height: 25px; background: #ff944d; left: 70%; top: 55%; }
.circle:nth-child(7) { width: 55px; height: 55px; background: #4dffea; left: 15%; top: 65%; }
.circle:nth-child(8) { width: 60px; height: 60px; background: #ff4da6; left: 85%; top: 75%; }
.circle:nth-child(9) { width: 30px; height: 30px; background: #fffa4d; left: 40%; top: 85%; }
.circle:nth-child(10) { width: 45px; height: 45px; background: #ff4d4d; left: 60%; top: 95%; }
.circle:nth-child(11) { width: 35px; height: 35px; background: #4da6ff; left: 25%; top: 8%; }
.circle:nth-child(12) { width: 40px; height: 40px; background: #4dff4d; left: 55%; top: 18%; }
.circle:nth-child(13) { width: 50px; height: 50px; background: #ffd24d; left: 15%; top: 28%; }
.circle:nth-child(14) { width: 30px; height: 30px; background: #b84dff; left: 75%; top: 38%; }
.circle:nth-child(15) { width: 55px; height: 55px; background: #ff944d; left: 35%; top: 48%; }
.circle:nth-child(16) { width: 60px; height: 60px; background: #4dffea; left: 85%; top: 58%; }
.circle:nth-child(17) { width: 25px; height: 25px; background: #ff4da6; left: 20%; top: 68%; }
.circle:nth-child(18) { width: 45px; height: 45px; background: #fffa4d; left: 50%; top: 78%; }
.circle:nth-child(19) { width: 35px; height: 35px; background: #ff4d4d; left: 70%; top: 88%; }
.circle:nth-child(20) { width: 40px; height: 40px; background: #4da6ff; left: 30%; top: 98%; }
.circle:nth-child(21) { width: 50px; height: 50px; background: #4dff4d; left: 40%; top: 12%; }
.circle:nth-child(22) { width: 30px; height: 30px; background: #ffd24d; left: 60%; top: 22%; }
.circle:nth-child(23) { width: 45px; height: 45px; background: #b84dff; left: 20%; top: 32%; }
.circle:nth-child(24) { width: 55px; height: 55px; background: #ff944d; left: 80%; top: 42%; }
.circle:nth-child(25) { width: 60px; height: 60px; background: #4dffea; left: 50%; top: 52%; }
.circle:nth-child(26) { width: 25px; height: 25px; background: #ff4da6; left: 10%; top: 62%; }
.circle:nth-child(27) { width: 35px; height: 35px; background: #fffa4d; left: 90%; top: 72%; }
.circle:nth-child(28) { width: 40px; height: 40px; background: #ff4d4d; left: 40%; top: 82%; }
.circle:nth-child(29) { width: 50px; height: 50px; background: #4da6ff; left: 70%; top: 92%; }
.circle:nth-child(30) { width: 45px; height: 45px; background: #4dff4d; left: 60%; top: 5%; }
.circle:nth-child(31) { width: 30px; height: 30px; background: #ffd24d; left: 15%; top: 15%; }
.circle:nth-child(32) { width: 55px; height: 55px; background: #b84dff; left: 85%; top: 25%; }
.circle:nth-child(33) { width: 60px; height: 60px; background: #ff944d; left: 45%; top: 35%; }
.circle:nth-child(34) { width: 25px; height: 25px; background: #4dffea; left: 25%; top: 45%; }
.circle:nth-child(35) { width: 35px; height: 35px; background: #ff4da6; left: 75%; top: 55%; }
.circle:nth-child(36) { width: 40px; height: 40px; background: #fffa4d; left: 35%; top: 65%; }
.circle:nth-child(37) { width: 50px; height: 50px; background: #ff4d4d; left: 55%; top: 75%; }
.circle:nth-child(38) { width: 45px; height: 45px; background: #4da6ff; left: 20%; top: 85%; }
.circle:nth-child(39) { width: 30px; height: 30px; background: #4dff4d; left: 80%; top: 95%; }
.circle:nth-child(40) { width: 55px; height: 55px; background: #ffd24d; left: 50%; top: 10%; }
.circle:nth-child(41) { width: 60px; height: 60px; background: #b84dff; left: 70%; top: 20%; }
.circle:nth-child(42) { width: 25px; height: 25px; background: #ff944d; left: 30%; top: 30%; }
.circle:nth-child(43) { width: 35px; height: 35px; background: #4dffea; left: 90%; top: 40%; }
.circle:nth-child(44) { width: 40px; height: 40px; background: #ff4da6; left: 40%; top: 50%; }
.circle:nth-child(45) { width: 50px; height: 50px; background: #fffa4d; left: 60%; top: 60%; }
.circle:nth-child(46) { width: 45px; height: 45px; background: #ff4d4d; left: 10%; top: 70%; }
.circle:nth-child(47) { width: 30px; height: 30px; background: #4da6ff; left: 80%; top: 80%; }
.circle:nth-child(48) { width: 55px; height: 55px; background: #4dff4d; left: 40%; top: 90%; }
.circle:nth-child(49) { width: 60px; height: 60px; background: #ffd24d; left: 90%; top: 5%; }
.circle:nth-child(50) { width: 35px; height: 35px; background: #b84dff; left: 60%; top: 15%; }
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