Hobby Photography

the Info page

The Services, Info and About page are generic-type pages. In general, your page content will be textual, maybe with an image. Use the Info page to supply additional information about your business, such as your location, studio ammenities, client list, etc.

---

Advanced formatting with HTML

Optionally, you may use HTML to format your content using some of the advanced formatting available in CE3. Examples follow, and more information may be had in our online documentation.

---

Font Awesome

...

CE3 is preloaded with Font Awesome, a vector-based icon library. You may deploy icons anywhere that the engine accepts HTML, or via PHPlugins. For a full list of available icons and how to use them, visit the Font Awesome website at http://fortawesome.github.com/Font-Awesome/.

---

Section Dividers

As seen on this page, divide sections using a horizontal rule:

<hr />

---

Inline Images

You can place images inline with text using the HTML<img /> element.

If referencing images from your filmstrip, you should know that large images are in the photos/ folder and thumbnail images in the thumbnails/ folder. You may assign the classes float-left, float-right or inline-image to position the image, or omit a class and the image will be placed as centered block elements. You may use the inline style attribute to set width, borders, margins, etc. Use the snippets below as examples.

<img alt="Some Text" class="float-left" src="photos/my-photo.jpg" style="max-width: 400px; border: 1px solid #000;" />

<img alt="Some Text" class="float-right" src="thumbnails/my-photo.jpg" />

<img alt="Some Text" class="inline-image" src="resources/images/favicon.png" />

---

Tables

The CE3 framework allows for “responsive tables”, the layout for which will change when viewed on small displays, making tables easier to read on devices such as iPhones. The formatting for tables is therefore very specific.

Surname	Given Name	Gender	Year of Birth
Finn	Liam	male	1984
Nicks	Stevie	female	1948
Shields	Kevin	male	1963
Simon	Émilie	female	1978

In the code above, note the use of <thead> and <th> tags to establish headings for the table cells.

Avoid using rowspan and colspan table attributes.

You can prevent a table being responsive by applying the class “not-responsive” to your <table> element:

<table class="not-responsive">

You may freely use the rowspan and colspan attributes on tables which are not responsive, but these tables will not readjust on small devices.

---

Responsive Grid Framework

CE3 includes its own responsive grid scaffolding supporting 12-column or 16-column grid layouts. For details, see the online documentation. Here’s an example using three columns:

---