FIF rilascia diplomi in regola in quanto previsto nella nuova Riforma dello Sport
e converte titoli con rilascio del Tesserino Tecnico secondo la nuova Riforma
chiamaci o compila il modulo per la conversione

Hai titoli non FIF e vuoi convertirli ai fini della regolarità normativa?
Richiedi una consulenza gratuita a fif [AT] fif [DOT] it allegando copia dei tuoi certificati.
Per maggiori informazioni clicca qui

F.I.F. promuove e diffonde la cultura del fitness. Le aree di intervento racchiudono tutti i settori del fitness e olistici, dalla formazione all’assistenza e consulenza, sino all’agonismo, con attività distribuite lungo tutto l’arco dell’anno in tutta Italia oltre a una vasta offerta di formazione online e in diretta live.
Per favorire l’aggiornamento degli associati, la FIF promuove anche un settore editoriale con la rivista “Performance” distribuita agli operatori del settore e diponibile anche on line.

Corsi riconosciuti da

miur asso professioni

Partner

Accordion

Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

Usage

To apply the Accordion component, add the uk-accordion class and the data-uk-accordion attribute to a container element. Add the uk-accordion-content class to each of the content sections within the container. Finally, add the uk-accordion-title class to any element, like a heading, above the content section to create a toggle.

Example

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Heading 3

Markup

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

Muliple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the {collapse: false} option to the date attribute.

Example

Heading 1

Heading 2

Heading 3

JavaScript options

Option	Possible value	Default	Description
`showfirst`	boolean	true	Show first item on init
`collapse`	boolean	true	Allow multiple open items
`animate`	boolean	true	Animate toggle
`easing`	string	swing	Animation function
`duration`	integer	300	Animation duration
`toggle`	string	.uk-accordion-title	Css selector for toggles
`containers`	string	.uk-accordion-content	Css selector for content containers
`clsactive`	string	uk-active	Class to add when an item is active

Init element manually

var accordion = UIkit.accordion(element, { /* options */ });

Events

Name	Parameter	Description
`toggle.uk.accordion`	event, active, toggle, content	On item toggle

Coming Soon / Offline Page

MaxxFitnes Template have a minimal, creative and responsive HTML5 offline page. Select how to display offline page in theme settings. Use one of the modes: Offline page or GrandOpening page (Coming Soon).

Main Features Ofline page

Two modes: Offline page, Coming Soon page
Clean and minimal design
Fully Responsive
jQuery Countdown for Coming Soon page
Easy to customise
600+ Google Fonts
W3C Valid HTML
Well documented PHP and LESS files
and more features...

Offline Page

Grand Opening (Coming Soon) Page

Color Variations

MaxxFitnes Template Customizer allow create your own style. You can pick colors, modify sizes, select fonts and much more with a real time theme preview. We added 4 amazing color styles. And you can build your own color style just a minutes!

Layouts

MaxxFitness template comes with a sophisticated layout system to create any kind of sidebar or widget layout based on Warp Framework. You can easily manage the sidebar's positions and modules in the theme administration. Modules can have different styles and be placed in any position offered by this theme. Each position has its own layout. You can align modules side-by-side, stack them or choose your own grid layout. Show or hide modules on mobile devices, while the grid adapts perfectly to your layout.

Navbar

Defines different styles for the navigation bar.

Usage

The Navbar component consists of the navbar itself and one or more navigations.

Class	Description
`.uk-navbar`	Add this class to a `<nav>` element to define the Navbar component.
`.uk-navbar-nav`	Add this class to a `<ul>` element to create a navigation. Use `<a>` elements as menu items within the list.
`.uk-active`	Add this class to a list item to apply an active state.
`.uk-parent`	Add this class to indicate a parent menu item.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="">...</a></li>
        <li><a href="">...</a></li>
        <li class="uk-parent"><a href="">...</a></li>
    </ul>
</nav>

Navbar flip

Add the .uk-navbar-flip class to a <div> element to group and align navigations and items to the right.

Example

Markup

<nav class="uk-navbar">
    <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
            <li><a href="">...</a></li>
        </ul>
    </div>
</nav>

Navbar subtitle

Add the .uk-navbar-nav-subtitle class to an <a> element in the list item to indicate that it has a subtitle. Use a <div> element for the subtitle itself.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li><a href="" class="uk-navbar-nav-subtitle">
            ...
            <div>...</div>
        </a></li>
    </ul>
</nav>

Content

You can also add custom content to the navbar, like text, icons, buttons, forms or even a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component.

Class	Description
`.uk-navbar-content`	Add this class to a `<div>` element, which serves as a container for your custom content. The content will be centered vertically.
`.uk-navbar-brand`	Add this class to an `<a>` or `<div>` element to indicate your brand.
`.uk-navbar-center`	Add this class to center your navbar content or brand. The element needs to be the last child in the navbar.
`.uk-navbar-toggle`	Add this class to an `<a>` or `<div>` element to create an icon as a toggle.
`.uk-navbar-toggle-alt`	Add this class to create an alternative icon as a toggle.

Example

Markup

<nav class="uk-navbar">
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center">...</div>
    <a href="" class="uk-navbar-toggle"></a>
</nav>

Responsive visibility

To hide or display certain navbar items, just add one of the responsive visibility classes from the Utility component. This comes in handy, if you want to use a toggle to trigger a mobile navigation for example.

Example

Resize your browser window to see it in action.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav uk-hidden-small">...</ul>
    <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>

<div id="my-id" class="uk-offcanvas">
    ...
</div>

NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.

Modifiers

To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other

Navbar attached

Add the .uk-navbar-attached class to optimize the navbar's styling to be attached to the top of the viewport. For example, rounded corners will be removed.

Example

Markup

<nav class="uk-navbar uk-navbar-attached">...</nav>

A navbar can contain a dropdown from the Dropdown component. Just add the .uk-dropdown-navbar modifier to the dropdown, so it fits perfectly into the navbar's styling.