Our Portfolio

Typography Options


Drop Caps

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter">L</span>orem ipsum

L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a wrapping span class as follows: <span class="firstcharacter2">L</span>orem ipsum


Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class">Porem ipsum</a>

Porem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Mauris tristique lobortis orci ac lacinia. Mauris tristique lobortis orci ac lacinia.

Apply a drop cap with a class on a wrapping paragraph tag as follows: <p class="drop_class2">Porem ipsum</a>


Notifications

<div class="s5_greenbox"> <div class="point"> Your text here </div> </div>

<div class="s5_redbox"> <div class="point"> Your text here </div> </div>

<div class="s5_bluebox"> <div class="point"> Your text here </div> </div>

<div class="s5_graybox"> <div class="point"> Your text here </div> </div>

This is a styled box. Use <div class="black_box">Your content goes here!</div>

This is a styled box. Use <div class="gray_box">Your content goes here!</div>

This is a styled box. Use <div class="red_box">Your content goes here!</div>

This is a styled box. Use <div class="blue_box">Your content goes here!</div>

This is a styled box. Use <div class="green_box">Your content goes here!</div>

This is a styled box. Use <div class="yellow_box">Your content goes here!</div>

This is a styled box. Use <div class="orange_box">Your content goes here!</div>


Images

This is an image with the "boxed" class applied:



This is an image with the "boxed_black" class applied:



This is an image with the "padded" class applied:



This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.



Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5


Misc

<a> With readon class applied:

readon

<a> With readon_grey class applied:
readon_grey

<a> With readon_white class applied:
readon_white

<span> With highlight_color class applied:

highlight_color

<span> With uppercase class applied:

uppercase

<span> With light_font class applied:

light_font

<span> With heavy_font class applied:

heavy_font

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.

  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class plus
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.


The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":

  • This is a sample styled number list <li class="li_number1">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number2">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number3">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number4">Your content goes here!</li>


Price Table

Basic
$49/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back

Premium
$99/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name

To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".



<div class="s5_pricetable_3">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>

<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>

<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>

<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name

</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div style="clear:both;"></div>
</div>



Responsive YouTube and Vimeo Videos

Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container". The below Youtube Video will shrink when the area its contained in gets too small for it:

Popular Articles

Join Our Newsletter

Signup to hear the latest from our company by joining our newsletter program below.

YOU WILL BE PLEASED TO KNOW

We are a strategic marketing company that develops strategies based on our analysis of your markets. We like to sort through the clutter and find the best perspective on your target markets at large.  This perspective allows us to see patterns where others simply see complexity. In addition we are very vigilant in our approach, we do not deny the risks out there in the markets, instead we draw each of them out into the open, then the risk can be mitigated. To cap it all we love to learn, it is not our claim that 4D Marketing knows everything. Any new industry or area of specialisation will be learned and our analytical minds will allow us to develop relevant marketing strategies for the new areas learned and our deliberative approach will guide us in mitigating any negative impact of competitor activity on your brand.