Website Page Templates - Html/CSS
$100-500 USD
Maksettu toimituksen yhteydessä
I am essentially looking for a set of page templates for a website. I have very distinct visual requirements. I am looking for templates because I want to test different combinations of color, logo, content, etc. I will need instructions and/or notation where I can substitute colors, pictures, logo, keywords, and written content.
The pages are relatively simple, with little dynamic options. I do not want to be sold on alternative programming languages, I need to be able to understand what I am looking at and changing. HTML and CSS is what I have the most experience with and I want to be able to change and maintain the site myself. I understand that there will need to be some JavaScript for the dynamic effects and possibly PHP for the email requirements. I can accept those scripts as part of the solution, because they will not need editing by me.
## Deliverables
There will be three main page types. The head and foot of each page will be exactly the same. The middle section will be 1, 2, or 3 columns or sections (panels). I have actually coded the pages myself, but being inexperienced there are tweaks needed with my version (missing border, improper spacing, etc.) that have exhausted my patience. Thus, I am looking for crisp, clean, professional coding, with notation that enables me to use the page templates to test out various combinations of content. As part of the contact page I will need coding that collects email addresses and/or other information. I will also need coding for visitors to send email to me. I want the coding to do both of these things without disclosing my address to the visitor.
The page requirements are as follows:
There will be six page templates - [url removed, login to view] Page (3panel), [url removed, login to view] (2panel), [url removed, login to view] (2panel), [url removed, login to view] (2panel), [url removed, login to view] us/contact (1panel), and [url removed, login to view] (1panel). Each page starts with a 'logo' box (110px X page width) followed by a 'page link' box (37px x page width, 17px font size), followed by a content section consisting of A.1 panel (76% of page width, centered), OR B.2 panel (Left side 65%, right side 35% of page width), OR C.3 panel (20%, 60%center, 20%). The content section is followed by a 'small page link' box (27px X page width, 11px font size), then a 'copyright' box' (37px X page width, 14px font size) and finally a 'legal' box (27px X page width, 6px font size).
Each section or box should have a single light-medium weight black line border dividing it from the adjacent box or panel. Generic padding should be approximately 12-15px on top, bottom and sides. In the multiple panel content sections, the smaller panel(s) will have additional padding of 12-15px of padding on the top only. Generic font for all pages is font family-Arial, Helvetica, Sans Serif. 'page link' and 'small page link' will have links to first five template pages (no link to sales page), centered, with roughly ten spaces in between each link. Page templates should include coding for pictures (3 types - on right with wrap, on left with wrap, and centered with no wrap), video (a video link such as youtube), and a sound link (2 types - hover over to activate and play button access. These items should have proper notation so that I can recognize and manipulate them. The contacts page should have a section so that visitors can email me. The contacts page should also have a place to collect email addresses. This should be coded and notated so that I could include it on any page (for example, so that visitors can sign up for magazine).
The CSS should include:
*Body* - no margin, 100% height and width, 2 color gradient fade (top to bottom) properly notated (so I can change the two colors),
*Logo box (*where contents are centered horizontally and vertically*), Page link box,*
*3 panel left, 3 panel right, 3panel center,*
*2 panel left, 2 panel right,*
*1 panel* (all panels float left),
*Small page link box, Copyright box, Legal box*,
***see above for box and panel sizes and fonts***
*Links* - link (blue), visited (purple), active (black), hover (red with yellow background),
*Headlines* (all black) including: h1 (32px, centered, bold, 10px padding and margin), h2 (26px, cntr, bld, 10px pad and margin), h3 (22px, cntr, bld, 5px pad, 10px margin), h4 (18px, cntr, bld, 5pad, 10marg), h5 (18px, left, bld, 5pad, 10marg), h6 (16px, left, 5 pad, 10marg),
p (16px, justify, 5pad, 10marg),
*Span Classes* including: pagetitle (36px, left, verdana (font), 7pad, 10marg), screamred (24px, bold, red font color, 5pad), blueyellow (24px, bold, blue font color, yellow background, 7 pad), reverse (16px, bold, white font color, black background, 7pad), newsprint (16px, font family - times new roman font, serif).
Additionally, I would like some dynamic items added:
*Photos* - Left picture (with text wrapping), right picture (with text wrapping), center picture (no wrap). The pictures should have notation enabling me to increase or decrease size.
*Sounds* - Hover activated (to play sound file when mouse over a word) and player (stop, pause, play buttons for longer recordings).
*Video* - Left (with wrap) and center (no wrap) - one for youtube and one for internal video file.
I would also like one additional dynamic item - Typewriter - this would reveal content as if someone were typing it in real time, so that each letter showed up as on a delay to the previous letter (16px, font family -Typewriter, Times new roman, serif, 5pad, 5mar).
In summation, there should be coding for one CSS sheet, one home page, one blogzine page, one article page, one resource page, one contact page, and one unlinked sales page. Included should be any Javascript and/or PHP script files. Examples of all css items should be included somewhere in one of the page templates. Proper notation is essential so that I can easily find and manipulate items. Keyword placement and notation is very important. Basic site security measures should also be present.
Thank you for your time and consideration concerning this project.
Projektin tunnus: #3698456