Paper-like Cards with Shadows
The shadow treatment can help draw attention to important elements on a web page.
Simple Border
Light Shadow
Heavier Shadow
Our websites are constructed with built-in responsiveness, which means the pages automatically respond to any display size; desktop, tablet, or mobile device. More and more website visitors are using mobile devices to view websites, and a "mobile first" fluid design is incorporated to satisfy this demand.
Standard CSS (Cascading Style Sheet) is used to control the display layouts. We also employ minimum JavaScript programs to interact with website visitors. These minimization concepts help to deliver website content quickly to the visitor's browser display.
Google introduced "Material Design" guidelines which we adopted to help construct website appearances. This concept helps to highlight important areas of a website in order to attract the viewer's attention. These design elements are very similar to those found in full-page magazine ads.
We use a basic set of colors inspired by Google's "Material Design", which was mentioned earlier. There is an almost unlimited number of color combinations that are possible, but we employ a standard set of schemes and themes to help keep things simple. When necessary we can rely on a "color picker" to generate an appropriate color from one of the 16,777,216 colors available. We use the ADA's "color contrast" tool to ensure the combination of foreground and background colors are within the ADA's ratio guidelines.
Red
Blue
Blue Grey
Teal
Yellow
Orange
We use built-in techniques to ensure viewers will be able to see the contents on their display without having to make any adjustments.
Resize this page to see the effect on the layout elements below!
The half-screen specification uses half (50%) of the display.
On small displays half-screen automatically resizes to full screen width.
The third-screen specification uses one-third (33%) of the display.
On small displays third-screen automatically resizes to full screen width.
The final third.
The third-screen specification uses one-third (25%) of the display.
On small displays fourth-screen automatically resizes to full screen width.
The 3rd fourth.
The final fourth.
Containers are used to create headers, sections, and footers; the basic building blocks of a website.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
If desired, a close icon can be added to any container which provides the ability to hide that container; located in this one on the upper-right corner.
The color themes are designed to work harmoniously with each other.
The response to the animations was ridiculous
Touching, gripping and genuinely well made
A huge success for Marvel and Disney
The response to the animations was ridiculous
Touching, gripping and genuinely well made
A huge success for Marvel and Disney
The shadow treatment can help draw attention to important elements on a web page.
Simple Border
Light Shadow
Heavier Shadow
We've got your tables covered too.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Hit the "Move The Bar" button to animate the progress bar.
Accordian sections are used to allow the visitor to optionally display information within a labeled section. The accordian is an excellent way to optionally display various information elements and avoiding the need for the visitor to scroll.
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.
Accordion with Images:
French Alps
Tabs can also be used to display different information without the visitor having to scroll. The active tab will be "grayed." Click the tabs below to try it out. Note the example when hovering over "London." (London is the Capital of England) Tooltips can be applied anywhere in text as a quick and easy definition for viewers.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Buttons, buttons, we've got your buttons. Buttons are the key part to navigating any website. Below are just a few ways in which they can be implemented. Words can be "tagged" to make them standout as a link to another location. Any element or block can be styled to react as a button. Colors will be styled to match or contrast the website's color theme.
Button Bar
Navigation Bar Buttons
Full Width Buttons
Pagination Example
