A Page Title (rendered as an h1 tag)
Standard html tags for headings 2 and 3, paragrah tags, and unordered lists can be added to any page without being wrapped inside any containers.
A Sub Title (rendered as an h2 tag)
A Supporting Title (rendered as an h3 tag)
- List item 1 feature on your website
- List item 2 feature on your website
- List item 3 feature on your website
Responsive Image Example
The responsive image below requires three different images to optimize the page weight for the customer. The images must be a 2:1 ratio. The smallest is 600 x 300, the medium is 1100 x 550 and the largest is 1600 x 800.
Here are three sample image names that I used:
- hero-cabin-600.webp
- hero-cabin-1100.webp
- hero-cabin-1600.webp
The text over the image below comes in two styes. Black text with a white opaque graident over the photo, or white text with a black opaque gradient over the photo. You simply add the class of white or the class of black to the span tag.
Information Card1 Examples
These cards demonstrate the options for the class of "card1". There are several prestyled parts that can be added to design a card to suite your needs. As you design the cards, you can use classes to detemine how wide the cards are for small, medium and large screens using numbers 1-12.
Cards are built using a division with a class of row and then multiple divisions with a class of column.
The pieces of a card include:
- An h5 tag for the card title.
- A small image with a class of "icon" sized at 60 by 60 and it will bounce on mouse hover.
- Paragraph tag used for descriptive text.
- Anchor tag that links to another page on the site.
- An image with a class of "photo" sized at 350 wide x 350 tall. This image will automatically be rounded.
- b tag used for small bold items
- h6 tag with grey text and a light grey background.
BASIC
Max Download Speed = 150 Mbps Max Upload Speed = 150 MbpsGood for email, web surfing, streaming small videos and basic web surfing. May experience lag or buffering if streaming to multiple devices simultaneously.
- ProtectIQ: Network Security
- Free Gigaspire Router
- Free App to control all connected devices
$80/month
Card Title
Progressively coordinate equity invested technology whereas high-payoff.
More InformationConnect my Home
Reliability, Speed, Control, Security Local Support and Service No Contracts, processinvested technology whereas high-payoff process improvements.
More InformationCard Title
Dramatically reinvent parallel value through adaptive relationships. Progressively.
Card Title
Dramatically reinvent parallel value through adaptive relationships. Progressively.
More InformationDownload Link Example
These download cards demonstrate the options for the class of "card2". You can use an h5 tag for the name of the download and an optional paragraph tag to describe the download. On mouse hover there is an animation on the arrow.
Button Example
In the exampke below, I have styles a link with a class of button so it looks more like a button. it does not need to be wrapped in anything.
Drop us a lineHours
Mon 09:00 am - 05:00 pm
Tue 09:00 am - 05:00 pm
Wed 09:00 am - 05:00 pm
Thu 09:00 am - 05:00 pm
Fri 09:00 am - 05:00 pm
Sat Closed
Sun Closed
Give us a Call
Sample h3 tag
Info Graphics
You can create images in Photoshop that look like inforgraphics. Build these images at 1000px wide by any height you want. Save the, it as a webp file. Insert these using a standard image tag with a class of 'infoimage' and they should render like this.
