replay

kotec.pl/css/modal.css

@@ -21,6 +21,7 @@
   width: 90%; /* увеличиваем ширину формы */
   max-width: 1000px;
   max-height: 1000px;
+  border-radius: 5%;
 }
 
 /* перенесем кнопку закрытия за пределы формы */
@@ -62,6 +63,7 @@ input, textarea{
   border-radius: 4px;
   background-color: #eee;
   padding: 10px;
+  border-radius: 10%;
 }
 
 

kotec.pl/css/onas.css

@@ -1,22 +1,20 @@
-.header-section {
+.about {
   display: grid;
   grid-template-columns: 1fr 2fr;
   align-items: left;
-  margin: 200px;
+  margin: 100px;
-  position: absolute; /* Изменяем на абсолютное позиционирование */
+  position: relative; /* Изменяем на абсолютное позиционирование */
-  top: 15px; /* Устанавливаем отступ сверху */
   left: 5%; /* Смещаем на 25% от левого края */
-  height: 110px;
   width: auto;
   border-radius: 5%;
 }
 
-.header-left {
+.about-left {
   flex-basis: 33%;
   text-align: left  ;
 }
 
-.header-right {
+.about-right {
   flex-basis: 67%;
 }
 
@@ -39,9 +37,9 @@
 }
 
 @media (orientation: portrait) {
-  .header-section {
+  .about {
     margin: 20px;
-    position: static; /* Возвращаем статическое позиционирование */
+    position: relative; /* Возвращаем статическое позиционирование */
     top: auto; /* Сбрасываем значение отступа сверху */
     left: auto; /* Сбрасываем значение смещения слева */
     grid-template-columns: 1fr; /* Устанавливаем одну колонку в сетке */
@@ -50,12 +48,12 @@
     border-radius: 0; /* Сбрасываем значение border-radius */
   }
 
-  .header-left {
+  .about-left {
     flex-basis: auto; /* Сбрасываем значение flex-basis */
     text-align: center; /* Центрируем текст */
   }
 
-  .header-right {
+  .about-right {
     flex-basis: auto; /* Сбрасываем значение flex-basis */
     margin-top: 20px; /* Добавляем отступ сверху */
   }

kotec.pl/css/styles.css

@@ -1,19 +1,34 @@
 #div1 {
-    background-color: hsl(180, 42%, 21%, 0.3); /* противоположный цвет */
+    font-size: 1.4em;
-    height: 100px;
+    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 {
-    background-color: white;
-    height: 100px;
 }
 
 footer {
-    background-color: hsl(0, 42%, 16%, 0.3); /* более темный цвет */
-    color: white;
-    height: 50px;
-    text-align: center;
-    padding-top: 20px;
 }
 
 body {
@@ -29,7 +44,7 @@ body {
 #logo {
     display: inline-block;
     margin: 15px;
-    position: absolute; /* Изменяем на абсолютное позиционирование */
+    position: relative; /* Изменяем на абсолютное позиционирование */
     top: 15px; /* Устанавливаем отступ сверху */
     left: 5%; /* Смещаем на 25% от левого края */
     height: 110px;
@@ -132,9 +147,6 @@ a:active {
   }
 }
 
-W powyższym przykładzie, przycisk o id "kotakt" zostanie animowany przy użyciu zdefiniowanej animacji "pulsowanie". Animacja będzie trwała 1 sekundę, będzie miała funkcję czasową "ease-in-out" (co oznacza, że będzie miała łagodne przyśpieszenie na początku i na końcu), będzie powtarzała się w nieskończoność (dzięki ustawieniu "animation-iteration-count" na "infinite") i będzie powodowała pulsowanie przycisku w skali, zmieniając jego rozmiar od 100% do 120% i z powrotem do 100% w trakcie jednej sekundy. Możesz dostosować parametry animacji, takie jak czas trwania, funkcja czasowa czy skala, aby uzyskać pożądany efekt.
-
-
 .kotakt:active {
     /* Изменяем цвет обводки при нажатии на кнопку */
     background-color: #ff0055;
@@ -150,13 +162,10 @@ W powyższym przykładzie, przycisk o id "kotakt" zostanie animowany przy użyci
 
 #text {
     font-size: 1.4em;
-    position: absolute;
     color: #424649;
-    top: 100%;
-    left: 25%;
-    width: 50%;
-    height: 180%;
     text-align: justify;
+    width: 60%;
+    padding: 2em;
 }
 
 header {
@@ -174,6 +183,31 @@ header {
 }
 
 @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;
     }

kotec.pl/index.html

@@ -12,30 +12,19 @@
     <a href="#"><img id="logo" src="images/logo.png"></a>
     <div id="links">
         <nav>
-            <a href="#o_nas" class="o_nas">O nas</a>
+            <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>
         </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 class="header-section">
-      <div class="header-left">
-        <h1 id="coop">Kooperatywa technologiczna Kotec</h1>
-        <p class="slogan">autonomia cyfrowa</p>
-          <a class="kotakt" onclick="openModal()">KOTakt</a>
-      </div>
-      <div class="header-right">
-        <a href="#"><img class="onas" src="images/onas.png"></a>
-      </div>
-    </div>
 </div>
 
   <!-- Dodajemy zawartość okna modalnego -->
@@ -58,11 +47,28 @@
   </div>
 </div>
 
-<div id="text"><br>
+<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>
+
+
 <div id="div1">
-    <h3 id="onas">O nas</h3><br>
+    <img id="kotec1" src="images/kotakt.png" alt="kotec1">
-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.
+    <div id="text">
-<br><br><br></div><div id="div2">
+        <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>
@@ -74,9 +80,13 @@ Oferujemy szeroki zakres usług informatycznych i wsparcia technologicznego, zw
 - zarządzanie serwerami Linux<br>
 - projektowanie i druk 3D<br>
 i wiele innych
-<br><br><br><br></div><footer>
+<br><br><br><br></div>
-<h5 id="kontakt">Skontaktuj się z nami pod adresem: KOTakt@kotec.pl</h5></footer>
+<footer>
-</div>
+    <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>

kotec.pl/replay.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>replays</title>
+</head>
+<body>
+
+</body>
+</html>