Typography

This code allows you to display an image and its description with animated CSS3 effect:
Note: If you would like to add your own text into the image description, just modify the code below or edit an existing code in the custom module of the demo template.

<div class="dj-image-hover"> <div class="view view-first"><img src="images/modules/module5.jpg" border="0" alt="Wedding" /> <div class="mask"> <h2><a href="index.php/dj-catalog2/list-of-items-blog/items/2-wedding-ceremony">Ceremony</a> </h2> <p>A wonderful serenity has taken possession of my entire soul.</p> <a class="readon" href="index.php/dj-catalog2/list-of-items-blog/items/2-wedding-ceremony">Read More</a></div> </div> </div>

Wedding

Ceremony

A wonderful serenity has taken possession of my entire soul.

Read More

 

This code allows you to display an image and its description with different animated CSS3 effect:
Note: If you would like to add your own image, description or display your youtube video in the lightbox, just modify the code below or edit an existing code in the custom module of the demo template.

<div class="dj-image-hover"> <div class="view view-second"><img src="images/modules/module6.jpg" border="0" alt="Wedding" /> <div class="mask"> <p> </p> <br /> <a class="modal readon" href="https://www.youtube.com/embed/Umqu9poqIgo" rel="{handler: 'iframe', size: {x: 996, y: 747}}">Watch the Video</a></div> </div> </div>

Wedding

 

Watch the Video

For more details on how to use and modify the button code and styles, please visit this site:
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

 

The styles below are used by appending a class to a tag.

This is an image with the class “border_img”
Enter class name to img tag <img class=”border_img” />

border


Default list example

  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum

This is a list with the class “linked”
Enter class name to ul tag <ul class=”linked” />

 

This is a list with the class “special”
Enter class name to ul tag <ul class=”special” />

 

  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum

This is a read more link with the class “readon”
Enter class name to a tag <a class=”readon” />

Read more

this is a paragraph with the class “quote-left”
<p class=”quote-left” > Text goes here</p>

this is a paragraph with the class “quote-right”
<p class=”quote-right” > Text goes here</p>

this is a paragraph with the class “blue”
<p class=”blue” > Text goes here</p>

this is a paragraph with the class “green”
<p class=”green” > Text goes here</p>

this is a paragraph with the class “red”
<p class=”red” > Text goes here</p>

this is a paragraph with the class “yellow”
<p class=”yellow” > Text goes here</p>

this is a paragraph with the class “grey”
<p class=”grey” > Text goes here</p>

this is a paragraph with the class “bluefill”
<p class=”bluefill” > Text goes here</p>

this is a paragraph with the class “greenfill”
<p class=”greenfill” > Text goes here</p>

this is a paragraph with the class “redfill”
<p class=”redfill” > Text goes here</p>

this is a paragraph with the class “yellowfill”
<p class=”yellowfill” > Text goes here</p>

this is a paragraph with the class “greyfill”
<p class=”greyfill” > Text goes here</p>

this is a paragraph with the class “quote”
<p class=”quote” > Text goes here</p>

This is Heading One (h1)

This is Heading Two (h2)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)
This is Heading Six (h6)

Colorizing the first logo letter

We have used jquery.lettering.js script from http://letteringjs.com to color the first letter of the logo text.
It works in the following way: each word of the logo text is placed in the span with class=”wordX” and then each letter is placed in the span with class=”charX” where X is the number of the word or char.

Take a look at the screenshot below to check the structure:

 

Lettering

 

Then we added the css style for each template color version, for pink it is located in the templates/jm-wedding06/css/style1.css file:

h1#jm-logo .word1 .char1, h1#jm-logo .word3 .char1 {
color: #E24B5F;
}

For example: if you would like to color the first letter of the fourth and fifth word then the css style will look like that:

h1#jm-logo .word4 .char1, h1#jm-logo .word5 .char1 {
color: #E24B5F;
}