-
Szczegóły
-
Kategoria: Nieskategoryzowane
Szczególną rolę niektórych elementów treści sygnalizuje ich formatowanie (stylizacja). Poniżej prezentujemy przykłady, objaśnienia i - w razie potrzeby - instrukcje stosowania.
Lid - skrót wiadomości
Wyróżnij akapit wprowadzajacy ze skrótem - podsumowaniem artykułu, dodając klasę .lead.
Król Karol rozważa, czy zostać Rzecznikiem Dostępności.
<p class="lead">...</p>
Klasy wyrównania
Łatwo wyrównasz tekst w stosunku do komponentów strony, stosując klasy wyrównania.
Tekst wyrównany do lewej.
Tekst wyśrodkowany.
Tekst wyrównany do prawej.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
Skróty
Skróty i akronimy oznaczamy za pomocą elementu HTML <abbr>, aby pokazać rozwinięcie skrótu, gdy znadjdzie się nad nim wskaźnik myszki.
<abbr>
Aby wyświetlić rozwinięcie skrótu, włącz atrybut title.
Skrótem słowa atrybut jest atr..
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Użyj klasy .initialism w przypadku skrótów i akronimów pisanych wielkimi literami, aby zmniejszyć nieco rozmiar fontów i uzyskać bardziej harmonijny wygląd.
HTML jest najlepszą rzeczą od czasu krojonego chleba.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Umieść opcjonalny atrybut lang, aby wskazać język skrótu.
<abbr title="HyperText Markup Language" lang="en">HTML</abbr>
Skróty opatrzone w znaczniku otaczającym atrybutem title są podkreślone cienką przerywaną linią i wyróżniane kursorem pomocy, gdy ustawimy nad nimi wskaźnik myszki. Są to dla użytkowników dodatkowe wskazówki, że mają do czynienia ze skrótem lub akronimem.
Wyróżnienia, adresy i skróty
| Element |
Stosowanie |
Opcja |
<strong>
|
Podkreśla ważny fragment tekstu
|
nie ma
|
<em>
|
Wzmacnia, podkreśla emocjonalność fragmentu tekstu
|
nie ma
|
<address>
|
Dane kontaktowe autora elementu będącego najbliższym przodkiem (np. sekcji, artykułu) lub całej strony
|
Zachowaj formatowanie, kończąc każdy wiersz znacznikiem <br>
|
Używanie wyróżnień (wzmocnienia)
Oto tekst wyróżniony pogrubieniem oraz tekst wyróżniony pochyleniem.
Uwaga: Zapraszamy do korzystania ze znaczników <b> oraz <i>. W HTML5 ich znaczenie zostało nieco zmienione. Element <b> wyróżnia tekst bez nadawania mu szczególnej ważności. Element <i> sygnalizuje np. termin techniczny, frazę idiomatyczną z innego języka, itp.
Obramowanie obrazków
W prezentacji obrazków można zastosować trzy klasy opisujące ich obramowanie: img-rounded, img-circle, img-polaroid.
<img class="img-rounded" src="/archiwalna_strona/joomla2/image.jpg" />
<img class="img-circle" src="/archiwalna_strona/joomla2/image.jpg" />
<img class="img-polaroid" src="/archiwalna_strona/joomla2/image.jpg" />
Położenie grafiki
Ilustrację, którą chcemy wyświetlić po lewej stronie tekstu, oznaczamy atrybutem klasy: pull-left.
<img src="/archiwalna_strona/joomla2/..." class="pull-left" />
Ilustrację, którą chcemy wyświetlić po prawej stronie tekstu, oznaczamy atrybutem klasy: pull-right.
<img src="/archiwalna_strona/joomla2/..." class="pull-right" />
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
<p><img class="pull-left" src="/archiwalna_strona/joomla2/images/sample/article.jpg" border="0" alt="Obrazek przykładowy po lewej stronie tekstu" /><img class="pull-right" src="/archiwalna_strona/joomla2/images/sample/article.jpg" border="0" alt="Obrazek przykładowy po prawej stronie tekstu" />tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</p>
Nagłówki
Nagłówki opisują strukturę zawartości stron. Nagłówki I i II poziomu generowane są przez system, w dodawanej zawartości używamy ich wyjątkowo. Do oznaczenia śródtytułów w artykułach i innych treściach stosujemy nagłówki h3, h4, h5 i h6.
Nagłówek I poziomu
Nagłówki najwyższego I poziomu (<h1>) opisują główną zawartość strony. Są generowane przez system.
Nagłówek II poziomu
Nagłówki II poziomu oznaczają tytuły pozycji - artykułów, przeglądów artykułów, list pozycji w komponentach. Rownież są generowane przez system.
Nagłówek III poziomu
Nagłówka <h3> używamy do oznaczenia śródtytułów oraz do oznakowania tytułów modułów, generowanych automatycznie. W tytułach modułów dodatkowym wyróżnikiem nagłówka bywa kolor czcionki, niekiedy tło.
Nagłówki IV, V i VI poziomu - śródtytuły
Nagłówków IV, V i VI poziomu również używamy jako śródtytułów.
Nagłówek IV poziomu
Akapit tekstu pod tytułem oznaczonym nagłówkiem <h4>. Fragment z tytułem oznaczonym nagłówkiem <h4>powinien następować po fragmentach oznaczonych nagłówkiem <h3> lub tuż za nagłówkiem <h3>.
Tytuł V poziomu
Akapit tekstu pod tytułem oznaczonym nagłówkiem <h5>. Fragment z tytułem oznaczonym nagłówkiem <h5>powinien następować po fragmentach oznaczonych nagłówkiem <h4> lub tuż za nagłówkiem <h4>.
Tytuł VI poziomu
Akapit tekstu pod tytułem oznaczonym nagłówkiem <h6>. Fragment z tytułem oznaczonym nagłówkiem <h6>powinien następować po fragmentach oznaczonych nagłówkiem <h5> lub tuż za nagłówkiem <h5>.
Blok numerowany
W przedstawianiu procedur wymagających szerszego objaśniania kolejne kroki można oznaczać numerowanymi blokami tekstu. Stosujemy wówczas atrybut klasy jm-block lub jm-block second opisujący akapit, a oznaczenie kolejności umieszczammy w znaczniku <span class="jm">01</span> .
<p class="jm-block"><span class="jm">01</span>Numerowany blok tekstu.</p>
01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
<p class="jm-block second"><span class="jm">a</span>Numerowany blok tekstu. </p>
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.
Bloki kolorowane
Wyróżnienia niektórych rodzajów informacji można dokonać za pomocą kolorowanych bloków tekstu
<div class="alert">Istotne informacje istotne, których nie można pominąć.</div>
<div class="alert alert-error">Informacje, na które koniecznie chcemy zwrócić uwagę, np. o błędach.</div>
<div class="alert alert-success">Wiadomość i inna informacja przeznaczona np. do zapamiętania</div>
<div class="alert alert-info">Ciekawostka, informacja rozszerzające, uzupełniająca tekst zasadniczy</div>
Blok z ikoną
Dla oznaczenia różnego typu informacji można również stosować bloki z ikoną umieszczaną po lewej stronie tektu, jak w tym opisie. Znacznik bloku, np. akapitu, wzbogacamy wówczas o atrybut klasy z nazwą ikony, np. <p class="jminfo" >.
<p class="jmbadge" >Tu umieszczony tekst</p>
<p class="jmcalendar" >Tu umieszczony tekst</p>
<p class="jmchat" >Tu umieszczony tekst</p>
<p class="jmcheck" >Tu umieszczony tekst</p>
<p class="jmcloud" >Tu umieszczony tekst</p>
<p class="jmdirection" >Tu umieszczony tekst</p>
<p class="jmdivide" >Tu umieszczony tekst</p>
<p class="jmerror" >Tu umieszczony tekst</p>
<p class="jmfire" >Tu umieszczony tekst</p>
<p class="jmflag" >Tu umieszczony tekst</p>
<p class="jmheart" >Tu umieszczony tekst</p>
<p class="jmhome" >Tu umieszczony tekst</p>
<p class="jminfo" >Tu umieszczony tekst</p>
<p class="jmlist" >Tu umieszczony tekst</p>
<p class="jmmail" >Tu umieszczony tekst</p>
<p class="jmpeople" >Tu umieszczony tekst</p>
<p class="jmstar" >Tu umieszczony tekst</p>
<p class="jmstat" >Tu umieszczony tekst</p>
Cytaty - blockquote
<blockquote>
<p>Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie. </p>
<footer><cite>Autor i źródło cytatu</cite></footer>
</blockquote>
Teksty dłuższych cytatów - wypowiedzi lub fragmentów innych opracowań ujmujemy w standardowy znacznik HTML - jak w tym przykładzie.
<blockquote class="pull-right">
<p>Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj.</p>
<footer class="pull-right"><cite>Autor i źródło cytatu</cite></footer>
</blockquote>
Teksty dłuższych cytatów możemy też umieścić w znaczniku opisanym klasą pull-right, jak tutaj
Listy nieuporządkowane
Listy nieuporządkowane -<ul><li>....</li></ul>- z punktorami stosowane są do wyszczególnienia elementów lub czynności w przypadkach, gdy ich kolejność nie ma większego znaczenia.
<ul>
<-- tu elementy listy -->
</ul>
- jakiś element wykazu,
- również element wykazu,
- jeszcze inny element wykazu,
- element wykazu - podpunkt
- element wykazu - podpunkt
- element wykazu - podpunkt
- również element wykazu - podpunkt
- również element wykazu - podpunkt
- również element wykazu - podpunkt
<ul class="jm-arrow">
<-- tu elementy listy -->
</ul>
- jakiś element wykazu,
- również element wykazu,
- jeszcze inny element wykazu,
- element wykazu - podpunkt
- element wykazu - podpunkt
- element wykazu - podpunkt
- również element wykazu - podpunkt
- również element wykazu - podpunkt
- również element wykazu - podpunkt
<ul class="jm-arrow2">
<-- tu elementy listy -->
</ul>
- jakiś element wykazu,
- również element wykazu,
- jeszcze inny element wykazu,
- element wykazu - podpunkt
- element wykazu - podpunkt
- element wykazu - podpunkt
- również element wykazu - podpunkt
- również element wykazu - podpunkt
- również element wykazu - podpunkt
Listy numerowane
Listy numerowane- <ol><li>....</li></ol>wskazują na wymaganą kolejność czynności, zwykle są stosowane w prezentacji procedur.
<ol>
<-- tu elementy listy -->
</ol>
- Wykonaj najpierw tę czynność.
- Potem wykonaj czynność kolejną.
- Później wykonaj czynność trzecią, na którą złożą się
- Działanie pierwsze
- Działanie drugie złożone z trzech kroków
- Krok 1 - polecenie
- Krok 2 - polecenie
- Krok 3 - polecenie
<ol class="jm-roman">
<-- tu elementy listy -->
</ol>
- Wykonaj najpierw tę czynność.
- Potem wykonaj czynność kolejną.
- Później wykonaj czynność trzecią, na którą złożą się
- Działanie pierwsze
- Działanie drugie złożone z trzech kroków
- Krok 1 - polecenie
- Krok 2 - polecenie
- Krok 3 - polecenie
<ol class="jm-alpha">
<-- tu elementy listy -->
</ol>
- Wykonaj najpierw tę czynność.
- Potem wykonaj czynność kolejną.
- Później wykonaj czynność trzecią, na którą złożą się
- Działanie pierwsze
- Działanie drugie złożone z trzech kroków
- Krok 1 - polecenie
- Krok 2 - polecenie
- Krok 3 - polecenie
Lista definicji (opisów)
Listy definicji (opisów) -<dl><dt></dt><dd></dd></dl>- mogą być stosowane do prezentacji słowników terminów, kalendariów
Według specyfikacji W3C listy definicji można stosować dla dowolnych typów danych, które są ze sobą powiązane bezpośrednią relacją typu nazwa::wartość lub nazwa::opis, a więc powiązanych w ten sposób, że treść elementu definiujacego (opisującego) <dd> jest w relacji z treścią elementu definiowanego (opisywanego) <dt>. Elementy <dt> nie mogą zawierać elementów blokowych, np. nagłówków <h3>.
Aby wyświetlić listę definicji w układzie poziomym, użyj znacznika <dl> z atrybutem klasy: <dl class="dl-horizontal">.
<dl>
<-- tutaj umieszczamy listę -->
</dl>
- Joomla!,
- Najlepszy CMS na świecie!
- Najpopularniejszy obok WordPressa,
- Definiowany termin
- Definicja terminu
- Kolejny element definicji
- Rok 2015
- Pierwsze ważne wydarzenie
- Drugie ważne wydarzenie
Pozioma lista opisów
<dl class="dl-horizontal">
- Lista opisów
- Lista opisów jest doskonałym rozwiązaniem dla definicji terminów i innych par typu nazwa::wartość lub nazwa::opis.
- Element opisywany, termin
- Pierwszy człon opisu elementu opisywanego; pierwsze znaczenie
- Drugi człon opisu elementu opisywanego, drugie znaczenie
- Rok 2015
- Pierwsze ważne wydarzenie.
- Drugie ważne wydarzenie.
- Trudne słowo
- Szerokie objaśnienie bardzo trudnego słowa. Szerokie objaśnienie bardzo trudnego słowa. Szerokie objaśnienie bardzo trudnego słowa.
Uwaga! W liście opisów ułożonej poziomo zbyt długie elementy opisywane zostaną skrócone dzięki właściwości text-overflow i zmieszczą się w lewej kolumnie. Na węższych ekranach urządzeń wyświetlających elementy zostaną ułożone w domyślny układ - w stos, jak w standardowej liście pionowej
Czytaj więcej / Przycisk
<p class="readmore" href="#">Czytaj więcej</a>
Czytaj więcej
<p class="btn" href="#">Przycisk</a>
Przycisk
Ikony z fontów (Glyphicon)
<span class="icon-joomla"> </span>
icon-asterisk
icon-plus
icon-euro
icon-minus
icon-cloud
icon-envelope
icon-pencil
icon-glass
icon-music
icon-search
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-dashboard
icon-paperclip
icon-heart-empty
icon-link
icon-phone
icon-pushpin
icon-usd
icon-gbp
icon-sort
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-unchecked
icon-expand
icon-collapse-down
icon-collapse-up
icon-log-in
icon-flash
icon-log-out
icon-new-window
icon-record
icon-save
icon-open
icon-saved
icon-import
icon-export
icon-send
icon-floppy-disk
icon-floppy-saved
icon-floppy-remove
icon-floppy-save
icon-floppy-open
icon-credit-card
icon-transfer
icon-cutlery
icon-header
icon-compressed
icon-earphone
icon-phone-alt
icon-tower
icon-stats
icon-sd-video
icon-hd-video
icon-subtitles
icon-sound-stereo
icon-sound-dolby
icon-sound-5-1
icon-sound-6-1
icon-sound-7-1
icon-copyright-mark
icon-registration-mark
icon-cloud-download
icon-cloud-upload
icon-tree-conifer
icon-tree-deciduous
Przycisk modułu na ukrywanej kanwie (Offcanvas)
Przełącznik bocznego ukrywanego modułu menu użytecznego w urządzeniach przenośnych umieszczamy za pomocą kodu <p><a class="toggle-nav menu"><span class="icon-align-justify"></span></a></p>
<p><a class="toggle-nav menu"><span class="icon-align-justify"></span></a></p>
Łącza społecznościowe
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</em>.</p>
<p> </p>
<div class="jm-social">
<a href="/archiwalna_strona/joomla2/#" class="jm-facebook" target="_blank">facebook</a>
<a href="/archiwalna_strona/joomla2/#" class="jm-twitter" target="_blank">twitter</a>
<a href="/archiwalna_strona/joomla2/#" class="jm-link" target="_blank">linkedin</a>
<a href="/archiwalna_strona/joomla2/#" class="jm-skype" target="_blank">skype</a>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..
Kontakt z nami
<p><span class="icon-map-marker jm-color"> </span>7 Green Lane<br /><span>Pe1 3ba, Peterborough<br /> Cambridgeshire</span></p>
<p><span class="icon-earphone jm-color"> </span>+44 7853 658 965</p>
<p><span class="icon-envelope jm-color"> </span>Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.</p>
<p><span class="icon-check jm-color"> </span>8.00 am to 6.00 pm</p>
7 Green Lane
Pe1 3ba, Peterborough
Cambridgeshire
+44 7853 658 965
Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.
8.00 am to 6.00 pm
Licznik
Aby umieścić na stronie animowany licznik z prostą statystyką, używamy kodu:
<div class="jm-counter">
<div class="row-fluid">
<div class="box span3"><span class="icon-ok"> </span> <span class="number jm-count" data-from="0" data-to="34">34</span> <a href="/archiwalna_strona/joomla2/#" class="title">Zakończone projekty</a></div>
<div class="box span3"><span class="icon-road"> </span> <span class="number jm-count" data-from="0" data-to="20">20</span> <a href="/archiwalna_strona/joomla2/#" class="title">Nowe mapy rozwoju</a></div>
<div class="box span3"><span class="icon-thumbs-up"> </span> <span class="number jm-count" data-from="0" data-to="45">45</span> <a href="/archiwalna_strona/joomla2/#" class="title">Nowe pomysły</a></div>
<div class="box span3"><span class="icon-user"> </span> <span class="number jm-count" data-from="0" data-to="233">233</span> <a href="/archiwalna_strona/joomla2/#" class="title">Kwalifikowani eksperci</a></div>
</div>
</div>
Tabela z cennikiem
<div class="jm-pricing clearfix col3">
<div class="box">
<div class="box-in">
<div class="price"><span class="up">już od</span>
<span class="middle">29.95</span>
<span class="down">miesiąc</span></div>
<div class="title">Kultura</div>
<div class="content">
<div class="subtitle">Artystyczna spotkanie spełnią najwyższe oczekiwania.</div>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Morbi rhoncus diam quis augue</li>
<li>Proin non finibus diam</li>
<li>Pellentesque varius</li>
<li>Vivamus quis leo</li>
<li>Donec ut elit maximus</li>
</ul>
</div>
<div class="bottom"><a class="btn" href="/archiwalna_strona/joomla2/#">Przyłącz się</a></div>
</div>
</div>
<div class="box">
<div class="box-in">
<div class="price"><span class="up">już od</span>
<span class="middle">39.85</span>
<span class="down">miesiąc</span></div>
<div class="title">Edukacja</div>
<div class="content">
<div class="subtitle">Świetna lokalizacja, serwis i mieszkanie.</div>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Morbi rhoncus diam quis augue</li>
<li>Proin non finibus diam</li>
<li>Pellentesque varius</li>
<li>Vivamus quis leo</li>
<li>Donec ut elit maximus</li>
</ul>
</div>
<div class="bottom"><a class="btn" href="/archiwalna_strona/joomla2/#">Przyłącz się</a></div>
</div>
</div>
<div class="box">
<div class="box-in">
<div class="price"><span class="up">już od</span>
<span class="middle">99.95</span>
<span class="down">miesiąc</span></div>
<div class="title">Strata</div>
<div class="content">
<div class="subtitle">Zobacz różnicę w mieszkaniu.</div>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Morbi rhoncus diam quis augue</li>
<li>Proin non finibus diam</li>
<li>Pellentesque varius</li>
<li>Vivamus quis leo</li>
<li>Donec ut elit maximus</li>
</ul>
</div>
<div class="bottom"><a class="btn" href="/archiwalna_strona/joomla2/#">Przyłącz się</a></div>
</div>
</div>
</div>
już od 29.95 miesiąc
Kultura
Artystyczna spotkanie spełnią najwyższe oczekiwania.
- Lorem ipsum dolor sit amet
- Morbi rhoncus diam quis augue
- Proin non finibus diam
- Pellentesque varius
- Vivamus quis leo
- Donec ut elit maximus
już od 39.85 miesiąc
Edukacja
Świetna lokalizacja, serwis i mieszkanie.
- Lorem ipsum dolor sit amet
- Morbi rhoncus diam quis augue
- Proin non finibus diam
- Pellentesque varius
- Vivamus quis leo
- Donec ut elit maximus
już od 99.95 miesiac
Strata
Zobacz różnicę w mieszkaniu.
- Lorem ipsum dolor sit amet
- Morbi rhoncus diam quis augue
- Proin non finibus diam
- Pellentesque varius
- Vivamus quis leo
- Donec ut elit maximus
