Here we go. Let’s start with images. Have alook at different methods they’re placed. Donec vitae sapien ut libero veneatis faucibus. Nullam quis ante. Etiam sit amt orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Move your mouse here. Sapien vestibulum purus quam, scelrisque ut, mollis sed, nonummy id, metus. Nullam acumsan lorem in dui. Cras ultricies mi eu turpis vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros fucibus tinciunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut.
Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Headline One looks like this
Notice, this is new section of this page. And this is a yellow highlight. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.
Headline Two looks like this
Vestibulum ante ipsum primis and this is italic in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit.
Headline Three and smaller look like this
Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
This is a quote between horizontal lines, and with a vertical bar aside. It’s full width in this example, but have a look at another example below.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa qui.
This is a quote without any bars. Its size is fixed to 200 pixels and it’s on the right.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec semi.
Lists – with icons, with links, unordered and ordered
-
- List item
- Second one
- Another item
- Almost done
- Last list item
-
- List item
- Second one
- Another item
- Next item
- Almost done
- Last list item
-
- List item
- Second one
- Another item
- Next item
- Almost done
- Last list item
Tabs
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, this is highlighted text pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
Sapien vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis vitae sapien ut libero venenatis faucibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Notices / messages & toggles
-
These are notices / messages, which can have any icon and optionally a close button. Good message first:
Attention message:
Important or critical message:
Neutral messsage with any text and icon:
-
Time is powerful multipurpose WordPress theme suitable for variety of site types: creative portfolio, big corporate site, personal blog, product-oriented site, video gallery & photo album – you name it.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut. Venenatis vitae, integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiata, tellus. Phasellus viverra nulla ut metus varius laoreet.
ThemeForest is an Envato Marketplace. At ThemeForest you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal with prices ranging from just $5 up to $40. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of web designers and developers and is the biggest marketplace of its kind.
I provide free support for all buyers. You can ask your questions in the comments section of the item you’ve bought, or contact me directly using contact form on my profile page.
Tables
Header column | Another column | Example |
---|---|---|
Nullam dictum felis eu pede. | Aenean leo ligula, porttitor eu. | quisque |
Vivamus elementum semper. | Aliquam lorem ante. | rhoncus |
Aenean leo ligula, porttitor eu. | Ultricies mi eu turpis hendrerit fringilla. | vitae |
Nullam accumsan lorem in dui ultricies mi eu turpis fringilla. | Nullam dictum felis eu pede. | libero |
Aliquam lorem ante. | Nullam accumsan lorem in dui. | sapien |
Scroller
First one is sensitive on mouse movement and second has buttons to scroll. Notice, both types of these containers work like the second one on all touch devices. Each image can link to any URL or open a bigger preview. Grayscale effect, like here, can be used in any gallery. More informations and examples are in the theme documentation.
And the second one with buttons and no hover effect:
Columns
-
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida.
- Fusce vulputate eleifend sapersan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in fauci.
-
Dropcap looks like this. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec soda les sagittis magna. Sed conses quat, leo eget bibendum sodales, velit cursus.
- Fusce vulputate eleifend sapersan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum.
-
Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna miaslibero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
-
Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec soda les sagittis magna.
-
Fusce vulputate eleifend sapersan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.
-
Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna miaslibero. Fusce vulputate eleifend sapien.
-
Fusce vulputate eleifend sapersan. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.
Fonts
You can use one of hundreds fonts form the built-in library, or upload your own one, and use it anywhere on a site. This one is called Pacifico.-
Code
.contact-form .load { animation-name: load-rotate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; display: none; position: absolute; margin-left: 10px; }
-
Buttons
There are 3 sizes, and each button can have any icon:
And plenty of icons: etc. Thank you