Yoghourt V1.1
Free CSS Template
This template is released under the Creative Commons Attribution v2.5.
Intro
When I first started web design, I learned a lot from free templates taken from OSWD - Open Source Web Design and other similar websites.
The Template Yoghourt is, for me, a good way to give back to the Open Source Community. I hope you will make good use of it and learn as much as I could learn from others.
I also want to thank Pat Heard for his advices and his support when I first started web design. His help has been more than welcome.
Licenses
This free template is released under the Creative Commons Attribution v2.5. This means that you are free:
- to copy, distribute, display, and perform the work
- to make derivative works
- to make commercial use of the work
Under the following conditions:
- You must attribute the work in the manner specified by the author or licensor. (In this case, leaving the link to my site in the sidebar at the bottom.
- For any reuse or distribution, you must make clear to others the license terms of this work.
- Any of these conditions can be waived if you get permission from the copyright holder (that's mean, me!)
And now some examples
Now, I will put some HTML example you might probably need in your website or blog:
List Example:
- List 1
- List 2
- List 3
Blockquote Example:
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
Images Example:
By default, all images have a border. If you want to remove it you will need to apply the class "noborder" to your image. For example, <img class="noborder" src="images/yourimage.jpg" /> (you can use this class for the sidebar as well). And the result:
you can also wrap your text around the image by applying the class "alignleft" to your image.
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.
Or you can do the same but with the image floating on the right instead. It can be done with the class "alignright".
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.