Placebo

Healthcare Industry Joomla Template


Placebo - Healthcare Industry Joomla Template

Quickstart package for Joomla 3.x +  Template Only

Author: PixelHut

Thank you for choosing our template! We hope Placebo will suit your needs in developing your site. With Placebo Healthcare Industry template you can build your corporate / business / freelancer / blog / creative Joomla website. This template is orientated to every company involved in medical/dental industry sector and for Nursing homes too, but you cat use it basically for every business/corporate website, because you have everything that you ever need in it.  You can develop and boost your business. We hope to use our Joomla Template for your brand new site or to redesign your existing one.

Enjoy Placebo's features and ideas!

You can choose to install the template with the full demo package or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation rather than only the template itself.

1. Install full Joomla 3 demo package:

 

2. Template installation:
If you already have an installed Joomla use the first method and if you want to make a fresh install of Joomla + the template only use the installation method.

Template installation only:
1. Open your site administration (www.yoursite.com/administrator)
2. Go to "Extensions" > "Extension Manager"
3. Click "Browse" in the field called "Upload Package File" > locate the template file in your computer and select it > Click "Upload & Install"
4. Other modules - the complete list of modules can be found below in the documentation.
Installing only the template you'll need to install all the extensions by downloading them from the creator's sites - please check the credits to get extension links.

 

The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.
We recommend to use JCE as a text editor or disable the text editor at all.

1. JCE - download and install JCE from https://www.joomlacontenteditor.net/

You can turn it on by going to Site Admin > Global Configuration > Default Editor * > select "Editor - JCE" and save.
Thus when you open an article or a module you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.

EXAMPLE:
Let's say you open a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the code will get stripped.
Now if you have enabled JCE as a default editor and open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save. Thus you will not lose any code neither from article or module.

2. No Editor - You can turn off the editor by going to Site Admin > Global Configuration > Default Editor * > select "Editor - None" and save.
Thus when you open any article or module you will see the original code and when saving no code will get stripped.

Site admin > Extensions > Template Manager -> click on Placebo.

In the Basic Tabs:

Header
Sticky Header: Yes

Boxed Layout
Enable No, but if you want to use the boxed version, you can just switch to Yes.

Contact Information
Enable: Yes
Phone: your phone
Email: your email

To use the presets and change colors go to:

Module Positions:

To add or rearrange modules you need to go to:

Site admin > Extensions > Template manager;
click on Placebo template;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.

Module variations:

Placebo template comes with 6 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3, title4, title5, title6


Layout Builder:

You can open the layout builder from Joomla admin > Extensions > Template manager > Placebo > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/ position settings.

To create new module positions you need to:

1. Open templates/placebo/templateDetails.xml and locate the following lines:

<positions>
        <position>title</position>
        <position>logo</position>

2. Copy one line - per example <position>title</position> and paste it below the other one, then rename it (in this example the new position will be called "newposition"):

<positions>
        <position>title</position>
        <position>newposition</position>
        <position>logo</position>

- save and close the file

3. Open the Layout tab in the template settings > choose wherever to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list Module Position > choose the "newposition" from the list and save.

4. Go to templates/placebo/less/theme.less and add the new css style for the new position. The class of the new position should be:

#sp-newposition


5. Finally create a module and publish it in the new position.

These are elements used in the template and they are only part of UI kit elements - only Core elements. From Components section of the UI Kit we have implemented only some of the futes like Lightbox. Tooltips, Progress, Parallax.

You can see the preview for all below codes in UI Kit Elements page in the demo.

Buttons - Default Size:


<a href="#"><button class="uk-button" type="button">Default Button</button></a> <a href="#"><button class="uk-button uk-button-primary" type="button">Primary Button</button></a> <a href="#"><button class="uk-button uk-button-success" type="button">Success Button</button></a> <a href="#"><button class="uk-button uk-button-danger" type="button">Danger Button</button></a>


Buttons - Mini Size:


<a href="#"><button class="uk-button uk-button-mini" type="button">Default Button</button></a> <a href="#"><button class="uk-button uk-button-primary uk-button-mini" type="button">Primary Button</button></a> <a href="#"><button class="uk-button uk-button-success uk-button-mini" type="button">Success Button</button></a> <a href="#"><button class="uk-button uk-button-danger uk-button-mini" type="button">Danger Button</button></a>

Buttons Large size:


<a href="#"><button class="uk-button uk-button-large" type="button">Default Button</button></a> <a href="#"><button class="uk-button uk-button-primary uk-button-large" type="button">Primary Button</button></a> <a href="#"><button class="uk-button uk-button-success uk-button-large" type="button">Success Button</button></a> <a href="#"><button class="uk-button uk-button-danger uk-button-large" type="button">Danger Button</button></a>

Buttons Groups wtih default size buttons:


<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button">Link</a> <a href="#" type="submit" class="uk-button">Button</a> <a href="#" type="submit" class="uk-button">Button</a></div>
</div>
<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-primary">Link</a> <a href="#" type="submit" class="uk-button uk-button-primary">Button</a> <a href="#" type="submit" class="uk-button uk-button-primary">Button</a></div>
</div>
<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-success">Link</a> <a href="#" type="submit" class="uk-button uk-button-success">Button</a> <a href="#" type="submit" class="uk-button uk-button-success">Button</a></div>
</div>
<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-danger">Link</a> <a href="#" type="submit" class="uk-button uk-button-danger">Button</a> <a href="#" type="submit" class="uk-button uk-button-danger">Button</a></div>
</div>


Buttons Groups wtih large size buttons:


<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-large">Link</a> <a href="#" type="submit" class="uk-button uk-button-large">Button</a> <a href="#" type="submit" class="uk-button uk-button-large">Button</a></div>
</div>
<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-primary uk-button-large">Link</a> <a href="#" type="submit" class="uk-button uk-button-primary uk-button-large">Button</a> <a href="#" type="submit" class="uk-button uk-button-primary uk-button-large">Button</a></div>
</div>


Full width button:


<p><button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button></p>


Full width primary button:
<p><button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button></p>

Badges:


<p><span class="uk-badge uk-badge-urban">Badge</span> <span class="uk-badge uk-badge-success">Success</span> <span class="uk-badge uk-badge-warning">Warning</span> <span class="uk-badge uk-badge-danger">Danger</span> <span class="uk-badge uk-badge-percent">Danger</span> <span class="uk-badge uk-badge-notification uk-badge-urban">1</span> <span class="uk-badge uk-badge-notification uk-badge-success">2</span> <span class="uk-badge uk-badge-notification uk-badge-warning">3</span> <span class="uk-badge uk-badge-notification uk-badge-danger">4</span> <span class="uk-badge uk-badge-notification uk-badge-percent">5</span></p>


Alert Messages:


<div class="uk-alert uk-alert-success" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate success or a positive message add the <code>.uk-alert-success</code> class.</p>
</div>
<div class="uk-alert uk-alert-warning" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate a message containing a warning add the <code>.uk-alert-warning</code> class.</p>
</div>
<div class="uk-alert uk-alert-danger" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate an important message add the <code>.uk-alert-danger</code> class.</p>
</div>
<div class="uk-alert uk-alert-large uk-alert-danger" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<h3>Title Large Alert</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>
</div>


Progress Bars:


<div class="uk-progress">
<div class="uk-progress-bar" style="width: 90%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-small">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 43%;">&nbsp;</div>
</div>

Modal Dialogs:


<p>
<button class="uk-button" data-uk-modal="{target:'#modal'}">Click Me</button>
<a href="#modal2" data-uk-modal="{center:true}">Click Me</a>
</p>
<div id="modal" class="uk-modal">
<div class="uk-modal-dialog"><a class="uk-modal-close uk-close"></a>
<h1>Headline</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div id="modal2" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-large"><a class="uk-modal-close uk-close"></a>
<h1>Headline</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>


Off-canvas Sidebars:


<p><button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Click Me</button> <a href="#offcanvas-1" data-uk-offcanvas="">Click Me</a></p>
<div id="offcanvas-1" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">Lorem ipsum dolor sit amet, <a href="#">consectetur</a> 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.</div>
<div class="uk-panel">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>


Tooltips:


<p><button class="uk-button" data-uk-tooltip="" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'bottom'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'bottom-right'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'top'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'top-left'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'top-right'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'left'}" title="Hello!">Hover me</button> <button class="uk-button" data-uk-tooltip="{pos:'right'}" title="Hello!">Hover me</button> <span data-uk-tooltip="" title="Hello!">Hover me</span></p>
 


Overlay Examples:


<div class="uk-grid uk-grid-divider-2">
<div class="uk-width-medium-1-3 uk-text-center">
<div class="uk-overlay">
<img alt="step 1" src="images/Demo/elements/plans.jpg" title="Step 1">
<div class="uk-overlay-panel uk-overlay-background">
<h4>Premium facilities and houses</h4>
</div>
</div>
</div>
<div class="uk-width-medium-1-3 uk-text-center">
<div class="uk-overlay">
<img alt="step 1" src="images/Demo/elements/mission1.png" title="Step 1" class="uk-border-circle">
<div class="uk-overlay-area uk-border-circle">
<div class="uk-overlay-area-content">
<h4>Premium quality senior care</h4>
</div>
</div>
</div>
</div>
<div class="uk-width-medium-1-3">
   <figure class="uk-overlay uk-overlay-hover">
    <img width="800" height="600" src="images/Demo/elements/plans.jpg" alt="Floor Plans">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-ignore"><i class="uk-icon-search"></i> Placebo Standard House Plans</figcaption>
   </figure>
  </a>
</div>
</div>
 


Scrollspy animations - Triggers events and animations while scrolling your page.


<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
<h3>Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
<h3>Scale up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-2-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
<h3>Scale down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-3-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
<h3>Slide top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-2-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
<h3>Slide bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
<h3>Slide right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
<h3>Slide left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>

Explore All UI KIT Examples here: http://getuikit.com/docs/core.html

and in Components page here: http://getuikit.com/docs/components.html

Examples:


<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-google-plus" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-instagram" href="#"></a>
<a class="uk-icon-button uk-icon-pinterest" href="#"></a>
<a class="uk-icon-button uk-icon-flickr" href="#"></a>
<a class="uk-icon-button uk-icon-tumblr" href="#"></a>
<a class="uk-icon-button uk-icon-dribbble" href="#"></a>

 

And Social Icons from UI Kit (the code below is from our footer section and is accompanied with an animation on scroll.)

 

For more icons you can check the page from UI Kit dedicated to icons: http://getuikit.com/docs/icon.html

Icons

Place vector icons anywhere using an icon font.

UI Kit component is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 300 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

Usage

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

More about Font Awesome icons you can find here: http://getuikit.com/docs/icon.html

Thin Stroke Icons 7 set by pixeden are integrated in Placebo Template. A series of iOS 7 inspired vector icons in a custom @font-face icon font that can be styled dynamically using CSS. Those retina ready icons have a very modern style that will beautifully complement any project.

Demo of icons you can find here:

http://themes-pixeden.com/font-demos/7-stroke/index.html

 

Documentation for usage of these icons you can find here:

http://themes-pixeden.com/font-demos/7-stroke/documentation.html#

 

Example usage:

<span class="pe-7s-map-marker"></span>
<i class="pe-7s-home"></i>

Now with the new Helix 3 Framework you can set your font family and font size from the Admin manager of the template. You can choose different font for every heading size, body font and menu font. YOu can even set a Custom Font (Apply this google font to any custom CSS selector.).

 

Headings

<h1 class="uk-margin-bottom">h1. Heading 1</h1>

<h2 class="uk-margin-bottom">h2. Heading 2</h2>

<h3 class="uk-margin-bottom">h3. Heading 3</h3>

<h4 class="uk-margin-bottom">h4. Heading 4</h4>

<h5 class="uk-margin-bottom">h5. Heading 5</h5>

<h6 class="uk-margin-bottom">h6. Heading 6</h6>

Dropcap

<p class="sp-dropcap">Placebo is the most complete medical center in Europe. We are here from the beginning to the end, delivering Lifetime HealthCare. Helping people since 1923, Placebo has won the Best Hospital Award in the past 7 years in almost any category!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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



HTML & Highlights
<p><strong>Placebo</strong> <code>(bold)</code> is the most complete medical center in <em>Europe</em> <code>(italic)</code>. We are here from the beginning to the end, delivering <u>Lifetime HealthCare</u> <code>(underline)</code>. Helping people since 1923, Placebo has won the <ins>Best Hospital Award</ins> <code>(ins)</code> in the past <mark>7 years</mark> <code>(mark)</code> in almost any category!Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <mark>eiusmod tempor incididunt ut labore</mark> 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. <ins>Excepteur sint occaecat cupidatat non proident</ins>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


Blockquotes
<p class="blockquote-pc">The function of education is to teach one to think intensively and to think critically. Intelligence plus character - that is the goal of true education.</p>
<p class="blockquote-pc2">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character.</p>


List class spot

<ul class="spot">
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
<li>Tyres Testing</li>
<li>ABS Testing</li>
<li>Rally Car Testing</li>
<li>4x4 Driver Trainings</li>
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
</ul>



List class line

<ul class="uk-list uk-list-line">
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
<li>Tyres Testing</li>
<li>ABS Testing</li>
<li>Rally Car Testing</li>
<li>4x4 Driver Trainings</li>
</ul>



List class stripped

<ul class="uk-list uk-list-striped">
<li>Off Road driving days</li>
<li>Dealer Demonstration Days</li>
<li>Tyres Testing</li>
<li>ABS Testing</li>
<li>Rally Car Testing</li>
<li>4x4 Driver Trainings</li>
</ul>



 

We have used UI Kit buttons, styled for the purposes of our template.

Buttons - Default Size


<a href="#"><button class="uk-button" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger" type="button">Danger Button</button></a>


Buttons - Mini Size


<a href="#"><button class="uk-button uk-button-mini" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary uk-button-mini" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success uk-button-mini" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger uk-button-mini" type="button">Danger Button</button></a>


Buttons Large size


<a href="#"><button class="uk-button uk-button-large" type="button">Default Button</button></a>
<a href="#"><button class="uk-button uk-button-primary uk-button-large" type="button">Primary Button</button></a>
<a href="#"><button class="uk-button uk-button-success uk-button-large" type="button">Success Button</button></a>
<a href="#"><button class="uk-button uk-button-danger uk-button-large" type="button">Danger Button</button></a>


Buttons Groups wtih default size buttons

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button" href="#">Link</a>
 <a class="uk-button" type="submit" href="#">Button</a>
 <a class="uk-button" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-primary" href="#">Link</a>
 <a class="uk-button uk-button-primary" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-primary" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-success" href="#">Link</a>
 <a class="uk-button uk-button-success" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-success" type="submit" href="#">Button</a>
 </div>
</div>

<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-danger" href="#">Link</a>
 <a class="uk-button uk-button-danger" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-danger" type="submit" href="#">Button</a>
 </div>
</div>

Buttons Groups wtih large size buttons


<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-large" href="#">Link</a>
 <a class="uk-button uk-button-large" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-large" type="submit" href="#">Button</a>
 </div>
</div>
<div class="uk-margin">
 <div class="uk-button-group">
 <a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
 <a class="uk-button uk-button-primary uk-button-large" type="submit" href="#">Button</a>
 <a class="uk-button uk-button-primary uk-button-large" type="submit" href="#">Button</a>
 </div>
</div>


Full width button


<button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button>

Full width primary button


<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button>

Elements with Icon & Effect


<div class="uk-grid">

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-like"></span><h4>Medical Care</h4><p>Placebo Nursing Home offers 24 hours dedicated medical care for all residents. Special cares can be provided as well.</p>
  </div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"><span class="hi-icon pe-7s-users"></span><h4>Daily Assistance</h4><p>Assistance with all activities of daily living, which include bathing, dressing, toileting, hygiene and transferring.</p></div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"><span class="hi-icon pe-7s-bicycle"></span><h4>Activities</h4><p>Activities, including daily exercise, watching movies, listening to music, reminiscing and non-denominational services.</p></div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"><span class="hi-icon pe-7s-date"></span><h4>Events</h4><p>Crafts courses, computer and language lessons, balls, Social Soiree Nights, Opera and theater visits and many more.</p></div>
</div>

</div>

Elements with Image & Effects


<div class="uk-grid">

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept1.jpg"></a></span><h4>OB/ GEN</h4><p>Abdominals asthma canine teeth cerumen complete blood count (cbc) disinfectants.</p>
  </div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept2.jpg"></a></span><h4>Neonatology</h4><p>Bolus bronchodilator constipation dislocation keratin mucus nasal cavity symptoms.</p>
  </div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept3.jpg"></a></span><h4>Pediatrics</h4><p>Aerobic activity allergy arteries and veins cancer cardiologist chromosomes controller.</p>
  </div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept4.jpg"></a></span><h4>Dermatology</h4><p>Acne adhd alcoholism anesthesia autoimmunity bacteria blackhead blood bank bolus bronchodilator.</p>
  </div>
</div>

</div>


Elements with Image & Effect & Parallax Background

<div style="height: 100%; min-height: 300px;  background-image: url(images/Demo/elements/parallax5.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">

<div class="uk-grid uk-grid-collapse">

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept1.jpg"></a></span><h4>OB/ GEN</h4><p>Abdominals asthma canine teeth cerumen complete blood count (cbc) disinfectants.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept2.jpg"></a></span><h4>Neonatology</h4><p>Bolus bronchodilator constipation dislocation keratin mucus nasal cavity symptoms.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept3.jpg"></a></span><h4>Pediatrics</h4><p>Aerobic activity allergy arteries and veins cancer cardiologist chromosomes controller.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon"><a href="index.php/clinic-hospital/medical-department-example-page"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept4.jpg"></a></span><h4>Dermatology</h4><p>Acne adhd alcoholism anesthesia autoimmunity bacteria blackhead blood bank bolus bronchodilator.</p>
  </div>
</div>

</div>

</div>


Boxed Elements with Text & Effect



<div class="uk-grid">

  <div class="uk-width-medium-1-3">
    <div class="border-box2">
        <h4 class="title-dash">Men's Health</h4>
        <p>Information about men's health including health risks and conditions that only affect men. Healthy lifestyle choices guide for eating healthy and manage risky behaviors as too much drinking.</p>
        <a href="#info1" class="uk-button" data-uk-modal="{center:true}"><i class="fa fa-plus"></i></a>
    </div>
    <div class="uk-modal" id="info1" aria-hidden="true">
        <div class="uk-modal-dialog uk-text-center">
             <button class="uk-modal-close uk-close" type="button"></button>
                 <h4>Men's Health</h4>
                 <i class="pe-7s-male pe-4x pe-border uk-margin-bottom"></i>
                <p>Find out what you need to avoid heart diseases, cancer and other major threats.</p><p>Belly fat, Erectile dysfunction, Exercise benefits, Get better sleep, Heart-healthy diet: 8 steps to prevent heart disease, New dad tips.</p>
        </div>
    </div>
</div>

<div class="uk-width-medium-1-3">
    <div class="border-box2">
        <h4 class="title-dash">Women's Health</h4>
        <p>Information about top women's health risks such as breast and ovarian cancer. Important facts about cosmetic surgery, woman life stages. Healthy lifestyle guide for eating healthy and exercise benefits.</p>
        <a href="#info2" class="uk-button" data-uk-modal="{center:true}"><i class="fa fa-plus"></i></a>
    </div>
    <div class="uk-modal" id="info2" aria-hidden="true">
        <div class="uk-modal-dialog uk-text-center">
            <button class="uk-modal-close uk-close" type="button"></button>
            <h4>Woman's Health</h4>
                 <i class="pe-7s-female pe-4x pe-border uk-margin-bottom"></i>
                <p>Find out what you need to avoid heart diseases, cancer and other major threats.</p><p>Belly fat in women, Better sleep, Breast cancer prevention, Cosmetic surgery and Breast implants, Menopause, Fitness tips for menopause, Headaches and hormones, Menstrual cycle.</p>
        </div>
    </div>
</div>

<div class="uk-width-medium-1-3">
    <div class="border-box2">
        <h4 class="title-dash">Children's Health</h4>
        <p>Better children's health by encouraging your child to eat a variety of healthy foods control portions, information about vaccines, school health. The key for kids health is sport and the right nutrition.</p>
        <a href="#info3" class="uk-button" data-uk-modal="{center:true}"><i class="fa fa-plus"></i></a>
    </div>
    <div class="uk-modal" id="info3" aria-hidden="true">
         <div class="uk-modal-dialog uk-text-center">
            <button class="uk-modal-close uk-close" type="button"></button>
            <h4>Children's Health</h4>
                 <i class="pe-7s-smile pe-4x pe-border uk-margin-bottom"></i>
                <p>Find out what you need be your child happy and strong.</p><p>BMI, Sport activities, hand wash, healthy eating and fruit importance, kids disorders, kindergarten or grand parents</p>
        </div>
    </div>
</div>

</div>

 

Different Sized Bars


<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 80%;">80%</div>
</div>

<div class="uk-progress uk-progress-small">
    <div class="uk-progress-bar" style="width: 50%;"></div>
</div>

<div class="uk-progress uk-progress-mini ">
    <div class="uk-progress-bar" style="width: 30%;"></div>
</div>


Different Color Bars


<div class="uk-progress uk-progress-success">
<div class="uk-progress-bar" style="width: 80%;">80%</div>
</div>

<div class="uk-progress uk-progress-warning">
<div class="uk-progress-bar" style="width: 50%;">50%</div>
</div>

<div class="uk-progress uk-progress-danger">
<div class="uk-progress-bar" style="width: 30%;">30%</div>
</div>


Donut Pie Google Chart


<div class="uk-grid">
<div class="uk-width-medium-1-3">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Capacity', 'Percentage'],
          ['PHP', 92],
          ['', 8],
        ]);

       var options = {
          pieHole: 0.3,
          legend: 'none',
          fontName: "Merriweather,sans-serif",
          backgroundColor: 'transparent',
          pieSliceTextStyle: {
            color: '#fff',
          },
         tooltip: { trigger: 'none' },
          slices: {
            0: { color: '#2184df' },
            1: { color: '#e91c2d', tooltip: { trigger: 'none' } }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart2'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      }
    </script>
    <div id="donutchart2" style="height: 250px;"></div>
<h5 class="uk-text-center">2014</h5>
<div class="uk-text-center">We registered - 8% inpatient care includes deliveries and 92% out-patient care.</div>
</div>
<div class="uk-width-medium-1-3">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Capacity', 'Percentage'],
          ['HTML', 75],
          ['', 25],
        ]);

      var options = {
          pieHole: 0.3,
          legend: 'none',
          fontName: "Merriweather,sans-serif",
          backgroundColor: 'transparent',
          pieSliceTextStyle: {
            color: '#fff',
          },
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: '#2184df' },
            1: { color: '#e91c2d', tooltip: { trigger: 'none' } }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart3'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      }
    </script>
    <div id="donutchart3" style="height: 250px;"></div>
<h5 class="uk-text-center">2015</h5>
<div class="uk-text-center">We registered - 25% inpatient care includes deliveries and 75% out-patient care.</div>
</div>

<div class="uk-width-medium-1-3">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Capacity', 'Percentage'],
          ['In-Patient', 37],
          ['Out-Patient', 43],
          ['Other', 20],
        ]);

      var options = {
          pieHole: 0.3,
          legend: 'none',
          fontName: "Merriweather,sans-serif",
          backgroundColor: 'transparent',
          pieSliceTextStyle: {
            color: '#fff',
          },

          slices: {
            0: { color: '#2184df' },
            1: { color: '#e91c2d'},
            2: { color: '#80b335', tooltip: { trigger: 'none' } }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart4'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      }
    </script>
    <div id="donutchart4" style="height: 250px;"></div>
<h5 class="uk-text-center">2016</h5>
<div class="uk-text-center">We registered - 37% inpatient care includes deliveries and 43% out-patient care, 20% other services.</div>
</div>

</div>

Note that if you want to use a multiple donut charts on one page you have to be sure that evey one chart has his own Id!


Stacked Bar Google Charts


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['BMI', 'Normal', 'Overweight', 'Obese', { role: 'annotation' } ],
        ['BMI for 2014', 30, 36, 34, ''],
      ]);

      var options = {
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '100%' },

        colors:['#eb1c28','#2684db','#80b355'],
        fontName: "Merriweather,sans-serif",
        isStacked: true,
      };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div3'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      };
    </script>
    <div id="chart_div3" style="height: 340px;" class="uk-margin-large-left"></div>

We used UI Kit Parallax code to make this beautiful parallax sections.

<div style="height: 100%; min-height: 500px;  background-image: url(images/Demo/elements/parallax5.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">

<div class="">
<h1>How About This?</h1>
<h3>Awesome Parallax Sections</h3><br>
<p><a href="#" class="uk-button uk-button-danger uk-button-large">Use Me, Please!</a></p>
</div>

</div>

We set height to 100% and min-height, witch are not used in UI Kit original code, but we found it to be important if you have too large text and in order to look good on mobile. But you can always experiment with or without these measures.

UIkit provides a number of options that you can add to the data-uk-parallax attribute:

Option Description
x Animate translateX in pixels.
xp Animate translateX in percent.
y Animate translateY in pixels.
yp Animate translateY in percent.
bg Animate a background image.
bgp Animate a background image in percent.
rotate Animate rotation clockwise in degree.
scale Animate scaling.
color Animate color (needs start and stop value).
background-color Animate background-color (needs start and stop value).
border-color Animate border color (needs start and stop value).
opacity Animate the opacity.

You can see many other variation of usage here: http://getuikit.com/docs/parallax.html

 

1. Complete Healthcare Solution



Custom HTML Module
Module Position: top3
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">
<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <div class="uk-panel-teaser">
      <a href="index.php/home/healthy-lifestyle-home"><img title="Health Info & Lifestyle" alt="Health Info & Lifestyle" src="images/Demo/elements/01.jpg"></a>
    </div>
    <h4>Health Info & Lifestyle</h4><p>Practical advises, diets, health and wellness programs and so much more. Live healthy and check your symptoms.</p>
  </div>
</div>

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <div class="uk-panel-teaser">
      <a href="index.php/home/home-clinic-hospital"><img title="Clinic & Hospital" alt="Clinic & Hospital" src="images/Demo/elements/02.jpg"></a>
    </div>
    <h4>Clinic & Hospital</h4><p>One stop shop for your medical problems. Placebo is working with the latest surgery techniques and has the best medical specialists.</p>
  </div>
</div>

<div class="uk-width-medium-1-3">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-panel-hover">
    <div class="uk-panel-teaser">
      <a href="index.php/home/home-nursing-home"><img title="Nursing Home" alt="Nursing Home" src="images/Demo/elements/03.jpg"></a>
    </div>
    </h6><h4>Nursing Home</h4><p>Taking care of the elderly people with respect and dignity. You can easily call it Home. Make your choice now.</p>
  </div>
</div>

</div>

2. Why To Choose Us?



Custom HTML Module
Module Position: parallax1
Show Title: Hide
Module Class Suffix: none

<div style="height: 100%; min-height: 400px;  background-image: url(images/Demo/elements/parallax12.jpg); background-repeat: no-repeat;" data-uk-parallax="{bg: -200}" class="">

<div class="sp-module title1" style="padding-top:70px;"><h3 class="sp-module-title">Why To Choose Us?</h3></div>

<div class="uk-container uk-container-center">
<div class="uk-grid uk-grid-divider">

<div class="uk-width-medium-1-4 uk-text-center">
<h1><i class="pe-7s-note2"></i></h1>
<h5>Responsibility & Devotion</h5>
<p class="uk-text-gray">We want to be your friends</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center">
<h1><i class="pe-7s-edit"></i></h1>
<h5>Latest Technologies</h5>
<p class="uk-text-gray">The newer the better - this is our credo</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center">
<h1><i class="pe-7s-global"></i></h1>
<h5>Best Professionals</h5>
<p class="uk-text-gray">Only the best doctors in any medical field</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center">
<h1><i class="pe-7s-like"></i></h1>
<h5>Competitive Prices</h5>
<p class="uk-text-gray">Money is not everything, but just FYI</p>
</div>

</div>
</div>

<div class="sp-module title1" style="padding-top:20px;"><h3 class="sp-module-title">Medicine In The Palm Of Your Hand</h3></div>
<p class="uk-text-center">Book directly from your phone, change appointments, check results, pay your bills and so much more!</p>
<p class="uk-text-center">Placebo App is build to meet your medical needs at any moment.</p>
<img class="uk-container-center" src="images/Demo/elements/hand.png" alt="Placebo Apps">

</div>

3. Home ARTICLE: (name Home)



<div class="sp-module title1"><h3 class="sp-module-title">Placebo Medical Departments</h3></div>

<div style="height: 100%; min-height: 500px;  background-image: url(images/Demo/elements/parallax5.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">

<div class="uk-grid uk-grid-collapse">

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept1.jpg"></span></a><h4>OB/ GEN</h4><p>Abdominals asthma canine teeth cerumen complete blood count (cbc) disinfectants.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept2.jpg"></span></a><h4>Neonatology</h4><p>Bolus bronchodilator constipation dislocation keratin mucus nasal cavity symptoms.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept3.jpg"></span></a><h4>Pediatrics</h4><p>Aerobic activity allergy arteries and veins cancer cardiologist chromosomes controller.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept4.jpg"></span></a><h4>Dermatology</h4><p>Acne adhd alcoholism anesthesia autoimmunity bacteria blackhead blood bank bolus bronchodilator.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept5.jpg"></span></a><h4>Ophthalmology</h4><p>Airways allergen allergist arthritis cochlea cone contagious dna enamel enuresis epistaxis.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept6.jpg"></span></a><h4>Cardiology</h4><p>Abrasion allergy-triggered asthma cardiologist caries chromosomes contact lenses dust mites.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept7.jpg"></span></a><h4>Gastroenterology</h4><p>Blood bank braces hydrocortisone nebulizer nutrition pediatric endocrinologist pollen tragus.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept8.jpg"></span></a><h4>Oncology</h4><p>Alignment anesthesia blood glucose meter body type bronchodilator bruise carbohydrate.</p>
  </div>
</div>

</div>

</div>

4. Our Doctors & Nurses



Custom HTML Module
Module Position: position1
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">

<div class="uk-width-medium-1-4 uk-text-center">
<img class="boxme" src="images/Demo/elements/team1.jpg" alt="Our Care Team" />
<br>
<h4>Brooklin Stevens</h4>
<p>Managing Director</p>
<p>Brooklin is the managing director at Placebo for almost 3 years and he dedicates all his efforts to make the life of our residents in Placebo easy.</p>
<p>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center">
<img class="boxme" src="images/Demo/elements/team3.jpg" alt="Our Care Team" />
<br>
<h4>Miranda Shepperd</h4>
<p>Community Director</p>
<p>Miranda is a great person who helps at Placebo to arrange all social events and special meetups. Lorem ipsum pores ut alam dor undi jet.</p>
<p>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center">
<img class="boxme" src="images/Demo/elements/team2.jpg" alt="Our Care Team" />
<br>
<h4>Henry Jenkins</h4>
<p>Nursing Director</p>
<p>Henry is the operating nursing director at Placebo and he is probably the guy that you will meet most of the times when you have an issue.</p>
<p>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center">
<img class="boxme" src="images/Demo/elements/team4.jpg" alt="Our Care Team" />
<br>
<h4>Molly Rodrigues</h4>
<p>Registered Nurse</p>
<p>Molly is our shiniest nurse - always smiling, always ready to help. She will help you with anything you need, so don't be shy and just ask.</p>
<p>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</p>
</div>

</div>

5. Find a specialist | Call To Action Home Default



Custom HTML Module
Module Position: position5
Show Title: Hide
Module Class Suffix: none

<div class="uk-text-center">
  <h3>Diagnosed already? <span class="uk-text-gray">Contact our specialists</span>&nbsp;&nbsp;&nbsp;<a class="uk-button uk-button-large uk-button-primary">Make an appointment</a></h3>
</div>

6. Milestones



Custom HTML Module
Module Position: parallax2
Show Title: Hide
Module Class Suffix: none

<div style="height: 100%; background-image: url(images/Demo/elements/parallax6.jpg); background-color: #2d7091; background-repeat: no-repeat;"  data-uk-parallax="{bg: -300}"class="uk-text-contrast">

<div style="padding-top:70px;" class="sp-module title1"><h3 class="sp-module-title">Milestones</h3></div>
<p><img data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:300}" class="uk-container-center" src="images/Demo/elements/line.png" alt="Milestones"></p>
<br>

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}" class="uk-grid  uk-container-center">

<div class="uk-width-medium-1-4 uk-text-center boxme-trans1">
<h2>1999</h2>
<p class="uk-text-primary">Placebo Hospital opens</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center boxme-trans2">
<h2>2003</h2>
<p class="uk-text-primary">Children's surgeons perform the first multi-visceral organ transplant</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center boxme-trans1">
<h2>2009</h2>
<p class="uk-text-primary">Cancer Clinic Founded</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center boxme-trans2">
<h2>2015</h2>
<p class="uk-text-primary">Orphan Disease Research Center founded</p>
</div>

</div>

</div>

7. Our Process



Custom HTML Module
Module Position: bottom1
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">

  <div class="uk-width-medium-1-2">
    <img src="images/Demo/elements/process.jpg" alt="Our process">
  </div>

  <div class="uk-width-medium-1-2">
<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
<dl class="uk-description-list-horizontal">
<dt>
<span class="hi-icon pe-7s-bicycle"></span>

</dt>

<dd class="uk-text-left">
<h4><span class="uk-text-primary uk-text-bold">01. </span>Live healthy and active </h4>
<p>Acquired immunodeficiency syndrome infant botulism candidiasis cysticercosis taenia solium dientamoebiasis.</p>

</dd>
</dl>
</div>
<hr class="exampleone">
<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
<dl class="uk-description-list-horizontal">
<dt>
<span class="hi-icon pe-7s-users"></span>

</dt>

<dd class="uk-text-left">
<h4><span class="uk-text-primary uk-text-bold">02. </span>Visit your specialist </h4>
<p>Dientamoeba fragilis gss prion hps o111 epstein-barr virus infectious mononucleosis epstein-barr virus isosporiasis.</p>

</dd>
</dl>
</div>

<hr class="exampleone">

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
<dl class="uk-description-list-horizontal">
<dt>
<span class="hi-icon pe-7s-like"></span>

</dt>

<dd class="uk-text-left">
<h4><span class="uk-text-primary uk-text-bold">03. </span>Take care of old age</h4>
<p>Acquired immunodeficiency syndrome infant botulism candidiasis cysticercosis taenia solium dientamoebiasis.</p>

</dd>
</dl>
</div>

</div>

</div>

8. Our Partners

Custom HTML Module
Module Position: bottom5
Show Title: Hide
Module Class Suffix: none

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}" class="uk-grid">

  <div class="uk-width-medium-2-5">
    <div class="sp-module title2">
    <h3 class="sp-module-title">Our Partners</h3>
    <p class="uk-text-gray">Placebo works with companies, non-profit organizations and people worldwide to provide the best health services possible. We value our partners and the relations we have built with them.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/partner1.png" alt="Amazing Partners We Trust">
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/partner2.png" alt="Amazing Partners We Trust">
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/partner3.png" alt="Amazing Partners We Trust">
  </div>

</div>

1. Health Information


Custom HTML Module
Module Position: top3
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">

  <div class="uk-width-medium-1-3">
    <div class="border-box2">
        <h4 class="title-dash">Men's Health</h4>
        <p>Information about men's health including health risks and conditions that only affect men. Healthy lifestyle choices guide for eating healthy and manage risky behaviors as too much drinking.</p>
        <a href="#info1" class="uk-button" data-uk-modal="{center:true}"><i class="fa fa-plus"></i></a>
    </div>
    <div class="uk-modal" id="info1" aria-hidden="true">
        <div class="uk-modal-dialog uk-text-center">
             <button class="uk-modal-close uk-close" type="button"></button>
                 <h4>Men's Health</h4>
                 <i class="pe-7s-male pe-4x pe-border uk-margin-bottom"></i>
                <p>Find out what you need to avoid heart diseases, cancer and other major threats.</p><p>Belly fat, Erectile dysfunction, Exercise benefits, Get better sleep, Heart-healthy diet: 8 steps to prevent heart disease, New dad tips.</p>
        </div>
    </div>
</div>

<div class="uk-width-medium-1-3">
    <div class="border-box2">
        <h4 class="title-dash">Women's Health</h4>
        <p>Information about top women's health risks such as breast and ovarian cancer. Important facts about cosmetic surgery, woman life stages. Healthy lifestyle guide for eating healthy and exercise benefits.</p>
        <a href="#info2" class="uk-button" data-uk-modal="{center:true}"><i class="fa fa-plus"></i></a>
    </div>
    <div class="uk-modal" id="info2" aria-hidden="true">
        <div class="uk-modal-dialog uk-text-center">
            <button class="uk-modal-close uk-close" type="button"></button>
            <h4>Woman's Health</h4>
                 <i class="pe-7s-female pe-4x pe-border uk-margin-bottom"></i>
                <p>Find out what you need to avoid heart diseases, cancer and other major threats.</p><p>Belly fat in women, Better sleep, Breast cancer prevention, Cosmetic surgery and Breast implants, Menopause, Fitness tips for menopause, Headaches and hormones, Menstrual cycle.</p>
        </div>
    </div>
</div>

<div class="uk-width-medium-1-3">
    <div class="border-box2">
        <h4 class="title-dash">Children's Health</h4>
        <p>Better children's health by encouraging your child to eat a variety of healthy foods control portions, information about vaccines, school health. The key for kids health is sport and the right nutrition.</p>
        <a href="#info3" class="uk-button" data-uk-modal="{center:true}"><i class="fa fa-plus"></i></a>
    </div>
    <div class="uk-modal" id="info3" aria-hidden="true">
         <div class="uk-modal-dialog uk-text-center">
            <button class="uk-modal-close uk-close" type="button"></button>
            <h4>Children's Health</h4>
                 <i class="pe-7s-smile pe-4x pe-border uk-margin-bottom"></i>
                <p>Find out what you need be your child happy and strong.</p><p>BMI, Sport activities, hand wash, healthy eating and fruit importance, kids disorders, kindergarten or grand parents</p>
        </div>
    </div>
</div>

</div>

2. Wellness & Health Programs



Custom HTML Module
Module Position: top7
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">

<div class="uk-width-medium-1-5 uk-flex uk-flex-right uk-text-right">
                                            <div data-uk-switcher="{connect:'#w-programs', animation: 'scale'}">
                                            <div class="uk-panel uk-panel-divider uk-margin-bottom"><a href="#"><h4 class="title-dash" aria-expanded="true">Yoga</h4></a>
<span>Is a physical, mental, and spiritual practice or discipline which originated in India.</span></div>
                                            <div class="uk-panel uk-panel-divider uk-margin-bottom"><a href="#"><h4 class="title-dash" aria-expanded="true">Food Plans</h4></a>
<span>What to eat based on the weight and how much calories to take daily.</span></div>
                                            <div class="uk-panel uk-panel-divider uk-margin-bottom"><a href="#"><h4 class="title-dash" aria-expanded="true">Healthy Children</h4></a>
<span>Find out what you need for having an happy, energetic and strong child.</span></div>
                                             </div>
</div>
<div class="uk-width-medium-3-5">
                                            <div class="uk-switcher uk-text-center" id="w-programs">
                                                <div><img alt="Yoga" src="images/Demo/elements/yoga.png" /><a href="#" class="uk-button uk-button-primary">Read full text</a></div>
                                                <div><img alt="Plans" src="images/Demo/elements/plans.png" /><a href="#" class="uk-button uk-button-primary">Read full text</a></div>
                                                <div><img alt="Children" src="images/Demo/elements/children.png" /><a href="#" class="uk-button uk-button-primary">Read full text</a></div>
                                                <div><img alt="Fitness" src="images/Demo/elements/fitness.png" /><a href="#" class="uk-button uk-button-primary">Read full text</a></div>
                                                <div><img alt="Spa" src="images/Demo/elements/spa.png" /><a href="#" class="uk-button uk-button-primary">Read full text</a></div>
                                                <div><img alt="Obesity" src="images/Demo/elements/obesity.png" /><a href="#" class="uk-button uk-button-primary">Read full text</a></div>
                                            </div>
</div>

<div class="uk-width-medium-1-5">
                                            <div data-uk-switcher="{connect:'#w-programs', animation: 'scale'}">
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                            <div class="uk-panel uk-panel-divider uk-margin-bottom"><a href="#"><h4 class="title-dash2" aria-expanded="true">Gym</h4></a>
<span>Physical fitness is a general state of health and well-being through  physical activity.</span></div>
                                            <div class="uk-panel uk-panel-divider uk-margin-bottom"><a href="#"><h4 class="title-dash2" aria-expanded="true">Young-Again Spa</h4></a>
<span>Mineral-rich spring water or sea water. Botox, Acupuncture, Compulift.</span></div>
                                            <div class="uk-panel uk-panel-divider uk-margin-bottom"><a href="#"><h4 class="title-dash2" aria-expanded="true">Obesity Prevent.</h4></a>
<span>Producing a successful weight loss, prevention of this serious risk.</span></div>
                                             </div>
</div>

 </div>

3. Parallax | Healthy Lifestyle BMI



Custom HTML Module
Module Position: parallax1
Show Title: hide
Module Class Suffix: none

<div style="height: 100%; min-height: 600px;  background-image: url(images/Demo/elements/parallax1.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">

<div class="uk-grid container1170">
<div class="uk-width-medium-1-2">
<img alt="BMI" src="images/Demo/elements/bmi.png" />
</div>

<div class="uk-width-medium-1-2">
<br>
<div class="uk-grid uk-grid-divider-2">
<div class="uk-width-medium-1-2 uk-text-center">
<h3>-18.5</h3>
<h6>Underweight</h6>
<p>A person whose body weight is considered as too low with a body mass index (BMI) of under 18.5.</p>
</div>

<div class="uk-width-medium-1-2 uk-text-center">
<h3>18.5 to 24.9</h3>
<h6>Normal Weight</h6>
<p>A person whose body weight is considered as normal with a body mass index (BMI) from 18.5 to 24.9.</p>
</div>

</div>


<div class="uk-grid uk-grid-divider-2">
<div class="uk-width-medium-1-2 uk-text-center">
<h3>25 to 29.9</h3>
<h6>Overweight </h6>
<p>Overweight is having more body fat than is optimally healthy with body mass index (BMI) between 25 and 29.9.</p>
</div>

<div class="uk-width-medium-1-2 uk-text-center">
<h3>+30.0</h3>
<h6>Obese</h6>
<p>An obese person has accumulated so much body fat that it might have a negative effect on their health.</p>
</div>

</div>
</div>

</div>

4. News from the Center (name News)



RokSprocket > Strips Layout > Separated theme (published in the Healthy Lifestyle & Info Home article)
Strip HTML Code: No
Previews per Page: 2
Arrow Navigation: Show
Items Per Row: 2
Article Details: Show only Date
 
<div class="sp-module title2">
<h3 class="sp-module-title">News from the Center</h3>
</div>
[module-104]


5. Healthy Topics



RokSprocket > Lists Layout > Portrait theme
Module Position: position1
Show Title: show
Module Class Suffix: title2

Previews per Page: 3
Arrow Navigation: Show
Pagination: Show

6. Kansas BMI for 2014



Custom HTML Module
Module Position: position2
Show Title: show
Module Class Suffix: title2

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['BMI', 'Normal', 'Overweight', 'Obese', { role: 'annotation' } ],
        ['BMI for 2014', 30, 36, 34, ''],
      ]);

      var options = {
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '100%' },

        colors:['#eb1c28','#2684db','#80b355'],
        fontName: "Merriweather,sans-serif",
        isStacked: true,
      };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div3'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      };
    </script>
    <div id="chart_div3" style="height: 340px;" class="uk-margin-large-left"></div>


7. Healthy Lifestyle Home || Call To Action



Custom HTML Module
Module Position: parallax2
Show Title: hide
Module Class Suffix: none

<div style="height: 100%;  min-height: 200px; background-image: url(images/Demo/elements/parallax1.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">
  <div class="container1170">
    <h3>Diagnosed already? Contact our specialists &nbsp;&nbsp;&nbsp;<a class="uk-button uk-button-large uk-button-danger">Make an appointment</a></h3>
  </div>
</div>

8. Testimonials



RokSprocket Module > Quotes Layout
Module Position: bottom1
Show Title: show
Module Class Suffix: title1

9. Our Partners



Custom HTML Module
Module Position: bottom5
Show Title: hide
Module Class Suffix: none

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}" class="uk-grid">

  <div class="uk-width-medium-2-5">
    <div class="sp-module title2">
    <h3 class="sp-module-title">Our Partners</h3>
    <p class="uk-text-gray">Placebo works with companies, non-profit organizations and people worldwide to provide the best health services possible. We value our partners and the relations we have built with them.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/partner1.png" alt="Amazing Partners We Trust">
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/partner2.png" alt="Amazing Partners We Trust">
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/partner3.png" alt="Amazing Partners We Trust">
  </div>

</div>

1. Call Center/ Emergency



Custom HTML Module
Module Position: parallax1
Show Title: hide
Module Class Suffix: none

<div class="uk-grid uk-grid-collapse" style="margin-bottom: -1px;">

<div class="uk-width-medium-1-2 uk-text-right">
<div class="sp-module title3">
<h3 style="margin-top: 10px;"><i class="uk-icon-phone"></i> Call Center <a href="tel:+122212121">+ 01 222 12 12 1</a></h3>
</div>
</div>

<div class="uk-width-medium-1-2">
<div class="sp-module title4">
<h3 style="margin-top: 10px;"><i class="uk-icon-ambulance"></i> Emergency <a href="tel:+122212122">+ 01 222 12 12 2</a></h3>
</div>
</div>

</div>

2. Home Clinic/ Hospital ARTICLE




<div class="sp-module title1"><h3 class="sp-module-title">Medical Departments</h3></div>

<div style="height: 100%; min-height: 500px;  background-image: url(images/Demo/elements/parallax5.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-contrast uk-text-center uk-flex uk-flex-center uk-flex-middle">

<div class="uk-grid uk-grid-collapse">

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept1.jpg"></span></a><h4>OB/ GEN</h4><p>Abdominals asthma canine teeth cerumen complete blood count (cbc) disinfectants.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept2.jpg"></span></a><h4>Neonatology</h4><p>Bolus bronchodilator constipation dislocation keratin mucus nasal cavity symptoms.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept3.jpg"></span></a><h4>Pediatrics</h4><p>Aerobic activity allergy arteries and veins cancer cardiologist chromosomes controller.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept4.jpg"></span></a><h4>Dermatology</h4><p>Acne adhd alcoholism anesthesia autoimmunity bacteria blackhead blood bank bolus bronchodilator.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept5.jpg"></span></a><h4>Ophthalmology</h4><p>Airways allergen allergist arthritis cochlea cone contagious dna enamel enuresis epistaxis.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept6.jpg"></span></a><h4>Cardiology</h4><p>Abrasion allergy-triggered asthma cardiologist caries chromosomes contact lenses dust mites.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans2">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept7.jpg"></span></a><h4>Gastroenterology</h4><p>Blood bank braces hydrocortisone nebulizer nutrition pediatric endocrinologist pollen tragus.</p>
  </div>
</div>

<div class="uk-width-medium-1-4 boxme-trans1">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <a href="index.php/clinic-hospital/medical-department-example-page"><span class="hi-icon"><img class="uk-border-circle" alt="Medical Departments" src="images/Demo/elements/dept8.jpg"></span></a><h4>Oncology</h4><p>Alignment anesthesia blood glucose meter body type bronchodilator bruise carbohydrate.</p>
  </div>
</div>

</div>

</div>

3. Hospital Highlights



RokSprocket Module > Lists Layout > Portrait Layout
Previews per page: 5
Strip HTML Tags: No


Module Position: position1
Show Title: show
Module Class Suffix: title2

Item Title code:

<i class="pe-7s-science pe-lg pe-va pe-spin uk-text-primary"></i>  Heart & Vascular Care

4. Meet Our Doctors



Custom HTML Module
Module Position: position2
Show Title: show
Module Class Suffix: title2

<br><p>Every month we are presenting one of our amazing doctors. This month is time for Brooklin Stevens, who is head of the Oncology clinic.</p><br>

<div class="uk-grid">

<div class="uk-width-medium-1-2">
<img class="boxme" src="images/Demo/elements/team1.jpg" alt="Our Care Team" />
</div>

<div class="uk-width-medium-1-2 sp-module title3">
<h4>Brooklin Stevens</h4>
<p>Clinic Chief</p>
<p>Brooklin is the managing director at Placebo for almost 3 years and he dedicates all his efforts to make the life of our patients in Placebo easy.</p>
<p>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
</p>
</div>

</div>


5. Capacity of the Clinic | Clinical Trials



Custom HTML Module
Module Position: position5
Show Title: hide
Module Class Suffix: none

<div class="uk-grid">

<div class="uk-width-medium-1-2">
<div class="sp-module title2"><h3 class="sp-module-title">Clinical Trials</h3></div>

<a href="images/Demo/elements/trials.jpg" data-uk-lightbox="" title="Clinical Trials At Placebo">
   <figure class="uk-overlay uk-overlay-hover">
    <img width="800" height="600" src="images/Demo/elements/trials.jpg" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-ignore">Clinical trials are experiments<br>done in clinical research.<br>Such prospective biomedical or behavioral<br>research studies on human<br>participants are designed to answer<br>specific questions<br><br><a href="#" class="uk-button uk-button-danger">Primary Button</a></figcaption>
   </figure>
</a>
</div>

<div class="uk-width-medium-1-2">

<div class="sp-module title2"><h3 class="sp-module-title">Capacity of the Clinic</h3></div>

<div class="uk-grid">
<div class="uk-width-medium-1-2">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Capacity', 'Percentage'],
          ['PHP', 92],
          ['', 8],
        ]);

       var options = {
          pieHole: 0.3,
          legend: 'none',
          fontName: "Merriweather,sans-serif",
          backgroundColor: 'transparent',
          pieSliceTextStyle: {
            color: '#fff',
          },
         tooltip: { trigger: 'none' },
          slices: {
            0: { color: '#2184df' },
            1: { color: '#e91c2d', tooltip: { trigger: 'none' } }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart2'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      }
    </script>
    <div id="donutchart2" style="height: 250px;"></div>
<h5 class="uk-text-center">2014</h5>
<div class="uk-text-center">We registered - 8% inpatient care includes deliveries and 92% out-patient care.</div>
</div>
<div class="uk-width-medium-1-2">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Capacity', 'Percentage'],
          ['HTML', 75],
          ['', 25],
        ]);

      var options = {
          pieHole: 0.3,
          legend: 'none',
          fontName: "Merriweather,sans-serif",
          backgroundColor: 'transparent',
          pieSliceTextStyle: {
            color: '#fff',
          },
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: '#2184df' },
            1: { color: '#e91c2d', tooltip: { trigger: 'none' } }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart3'));
        chart.draw(data, options);
        function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
      }
    </script>
    <div id="donutchart3" style="height: 250px;"></div>
<h5 class="uk-text-center">2015</h5>
<div class="uk-text-center">We registered - 25% inpatient care includes deliveries and 75% out-patient care.</div>
</div>

</div>

</div>

</div>

6. Milestones



Custom HTML Module
Module Position: parallax2
Show Title: hide
Module Class Suffix: none

<div style="height: 100%; background-image: url(images/Demo/elements/parallax6.jpg); background-color: #2d7091; background-repeat: no-repeat;"  data-uk-parallax="{bg: -300}"class="uk-text-contrast">

<div style="padding-top:70px;" class="sp-module title1"><h3 class="sp-module-title">Milestones</h3></div>
<p><img data-uk-scrollspy="{cls:'uk-animation-slide-top', delay:300}" class="uk-container-center" src="images/Demo/elements/line.png" alt="Milestones"></p>
<br>

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:600}" class="uk-grid  uk-container-center">

<div class="uk-width-medium-1-4 uk-text-center boxme-trans1">
<h2>1999</h2>
<p class="uk-text-primary">Placebo Hospital opens</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center boxme-trans2">
<h2>2003</h2>
<p class="uk-text-primary">Children's surgeons perform the first multi-visceral organ transplant</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center boxme-trans1">
<h2>2009</h2>
<p class="uk-text-primary">Cancer Clinic Founded</p>
</div>

<div class="uk-width-medium-1-4 uk-text-center boxme-trans2">
<h2>2015</h2>
<p class="uk-text-primary">Orphan Disease Research Center founded</p>
</div>

</div>

</div>

7. Patient Stories



RokSprocket Module > Quotes Layout
Previews per page: 2
Items per Row: 2

Module Position: bottom1
Show Title: show
Module Class Suffix: title1

8. Awards



Custom HTML Module
Module Position: bottom5
Show Title: hide
Module Class Suffix: none

<div data-uk-scrollspy="{cls:'uk-animation-slide-bottom', delay:300}" class="uk-grid">

  <div class="uk-width-medium-2-5">
    <div class="sp-module title2">
    <h3 class="sp-module-title">Awards</h3>
    <p class="uk-text-gray">Placebo is among the best hospitals in the last 10 years, delivering top-notch quality medical care. Only this year we have served 1500 patients and saved almost 500 souls.</p>
    </div>
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/award1.png" alt="Placebo Awards">
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/award2.png" alt="Placebo Awards">
  </div>

  <div class="uk-width-medium-1-5">
    <img src="images/Demo/elements/award3.png" alt="Placebo Awards">
  </div>

</div>

1. Services



Custom HTML Module
Module Position: top3
Show Title: Show
Module Class Suffix: title1

<div class="uk-grid">

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
    <span class="hi-icon pe-7s-like"></span><h4>Medical Care</h4><p>Placebo Nursing Home offers 24 hours dedicated medical care for all residents. Special cares can be provided as well.</p>
  </div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"><span class="hi-icon pe-7s-users"></span><h4>Daily Assistance</h4><p>Assistance with all activities of daily living, which include bathing, dressing, toileting, hygiene and transferring.</p></div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"><span class="hi-icon pe-7s-bicycle"></span><h4>Activities</h4><p>Activities, including daily exercise, watching movies, listening to music, reminiscing and non-denominational services.</p></div>
</div>

<div class="uk-width-medium-1-4">
  <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b"><span class="hi-icon pe-7s-date"></span><h4>Events</h4><p>Crafts courses, computer and language lessons, balls, Social Soiree Nights, Opera and theater visits and many more.</p></div>
</div>
</div>

2. Placebo Nursing Home Houses



Custom HTML Module
Module Position: top7
Show Title: Show
Module Class Suffix: title1

<div data-uk-grid-margin="" class="uk-grid uk-grid-width-medium-1-2">

<div class="">
  <a title="Floor Plans" data-uk-lightbox href="images/Demo/elements/plans.jpg">
   <figure class="uk-overlay uk-overlay-hover">
    <img width="800" height="600" alt="Floor Plans" src="images/Demo/elements/plans.jpg">
    <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-ignore"><i class="uk-icon-search"></i> Placebo Standard House Plans</figcaption>
   </figure>
  </a>
</div>

<div class="">
  <h4 class="uk-text-primary">Why to choose us</h4>
  <p>Placebo Nursing Home offers 1 floor houses with 2 rooms and additional kitchen. Placebo Nursing Home provides 24 hours professional medical care for our residents.</p><br>
  <h4 class="uk-text-primary">Why we are better</h4>
  <p>Among all other great features we provide room service, housekeeping, television and internet access, telephone, walk-in closet, hairdresser, spa and recreational activities.</p><br>
  <ul class="spot uk-list-space">
  <li>2 standard rooms  <em>- bedroom, living room + kitchen</em></li>
  <li>Balcony and free parking  <em>- mountain view</em></li>
  <li>Housekeeping <em>- daily</em></li>
  <li>Television + Internet + Telephone  <em>- satelite and viber</em></li>
  <li>24 hours medical services  <em>- best specialists</em></li>
  </ul>
</div>

</div>

3. Placebo In Pictures



Custom HTML Module
Module Position: user1
Show Title: Show
Module Class Suffix: title1

<div data-uk-grid-margin="" class="uk-grid uk-grid-width-medium-1-4 uk-grid-collapse">


  <a title="Compliments" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home1.jpg">
    <img width="600" height="400" alt="Compliments" src="images/Demo/elements/home1.jpg">
  </a>



  <a title="Guest room" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home2.jpg">
    <img width="600" height="400" alt="Guest room" src="images/Demo/elements/home2.jpg">
  </a>


  <a title="Bedroom 1" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home3.jpg">
    <img width="600" height="400" alt="Bedroom 1" src="images/Demo/elements/home3.jpg">
  </a>



  <a title="Accessoires" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home4.jpg">
    <img width="600" height="400" alt="Accessoires" src="images/Demo/elements/home4.jpg">
  </a>



  <a title="Couch" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home5.jpg">
    <img width="600" height="400" alt="Couch" src="images/Demo/elements/home5.jpg">
  </a>



  <a title="Restaurant" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home6.jpg">
    <img width="600" height="400" alt="Restaurant" src="images/Demo/elements/home6.jpg">
  </a>



  <a title="Bedroom 02" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home7.jpg">
    <img width="600" height="400" alt="Bedroom 2" src="images/Demo/elements/home7.jpg">
  </a>



  <a title="Book Club" data-uk-lightbox="{group:'group1'}" href="images/Demo/elements/home8.jpg">
    <img width="600" height="400" alt="Book Club" src="images/Demo/elements/home8.jpg">
  </a>


</div>

4. Parallax | Nursing Home Video



Custom HTML Module
Module Position: parallax1
Show Title: hide
Module Class Suffix: none

<div style="height: 100%; min-height: 500px;  background-image: url(images/Demo/elements/parallax2.jpg); background-color: #2d7091; background-repeat: no-repeat;" data-uk-parallax="{bg: -300}" class="uk-text-center uk-flex uk-flex-center uk-flex-middle">

<div class="uk-width-medium-1-2 inverted">
<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1b">
<a data-uk-lightbox href="https://www.youtube.com/watch?v=YE7VzlLtp-4"><span class="hi-icon pe-7s-disk"></span></a>
</div>
<br>
<h4>Placebo Nursing Home Review</h4>

</div>
</div>

5. Our History + Our Mission



ARTICLE: Nursing Home

<div class="sp-module title1"><h3 class="sp-module-title">Our History</h3></div>

<div class="uk-grid">

<div class="uk-width-medium-1-3 uk-text-center">
        <h4 class="title-dash">1989 - 1996</h4>
        <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.</p>
</div>

<div class="uk-width-medium-1-3 uk-text-center">
        <h4 class="title-dash">1997 - 2006</h4>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam nisi ut aliquid ex ea commodi conseq.</p>
</div>

<div class="uk-width-medium-1-3 uk-text-center">
        <h4 class="title-dash">2007 - 2015</h4>
        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.</p>
</div>

</div>
<br><br>

<hr class="exampleone"/>
<div class="sp-module title1"><h3 class="sp-module-title">Our Mission</h3></div>

<div class="uk-grid uk-grid-divider-2">

<div class="uk-width-medium-1-3 uk-text-center">

<div class="uk-overlay">
<img class="uk-border-circle" title="Step 1" src="images/Demo/elements/mission1.png" alt="step 1" />
<div class="uk-overlay-area uk-border-circle">
<div class="uk-overlay-area-content">
<h4>Premium quality senior care</h4>
</div>
</div>
</div>

</div>

<div class="uk-width-medium-1-3 uk-text-center">

<div class="uk-overlay">
<img class="uk-border-circle" title="Step 1" src="images/Demo/elements/mission2.png" alt="step 1" />
<div class="uk-overlay-area uk-border-circle">
<div class="uk-overlay-area-content">
<h4>Premium facilities and houses</h4>
</div>
</div>
</div>

</div>

<div class="uk-width-medium-1-3">

<img class="uk-border-circle uk-align-center" title="Step 1" src="images/Demo/elements/mission3.png" alt="step 1" />

</div>

</div>

6. Appointments



Custom HTML Module
Module Position: position1
Show Title: hide
Module Class Suffix: none

<div class="uk-grid">

  <div class="uk-width-medium-1-3">
  <h3><input type="text" class="uk-width-1-1" placeholder="Full Name"></h3>
  </div>

  <div class="uk-width-medium-1-3">
  <h3><input type="text" class="uk-width-1-1" placeholder="Age"> </h3>
  </div>

  <div class="uk-width-medium-1-3">
  <h3><a href="#" class="uk-button uk-button-success">Sign Here</a> <a href="images/Demo/elements/placebo-brochure.pdf" target="_blank" class="uk-button uk-button-primary">Download Brochure</a></h3>
  </div>

</div>

7. Daily Schedule



Custom HTML Module
Module Position: position5
Show Title: show
Module Class Suffix: title1

<div class="uk-grid uk-grid-divider">

<div class="uk-width-medium-1-5 uk-text-center">
<h1><i class="pe-7s-sun"></i></h1>
<h5>Breakfast</h5>
<p>Between 07:00 and 09:30, available for all residents</p>
</div>

<div class="uk-width-medium-1-5 uk-text-center">
<h1><i class="pe-7s-radio"></i></h1>
<h5>Free Time</h5>
<p>Socialize or attend one of the club meetings</p>
</div>

<div class="uk-width-medium-1-5 uk-text-center">
<h1><i class="pe-7s-users"></i></h1>
<h5>Lunch</h5>
<p>Between 12:30 and 14:30, available for all residents</p>
</div>

<div class="uk-width-medium-1-5 uk-text-center">
<h1><i class="pe-7s-scissors"></i></h1>
<h5>Free Time</h5>
<p>Hobby time - do your favorite things</p>
</div>

<div class="uk-width-medium-1-5 uk-text-center">
<h1><i class="pe-7s-wine"></i></h1>
<h5>Dinner</h5>
<p>Between 18:30 and 20:30, available for all residents</p>
</div>

</div>

8.Coming Events



RokSprocket Module > Mosaic Layout > Default theme
Columns: 3
Strip HTML tags: No

Module Position: bottom1
Show Title: show
Module Class Suffix: title1

Item Title code:

Movie Night <span style="float: right;" class="uk-badge uk-badge-primary">23.10.2015</span>

Responsive Time Table Example:

If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div> element and add the .uk-overflow-container class. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.


<div class="uk-overflow-container">
<table class="uk-table uk-table-hover uk-table-condensed">
  <thead>
    <tr>
      <th>Hours</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>09:00 - 11:00</td>
      <td>Neonatology<p>Amanda Pierson, PhD</p></td>
      <td>Pediatrics<p>Stephen Dorph, MD</p></td>
      <td>OB/ GEN<p>Peter Nathan, MD</p></td>
      <td>Gastroenteroly<p>Santiago Lima, MD</p></td>
      <td>Dermatology<p>Ellen Mondo, MD</p></td>
      <td>Oncology<p>Joseph Lincoln, MD</p></td>
      <td>Cardiology<p>Justin Young, MD</p></td>
    </tr>
    <tr>
      <td>11:00 - 13:00</td>
      <td>Cardiology<p>Justin Young, MD</p></td>
      <td>Neonatology<p>Amanda Pierson, PhD</p></td>
      <td>Pediatrics<p>Stephen Dorph, MD</p></td>
      <td>OB/ GEN<p>Peter Nathan, MD</p></td>
      <td>Gastroenteroly<p>Santiago Lima, MD</p></td>
      <td>Dermatology<p>Ellen Mondo, MD</p></td>
      <td>Oncology<p>Joseph Lincoln, MD</p></td>
    </tr>
    <tr>
      <td>13:00 - 15:00</td>
      <td>Oncology<p>Joseph Lincoln, MD</p></td>
      <td>Cardiology<p>Justin Young, MD</p></td>
      <td>Neonatology<p>Amanda Pierson, PhD</p></td>
      <td>Pediatrics<p>Stephen Dorph, MD</p></td>
      <td>OB/ GEN<p>Peter Nathan, MD</p></td>
      <td>Gastroenteroly<p>Santiago Lima, MD</p></td>
      <td>Dermatology<p>Ellen Mondo, MD</p></td>
    </tr>
    <tr>
      <td>15:00 - 17:00</td>
      <td>Dermatology<p>Ellen Mondo, MD</p></td>
      <td>Oncology<p>Joseph Lincoln, MD</p></td>
      <td>Cardiology<p>Justin Young, MD</p></td>
      <td>Neonatology<p>Amanda Pierson, PhD</p></td>
      <td>Pediatrics<p>Stephen Dorph, MD</p></td>
      <td>OB/ GEN<p>Peter Nathan, MD</p></td>
      <td>Gastroenteroly<p>Santiago Lima, MD</p></td>
    </tr>
    <tr>
      <td>17:00 - 19:00</td>
      <td>Gastroenteroly<p>Santiago Lima, MD</p></td>
      <td>Dermatology<p>Ellen Mondo, MD</p></td>
      <td>Oncology<p>Joseph Lincoln, MD</p></td>
      <td>Cardiology<p>Justin Young, MD</p></td>
      <td>Neonatology<p>Amanda Pierson, PhD</p></td>
      <td>Pediatrics<p>Stephen Dorph, MD</p></td>
      <td>OB/ GEN<p>Peter Nathan, MD</p></td>
    </tr>
    <tr>
      <td>19:00 - 20:30</td>
      <td>OB/ GEN<p>Peter Nathan, MD</p></td>
      <td>Gastroenteroly<p>Santiago Lima, MD</p></td>
      <td>Dermatology<p>Ellen Mondo, MD</p></td>
      <td>Oncology<p>Joseph Lincoln, MD</p></td>
      <td>Cardiology<p>Justin Young, MD</p></td>
      <td>Neonatology<p>Amanda Pierson, PhD</p></td>
      <td>Pediatrics<p>Stephen Dorph, MD</p></td>
    </tr>
  </tbody>
</table>
</div>
<p>Visiting Hours: <span class="uk-text-primary">8:30am - 9pm</spam>, except in the ICU</p>

Menu Item Type: Single Contact

Select Contact: select your contact (you need to make the contact first from Components > Contact > New

By doing this you will have the contact form like the one in the demo on the bottom of the page.

 

The second important thing from the Contacts Page is the Map.

Contact Map

BT Google Maps Type Module
Show Title: Hide
Module Position: slide

Custom Infobox:

background :#ffffff,
padding : 60px,
width: 400px,

Box Position: 200,0

closeButton Margin: -30px

Images & Videos used in the demo site and NOT included in the download file: