Dokumentacja szablonu Squeeze Page

Poniżej znajdziesz wszystki elementy szablonu, oraz informację jak go użyć, jak użyskać żądany efekt, oraz podgląd...

Nagłówek strony

Przykładowy nagłówek

<h1 class="top">
Przykładowy nagłówek
</h1>

Mniejszy nagłówek, podtytuł

Przykładowy podtytuł :)

<h2>
Przykładowy podtytuł :)
</h2>

Wyrównanie do lewej

Tekst od lewej

<span class="fleft">
Tekst od lewej
</span>

Wyrównanie do prawej

Tekst od prawej

<span class="fright">
Tekst od prawej
</span>

Akapit, przerwanie tekstu

To jest jedna linijka tekstu i zaraz poniżej zrobimy odstęp... ... i zaczniemy kolejny wers...

To jest jedna linijka tekstu i zaraz poniżej zrobimy odstęp...
<span class="break"></span>
... i zaczniemy kolejny wers...

Cytat

Everything should be made as simple as possible, but no simpler.

<span class="cite">
Everything should be made as simple as possible, but no simpler.
</span>

Cytat i autor

Everything should be made as simple as possible, but no simpler. Albert Einstein

<span class="cite">
Everything should be made as simple as possible, but no simpler.
<span class="author">Albert Einstein</span>
</span>

Lista, wypunktowanie

Punkt jeden
Drugi punkt...
... i trzeci podpunkt

<ul>
    <li> Punkt jeden </li>
    <li> Drugi punkt... </li>
    <li> ... i trzeci podpunkt </li>
</ul>

Lista numerowana

Punkt jeden
Drugi punkt...
... i trzeci podpunkt

<ol>
    <li> Punkt jeden </li>
    <li> Drugi punkt... </li>
    <li> ... i trzeci podpunkt </li>
</ol>

Ramka, blok

Przykładowy blok

<div class="block">
Przykładowy blok
</div>

Ramka większa, obramowana

Przykładowy blok
w doś sporej ramce
z obramowaniem

<div class="dashed">
    Przykładowy blok
    <br />
    w doś sporej ramce
    <br />
    z obramowaniem
</div>

Przycisk akcji, button

Kliknij mnie

<a href="#" class="button">
Kliknij mnie
</a>

Przycisk akcji, button - dłuższy tekst

Kliknij mnie, a nie pożałujesz...

<a href="#" class="button" style="width: 450px;">
Kliknij mnie, a nie pożałujesz...
</a>

Przycisk akcji, button - jako input

Link donośny

Jestem wielkim, przykładowym linkiem

<a href="#" class="link">
Jestem wielkim, przykładowym linkiem
</a>

Marker, zakreślacz

Wyrazisty tekst, zakreślony...

<span class="marker">
Wyrazisty tekst, zakreślony...
</span>

Wyśrodkowanie

Jestem wyśrodkowany

<h2 class="center">
Jestem wyśrodkowany
</h2>

Inne, proste formatowanie

jestem pochylony
jestem pogrubiony
jestem podkreślony

<span class="i">jestem pochylony</span>
<br />
<span class="b">jestem pogrubiony</span>
<br />
<span class="u">jestem podkreślony</span>

lub

<span class="italic">jestem pochylony</span>
<br />
<span class="bold">jestem pogrubiony</span>
<br />
<span class="underline">jestem podkreślony</span>

lub

<i>jestem pochylony</i>
<br />
<b>jestem pogrubiony</b>
<br />
<u>jestem podkreślony</u>

Połączenie opcji

Zobacz przykład połączenia różnych możliwości wyróżniania i formatowania tekstu. Jeśli choć trochę znasz HTML, to nie powinieneś mieć większego problemu... Wystarczy tekst umieszczać w znacznikach z odpowiednimi klasami - zresztą widziałeś przykłady powyżej...

Cytując autora: [...] ta dokumentacja jest zrobiona dość solidnie ... Można powiedzieć, że poradzisz sobie!

<div class="block">
    Zobacz <span class="bold">przykład połączenia</span>

    różnych możliwości wyróżniania i formatowania tekstu.

    <span class="break"></span>

    <span class="marker">
        Jeśli choć trochę znasz <b>HTML</b>, to nie powinieneś mieć większego problemu...

    </span>

    <span class="break"></span>

    Wystarczy tekst
    <span class="bold u">
       umieszczać w
       <span class="i">znacznikach</span>
    </span>
    z odpowiednimi klasami - zresztą widziałeś     przykłady powyżej...
    <span class="break"></span>
</div>

<br />

Cytując autora:

<span class="break"></span>

<span class="cite">
    [...] ta dokumentacja jest zrobiona dość solidnie ...
</span>

<span class="break"></span>

Można powiedzieć, że poradzisz sobie!

W razie jakichkolwiek problemów, pytań... skontaktuj się z autorem: admin.admin@o2.pl