forked from Kotec/website
Website remake
This commit is contained in:
parent
1eb7593fdd
commit
62a50a4eb0
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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% */
|
||||
}
|
||||
}
|
||||
|
|
@ -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; /* Устанавливаем желаемую высоту */
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 876 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 896 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 692 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 430 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
|
@ -1,94 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kotec</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" href="css/onas.css">
|
||||
<link rel="stylesheet" href="css/modal.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="kooperatywa technologiczna kotec">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<a href="#"><img id="logo" src="images/logo.png"></a>
|
||||
<div id="links">
|
||||
<nav>
|
||||
<a href="#div1" class="o_nas">O nas</a>
|
||||
<a href="#o_nas" class="o_nas">blog</a>
|
||||
<a class="kotakt" onclick="openModal()">KOTakt</a>
|
||||
<header>
|
||||
<img id="logo" src="img/kotec-logo-512.png" alt="kotec logo">
|
||||
<div id="name">
|
||||
<h1>Kooperatywa technologiczna Kotec</h1>
|
||||
<span class="slogan">autonomia cyfrowa</span>
|
||||
</div>
|
||||
<nav id="nav-bar">
|
||||
<a href="#about" class="nav-btn">O nas</a>
|
||||
<a href="#services" class="nav-btn">Usługi</a>
|
||||
<a href="#contact" class="nav-btn">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-toggle" type="button" id="dropdownMenuButton">
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<li class="dropdown-item"><a href="#onas">O nas</a></li>
|
||||
<li class="dropdown-item"><a href="#kontakt">KOTakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Dodajemy zawartość okna modalnego -->
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal()">×</span>
|
||||
<form class="modal-image" id="orderForm" action="send_order.php" method="post">
|
||||
<!-- Добавляем текстовые подсказки к полям -->
|
||||
<label for="name">Imię:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Mruczek">
|
||||
<label for="email">E-mail:</label>
|
||||
<input type="email" id="email" name="email" placeholder="mruczekpurrfectmail@kotec.pl">
|
||||
<label for="phone">Numer telefonu / Nickname na Telegramie:</label>
|
||||
<input type="text" id="phone" name="phone" placeholder="+48 107 111 116 / @mruczek">
|
||||
<label for="problem">Opis problemu:</label>
|
||||
<textarea id="problem" name="problem" placeholder="Rozwój nowego systemu zarządzania projektami, który umożliwi biznesmenowi-kociakowi bardziej efektywne zarządzanie swoim zespołem i skróci czas realizacji projektów."></textarea>
|
||||
<!-- Добавляем кнопку для отправки формы -->
|
||||
<input type="submit" value="Wyślij zamówienie">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<section id="about" class="split">
|
||||
<div class="split-left centered">
|
||||
<img src="img/phone-cat.png" alt="cat with a phone">
|
||||
</div>
|
||||
<div class="split-right centered">
|
||||
<p>Jesteśmy kolektywem technologicznym nastawionym na autonomię cyfrową.</p>
|
||||
<p>Uważamy, że wolne oprogramowanie i federacja są drogą do bardzo potrzebnej transformacji technologii. Sprzeciwiamy się monopolizacji internetu, big tech oraz inwigilacji.</p>
|
||||
<p>Opieramy swoje działania na ekonomii solidarnościowej, czyli wzajemnej pomocy i transparentności. Ważne są dla nas wspólne <a href="https://www.ica.coop/en/cooperatives/cooperative-identity">wartości kooperatywy</a>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="about">
|
||||
<div class="about-left">
|
||||
<h1 id="coop">Kooperatywa technologiczna Kotec</h1>
|
||||
<p class="slogan">autonomia cyfrowa</p>
|
||||
<a class="kotakt" onclick="openModal()">KOTakt</a>
|
||||
</div>
|
||||
<div class="about-right">
|
||||
<a href="#"><img class="onas" src="images/onas.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
<section id="services" class="split">
|
||||
<div class="split-left">
|
||||
<h2>Czym się zajmujemy?</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Udostępnianie platformy cyfrowej i wielu różnych narzędzi (Nextcloud, Kanboard, Matrix i <a href="https://recipes.coopcloud.tech">inne</a>).</li>
|
||||
<li>Hosting w oparciu o <a href="https://coopcloud.tech">Co-op Cloud</a>.</li>
|
||||
<li>Zarządzanie serwerami GNU/Linux.</li>
|
||||
<li>Wsparcie w zakresie rozwiązań open-source, w tym wdrożenia i implementacje zindywidualizowane.</li>
|
||||
<li>Naprawa sprzętów elektronicznych.</li>
|
||||
<li>Tłumaczenia (francuski, angielski, rosyjski).</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="split-right centered">
|
||||
<img src="img/banner-cat.png" alt="cat with a tesseract">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="contact">
|
||||
Skontaktuj się z nami pod adresem: <a href="mailto:kotakt@kotec.pl">KOTakt@kotec.pl</a>
|
||||
</footer>
|
||||
|
||||
<div id="div1">
|
||||
<img id="kotec1" src="images/kotakt.png" alt="kotec1">
|
||||
<div id="text">
|
||||
<h3 id="onas">O nas</h3>
|
||||
<p>
|
||||
Jesteśmy kolektywem technologicznym nastawionym na autonomię cyfrową.<br> Uważamy, że wolne oprogramowanie i federacja są drogą do bardzo potrzebnej nam transformacji technologii.<br> Sprzeciwiamy się monopolizacji Internetu i big tech oraz inwigilacji.<br> Opieramy swoje działania na ekonomii solidarnościowej, czyli wzajemnej pomocy i transparentności.<br> Ważne jest dla nas tworzenie bezpiecznego, stabilnego zatrudnienia dla członków.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="div2">
|
||||
<h3>Czym się zajmujemy</h3><br>
|
||||
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.
|
||||
<br><br><b>Nasze umiejętności:</b><br>
|
||||
- hosting między innymi w oparciu o <a href="https://coopcloud.tech">Co-op Cloud</a><br>
|
||||
- grafika komputerowa<br>
|
||||
- naprawa sprzętów elektronicznych<br>
|
||||
- udostępnianie narzędzi do organizacji pracy (Nextcloud, Kanboard, Matrix i <a href="https://recipes.coopcloud.tech">wiele innych</a>)<br>
|
||||
- tłumaczenia (francuski, angielski, rosyjski)<br>
|
||||
- zarządzanie serwerami Linux<br>
|
||||
- projektowanie i druk 3D<br>
|
||||
i wiele innych
|
||||
<br><br><br><br>
|
||||
</div>
|
||||
<footer>
|
||||
<h5 id="kontakt">Skontaktuj się z nami pod adresem: KOTakt@kotec.pl</h5>
|
||||
<p>Copyleft © 2023
|
||||
<a href="https://kotec.pl">kotec.pl</a>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="js/script.js"></script>
|
||||
<script src="js/modal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue