replay
This commit is contained in:
parent
260bd1c42c
commit
085865acaf
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
.header-section {
|
||||
.about {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: left;
|
||||
margin: 200px;
|
||||
position: absolute; /* Изменяем на абсолютное позиционирование */
|
||||
top: 15px; /* Устанавливаем отступ сверху */
|
||||
margin: 100px;
|
||||
position: relative; /* Изменяем на абсолютное позиционирование */
|
||||
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; /* Добавляем отступ сверху */
|
||||
}
|
||||
|
||||
@ -1,19 +1,34 @@
|
||||
#div1 {
|
||||
background-color: hsl(180, 42%, 21%, 0.3); /* противоположный цвет */
|
||||
height: 100px;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
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.
|
||||
<br><br><br></div><div id="div2">
|
||||
<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>
|
||||
@ -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>
|
||||
<h5 id="kontakt">Skontaktuj się z nami pod adresem: KOTakt@kotec.pl</h5></footer>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
10
kotec.pl/replay.html
Normal file
10
kotec.pl/replay.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>replays</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user