Tutaj chcę stworzyć zestaw sekcji do budowy nowej strony, czyli przykładowe eleganckie układy elementów. Czego potrzebuję oprócz HERO na frontpage?
WAŻNE: Do podstron wyrać jakieś sensowne grafiki do nagłówka! Nie tylko góry i lasy...
Szeroka wyróżniona kolorem sekcja - listwa z dużym hasłem - nagłówkiem i druga taka sama z przykłądowym przyciskiem.
Szeroka sekcja z treścią akapitu. Być może jakoś wyróżniona. Zastanowić się nad elementem graficznym?
Do opisu turnusów - układ z dwiema kolumnami, w których treść będzie ładnie sformatowana...
Slider zamiast galerii? Galerie się za bardzo rozwlekają... UWAGA: Czy slider jest dotykowy na telefonie?
UWAGA: Zwrócić szczególną uwagę na kolory nagłówków na tle!!!!!
UWAGA: Należy koniecznie zrobić jakieś subtelne szare lub podobne kolory do wyrózniania sekcji, bo color1,2,3,4,5 są za ostre!
tło - klasa color-grey-light
tło - klasa color-grey
tło - klasa color-grey-dark
bez tła
Podwójny blok push-pull kolmna prawa.
W układzie mobilnym ta kolumna będzie jako pierwsza.
Podwójny blok push-pull kolmna lewa.
W układzie mobilnym ta kolumna będzie jako druga.
/To nie jest ukłąd typu „sekcja”, bo dla klasy „section-empty” nie są poprawione marginesy, więc taka sekcja rozpycha stronę paddingiem./
Układ typu sekcja renderuje klasę "section-emty", przez co zachowuje się nieco inaczej niż "section", np. w przypadku, kiedy chcę dać jakieś tło na pełną szerokość strony. W takim wypadku środkowy obszar pozostaje biały i nie jest przezroczysty.
Nie działają też klasy marginesów, np. "m-all" - to jest do poprawy w CSS. Podobnie kwestie paddingów, ponieważ ten element rozpycha nam stronę.
Podwójny blok kolmna lewa.
W układzie mobilnym ta kolumna będzie jako pierwsza.
Podwójny blok kolmna prawa.
W układzie mobilnym ta kolumna będzie jako druga.
Układ push-pull
Układ push-pull - kolumna prawa (pierwsza).
- Pozycja pierwsza wypunktowania - dłuższy tekst. Tak długi, żeby się zawijał do drugiej linii.
- Pozycja druga wypunktowania.
- Pozycja trzecia wypunktowania.
- Pozycja czwatra wypunktowania - dłuższy tekst. Tak długi, żeby się zawijał do drugiej linii.
- Pozycja piąta wypunktowania - bardzo długi tekst. Tak długi, żeby się zawijał do drugiej linii oraz trzeciej linii. Ciąg dalszy gługiego tekstu opisowego, dalszy ciąg tej samej linii.
- Pozycja szósta krótka.
TURNUS I
- Układ "pasek boczny z lewej".
- Warsztaty takie i takie
- Data taka i taka
- Wiek taki i taki
- Miejsce pobytu takie i takie
- Koszt uczestnictwa 2990/3190 zł
Więcej informacji
Ikonki warsztatowe
Jako zawartość bloku tekstowego - rozmiar oryginalny 200px:
Jako zawartość bloku tekstowego - pomniejszone do 50px:
Tytuł bloku
To jest zawartość "bloku promowanego", czli takiego elementu, który zawiera tytuł wraz z ikonką. Nie będziemy tego używać.
Beata Kurda
Iwona Krawczak
Anna Bronowicka
Magdalena Guz
Radosław Kurda
Powyżej galeria, a poniżej slajder. Slajder działa w miarę dobrze i możemy zastąpić nim galerie zdjęć. Jest dotykowy na komórce i poprawnie wyświetla jedno zdjęcie, zamiast kilku. W wersji desktopowej najlepiej wybrać np 4 zdjęcia.
Problem? Proporcje zdjęć. Domyślnie ustawione są na kwadrat, co mi się nie podoba. Trzeba chyba zrobić dodoatkowy szablon...
