We recommend using markdown for basic content editing, because it is fast to write, easy to read and prevents html-coding errors. Read more about markdown or check this tutorial. Although markdown is preferred for basic content editing, you will often need to use html for more complicated stuff.
Hi! My name is Bob Dobalina, and this website is my blog as well as a playground for the X3 Photo Gallery website CMS. View Demo
About me I am interested in design, functionality, minimalism and performance. My hobbies are sleep-walking, planking and fishing.
Article More than a decade ago, when SWF was an emerging technology, this website became a very popular showcase of Flash. See Post
Easily add icons into your page designs with the included Font Awesome. Font icons are vector-based, so they look good at any size, and can be styled with CSS.
Add any elements to your contact form. All data will be forwarded by email.
The modal plugin allows you to open popup dialog windows, useful for displaying relevant information. Modals are usually triggered by buttons, but can also be triggered on page-load.
Open Modal
The modal plugin allows you to open popup dialog windows
Simply add a modal to your page. The modal will be hidden until triggered:
Modal PluginAdd your modal content here. Any HTML is supported.
Add your modal content here. Any HTML is supported.
Add a button or anchor to trigger a modal with a specific ID on click:
Open Modal buttonOpen Modal link
data-reveal-open Add the data-reveal-open attribute to automatically open the modal on page-load.
data-reveal-open
data-reveal-open-once Use the data-reveal-open-once attribute instead, to open the modal only once per visitor.
data-reveal-open-once
url#modal=id Trigger a modal to open by URL.
The tabs plugin allows you to easily add an interactive tabs section anywhere in your content. Tabs can be useful to separate related content into clickable sections. Choose from horizontal or vertical orientation, three styles and several helper classes. Tabs respond appropriately on small (mobile) screens, and page will scroll to fit tabs when there is extensive content.
To create a tabs-layout, you need to use the following code:
Tab 1Tab 2Tab 3Tab 4This is the first panel of the basic tab example. You can place all sorts of content here including a grid.This is the second panel of the basic tab example. This is the second panel of the basic tab example.This is the third panel of the basic tab example. This is the third panel of the basic tab example.This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
vertical Include the vertical class in both your UL tabs element and your tabs-content element set vertical tabs orientation, instead of the default horizontal orientation.
tabs-style-1tabs-style-2 Include any style class in your tabs-container element, to add a style different from the default style.
tabs-anim Include the tabs-anim class in your tabs-container element to make your tabs fade in on change.
tabs-radius Include the tabs-radius in your tabs-container element class to give your tabs rounded corners.
tabs-color-active Include the tabs-color-active class in your tabs-container element to colorize the active tab.
tabs-wide Include the tabs-wide class in your tabs-container element to make your tabs wider. * Only applies for horizontal tabs orientation.
tabs-smalltabs-large Include the tabs-small or tabs-large class in your tabs-container element to make your tabs smaller or bigger. Does not apply for small (mobile) screens.
tabs-centertabs-right Include the tabs-center or tabs-right class in your tabs-container element to make your tabs align center or right, instead of the default left. * Only applies for horizontal tabs orientation.
tabs-width-30tabs-width-50tabs-width-auto Include the tabs-width-30, tabs-width-50 or tabs-width-auto class in your tabs-container element to set the % width of your vertical orientation tabs, instead of the default 20%.* Only applies for vertical tabs orientation.
small-block-grid-* Include the small-block-grid-* class in your UL tabs element to make your tabs justify to full width. Replace the * with the amount of tabs you have. * Only applies for horizontal tabs orientation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac rutrum est. Aliquam sit amet risus aliquet, sagittis risus eu, facilisis ex. Fusce eu neque et purus accumsan maximus maximus nec lacus. Nulla auctor augue ut fermentum venenatis. Donec volutpat ullamcorper felis, in tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eleifend finibus tellus, et consectetur nulla pellentesque eu. In et justo risus. Donec sed dolor sit amet dolor cursus aliquam ut vel justo. Praesent sed quam diam. Duis scelerisque lectus non venenatis elementum.
Ok! Etiam id commodo lorem. Nulla maximus fermentum nibh eget consectetur. Suspendisse luctus nunc orci, eget varius arcu tempor non. Duis ac efficitur augue, eu sollicitudin nisi. Praesent ligula tellus, consequat non tellus sit amet, fringilla gravida justo. Duis in justo at magna ornare tristique quis non risus. Fusce feugiat finibus urna quis rhoncus. Praesent feugiat eget tortor quis imperdiet. Praesent nulla lacus, ornare vel velit non, efficitur fringilla nibh. Cras nisi sapien, dapibus pretium nunc a, rhoncus tincidunt urna. Donec tristique nunc turpis, sed aliquam leo tincidunt sit amet. Integer vitae vehicula elit. Pellentesque aliquet nisi sit amet ullamcorper facilisis. Morbi quis turpis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Alert boxes allow you to emphasize content by adding it inside a box. [code]
This is a simple alert-box with text and images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, risus quis malesuada fringilla, metus nulla consectetur mi, a ullamcorper mi eros et mi. Pellentesque facilisis libero at orci finibus porta quis eget urna.
To add an alert-box, simply add your content inside the following html:
Your html/content here
You can choose from the following color tagsbg2bg3primaryalertwarningsuccessinfodefault
label Use labels to add emphasis to any content.
Text
You can choose from the following color tags:
primaryalertwarningsuccessinfodefaultbg2bg3
Use the code highlighter to colorize code for easy viewing and copying. Useful for technical articles.
var googoo = 'gaga'; function get_googoo(){ return googoo; } get_googoo(); // returns 'gaga'
Sometimes you want to hide long sections of content until the visitor chooses to view more. Simply add a toggle button link, and an element that contains the hidden content. You can toggle any kinds of content and the toggle link can be before or after the hidden content. Toggle can also be effective to create FAQs or to simply hide long image descriptions like in this example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique quis justo luctus pulvinar. Nulla venenatis lacus eget sapien pretium dignissim. Duis feugiat magna vitae fermentum euismod.more
code
This text is hidden.moremoreThis text is hidden.OPENThis text is hidden.