To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu.
Kliknij dwa razy, aby edytować
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;500;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
font-family: "Open Sans";
background-color: #ffffff;
border-radius: 7px;
color: #333333;
cursor: pointer;
padding: 20px;
width: 100%;
border: none;
border-color: none;
box-shadow: 7px 7px 7px #f2f2f2;
text-align: left;
border-width: 2px;
outline: none;
font-size: 14px;
transition: 0.4s;
font-weight: 700;
margin: 5px;
}
.active, .accordion:hover {
background-color: #ffffff;
}
.accordion:after {
content: '\002B';
color: #1D9DF7;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
font-family: "Open Sans";
font-size: 14px;
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">Jedno, kompletne narzędzie, które zastąpi wszystkie inne programy</button>
<div class="panel">
<p>Wybierając M365, otrzymujesz niezbędne w firmie aplikacje i usługi. Nie potrzebujesz innego oprogramowania. Zarządzasz projektami i komunikujesz się ze współpracownikami w jednym środowisku. Ograniczasz koszty, bo płacisz tylko za użytkowanie i serwis jednej infrastruktury.</p>
</div>
<button class="accordion">Pracuj, gdzie chcesz, kiedy chcesz</button>
<div class="panel">
<p>Dzięki aplikacjom działającym w chmurze, zawsze masz dostęp do wszystkich potrzebnych dokumentów i możliwość zareagowania natychmiast. Potrzebujesz tylko dowolnego urządzenia z połączeniem internetowym. Edytuj pliki, wprowadzaj zmiany, komunikuj się ze współpracownikami z dowolnego miejsca na świecie. To naprawdę proste.</p>
</div>
<button class="accordion">Bezpieczeństwo danych firmowych</button>
<div class="panel">
<p>Stawiając na oprogramowanie firmy Microsoft, możesz spać spokojnie. Wielowarstwowa ochrona i aktualizacje zapewnią bezpieczeństwo Twoich danych, a w przypadku kradzieży lub awarii sprzętu, będą one przechowywane w chmurze.</p>
</div>
<button class="accordion">Usprawniaj procesy</button>
<div class="panel">
<p>Zapomnij o przesyłaniu, kopiowaniu, pobieraniu, tworzeniu, zapisywaniu coraz to nowszych wersji tego samego dokumentu. Dzięki aplikacjom w chmurze łatwo udostępnisz dokumenty, nad którymi może pracować kilka osób jednocześnie. Sprawnie procesuj dokumenty, unikając niepotrzebnego chaosu.</p>
</div>
<button class="accordion">Zadbaj o dobrą komunikację</button>
<div class="panel">
<p>Wspólna przestrzeń online do wszystkiego – czatów, rozmów, wideokonferencji, wymiany plików, ogłoszeń firmowych. Organizuj spotkania, dyskutuj w ramach zespołów
i pozostań w stałym kontakcie. Wszystko dzięki Microsoft Teams.</p>
</div>
<button class="accordion">Zawsze aktualne wersje aplikacji</button>
<div class="panel">
<p>Z oprogramowaniem Microsoft możesz liczyć na regularne aktualizacje i najnowsze wersje aplikacji. Nie musisz pamiętać o ręcznych update’ach, programy zawsze są aktualizowane automatycznie, a Ty cieszysz się pełną funkcjonalnością.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
