diff --git a/kotec.pl/css/modal.css b/kotec.pl/css/modal.css deleted file mode 100644 index 546b519..0000000 --- a/kotec.pl/css/modal.css +++ /dev/null @@ -1,107 +0,0 @@ -/* Стилизация модального окна */ -.modal { - display: none; /* Начальное состояние: скрыто */ - position: fixed; /* Отображение поверх содержимого страницы */ - z-index: 1; /* Размещение окна наверху других элементов */ - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; /* Включение прокрутки при необходимости */ - background-color: rgba(0, 0, 0, 0.5); /* Непрозрачность фона */ -} - -.modal-content { - position: relative; - z-index: 1; - background-color: #fff; - margin: 10% auto; - padding: 20px; - border: 1px solid #888; - width: 90%; /* увеличиваем ширину формы */ - max-width: 1000px; - max-height: 1000px; - border-radius: 5%; -} - -/* перенесем кнопку закрытия за пределы формы */ -.close { - position: absolute; - right: 20px; - top: 10px; - font-size: 28px; - font-weight: bold; - color: #aaa; - cursor: pointer; - z-index: 2; /* увеличим z-index, чтобы кнопка была поверх формы */ -} - -.close:hover, -.close:focus { - color: #000; - text-decoration: none; - cursor: pointer; -} - -/* Стилизация полей формы */ -label { - display: block; - margin-bottom: 10px; - width: 100%; - font-size: 16px; - font-family: Arial, sans-serif; - border-radius: 4px; -} - -/* установим серый фон для полей ввода */ -input, textarea{ - display: block; - margin-bottom: 10px; - width: 100%; - font-size: 16px; - font-family: Arial, sans-serif; - border-radius: 4px; - background-color: #eee; - padding: 10px; - border-radius: 10%; -} - - -label { - font-weight: bold; -} - -input[type="text"], input[type="email"], textarea { - padding: 12px 20px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; -} - -input[type="submit"] { - position: relative; - text-decoration-color: rgb(184, 53, 129); - font-size: 28px; - display: inline-block; - padding: 15px 25px; - background-color: rgb(184, 53, 129); - color: #fff; - text-align: center; - text-decoration: none; - border-radius: 40px; - cursor: pointer; - transition: background-color 0.3s ease-in-out; - border: none; -} - -input[type="submit"]:hover { - background-color: #3e8e41; -} - -/* Адаптивность для мобильных устройств */ -@media screen and (max-width: 600px) { - .modal-content { - margin: 25% auto; - width: 90%; - } -} diff --git a/kotec.pl/css/onas.css b/kotec.pl/css/onas.css deleted file mode 100644 index 5f9adb3..0000000 --- a/kotec.pl/css/onas.css +++ /dev/null @@ -1,78 +0,0 @@ -.about { - display: grid; - grid-template-columns: 1fr 2fr; - align-items: left; - margin: 100px; - position: relative; /* Изменяем на абсолютное позиционирование */ - left: 5%; /* Смещаем на 25% от левого края */ - width: auto; - border-radius: 5%; -} - -.about-left { - flex-basis: 33%; - text-align: left ; -} - -.about-right { - flex-basis: 67%; -} - -#coop { - width: calc(33.33% - 40px); /* Ustawiamy szerokość na 1/3 szerokości elementu .header-section minus marginesy */ - text-align: left; - font-size: 3.33vw; /* Ustawiamy font-size na 33.33vw, co odpowiada 1/3 szerokości okna przeglądarki */ - margin-top: 0; - display: inline-block; /* Ustawiamy na inline-block, aby tekst zajął tylko niezbędne miejsce */ - max-width: 10%; /* Ustawiamy maksymalną szerokość na 100% */ -} - -.slogan { - font-size: 18px; - margin-top: 10px; -} - -.onas { - max-width: 100%; /* Ustawiamy maksymalną szerokość obrazka na 100%, aby zmieścił się w dostępnym miejscu */ -} - -@media (orientation: portrait) { - .about { - margin: 20px; - position: relative; /* Возвращаем статическое позиционирование */ - top: auto; /* Сбрасываем значение отступа сверху */ - left: auto; /* Сбрасываем значение смещения слева */ - grid-template-columns: 1fr; /* Устанавливаем одну колонку в сетке */ - height: auto; /* Сбрасываем фиксированную высоту */ - width: auto; /* Сбрасываем фиксированную ширину */ - border-radius: 0; /* Сбрасываем значение border-radius */ - } - - .about-left { - flex-basis: auto; /* Сбрасываем значение flex-basis */ - text-align: center; /* Центрируем текст */ - } - - .about-right { - flex-basis: auto; /* Сбрасываем значение flex-basis */ - margin-top: 20px; /* Добавляем отступ сверху */ - } - - #coop { - width: 100%; /* Устанавливаем ширину на 100% */ - max-width: none; /* Сбрасываем значение максимальной ширины */ - margin-top: 10px; /* Добавляем отступ сверху */ - font-size: 72px; /* Уменьшаем размер шрифта */ - display: block; /* Устанавливаем на блочный элемент */ - text-align: center; /* Центрируем текст */ - } - - .slogan { - font-size: 14px; /* Уменьшаем размер шрифта */ - margin-top: 5px; /* Уменьшаем отступ сверху */ - } - - .onas { - max-width: 100%; /* Устанавливаем максимальную ширину на 100% */ - } -} diff --git a/kotec.pl/css/styles.css b/kotec.pl/css/styles.css deleted file mode 100644 index 24af783..0000000 --- a/kotec.pl/css/styles.css +++ /dev/null @@ -1,353 +0,0 @@ -#div1 { - font-size: 1.4em; - position: relative; - width: 100%; - height: 100vh; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -} - -#onas { -font-size: 2.5rem; -font-weight: bold; -color: #343a40; -text-align: center; -margin-bottom: 30px; -} - -#div1 p { -font-size: 1.2rem; -line-height: 1.8; -color: #6c757d; -text-align: justify; -margin-bottom: 30px; -} - -#div2 { -} - -footer { -} - -body { - background-color: hsl(0, 42%, 21%, 0.3); - background-repeat: no-repeat; - background-size: 150%; - --bs-backdrop-opacity: 50; - font-family: "Monospace", Times, serif; - margin: 0; - padding: 0; -} - -#logo { - display: inline-block; - margin: 15px; - position: relative; /* Изменяем на абсолютное позиционирование */ - top: 15px; /* Устанавливаем отступ сверху */ - left: 5%; /* Смещаем на 25% от левого края */ - height: 110px; - width: auto; - border-radius: 5%; -} - -#links { - position: absolute; - right: 10%; - top: 5%; -} - -a:link { - color: rgb(184, 53, 129); - background-color: transparent; - text-decoration: none; -} - -a:visited { - color: rgb(184, 53, 129); - background-color: transparent; - text-decoration: none; -} - -a:hover { - color: rgb(184, 53, 129); - background-color: transparent; - text-decoration: underline; -} - -a:active { - color: rgb(184, 53, 129); - background-color: transparent; - text-decoration: underline; -} - -.o_nas { - display: inline-block; - padding: 15px 25px; - background-color: #fff; /* Устанавливаем цвет заливки кнопки */ - color: #000; /* Устанавливаем цвет текста на кнопке */ - font-size: 18px; /* Устанавливаем размер шрифта */ - text-align: center; - text-decoration: none; - border: 1px solid #000; /* Устанавливаем границу кнопки */ - border-radius: 40px; /* Закругляем углы кнопки */ - transition: background-color 0.3s ease-in-out; /* Добавляем плавный переход при наведении на кнопку */ -} - -.o_nas:hover { - background-color: #f2f2f2; /* Изменяем цвет заливки при наведении на кнопку */ -} - -.o_nas:active { - background-color: #e2e2e2; /* Изменяем цвет заливки при нажатии на кнопку */ -} - -.kotakt { - position: relative; - text-decoration-color: rgb(184, 53, 129); - font-size: 4.5em; - display: inline-block; - padding: 15px 25px; - background-color: rgb(184, 53, 129); /* Устанавливаем яркий цвет заливки */ - color: #fff; /* Устанавливаем цвет текста на кнопке */ - font-size: 28px; /* Устанавливаем размер шрифта */ - text-align: center; - text-decoration: none; - border-radius: 40px; /* Закругляем углы кнопки */ - transition: background-color 0.3s ease-in-out; /* Добавляем плавный переход при наведении на кнопку */ - -} - -.kotakt:hover { - /* Ustawienia wyglądu przycisku */ - padding: 10px 20px; - background-color: #ff007f; - color: #ffffff; - font-size: 28px; - border: none; - cursor: pointer; - /* Definicja animacji pulsowania */ - animation-name: pulsowanie; - animation-duration: 1s; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; -} - -/* Definicja keyframes dla animacji pulsowania */ -@keyframes pulsowanie { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } - 100% { - transform: scale(1); - } -} - -.kotakt:active { - /* Изменяем цвет обводки при нажатии на кнопку */ - background-color: #ff0055; -} - -#nav:link { - color: #rgb(184, 53, 129); -} - -#coop { - text-align: center; -} - -#text { - font-size: 1.4em; - color: #424649; - text-align: justify; - width: 60%; - padding: 2em; -} - -header { - position: static; - top: 0; - left: 0; - right: 0; - background-color: #fff; - padding: 10px; - z-index: 999; /* Чтобы header был поверх остального контента */ -} - -.dropdown { - display: none; /* Полностью скрываем элемент с классом "dropdown" */ -} - -@media (orientation: portrait) { - #div1 { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - } - #kotec1 { - margin: 0; - width: 80%; - } - - #text { - text-align: center; - margin: 20px; - } - - #onas { - font-size: 1.5em; - margin-bottom: 10px; - } - - #text p { - font-size: 1.2em; - } - #logo { - margin: 0; - } - - /* Стили для выпадающего списка на маленьких экранах */ - .dropdown { - display: flex; - flex-direction: column; - position: relative; - } - - .dropdown-toggle { - background-color: transparent; - color: #fff; - font-size: 32px; - padding: 20px; - border: none; - cursor: pointer; - margin-left: auto; - width: 100px; - height: 100px; - display: flex; - align-items: center; - justify-content: center; - } - - .dropdown-toggle:hover { - background-color: rgba(0, 0, 0, 0.1); /* Add a slight hover effect */ - } - - .dropdown-toggle:before { /* Add a "<" or ">" sign using pseudo-element */ - content: "<"; - font-size: 48px; - } - - .dropdown.open .dropdown-toggle:before { /* Change sign to ">" when menu is open */ - content: ">"; - } - - .dropdown-menu { - display: none; - position: absolute; - top: 100%; - right: 0; - z-index: 1; - min-width: 320px; - padding: 10px 0; - margin: 0; - background-color: #fff; - border: 1px solid #ced4da; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - } - - .dropdown.open .dropdown-menu { - display: block; - } - - .dropdown-item { - display: block; - padding: 20px; - font-size: 32px; - color: #333; - text-decoration: none; - cursor: pointer; - } - - .dropdown-item:hover { - background-color: #f8f9fa; - } - - #links { - display: none; - } - - nav { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 5px; - } - - nav a { - font-size: 1.5em; - } - body { - background-color: hsl(0, 42%, 21%, 0.3); - background-repeat: no-repeat; - background-size: 150%; - --bs-backdrop-opacity: 50; - font-family: "Monospace", Times, serif; - } - - #links { - position: absolute; - right: 5%; /* смещаем вправо */ - top: 3%; /* смещаем вверх */ - } - - a:link, - a:visited, - a:hover, - a:active { - color: rgb(184, 53, 129); - background-color: transparent; - text-decoration: none; - } - - #o_nas { - position: relative; - font-size: 2em; /* уменьшаем размер шрифта */ - text-decoration-color: rgb(184, 53, 129); - } - - #kotakt { - position: relative; - left: 15%; /* смещаем влево */ - text-decoration-color: rgb(184, 53, 129); - font-size: 2em; /* уменьшаем размер шрифта */ - } - - #nav:link { - color: rgb(184, 53, 129); - } - - #coop { - text-align: center; - } - - #text { - font-size: 1em; /* уменьшаем размер шрифта */ - position: relative; - color: #424649; - top: 20%; /* смещаем вверх */ - left: 5%; /* смещаем влево */ - width: 90%; /* изменяем ширину */ - height: auto; /* автоматическая высота */ - text-align: justify; - } - /* Добавляем стили для увеличения высоты header на мобильных устройствах */ - .header { - height: 1200px; /* Устанавливаем желаемую высоту */ - } -} \ No newline at end of file diff --git a/kotec.pl/images/kotakt.png b/kotec.pl/images/kotakt.png deleted file mode 100644 index 7d7ac6c..0000000 Binary files a/kotec.pl/images/kotakt.png and /dev/null differ diff --git a/kotec.pl/images/logo.png b/kotec.pl/images/logo.png deleted file mode 100644 index 42ea07a..0000000 Binary files a/kotec.pl/images/logo.png and /dev/null differ diff --git a/kotec.pl/images/onas.png b/kotec.pl/images/onas.png deleted file mode 100644 index 18a50f0..0000000 Binary files a/kotec.pl/images/onas.png and /dev/null differ diff --git a/kotec.pl/images/onas1.png b/kotec.pl/images/onas1.png deleted file mode 100644 index 2cc00ea..0000000 Binary files a/kotec.pl/images/onas1.png and /dev/null differ diff --git a/kotec.pl/img/banner-cat.png b/kotec.pl/img/banner-cat.png new file mode 100644 index 0000000..27cc89b Binary files /dev/null and b/kotec.pl/img/banner-cat.png differ diff --git a/kotec.pl/img/kotec-logo-1024.png b/kotec.pl/img/kotec-logo-1024.png new file mode 100644 index 0000000..a39bffd Binary files /dev/null and b/kotec.pl/img/kotec-logo-1024.png differ diff --git a/kotec.pl/img/kotec-logo-512.png b/kotec.pl/img/kotec-logo-512.png new file mode 100644 index 0000000..b8bee12 Binary files /dev/null and b/kotec.pl/img/kotec-logo-512.png differ diff --git a/kotec.pl/img/phone-cat.png b/kotec.pl/img/phone-cat.png new file mode 100644 index 0000000..9bfd212 Binary files /dev/null and b/kotec.pl/img/phone-cat.png differ diff --git a/kotec.pl/index.html b/kotec.pl/index.html index edf5a7c..11a5021 100644 --- a/kotec.pl/index.html +++ b/kotec.pl/index.html @@ -1,94 +1,62 @@ - + + - Kotec - - - + + + + - + - - +
+
+ cat with a phone +
+
+

Jesteśmy kolektywem technologicznym nastawionym na autonomię cyfrową.

+

Uważamy, że wolne oprogramowanie i federacja są drogą do bardzo potrzebnej transformacji technologii. Sprzeciwiamy się monopolizacji internetu, big tech oraz inwigilacji.

+

Opieramy swoje działania na ekonomii solidarnościowej, czyli wzajemnej pomocy i transparentności. Ważne są dla nas wspólne wartości kooperatywy.

+
+
-
-
-

Kooperatywa technologiczna Kotec

-

autonomia cyfrowa

- KOTakt -
-
- -
-
+
+
+

Czym się zajmujemy?

+

+ Oferujemy szeroki zakres usług informatycznych i wsparcia technologicznego, zwłaszcza dla artystów, grup aktywistycznych, organizacji non-profit, innych spółdzielni i inicjatyw, które chcą uniezależnić się od korporacyjnych narzędzi. +

+ +
+
+ cat with a tesseract +
+
+ -
- kotec1 -
-

O nas

-

- Jesteśmy kolektywem technologicznym nastawionym na autonomię cyfrową.
Uważamy, że wolne oprogramowanie i federacja są drogą do bardzo potrzebnej nam transformacji technologii.
Sprzeciwiamy się monopolizacji Internetu i big tech oraz inwigilacji.
Opieramy swoje działania na ekonomii solidarnościowej, czyli wzajemnej pomocy i transparentności.
Ważne jest dla nas tworzenie bezpiecznego, stabilnego zatrudnienia dla członków. -

-
-
-
-

Czym się zajmujemy


- Oferujemy szeroki zakres usług informatycznych i wsparcia technologicznego, zwłaszcza dla artystów, grup aktywistycznych, organizacji non-profit i innych spółdzielni, które chcą uniezależnić się od korporacyjnych narzędzi. -

Nasze umiejętności:
- - hosting między innymi w oparciu o Co-op Cloud
- - grafika komputerowa
- - naprawa sprzętów elektronicznych
- - udostępnianie narzędzi do organizacji pracy (Nextcloud, Kanboard, Matrix i wiele innych)
- - tłumaczenia (francuski, angielski, rosyjski)
- - zarządzanie serwerami Linux
- - projektowanie i druk 3D
- i wiele innych -



-
- - - + diff --git a/kotec.pl/js/modal.js b/kotec.pl/js/modal.js deleted file mode 100644 index 9ac3cf2..0000000 --- a/kotec.pl/js/modal.js +++ /dev/null @@ -1,19 +0,0 @@ -// Funkcja do otwierania okna modalnego -function openModal() { - document.getElementById("myModal").style.display = "block"; -} - -// Funkcja do zamykania okna modalnego -function closeModal() { - document.getElementById("myModal").style.display = "none"; -} - -// Obsługa wysyłki formularza -document.getElementById("orderForm").addEventListener("submit", function(event) { - // Blokujemy domyślne zachowanie formularza (przeładowanie strony) - event.preventDefault(); - - // Tutaj można dodać kod do wysłania formularza, np. za pomocą AJAX - // Po udanej wysyłce można zamknąć okno modalne - closeModal(); -}); \ No newline at end of file diff --git a/kotec.pl/js/script.js b/kotec.pl/js/script.js deleted file mode 100644 index 6a5a720..0000000 --- a/kotec.pl/js/script.js +++ /dev/null @@ -1,17 +0,0 @@ -// Обработчик события клика на кнопке выпадающего списка -document.querySelector('.dropdown-toggle').addEventListener('click', function() { - // Получаем элемент выпадающего списка - var dropdownMenu = document.querySelector('.dropdown-menu'); - // Получаем родительский элемент .dropdown - var dropdown = document.querySelector('.dropdown'); - // Проверяем текущее состояние списка - if (dropdownMenu.style.display === 'block') { - // Если список открыт, то закрываем его и удаляем класс .open - dropdownMenu.style.display = 'none'; - dropdown.classList.remove('open'); - } else { - // Если список закрыт, то открываем его и добавляем класс .open - dropdownMenu.style.display = 'block'; - dropdown.classList.add('open'); - } -}); \ No newline at end of file diff --git a/kotec.pl/style.css b/kotec.pl/style.css new file mode 100644 index 0000000..206293f --- /dev/null +++ b/kotec.pl/style.css @@ -0,0 +1,134 @@ +/* Colors */ +:root { + --main-bg-color: #444346; + --main-text-color: #ffffff; + --accent-color: #e4ae46; +} + +/* Reset */ +html, body, h1, h2, h3, h4, h5, h6, ol, li { + margin: 0; + padding: 0; +} + +/* Body */ +body { + font-family: Arial, sans-serif; + background-color: var(--main-bg-color); + color: var(--main-text-color); + line-height: 1.6; +} + +/* Header */ +header { + background-color: var(--main-bg-color); + text-align: center; + padding: 1em; +} + +#logo { + display: inline-block; + width: 12em; + height: 12em; + background-color: var(--accent-color); + border-radius: 50%; + overflow: hidden; + margin: 1em; +} + +/* Navigation */ +#nav-bar { + margin: 1em; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.nav-btn { + color: var(--main-text-color); + text-decoration: none; + font-weight: bold; + padding: 1em 2em; + margin: 1em; + border: 0.14em solid var(--main-text-color); + border-radius: 1em; +} + +.nav-btn:hover, .nav-btn-special:hover { + background-color: var(--accent-color); + color: var(--main-bg-color); +} + +/* Split */ +.split { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1em 4em; +} + +.split img { + width: 28vw; +} + +@media (orientation: portrait) { + .split { + flex-wrap: wrap; + } + + .split img { + width: 64vw; + } +} + + +.centered { + text-align: center; +} + +.split-left { + flex: 1; + max-width: 80%; + height: auto; +} + +.split-right { + flex: 1; + max-width: 80%; + height: auto; +} + +/* Section */ +#about { + background-color: var(--accent-color); + color: var(--main-bg-color); + font-size: large; + font-weight: bold; +} + +#about a, #about a:visited { + color: var(--main-bg-color); +} + +#services { + background-color: var(--main-text-color); + color: var(--main-bg-color); +} + +#services a, #services a:visited { + color: var(--main-bg-color); +} + +/* Footer Styles */ +footer { + text-align: center; + padding: 1em; + background-color: var(--main-bg-color); + color: var(--main-text-color); + font-size: 1.2em; +} + +footer a, footer a:visited { + color: var(--main-text-color); +} +