W3Schools How To

https://www.w3schools.com/howto/default.asp

With google Fonts

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInDown

bounceInLeft

bounceInRight

Some Fancy Header Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bounceOutDown

bounceOutLeft

ounceOutRight

bounceOutUp

#ffe1e1

#ff7b7b

#ff545e

#589ea5

#6ec2b1

#95e3bb

#4cae6a

#91cfa4

#b3e8b2

#fdbdbd

#fa5a5a

#E35252

#ffad84

#ff691e

#E8601B

#f9edc1

#f0d264

#DBC05B

#169499

#1bbcc2

#7fccde

#608FBF

#6698cb

#b2cbe5

#BD8EB7

#cb99c5

#edddeb

#72B08E

#82c8a0

#c9e7d6

#587976

#8caba8

#c7d6d5

#3aa903

#62fb17

#a6fd7b

#f08080

#ffb3ba

#ffdfba

#e39e54

#fff68f

#ffffba

#007f53

#00E595

#baffc9

#006666

#00cccc

#bae1ff

#6b4a5c

#a2798f

#d7b8ff

Loving and Kind Farmer Firefighter Father Strong and Gentle <<<Ivan Theroff>>>

JavaScript Free Code

CSS Gradient Overtop Image On Hover

strong overlay

Neon HEX Color Codes:

Neon Yellow:

#FFCC00

#D7E401

#DAEE01

#FFFF00

#FFFF33

#F2EA02

#E6FB04

Neon Red:

#FF0000

#FD1C03

#FF3300

#FF6600

#FF9801

Neon Green:

#83F52C

#00FF00

#00FF33

#00FF66

#33FF00

Neon Blue:

#2EC872

#00FFFF

#099FFF

#0062FF

#0033FF

Neon Pink:

#FF1C49

#FD349C

#E61678

#FF0066

#FF00FF

#FF00CC

#FF0099

Neon Purple:

#9D00FF

#CC00FF

#6E0DD0

#9900FF

#B66488

#B763FA

#000

I n e v e r y T h e r o f f , t h e r e ' s a H e r o

Bam!

Wicked
Cool!

USING CSS

S I M P L E A R C
R E V E R S E D A R C
A U T O R A D I U S T E X T A L L O V E R

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus euismod odio, a interdum elit venenatis non. Vestibulum molestie nisi sapien, vel egestas risus tristique vitae. Etiam non nisi luctus, malesuada nibh eget, viverra ante. Praesent at velit imperdiet enim condimentum consectetur eu sed nisl. Sed lorem dolor, efficitur at efficitur ac, euismod et neque. Nulla sit amet elit sem. Nullam ac malesuada magna, id auctor purus. Praesent viverra fermentum odio.

Wicked
Cool!

Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet

Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

Hoverable Dropup

Just Example text...

JustExample text...

Move the mouse over the button to open the dropup menu.

Link 1 Link 2 Link 3

Collapsibles

A Collapsible:

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.

Collapsible Set:

Accordion

Click on the buttons inside the tabbed menu:

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Home

Home is where the heart is..

News

Some news this fine day!

Contact

Get in touch, or swing by for a cup of coffee.

About

Who we are and what we do.

Hummingbirds are seen as seemingly tireless. They always seek the sweetest nectar, reminding us to forever seek out the good and bask in the beauty of life. They float free of time, carrying our hopes for love, joy and celebration. It’s said if a hummingbird shows up in your life, it’s a good time to evaluate where you’re using your energy. Is it on worry, fear and lacking or something more positive?

The Hummingbird: A Symbol of Significance

stack1

Define multiple shadows.stack1

stack2

Define multiple shadows with blur effect.stack2

inset1

The inset1 keyword changes the shadow to one inside the frame.

inset2

Inset2, red and blur.

LOVE

Diffuse light

Current Buttons

Micro

Button Colors

Change the background color of a button with the background-color property:

Rounded Buttons

Add rounded corners to a button with the border-radius property:

2px 4px 6px 8px 12px 50%

Button Sizes

Colored Button Borders

Use the border property to add a border to the button:

Fading Buttons - "Fade in Effect"

Gradient buttons

Sizes

Circle buttons

In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

Marquee's

Scrolling text...

Left to right...

Scrolling down...

Slide-in text.

The display Property

display: inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.

display: inline-block

display: block

Default list:

Coffee
Tea
Coca Cola

Remove bullets, margin and padding:

Coffee
Tea
Coca Cola

Default list:

Coffee
Tea
Coca Cola

background: rgba(255, 0, 0, 0.1)

background: rgba(255, 0, 0, 0.2)

background: rgba(255, 0, 0, 0.3)

background: rgba(255, 0, 0, 0.4)

background: rgba(255, 0, 0, 0.5)

background: rgba(255, 0, 0, 0.6)

background: rgba(255, 0, 0, 0.7)

background: rgba(255, 0, 0, 0.8)

background: rgba(255, 0, 0, 0.9)

background: rgb(255, 0, 0)

Hover over the div element below, to see the transition effect:

hover on me

Hover a box

Text

Image Swap on Hover with CSS

6 of 12

7 of 12

5 of 12

8 of 12

4 of 12

9 of 12

3 of 12

10 of 12

2 of 12

11 of 12

1 of 12

12 of 12

hr divide styles

T10

The border-color Property

This property specifies the color of the four borders:

A solid red border

A solid green border

A solid multicolor border

The border-radius Property

This property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

The border-bottom Property

This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.

A solid red border

A swinging border

A spining border

The outline-style Property

A solid outline

A double outline

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

The border-style Property

A border border.

No border.

A mixed border.

Some Font Awesome icons:

Styled Font Awesome icons (size and color):

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

Colors in Palette

Color	Hex	RGB
	#df8f9f	(223,143,159)
	#dd9e8f	(221,158,143)
	#dbbc8f	(219,188,143)
	#d9d88e	(217,216,142)
	#bbd78e	(187,215,142)

Believe in yourself!
Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.

Making the Web Beautiful!

space

¼ cup, ½ cup, ¾ cup

85 F°

¼ cup, ½ cup, ¾ cup

Full Page Background Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Hello there.

Image Swap on Hover with CSS

bkg-img

.bkg-color

Dropdown Image

Move the mouse over the image below to open the dropdown content.

So God mmade a Farmers Daughter

Image Text

How to place text over an image:

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Lorem Ipsum Dolor

Hot dogs, Armour hot dogs. What kind of kids eat Armour hot dogs? Fat kids, skinny kids, kids who climb on rocks. Tough kids, sissy kids, even kids with chicken pox love hot dogs, Armour hot dogs... The dogs kids love to bite!

Heading

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Image modalM

In this example, we use CSS to create a modalM (dialog box) that is hidden by default.

We use JavaScript to trigger the modalM and to display the current image inside the modalM when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image captionM text inside the modalM.

Image Text Blocks

How to place text blocks over an image:

Hero

There is a hero in every Theroff! Ivan Theroff

Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

gradient-fade overlay

contener4

wrapper2

the title read more

cat-image

cat2-image

overlay options

Text will flow....purple-grad

overlay options

Text will flow....purple-grad

image mask overlay

tint paralex

CSS Tinted Background Overlay

Gradient over image 1

wrapper-1

Stuff goes in here

gradient-image-bkg

dimmed

Image Hover Effects - Return to Design Shack

Transition Sampler

Click me to toggle

Hover on the image

grade1

grade2

grade3

grade4

grade5

grade6

grade7

grade8

grade9

grade10

grade11

0deg

90deg

180deg

-90deg

I LOVE YOU

LOVE YOU

Love You

HoverMe Beautiful!

Making the Web Beautiful!

Stroke of Genius

Ol' Standard Arial

Thick Text Shadow Only Problem

w3-tiny

w3-small

w3-medium (Default)

w3-large

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo

WordArt

This is heading 1

This is heading 2

I am targeted but i am not. turpis egestas. Vestibulum tortor quam, feugiat vitae, I'm also targeted cuz i'm in a different tag eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque id blanditiis cupiditate ipsam esse debitis nesciunt doloribus ratione itaque rem. Itaque assumenda alias ut provident animi porro nihil facilis sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio officia mollitia debitis nam corporis facere atque minima cumque amet sint commodi aspernatur fugiat quae dicta quidem sequi excepturi error. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quisquam error recusandae modi nostrum adipisci numquam ullam architecto vitae odio incidunt voluptas dolore fugiat! Ipsum voluptatem ipsa molestiae quasi incidunt!

Itaque assumenda alias ut provident animi porro nihil facilis sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio officia mollitia debitis nam corporis facere atque minima cumque amet sint commodi aspernatur fugiat quae dicta quidem sequi excepturi error. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quisquam error recusandae modi nostrum adipisci numquam ullam architecto vitae odio incidunt voluptas dolore fugiat! Ipsum voluptatem ipsa molestiae quasi incidunt!

Notes

Danger! Some text...

Success! Some text...

Info! Some text...

Warning! Some text...

Dancing The sky was cloudless and of a deep dark blue.

Christmas The sky was cloudless and of a deep dark blue.

Gloria The sky was cloudless and of a deep dark blue.

Vibes The sky was cloudless and of a deep dark blue.

Indie The sky was cloudless and of a deep dark blue.

Script & Style

This is some blinking text.

Something’s not quite level here.

Script & Style

rotateX

rotateY

rotateZ

Arima, She stared through the window at the stars.

Indie, A shining crescent far beneath the flying vessel.

Satisfy, A red flair silhouetted the jagged edge of a wing.

Dancing, Almost before we knew it, we had left the ground.

Vibes, Then came the night of the first falling star.

Clicker, Then came the night of the first falling star.

, Almost before we knew it, we had left the ground.

Bonbon, A red flair silhouetted the jagged edge of a wing.

blue, A shining crescent far beneath the flying vessel.

blue2, She stared through the window at the stars.

blue3, Making the Web Beautiful!

fancy-text-1, Making the Web Beautiful!

ChristmasB,The spectacle before us was indeed sublime.

ChristmasA,The spectacle before us was indeed sublime.

Mouse over the links and watch them change layout:

This link changes color

This link changes font-size

This link changes background-color

This link changes font-family

This link changes text-decoration

h1.New

h2.New

h3.New

h4.New

h5.New

h6.New

perfect

amp

blurd

brandname

gradient

Retro

Heading 1 (blue-shadow)

Heading 1 (red-shadow)

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

Heading 4 (justify)

w3-tiny

w3-small

w3-medium (Default)

w3-large

w3-xlarge

w3-xxlarge

w3-xxxlarge

w3-jumbo

Responsive

Heading 1 (36px)

Heading 2 (30px)

Heading 3 (24px)

Heading 4 (20px)

Heading 5 (18px)

Heading 6 (16px)

wobble hover

nausea

Image samples

transformed-1

transformed-2

transformed-3

transformed-4

skewed

skewer

circular-image

inline style Horses

Example Shapes

Sample diamonds

hexagon

pageOption

test1

test2

test3

pageOption2

W3 Shapes

Nice Car

Oh Panda!

The filter Property

Darker

Normal

Lighter

W3 Shapes

4 of 12

Polaroid Images / Cards

The box-shadow property can be used to create paper-like cards:

Hardanger, Norway

The pulpit rock in Lysefjorden, Norway.

Monterosso al Mare. One of the five villages in Cinque Terre, Italy.

CSS3 Transform Sampler

CSS3 Transform Sampler

CSS3 Transform Sampler

Sticky Image: Scroll Down to See the Effect

The image will "stick" to the screen when you reach its scroll position.

Scroll Down

Some example text..

Scroll back up again to "remove" the sticky position.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet

I will stick to the screen when you reach my scroll position

nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Dad Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

Shadows

.bxshadow-1

.bxshadow-2

.bxshadow-3

.bxshadow-4

.bxshadow-5

Gradient

purple-grad

blue-grad

aqua-grad

peach-grad

500x300

Pretty Pair

Change color on page...

INFO

Chihuahua-Puppy

Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...

INFO

Automatic Slideshow

Change image every 2 seconds:

1 / 3

Caption Text

Converters

Type a value in any of the fields to convert between temperature measurements:

Fahrenheit

Celsius

Kelvin

Type a value in any of the fields to convert between weight measurements:

Pounds

Kilograms

Ounces

Grams

Stones

Type a value in any of the fields to convert between Length measurements:

Feet

Meters

Inches

Yards

Kilometers

Miles

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Billy Coleman

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Image overlay cards

Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Reversed cascade card

My adventure

Photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam.

Cards with action button

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

05/10/2015
12
21
5

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Hello!

Alison Belmont

Graffiti Artist

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Good Bye!