Post
Ask Question

Create Web Elements In Seconds Using DCodes (The Online CSS Framework)

In this tutorial I am using the Dcodes (The online CSS Framework) which is very powerful css framework to build website elements in seconds.

Dcodes have over 1500+ web ready elements (Short codes) with simple copy and paste integration.

Just like JQuery tag line of (write less, do more)..... Dcodes have a unique tag line also which is (Get more done in less time) which is very elaborated and of course very well said as the integration is very simple; every developer or even simple basic user can even do this with easy to use copy and paste code to be used with best of your requirement, either you are using css buttons, navigation, rss , elements, tooltips and lot of more to choice from 1500+ elements.

List of Features:

  • With 1500+ short codes, add web ready elements in seconds, just copy and paste code.
  • Having Compatible with popular browsers and devices, so you not need to worry about the compatibility.
  • Fast, Lightweight, Optimized and Minified version with fast page load times.
  • Show a gallery of images in an outstanding way with 30 jQuery sliders.
  • Connect with social network services like Facebook, twitter, google plus, YouTube, Flickr, LinkedIn and lot more in an easy way.
  • 500+ google web fonts suitable for your need.
  • Construct complex layouts and prototypes in minutes.
  • It’s upon you use the local version of scripts or used Cloud CDN Solution for scripts like jQuery CDN.
  • Use only the required file which you want to include, it increase the download and page load time.
  • With our short codes you can use only HTML+CSS+Jquery, no third party plugin required to setup. That’s why easy and robust.

There are many more similr features. You can read full list from Here


Let's start to create something using Dcodes short codes.

Just think of it that you have startup your Hosting Business and worry about the plans and features and shown on website in Good UI mode. Firstly you should search for Guru Web graphic designer to create a stunning design and it takes a week to approve a well prepared design. It costs you a lot of time and money but what about Dcodes, how does it facilitate you? Within a minute you can choose the required stunning and flashing design and on the next minute you are ready to integrate with your website. It’s not an easy way to do your work?

Sure, it completely removes the headache for surfing time and cost, its ambition is to get more done in less time and with an  easy way.

So firstly go to the site and to the concern area.


Select the pricing table design and after that click on the below table hyperlink View Code. It will open and copy the code and paste to the destination where you want to use the short code. Add the script and css hosted CDN files in the header section and the final output is given below.


Full source code is given below for reference. 
  1. <html>  
  2.   
  3. <head>  
  4.   
  5. <title>Pricing Table Using DCodes</title>  
  6.   
  7. <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>  
  8.   
  9. <!-- DC Pricing Tables CSS -->  
  10.   
  11. <link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/pricingtables/css/dc_pricingtables.css" />  
  12.   
  13. <!-- DC Pricing Tables JS -->  
  14.   
  15. <script type="text/javascript" src="http://cdn.dcodes.net/2/pricingtables/js/dc_pricingtables.js"></script>  
  16.   
  17. </head>  
  18.   
  19. <body>  
  20.   
  21. <!-- DC Pricing Tables:2 Start -->  
  22.   
  23. <div class="dc_pricingtable02 pricing_five" style="width:800px;margin-top:50px">  
  24.   
  25. <!-- use pricing_three for 3 columns, pricing_four = 4 columns, pricing_five = 5 columns, pricing_six = 6 columns -->  
  26.   
  27. <!-- Column 1 -->  
  28.   
  29. <ul class="pricing_column_first gap">  
  30.   
  31. <li class="pricing_header1"></li>  
  32.   
  33. <li class="pricing_header2"><span>Choose a Plan</span></li>  
  34.   
  35. <li class="odd"> <a class="tooltip" href="#">Disk Storage <span>The amount of disk storage we provide you with every account purchase.</span> </a> </li>  
  36.   
  37. <li class="even"> <a class="tooltip" href="#">Bandwidth <span>Amount of data transfer bandwidth provided to each account, per month.</span> </a> </li>  
  38.   
  39. <li class="odd"><span>Domain Names</span></li>  
  40.   
  41. <li class="even"> <a class="tooltip" href="#">Subdomains <span>Number of subdomain assigned to your account. </a> </li>  
  42.   
  43. <li class="odd"><span>Site Builder</span></li>  
  44.   
  45. <li class="even"><span>Backups</span></li>  
  46.   
  47. <li class="odd"> <a class="tooltip" href="#">CPANEL <span>Web-based control panel system.</span> </a> </li>  
  48.   
  49. <li class="even"><span>Email Accounts</span></li>  
  50.   
  51. <li class="odd"><span>MySQL Databases</span></li>  
  52.   
  53. <li class="pricing_footer"></li>  
  54.   
  55. </ul>  
  56.   
  57. <div class="pricing_hover_area">  
  58.   
  59. <!-- Column 2 -->  
  60.   
  61. <ul class="pricing_column glass_orange">  
  62.   
  63. <!-- color options: glass_black, glass_orange, glass_lightblue, glass_blue, glass_green, glass_purple, glass_red, glass_white, glass_aqua, glass_yellow, light_blue, blue, navy, green, yellow, orange, red, maroon, purple, pink, white, paper, silver, grey, black -->  
  64.   
  65. <li class="pricing_header1">Starter</li>  
  66.   
  67. <li class="pricing_header2">$5 <span>/mo.</span></li>  
  68.   
  69. <li class="odd">10GB</li>  
  70.   
  71. <li class="even">100GB</li>  
  72.   
  73. <li class="odd">1</li>  
  74.   
  75. <li class="even">10</li>  
  76.   
  77. <li class="odd"><span class="pricing_no"></span></li>  
  78.   
  79. <li class="even"><span class="pricing_no"></span></li>  
  80.   
  81. <li class="odd"><span class="pricing_yes"></span></li>  
  82.   
  83. <li class="even">10</li>  
  84.   
  85. <li class="odd">5</li>  
  86.   
  87. <li class="pricing_footer">  
  88.   
  89. <a href="#" class="dc_pricing_button orange">Sign Up</a><!-- additional options: small, rounded, large, light_blue, blue, green, red, orange, yellow, pink, purple, grey, black -->  
  90.   
  91. </li>  
  92.   
  93. </ul>  
  94.   
  95. <!-- Column 3 -->  
  96.   
  97. <ul class="pricing_column glass_red">  
  98.   
  99. <li class="pricing_header1">Basic</li>  
  100.   
  101. <li class="pricing_header2">$10 <span>/mo.</span></li>  
  102.   
  103. <li class="odd">50GB</li>  
  104.   
  105. <li class="even">500GB</li>  
  106.   
  107. <li class="odd">10</li>  
  108.   
  109. <li class="even">50</li>  
  110.   
  111. <li class="odd"><span class="pricing_yes"></span></li>  
  112.   
  113. <li class="even"><span class="pricing_yes"></span></li>  
  114.   
  115. <li class="odd"><span class="pricing_yes"></span></li>  
  116.   
  117. <li class="even">50</li>  
  118.   
  119. <li class="odd">10</li>  
  120.   
  121. <li class="pricing_footer"><a href="#" class="dc_pricing_button red">Sign Up</a></li>  
  122.   
  123. </ul>  
  124.   
  125. <!-- Column 4 -->  
  126.   
  127. <ul class="pricing_column glass_green">  
  128.   
  129. <li class="pricing_header1">Professional</li>  
  130.   
  131. <li class="pricing_header2">$29 <span>/mo.</span></li>  
  132.   
  133. <li class="odd">100GB</li>  
  134.   
  135. <li class="even">1000GB</li>  
  136.   
  137. <li class="odd">Unlimited</li>  
  138.   
  139. <li class="even">Unlimited</li>  
  140.   
  141. <li class="odd"><span class="pricing_yes"></span></li>  
  142.   
  143. <li class="even"><span class="pricing_yes"></span></li>  
  144.   
  145. <li class="odd"><span class="pricing_yes"></span></li>  
  146.   
  147. <li class="even">Unlimited</li>  
  148.   
  149. <li class="odd">50</li>  
  150.   
  151. <li class="pricing_footer"><a href="#" class="dc_pricing_button green">Sign Up</a></li>  
  152.   
  153. </ul>  
  154.   
  155. <!-- Column 5 -->  
  156.   
  157. <ul class="pricing_column glass_blue">  
  158.   
  159. <li class="pricing_header1">Business</li>  
  160.   
  161. <li class="pricing_header2">$39 <span>/mo.</span></li>  
  162.   
  163. <li class="odd">500GB</li>  
  164.   
  165. <li class="even">Unlimited</li>  
  166.   
  167. <li class="odd">Unlimited</li>  
  168.   
  169. <li class="even">Unlimited</li>  
  170.   
  171. <li class="odd"><span class="pricing_yes"></span></li>  
  172.   
  173. <li class="even"><span class="pricing_yes"></span></li>  
  174.   
  175. <li class="odd"><span class="pricing_yes"></span></li>  
  176.   
  177. <li class="even">Unlimited</li>  
  178.   
  179. <li class="odd">200</li>  
  180.   
  181. <li class="pricing_footer"><a href="#" class="dc_pricing_button blue">Sign Up</a></li>  
  182.   
  183. </ul>  
  184.   
  185. </div>  
  186.   
  187. </div>  
  188.   
  189. <!-- DC Pricing Tables:2 End -->  
  190.   
  191. <div class="dc_clear"></div> <!-- line break/clear line -->  
  192.   
  193. </body>  
  194.   
  195. </html>  

Like These snippets, you can add any element you wish.

Now we will start to add another element to the page in the form of showing the latest feeds from news agencies, blog post, and popular sites.

But for today I wish to use C-sharp corner Rss Feed to show the latest articles showing on the main page.

As we have get idea about RSS we can easily integrate in to our page.

Just go to the Embed ==> RSS Feeds.


Select the required ticker and copy the header and body section code and also don't forget to edit the URL from which you want to show RSS feeds. Here is the full code compiled for RSS.

  1. <html>  
  2.   
  3. <head>  
  4.   
  5. <title>RSS Feeds Using DCodes</title>  
  6.   
  7. <!-- DC RSS Feeds CSS -->  
  8.   
  9. <link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/rssfeeds/css/dc_rssfeed.css" />  
  10.   
  11. <!-- jQuery Library (skip this step if already called on page ) -->  
  12.   
  13. <script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->  
  14.   
  15. <!-- DC RSS Feeds JS -->  
  16.   
  17. <script type="text/javascript" src="http://cdn.dcodes.net/2/rssfeeds/js/dc_rssfeed.js"></script>  
  18.   
  19. <script type="text/javascript" src="http://cdn.dcodes.net/2/rssfeeds/js/dc_vticker.js"></script>  
  20.   
  21. </head>  
  22.   
  23. <body>  
  24.   
  25. <!-- DC RSS Feeds Settings -->  
  26.   
  27. <script type="text/javascript">  
  28.   
  29. $(document).ready(function () {  
  30.   
  31. // Put your Atom / RSS feed URL  
  32.   
  33. $('#rss-ticker2').rssfeed('http://www.c-sharpcorner.com/rss/latestcontentall.aspx', {}, function (e) {  
  34.   
  35. $(e).find('div.rssBody').vTicker({ showItems: 10 });  
  36.   
  37. });  
  38.   
  39. });  
  40.   
  41. </script>  
  42.   
  43. <!-- DC RSS Feeds Start -->  
  44.   
  45. <div id="rss-ticker2" style="width:80%;"></div>  
  46.   
  47. </body>  
  48.   
  49. </html>  

Final Output of RSS Feeds:


Here is all about Dcodes.... Hope you find it useful and now you can made elements in seconds.


Similar Articles