Přihlásit se

Prosím, vyplňte uživatelské jméno a heslo.

Nesprávné heslo.

Florbalová výstroj

Styleguide

Barvy

@blue
@blue-darker
@blue-lighter
@green
@green-darker
@green-lighter
@red
@azure
@gold
@color
@black
@white
@gray
@gray-darker
@gray-lighter
@gray-hell
@gray-table
@gray-light
<div class="row sg-colors-wrap">
    <div class="color-box color">
        @color
    </div>
</div>

Přechody

Silver
Silver top
Silver left
Blue to silver
Silver to blue
Blue to green
Silver blue silver
<div class="row sg-colors-wrap">
    <div class="col-xs-4">
        <div class="color-box silver">Silver with</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box silver-top">Silver top</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box silver-left">Silver left</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box blue-to-silver">Blue to silver</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box silver-to-blue">Silver to blue</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box blue-to-green">Blue to green</div>
    </div>
    <div class="col-xs-12">
        <div class="color-box silver-blue-silver">Silver blue silver</div>
    </div>
</div>

Boxy

Border box with shadow top and bottom
Border box with shadow
Border radius black
Top border radius black
<div class="sg-colors-wrap">
    <div class="color-box white shadow-tb border">Border box with shadow top and bottom</div>
    <div class="color-box white shadow border">Border box with shadow</div>
    <div class="color-box radius black">Border radius black</div>
    <div class="color-box radius-top black">Top border radius black</div>
</div>

Legenda

Legenda
<div class="legend">Legenda</div>

Ikony

icon-arr
icon-arr-cart
icon-arr-full
icon-arr-next
icon-bonus
icon-burger
icon-car
icon-cart
icon-check
icon-compare
icon-cross
icon-doprava
icon-eye
icon-fb
icon-filter
icon-florbal-help
icon-florbal-info
icon-florbal-tv
icon-gplus
icon-home
icon-info
icon-instagram
icon-left-1
icon-left-10
icon-left-11
icon-left-12
icon-left-13
icon-left-2
icon-left-3
icon-left-4
icon-left-5
icon-left-6
icon-left-7
icon-left-8
icon-left-9
icon-lock
icon-mail
icon-mail_open
icon-news
icon-palette
icon-parameters
icon-pencil
icon-percent
icon-phone
icon-photos
icon-play
icon-position
icon-print
icon-q_bubble
icon-q_full
icon-saw
icon-skype
icon-star
icon-ticket
icon-time
icon-tram
icon-twitter
icon-user
icon-youtube
<div class="sg-icons-wrap row">
    <div class='col-xs-4'>
        <div class='icon icon-no-circle icon-@icon'>icon</div>
    </div>
</div>

Použití ikon

Text with icon icon-arr
Text with icon icon-arr icon-reverse
Text with icon icon-arr after
Text with icon icon-arr no-circle
Text with icon icon-arr blue
Text with icon icon-home no-circle blue
Text with icon icon-home bigger no-cirle
Text with icon icon-home bigger no-cirle
<div class="icon icon-arr">{_'Text with icon icon-arr'}</div>
<div class="clear-20"></div>
<div class="icon icon-arr icon-reverse">{_'Text with icon icon-arr icon-reverse'}</div>
<div class="clear-20"></div>
<div class="icon icon-arr icon-after">{_'Text with icon icon-arr after'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-no-circle">{_'Text with icon icon-arr no-circle'}</div>
<div class="clear-20"></div>
<div class="icon icon-arr icon-blue">{_'Text with icon icon-arr blue'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-blue icon-no-circle">{_'Text with icon icon-home no-circle blue'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-no-circle icon-bigger">{_'Text with icon icon-home bigger no-cirle'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-no-circle icon-bigger icon-after">{_'Text with icon icon-home bigger no-cirle'}</div>

Buttony

Button
Button icon icon-arr
Button icon icon-arr after
Button icon icon-arr no-circle
<div class="btn">{_'Button'}</div>
<div class="btn icon icon-arr">{_'Button icon icon-arr'}</div>
<div class="btn icon icon-arr icon-after">{_'Button icon icon-arr after'}</div>
<div class="btn icon icon-home icon-no-circle">{_'Button icon icon-arr no-circle'}</div>
Button default
Button blue
Button green
<div class="btn btn-default">{_'Button default'}</div>
<div class="btn btn-blue">{_'Button blue'}</div>
<div class="btn btn-green">{_'Button green'}</div>
Button default reset
Button blue reset
Button green reset
<div class="btn btn-default btn-reset">{_'Button default reset'}</div>
<div class="btn btn-blue btn-reset">{_'Button blue reset'}</div>
<div class="btn btn-green btn-reset">{_'Button green reset'}</div>

TOGGLE


Button green toggle
Button green toggle ac
<div class="btn btn-green icon icon-arr icon-no-circle btn-toggle">{_'Button green toggle'}</div>
<div class="btn btn-green icon icon-arr icon-no-circle btn-toggle ac">{_'Button green toggle ac'}</div>

IKONY


Button default icon
Button blue icon
Button green icon
<div class="btn icon icon-arr btn-default">{_'Button default icon'}</div>
<div class="btn icon icon-arr btn-blue">{_'Button blue icon'}</div>
<div class="btn icon icon-arr btn-green">{_'Button green icon'}</div>
Btn default icon no-circle
Btn blue icon no-circle
Btn green icon no-circle
<div class="btn icon icon-home btn-default icon-no-circle">{_'Btn default icon no-circle'}</div>
<div class="btn icon icon-home btn-blue icon-no-circle">{_'Btn blue icon no-circle'}</div>
<div class="btn icon icon-home btn-green icon-no-circle">{_'Btn green icon no-circle'}</div>
Button default icon after
Button blue icon after
Button green icon after
<div class="btn icon icon-arr icon-after btn-default">{_'Button default icon after'}</div>
<div class="btn icon icon-arr icon-after btn-blue">{_'Button blue icon after'}</div>
<div class="btn icon icon-arr icon-after btn-green">{_'Button green icon after'}</div>
Btn default icon full after
Btn blue icon full after
Btn green icon full after
<div class="btn icon icon-arr icon-after icon-full btn-default">{_'Btn default icon full after'}</div>
<div class="btn icon icon-arr icon-after icon-full btn-blue">{_'Btn blue icon full after'}</div>
<div class="btn icon icon-arr icon-after icon-full btn-green">{_'Btn green icon full after'}</div>

LARGE


Button default large
Button blue large
Button green large
<div class="btn btn-lg btn-default">{_'Button default large'}</div>
<div class="btn btn-lg btn-blue">{_'Button blue large'}</div>
<div class="btn btn-lg btn-green">{_'Button green large'}</div>
Button default lg icon
Button blue lg icon
Button green lg icon
<div class="btn btn-lg icon icon-arr btn-default">{_'Button default lg icon'}</div>
<div class="btn btn-lg icon icon-arr btn-blue">{_'Button blue lg icon'}</div>
<div class="btn btn-lg icon icon-arr btn-green">{_'Button green lg icon'}</div>
Btn default lg icon after
Btn blue lg icon after
Btn green lg icon after
<div class="btn btn-lg icon icon-arr icon-after btn-default">{_'Btn default lg icon after'}</div>
<div class="btn btn-lg icon icon-arr icon-after btn-blue">{_'Btn blue lg icon after'}</div>
<div class="btn btn-lg icon icon-arr icon-after btn-green">{_'Btn green lg icon after'}</div>
Default lg icon no-circle
Blue lg icon no-circle
Green lg icon no-circle
<div class="btn btn-lg icon icon-home btn-default icon-no-circle">{_'Default lg icon no-circle'}</div>
<div class="btn btn-lg icon icon-home btn-blue icon-no-circle">{_'Blue lg icon no-circle'}</div>
<div class="btn btn-lg icon icon-home btn-green icon-no-circle">{_'Green lg icon no-circle'}</div>

SMALL


Button default small
Button blue small
Button green small
<div class="btn btn-small btn-default">{_'Button default small'}</div>
<div class="btn btn-small btn-blue">{_'Button blue small'}</div>
<div class="btn btn-small btn-green">{_'Button green small'}</div>
Button default small icon
Button blue small icon
Button green small icon
<div class="btn btn-small icon icon-arr btn-default">{_'Button default small icon'}</div>
<div class="btn btn-small icon icon-arr btn-blue">{_'Button blue small icon'}</div>
<div class="btn btn-small icon icon-arr btn-green">{_'Button green small icon'}</div>
Btn default small icon after
Btn blue small icon after
Btn green small icon after
<div class="btn btn-small icon icon-arr icon-after btn-default">{_'Btn default small icon after'}</div>
<div class="btn btn-small icon icon-arr icon-after btn-blue">{_'Btn blue small icon after'}</div>
<div class="btn btn-small icon icon-arr icon-after btn-green">{_'Btn green small icon after'}</div>
Default small icon no-circle
Blue small icon no-circle
Green small icon no-circle
<div class="btn btn-small icon icon-home btn-default icon-no-circle">{_'Default small icon no-circle'}</div>
<div class="btn btn-small icon icon-home btn-blue icon-no-circle">{_'Blue small icon no-circle'}</div>
<div class="btn btn-small icon icon-home btn-green icon-no-circle">{_'Green small icon no-circle'}</div>

H1 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H2 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H4 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bigger text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Smaller text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h1>H1 Nadpis</h1>
<p>Lorem ipsum dolor sit amet, consectetur <i>adipisicing elit</i>, sed do eiusmod <strong>tempor</strong> incididunt <b>ut labore et</b> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>H2 Nadpis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>H3 Nadpis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h4>H4 Nadpis</h4>
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing <a href="">elit</a>, sed do <a href="" class="reverse">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Bigger text</h3>
<p class="bigger-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Smaller text</h3>
<p class="smaller-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Oddělovací čára


<hr />

Tabulka

adf sss jgsa
654fasd6f1 546516 789125
qerhrywer cbmc ityp
654fasd6f1 546516 789125
qerhrywer cbmc ityp
<table class="table">
    <tr>
        <th>adf</th>
        <th>sss</th>
        <th>jgsa</th>
    </tr>
    <tr>
        <td>654fasd6f1</td>
        <td>546516</td>
        <td>789125</td>
    </tr>
    <tr>
        <td>qerhrywer</td>
        <td>cbmc</td>
        <td>ityp</td>
    </tr>
    <tr>
        <td>654fasd6f1</td>
        <td>546516</td>
        <td>789125</td>
    </tr>
    <tr>
        <td>qerhrywer</td>
        <td>cbmc</td>
        <td>ityp</td>
    </tr>
</table>

Běžný seznam

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</li>
</ul>

Stylovaný seznam

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
<ul class="ul">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</li>
</ul>

Tečkovaný seznam

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
<ul class="ul dot-ul">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</li>
</ul>

Číslovaný seznam

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</li>
</ol>

Vertikální seznam

<ul class="ul-vertical">
    <li>Lorem ipsum</li>
    <li>Dolor sit amet</li>
    <li><a>Ut enim ad minim</a></li>
    <li>Laboris nisi</li>
</ul>
<div class="clear-20"></div>

Tlačítkový seznam

<ul class="full-ul">
    <li><a>Lorem ipsum dolor sit amet</a></li>
    <li><a>Lorem sit amet ipsum dolor</a></li>
    <li><a>Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a>
        <ul>
            <li><a>Lorem dolor sit amet ipsum</a></li>
            <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
            <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a></li>
        </ul>
    </li>
</ul>

Tlačítkový seznam se šipkou a borderem

<ul class="full-ul with-arrow border-bottom">
    <li><a>Lorem ipsum dolor sit amet</a></li>
    <li><a>Lorem sit amet ipsum dolor</a></li>
    <li><a>Lorem dolor sit amet ipsum</a>
        <ul>
            <li><a>Lorem ipsum dolor sit amet</a></li>
            <li><a>Lorem sit amet ipsum dolor</a></li>
            <li><a>Lorem dolor sit amet ipsum</a></li>
        </ul>
    </li>
</ul>

Běžné záložky

Obsah tabu 1
Obsah tabu 2
<div class="tabs">
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-1" name="tab-group-1" checked>
        <label class="tab-label" for="tab-1">{_'Tab 1'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 1'}
            </div>
        </div> 
    </div>
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-2" name="tab-group-1">
        <label class="tab-label" for="tab-2">{_'Tab 2'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 2'}
            </div>
        </div> 
    </div>
</div>

Modré záložky

Obsah tabu 1
Obsah tabu 2
<div class="tabs reverse">
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-second-1" name="tab-group-2" checked>
        <label class="tab-label" for="tab-second-1">{_'Tab 1'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 1'}
            </div>
        </div> 
    </div>
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-second-2" name="tab-group-2">
        <label class="tab-label" for="tab-second-2">{_'Tab 2'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 2'}
            </div>
        </div> 
    </div>
</div>

Menší záložky

Obsah tabu 1
Obsah tabu 2
<div class="tabs small">
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-third-1" name="tab-group-3" checked>
        <label class="tab-label" for="tab-third-1">{_'Tab 1'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 1'}
            </div>
        </div> 
    </div>
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-third-2" name="tab-group-3">
        <label class="tab-label" for="tab-third-2">{_'Tab 2'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 2'}
            </div>
        </div> 
    </div>
</div>

Fake záložky

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
<ul class="fake-tabs">
    <li class="active">{_'Tab 1'}</li>
    <li>{_'Tab 2'}</li>
    <li>{_'Tab 3'}</li>
    <li>{_'Tab 4'}</li>
</ul>

Checkboxy

<div class="row">
    <div class="col-xs-4">
        <div class="checkbox-element"><input type="checkbox"><label>{_'Checkbox'}</label></div>
    </div>
    <div class="col-xs-4">
        <div class="checkbox-element"><input type="checkbox"><label>{_'Checkbox'}</label></div>
    </div>
    <div class="col-xs-4">
        <div class="checkbox-element active"><input type="checkbox" checked><label>{_'Checkbox active'}</label></div>
    </div>
</div>

Selectbox

<select>
    <option selected>{_'Selectbox'}</option>
    <option>{_'Option 2'}</option>
    <option>{_'Option 3'}</option>
</select>

Switch checkbox

Switch checkbox
<div class="switch-checkbox">
    <input id="checkbox-1" type="checkbox">
    <label for="checkbox-1" data-yes="{_'Ano'}" data-no="{_'Ne'}"></label>
    <span>{_'Switch checkbox'}</span>
</div>

Formulář

Osobní údaje
Založení nového účtu
<form id="frm-formUser">
    <fieldset>
        <legend>Osobní údaje</legend>
        <table>
            <tbody>
                <tr class="required">
                    <th><label class="required" for="frmformUser-name">Jméno:</label></th>
                    <td><input class="form-control text" name="name" id="frmformUser-name" required="required" value="" type="text"></td>
                </tr>
                <tr class="required">
                    <th><label class="required" for="frmformUser-email">E-mail:</label></th>
                    <td><input class="form-control text" name="email" id="frmformUser-email" required="required" value="" type="text"></td>
                </tr>
                <tr class="required">
                    <th><label class="required" for="frmformUser-country">Stát:</label></th>
                    <td><select class="form-control" name="country" id="frmformUser-country" required="required"><option value="1">Česká republika</option><option value="2">Slovenská republika</option><option value="3">Polská republika</option><option value="3328">Austria</option><option value="3329">Germany</option><option value="3330">Switzerland</option><option value="3331">Norway</option><option selected="selected" value="3332">Belgium</option><option value="3333">Bulgaria</option><option value="3334">Denmark</option><option value="3335">Estonia</option><option value="3336">Finland</option><option value="3337">France</option><option value="3338">Hungary</option><option value="3339">Italy</option><option value="3340">Ireland</option><option value="3341">Latvia</option><option value="3342">Lithuania</option><option value="3343">Netherlands</option><option value="3344">Slovenia</option><option value="3345">Spain</option><option value="3346">Sweden</option><option value="3347">United Kingdom</option></select></td>
                </tr>                
                <tr class="required">
                    <th><label class="required" for="frmformUser-phone">Telefon:</label></th>
                    <td><input class="form-control text" name="phone" id="frmformUser-phone" required="required" value="" type="text"></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
    <fieldset id="password">
        <legend>Založení nového účtu</legend>
        <table>
            <tbody>
                <tr>
                    <th><label for="frmformUser-pass">Heslo:</label></th>
                    <td><input class="form-control text" autocomplete="off" name="pass" id="frmformUser-pass"type="password"></td>
                </tr>
                <tr>
                    <th><label for="frmformUser-pass2">Heslo ('potvrzení'):</label></th>
                    <td><input class="form-control text" name="pass2" id="frmformUser-pass2" type="password"></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</form>

Karty produktové běžné

<ul class="products-list">
    <li class="col-xs-3">
        product-list
    </li>
</ul>

Karty produktové velké

<ul class="products-list">
    <li class="col-xs-6 big">
        product-list big
    </li>
</ul>

Karty produktové prohlížené

<ul class="products-list">
    <li class="col-xs-2 mini">
        product-list mini
    </li>
</ul>

Karty článkové běžné

<ul class="article-list">
    <li class="col-xs-3">
        article-list
    </li>
    <li class="col-xs-3 video">
        article-list
    </li>
</ul>

Karty článkové velké

<ul class="article-list">
    <li class="col-xs-6 big">
        article-list big
    </li>
    <li class="col-xs-6 big video">
        article-list big
    </li>
</ul>

Drobečkovka

{control breadcrumb}

Paginator

{control paginator}

Readmore

Základem dobrého výkonu florbalového týmu je také florbalový brankář. Proto je třeba dbát vysoké pozornosti při výběru florbalového brankářského vybavení. Veškerá námi nabízená florbalová brankářská výstroj splňuje předpisy světové florbalové federace IFF a je pouze od nejlepších florbalových značek. Máš tedy jistotu velmi vysoké kvality materiálů a prvotřídně propracovaného zboží.
{include readmore.phtml idRead=>'read_more', 'textRead'=>'Text'}

->

<div class="read-more-box">
    <input type="checkbox" id="read_more" role="button">
    <label for="read_more">
        <span class="icon icon-blue icon-arr-cart rotate-90">Zobrazit více</span>
        <span class="icon icon-blue icon-arr-cart rotate-270">Zobrazit méně</span>
    </label>
    <section>
        <p>Základem dobrého výkonu florbalového týmu je také florbalový brankář. Proto je třeba dbát vysoké pozornosti při výběru florbalového brankářského vybavení. Veškerá námi nabízená florbalová brankářská výstroj splňuje předpisy světové florbalové federace IFF a je pouze od nejlepších florbalových značek. Máš tedy jistotu velmi vysoké kvality materiálů a prvotřídně propracovaného zboží.</p>
    </section>
</div>
<div class="clear-20"></div>

Tooltip

<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on top">Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Slider

<div class="sg-slider-wrap">
    <input class="slider-range" data-slider-min="150" data-slider-max="25000" data-slider-step="100" data-slider-value="[550,12500]" />
</div>
https://github.com/seiyria/bootstrap-slider#options

Galerie

fotografie není k dispozici
fotografie není k dispozici
fotografie není k dispozici
fotografie není k dispozici
fotografie není k dispozici
fotografie není k dispozici
<div class="col-xs-5">
    <div class="slick" data-slick='{"dots": true, "autoplay": true, "slidesToShow": 1}'>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/27249/7053_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
    </div>
</div>
<div class="col-xs-5 col-xs-offset-2">
    <div class="slick rounded-arr" data-slick='{"slidesToShow": 2}'>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/27249/7053_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
    </div>
</div>
http://kenwheeler.github.io/slick/

Doručovací kalendář

Současný den i hodina

Česká verze


Slovenská verze



Pondělí 18. 4. 9:00

Česká verze


Slovenská verze



Pondělí 18. 4. 11:00

Česká verze


Slovenská verze



Pondělí 18. 4. 14:30

Česká verze


Slovenská verze



Úterý 19. 4. 9:00

Česká verze


Slovenská verze



Úterý 19. 4. 11:00

Česká verze


Slovenská verze



Úterý 19. 4. 14:30

Česká verze


Slovenská verze



Středa 20. 4. 9:00

Česká verze


Slovenská verze



Středa 20. 4. 11:00

Česká verze


Slovenská verze



Středa 20. 4. 14:30

Česká verze


Slovenská verze



Čtvrtek 21. 4. 9:00

Česká verze


Slovenská verze



Čtvrtek 21. 4. 11:00

Česká verze


Slovenská verze



Čtvrtek 21. 4. 14:30

Česká verze


Slovenská verze



Pátek 22. 4. 9:00

Česká verze


Slovenská verze



Pátek 22. 4. 11:00

Česká verze


Slovenská verze



Pátek 22. 4. 14:30

Česká verze


Slovenská verze



Sobota 23. 4. 9:00

Česká verze


Slovenská verze



Sobota 23. 4. 11:00

Česká verze


Slovenská verze



Sobota 23. 4. 14:30

Česká verze


Slovenská verze



Neděle 24. 4. 9:00

Česká verze


Slovenská verze



Neděle 24. 4. 11:00

Česká verze


Slovenská verze



Neděle 24. 4. 14:30

Česká verze


Slovenská verze



Přijďte nás navštívit

Pobočka Brno

pobocka brno
Hlinky 34, 603 00 Brno
Pondělí až Pátek10.00 – 19.00
Sobota9.00 - 12.00
541 214 249
info@florbal.com
Více o prodejně

Pobočka Praha

pobocka praha
Kurta Konráda 6, 19000 Praha 9 - Vysočany
Pondělí až Pátek10.00 – 19.00
Sobota9.00 – 12.00
252 540 008
praha@florbal.com
Více o prodejně

Copyright © 2016. Využíváme služby Retail Acceleratoru společnosti Shockworks.

brno pay info
Jak vybrat správnou florbalku? poradce
Jakou potřebuji brankářskou výbavu? poradce
Jakou velikost sportovních bot? poradce
Jaké zvolit sportovní oblečení? poradce