SEXEDPL
720 720 020

DEMO · nowa strona SEXEDPL

Wszystkie podstronyw jednym miejscu.

Nowa strona Fundacji zbudowana na castomo-sitekit z rysunkami Transhumans: treści, zdjęcia i logo ze starej strony sexed.pl, strony z sliderami, prezentacje kampanii przewijane jak opowieść i cztery artykuły przeniesione w całości. Wybierz rodzaj strony, żeby zawęzić listę.

Demo w liczbach

Co zostało
zbudowane.

58 podstron, w tym ta, 10 pokazów komponentów i 20 propozycji stron
4 prezentacje kampanii z komponentami przewijania
3 strony z sliderami: Projekty, Raporty, Filmy
4 artykuły przeniesione w całości, z ramą jak na sexed.pl

Mapa demo

Każda podstrona
i z czego jest zrobiona.

57 stron

Strona główna

Statystyki, bento „Jak pomagamy”, zakładki, marquee, najnowsze artykuły.

  • Strony

O Fundacji

Misja, obszary działania w zakładkach, zarząd i zespół.

  • Strony

Kontakt

Adres, linia pomocy, dane Fundacji i numer konta.

  • Strony

Deklaracja dostępności

Cztery motywy, trzy wielkości tekstu, odstępy, ruch, klawiatura.

  • Strony

Antyprzemocowa linia

720 720 020 — liczby, kampanie na przewijanych krokach, CTA.

  • Pomoc

Bye Bye HPV

Szczepienia wg wieku na przewijanych krokach, pytania i odpowiedzi.

  • Pomoc

Nasi eksperci

Lekarki, psycholożki, seksuolożki i edukatorki — portrety.

  • Pomoc

Antykoncepcja

Prezentacja: 7 powodów jako spadające karty, 14 metod w przesuwanym rzędzie, odwracane karty.

  • Prezentacje
  • Pomoc

Piersi w Polsce

Prezentacja: plan badań jako spadające karty, samobadanie, jazda w bok, mity i fakty, filmy.

  • Prezentacje
  • Pomoc

Rok profilaktyki

Prezentacja: badania Ipsos jako relacje w zakładkach, badania wg wieku w bok, programy NFZ.

  • Prezentacje
  • Pomoc

#HejtOutLoveIn

Prezentacja: liczby z raportu, cele jako spadające karty, trzy odsłony kampanii.

  • Prezentacje
  • Edukacja

Scenariusze lekcji

Ponad 100 lekcji bez tabu — bento i CTA.

  • Edukacja

Książki

Dla nastolatków i dla rodziców.

  • Edukacja

Projekty

Slider głębi z kampaniami, rail do przeciągania, aktualności.

  • Slidery
  • Edukacja

Raporty

Coverflow 3D z podpisem i PDF karty na środku, okładki do pobrania.

  • Slidery
  • Edukacja

Filmy

Slider i rail z filmami, miniatury bez ładowania YouTube.

  • Slidery
  • Edukacja

Wszystkie artykuły

8 najnowszych tekstów, reszta w archiwum sexed.pl.

  • Listy artykułów

Ciało

Lista działu: zdrowie intymne, antykoncepcja, badania.

  • Listy artykułów

Serce

Lista działu: relacje, miłość, rozstania.

  • Listy artykułów

Głowa

Lista działu: emocje, zdrowie psychiczne, przemoc.

  • Listy artykułów

Oko

Lista działu: wydarzenia, wystawy, akcje.

  • Listy artykułów

Od was

Lista działu: wasze pytania i historie.

  • Listy artykułów

100 SEXEDPL

Lista działu: rozmowy o edukacji seksualnej.

  • Listy artykułów

Bezpłatne szczepienia HPV dla dorosłych

Zakładki wg wieku, schemat dawek na przewijanych krokach, pytania.

  • Artykuły

Mammografia krok po kroku

Badanie na przewijanych krokach, przygotowanie na odwracanych kartach.

  • Artykuły

Antykoncepcja dla mężczyzn

Trzy badane metody w zakładkach, kierunki WHO na krokach.

  • Artykuły

Sprawa Cornell

Oś czasu sprawy, liczby, zgoda na odwracanych kartach, linia pomocy.

  • Artykuły

Zbliżenie

Scena na pełnym ekranie odsuwa się w kartę — linia pomocy.

  • Pokazy komponentów

Manifest słowo po słowie

Zdanie zapala się w tempie przewijania.

  • Pokazy komponentów

Kolor krok po kroku

Każdy nagłówek wypełnia kawałek rysunku.

  • Pokazy komponentów

Tunel

Karty tygodnia przelatują obok czytelnika.

  • Pokazy komponentów

Przesłona

Kolejne sceny otwierają się przez koło.

  • Pokazy komponentów

Rozdarcie

Okładka pęka i odsłania sekcję pod spodem.

  • Pokazy komponentów

Przypięty nagłówek

Ludzie przepływają za wielkim nagłówkiem.

  • Pokazy komponentów

Rozdziały na zatrzask

Badania wg wieku, rozdział po rozdziale.

  • Pokazy komponentów

Oś czasu

Linia rysuje się w dół z przewijaniem.

  • Pokazy komponentów

Tłum w głębi

Trzy rzędy ludzi na różnych głębokościach.

  • Pokazy komponentów

Najpierw pomoc

Ekran na dwoje, lista powodów, objaśnienia na rysunku, przesłona, liczby.

  • Propozycje

Magazyn

Mozaika w nagłówku, lista tekstów, reflektor działów, manifest, marquee.

  • Propozycje

Dla kogo

Przełącznik odbiorców, wachlarz książek, cytat, akordeon tematów.

  • Propozycje

Kalendarz zdrowia

Oś czasu badań, tabela programów NFZ, schodkowa siatka, kafle.

  • Propozycje

Mapa metod

Kolor krok po kroku, świecąca siatka metod, stos kart, odwracane pytania.

  • Propozycje

Fundacja na jednej stronie

Zbliżenie, liczby, spadające karty, schemat zespołu, polaroidy.

  • Propozycje

Pokój nauczycielski

Rozdarcie, filtr tematów, przewijane kroki, autorzy, kafle dziedzin.

  • Propozycje

HPV w trzech scenach

Przesłona, jazda w bok, tabela szczepionek, akordeon pytań.

  • Propozycje

Głośniej niż hejt

Tłum w głębi, manifest, tunel odsłon, cele na odwracanych kartach.

  • Propozycje

Zaufanie

Przypięty nagłówek, objaśnienia na rysunku, mozaika ekspertek, marquee.

  • Propozycje

Plan badań piersi

Odręczne podkreślenia, rozdziały na zatrzask, kafle z zalewem, przypięty podział, suwak mit/fakt.

  • Propozycje

Zgoda

Rozstępujący się nagłówek, rozsypane karty, przypięte kolumny, przypięty podział.

  • Propozycje

Biblioteka raportów

Wstęp z podpisem, cegiełki masonry, liczby, przypięte kolumny tematów.

  • Propozycje

Męskie sprawy

Dzień i noc w nagłówku, przypięta tabela metod, liczby, slider.

  • Propozycje

Kampanie

Zaglądający ludzie, coverflow, rail, orbita partnerów.

  • Propozycje

Bezpieczna impreza

Unoszące się powiadomienia, pochylane karty, przewijane kroki, liczby.

  • Propozycje

Linia w kieszeni

Telefon z ekranem, przypięty podział, ramka przeglądarki, spadające karty.

  • Propozycje

Kino SEXEDPL

Chmura ludzi, slider spotów, rail odcinków, świecąca siatka.

  • Propozycje

Księgarnia

Pochylane karty książek, przypięty spis pytań, cytat, liczba.

  • Propozycje

Mapa tematów

Orbita działów, przypięte kolumny tematów, masonry najnowszych.

  • Propozycje

Pod maską

Jak to działa.

  • Statyczne HTML i CSS: komponenty Transhumans są „spłaszczane” przy budowaniu, a ich zachowanie (przewijanie, karty, zakładki, slidery) daje jeden mały skrypt.
  • Bez skryptów firm trzecich i bez ciasteczek; filmy z YouTube ładują się dopiero po kliknięciu, przyciski udostępniania to zwykłe linki.
  • Cztery motywy kolorów, trzy wielkości tekstu, większe odstępy i ograniczenie ruchu — w ikonie dostępności w nagłówku.
  • Adresy stron są takie jak na starym sexed.pl, więc linki z zewnątrz działają dalej.
  • Okrągły przycisk w prawym dolnym rogu otwiera panel projektowy: czcionka główna i pomocnicza, kolory, rozmiary i odstępy, z zapisem do pliku JSON.
  • Pozostałe ~830 artykułów zostaje na razie w archiwum WordPress — karty prowadzą do sexed.pl.

Ilustracje: Pablo Stanley (pakiet Transhumans).