The Last Supper

Video: Embedded Youtube Video

This is a hand-coded website, it is not based on any template, Theme or third-party software. This site is a so-called "one-page site", an example of a pure HTML5/CSS3 site with semantically correct coding. It is created to show the non-template/non-CMS-related hand-coding that mimicks the techniques used in modern, mostly templated, pre-programmed packages. This site can be used as a template itself, to become a homepage for any HTML5 or PHP-based site, including any PHP-based CMS systems. This website is coded to be responsive.

Menu has a rotating star icon and double-changing of colors on mouse-over - all CSS3 tricks. It is also linked to different parts of this one-page website.

View Parallax Effect, Google Fonts, Font Awesome Icons, and a Standalone (platform-independent) HTML5/CSS3/JQuery Slider.

layer

STANDALONE SLIDER

layer

STANDALONE SLIDER

CUSTOMIZABLE

CSS3 ROTATION

layer

SOME OTHER WORDING

layer

Easy to edit CSS

Smooth animation

Massive amount of features

layer

JQuery/CSS3/JavaScript Layered Slider

Hand-coded Page

How to write your own HTML5 from scratch:

This one-page site is programmed by hand, meaning that all the HTML5/CSS3 was written from scratch. Learn your HTML5 and CSS3 and write your own websites! Enjoy viewing!

Slider Above

A JQuery, CSS and JavaScript Image/Text/Video Slider:

A couple of files were borrowed from a LayerSlider software package. Very customizable, as many sub-layers (text/images/video) as you want, background moves in 4 directions.

Hand-coded Parallax

Below is the Parallax Effect section:

An example of a very popular (and trendy) Parallax Effect, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page.

Here is the text on top of the container with a Parallax Effect background.

Font Awesome

Font Awesome awesomeness on this site:

All the icons on this site, except for the 6 big graphic ones, are Font Awesome icons. Font Awesome is a font and icon toolkit based on CSS and LESS.

Video Background

Below is an example of a video background:

This is an example of a (local) HTML5 video arrangement that serves as a background for other layers (text/images/video). It will have a text layer on top of it (further development).

Google Fonts

View a few amazing
Google Fonts:

This site includes very nice "techy" Fonts. These are Google Fonts - free hosted web fonts. Google Fonts are very popular and from 2010 are a useful addition to Web Development kit.

Text and image on top of the Video Background. This is an example of a local HTML5 video that acts as a background for text/video/images/links/buttons, with an inset box-shadow effect and a mesh overlay - all mostly the trickery of putting the HTML5 containers in a special order and writing proper CSS for them.

In The News

Cable TV Blackout in The Twelve Colonies

Tuesday, September 16, 2015

Earth Appears Not to be Where it Was Before

Thursday, September 18, 2015

Cloud 9 Closed for Renovation

Friday, September 19, 2015

Event Calendar

New Caprica City Municipal Bake Sale and Singing Contest

Tuesday, September 16, 2015

Annual Sixes and Eights Mixer

Thursday, September 18, 2015

2015 Raptor Maintenance and Repair Conference

Friday, September 19, 2015

This is an example of a (local) HTML5 video, with a box-shadow effect and a mesh overlay. Also, as the 3rd layer, an animated PNG is added with this text - all on top of the video. Press the "Play" button and this video will play indefinitely.