{"id":207,"date":"2014-08-26T12:08:25","date_gmt":"2014-08-26T12:08:25","guid":{"rendered":"http:\/\/plethorathemes.com\/dev\/cleanstart\/?page_id=207"},"modified":"2014-08-26T12:08:25","modified_gmt":"2014-08-26T12:08:25","slug":"design-elements","status":"publish","type":"page","link":"https:\/\/www.s-forensics.com\/en\/features\/design-elements\/","title":{"rendered":"Design Elements"},"content":{"rendered":"<section id=\"\"  class=\"light\"> <div class=\"container\">  <div class=\"row\"><div class=\"col-md-4  text-default\" style=\"border-right:1px solid #cccccc;\"><div class='feature_teaser'>\n  <img alt='' src='https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/phone.png'>\n  <h3>Features Teaser<\/h3>\n<p>This is a &#8220;Features Teaser&#8221; shortcode, put in the first of three columns of a VC-row. It has an image, title and text.<\/p>\n\n<\/div><\/div><div class=\"col-md-4  text-default\" ><div class='feature_teaser'>\n  <img alt='' src='https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/lib.png'>\n  <h3>Features Teaser<\/h3>\n<p>Every VC Row has it own settings like Header and Subheader text that can be styled as Fancy or elegant.<\/p>\n\n<\/div><\/div><div class=\"col-md-4  text-default\" style=\"border-left:1px solid #cccccc;\"><div class='feature_teaser'>\n  <img alt='' src='https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/rocket_trans.png'>\n  <h3>Features Teaser<\/h3>\n<p>Columns have settings also! This particular has a left border.<\/p>\n\n<\/div><\/div>  <\/div>  <\/div><\/section><section id=\"\"  class=\"dark_section\">  <div class=\"container triangles-of-section\">    <div class=\"triangle-up-left\"><\/div>    <div class=\"square-left\"><\/div>    <div class=\"triangle-up-right\"><\/div>    <div class=\"square-right\"><\/div>  <\/div> <div class=\"container\">  <div class=\"row\"><div class=\"col-md-12  text-default\" ><div class=\"call_to_action\"><h3>Call to Action <strong>Inside a \"Dark\"<\/strong> Color Setup<\/h3><h4>in row settings you can also select a skincolored setup<\/h4><a class=\"btn btn-primary\" href=\"#\" title=\"This Button is optional\">This Button is optional<\/a><\/div><\/div>  <\/div>  <\/div><\/section><section id=\"\"  class=\"light_section\">  <div class=\"container triangles-of-section\">    <div class=\"triangle-up-left\"><\/div>    <div class=\"square-left\"><\/div>    <div class=\"triangle-up-right\"><\/div>    <div class=\"square-right\"><\/div>  <\/div> <div class=\"container\">  <div class=\"row\"><h2 class=\"section_header fancy centered\">This is a Row Header<small>and this is its subheader, styled fancy<\/small><\/h2><div class=\"col-md-12  text-default\" ><div class=\"row horizontal_teaser\"><div class=\"col-sm-12 col-md-4 horizontal_teaser_text_left\"><h3>Compare Before &amp; After!<\/h3><p>This is a Horizontal Teaser shortcode, put inside a light-sectioned row that has header and subheader text styled as Fancy. You can setup text and media, reverse the sides, put video, photo or even an Image Compare as shown on your right.<\/p>\n<p>This Section (Row) is light and has\u00a0Top Side Corners Shown from the Row-Settings. If you\u00a0change it in black, all texts will invert.<\/p>\n<\/div><div class=\"col-sm-12 col-md-8 horizontal_teaser_media_right\"><div class=\"twentytwenty-container\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/img_before.png\" alt=\"before\" \/><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/img_after.png\" alt=\"after\" \/><\/div><script>jQuery(window).load(function(){var $twentytwentyContainer = jQuery(\".twentytwenty-container\");if ( $twentytwentyContainer.length) {\r\n                   $twentytwentyContainer.twentytwenty({ \r\n                    default_offset_pct: \"0.5\", \r\n                    orientation: \"horizontal\"\r\n                  });\r\n                };});<\/script><\/div><\/div><\/div>  <\/div>  <\/div><\/section><section id=\"\"  class=\"dark_section parallax\" style=\"background-image:url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/09\/paralax-2.jpg); background-size:cover;\"> <div class=\"container\">  <div class=\"row\"><div class=\"col-md-12  text-default\" ><div class=\"call_to_action\"><img alt=\"responsive\" src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/rocket_trans.png\"><h3>Well... <strong>hello parallax<\/strong>!<\/h3><h4>call to action shortcode inside a parallax-enabled row<\/h4><\/div><\/div>  <\/div>  <\/div><\/section><section id=\"\"  class=\"dark_section following_dark\">  <div class=\"container triangles-of-section\">    <div class=\"triangle-up-left\"><\/div>    <div class=\"square-left\"><\/div>    <div class=\"triangle-up-right\"><\/div>    <div class=\"square-right\"><\/div>  <\/div> <div class=\"container\">  <div class=\"row\"><h2 class=\"section_header fancy centered\">Dark portfolio<small>this is classic and elegant<\/small><\/h2><div class=\"col-md-12  text-default\" ><div class=\"portfolio_strict\">\n     <ul class=\"portfolio_filters\" id=\"filt_2484\">\n          <li><a href=\"#\" data-filter=\"*\">show all<\/a><\/li>\n          <li><a href=\"#\" data-filter=\".poetic\">Poetic<\/a><\/li>\n     <\/ul>\n                    <div class=\"row isotope_portfolio_container\" id=\"cont_2484\">\n<div class=\"poetic col-xs-12 col-sm-6 col-md-3 col-lg-3\">\n     <div class=\"portfolio_item\">\n       <a href=\"https:\/\/www.s-forensics.com\/en\/portfolio\/poetic_i\/\">\n          <figure style=\"background-image:url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/b2.jpg)\">\n               <figcaption>\n                 <div class=\"portfolio_description\">\n                    <h3>Poetic I<\/h3>\n                    <span class=\"cross\"><\/span>\n                    <p>Poetic <\/p>\n                 <\/div>\n               <\/figcaption>\n          <\/figure>\n       <\/a>\n      <\/div>\n<\/div>\n<div class=\"poetic col-xs-12 col-sm-6 col-md-3 col-lg-3\">\n     <div class=\"portfolio_item\">\n       <a href=\"https:\/\/www.s-forensics.com\/en\/portfolio\/poetic_ii\/\">\n          <figure style=\"background-image:url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/111.jpg)\">\n               <figcaption>\n                 <div class=\"portfolio_description\">\n                    <h3>Poetic II<\/h3>\n                    <span class=\"cross\"><\/span>\n                    <p>Poetic <\/p>\n                 <\/div>\n               <\/figcaption>\n          <\/figure>\n       <\/a>\n      <\/div>\n<\/div>\n<div class=\"poetic col-xs-12 col-sm-6 col-md-3 col-lg-3\">\n     <div class=\"portfolio_item\">\n       <a href=\"https:\/\/www.s-forensics.com\/en\/portfolio\/poetic_iii\/\">\n          <figure style=\"background-image:url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/b3.jpg)\">\n               <figcaption>\n                 <div class=\"portfolio_description\">\n                    <h3>Poetic III<\/h3>\n                    <span class=\"cross\"><\/span>\n                    <p>Poetic <\/p>\n                 <\/div>\n               <\/figcaption>\n          <\/figure>\n       <\/a>\n      <\/div>\n<\/div>\n<div class=\"poetic col-xs-12 col-sm-6 col-md-3 col-lg-3\">\n     <div class=\"portfolio_item\">\n       <a href=\"https:\/\/www.s-forensics.com\/en\/portfolio\/poetic_iv\/\">\n          <figure style=\"background-image:url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/a6-1024x682.jpg)\">\n               <figcaption>\n                 <div class=\"portfolio_description\">\n                    <h3>Poetic IV<\/h3>\n                    <span class=\"cross\"><\/span>\n                    <p>Poetic <\/p>\n                 <\/div>\n               <\/figcaption>\n          <\/figure>\n       <\/a>\n      <\/div>\n<\/div>\n                    <\/div>\n<\/div>\n<script>jQuery(window).load(function() {\n\"use strict\"; \n  var container = jQuery('#cont_2484'); \n  container.isotope({ \n  });   jQuery('#filt_2484 a[data-filter=\"*\"]').addClass('active'); \n  jQuery('#filt_2484 a').click(function(){ \n    jQuery('#filt_2484 a').removeClass('active'); \n    jQuery(this).addClass('active'); \n    var selector = jQuery(this).attr('data-filter'); \n    container.isotope({ filter: selector }); \n    return false; \n  }); \n}); \n\/\/used for window resize\njQuery(window).resize(function() {\n\"use strict\";\nvar container = jQuery('#cont_2484');\ncontainer.isotope({ });\n});\n<\/script><div class=\"centered_button\"><a class=\"btn btn-danger\"  title=\"Button Shortcode\" href=\"#\">Button Shortcode<\/a><\/div><\/div>  <\/div>  <\/div><\/section><section id=\"\"  class=\"light_section\">  <div class=\"container triangles-of-section\">    <div class=\"triangle-up-left\"><\/div>    <div class=\"square-left\"><\/div>    <div class=\"triangle-up-right\"><\/div>    <div class=\"square-right\"><\/div>  <\/div> <div class=\"container\">  <div class=\"row\"><h2 class=\"section_header fancy centered\">FANCY SECTION HEADER<small>can also be .elegant and is centered<\/small><\/h2><div class=\"col-md-4  text-default\" ><div class=\"pricing_plan  wow fadeInUp\"><h3 style=\"\">PlanOne<small>can also be .special<\/small><\/h3><div class=\"the_price\">$150<\/div><div class=\"the_offerings\"><p>This is where you put the description of the service if you feel like doing so.<\/p><p>1 Design Template<\/p><p>2 Revisions<\/p><p>5 HTML Pages<\/p><p>1 WordPress theme<\/p><p>24\/7 Support<\/p><a  href=\"#\" title=\"\"  class=\"btn btn-primary\">Get it now!<\/a><\/div><\/div><\/div><div class=\"col-md-4  text-default\" ><div class=\"service_teaser vertical\"><div class=\"service_photo\"><figure style=\"background-image:url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/serv_6.jpg)\"><\/figure><\/div><div class=\"service_details\"><h2>Service Teaser<\/h2><p>This is where you put the description of the service. In hac habitasse platea dictumst. Suspendisse non tellus ligula. Morbi molestie feugiat tortor a hendrerit.<\/p>\n<a class=\"btn btn-primary\" title=\"http:\/\/Optional%20Button\"  href=\"#\">Optional Button<\/a><\/div><\/div><\/div><div class=\"col-md-4  text-default\" ><div class=\"team_members\">\n     <div class=\"row\">\n          <div class=\"col-sm-12 col-md-12\">\n               <div class=\"team_member\">\n                    <figure style=\"background-image: url(https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/4a-300x300.jpg)\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/4a-300x300.jpg\" alt=\"Worapon Danwiwat\"\/><\/figure>\n                    <h5>Worapon Danwiwat<\/h5>\n                    <small>(Partner); LL.B., Barrister-at-law, LL.M \u2013 Intellectual Property<\/small>\n                    <hr><div class=\"team_social\"><a href=\"callto:#\"><i class=\"fa fa-skype\"><\/i><\/a>\n<a href=\"#\"><i class=\"fa fa-facebook\"><\/i><\/a>\n<a href=\"#\"><i class=\"fa fa-twitter\"><\/i><\/a>\n<a href=\"#\"><i class=\"fa fa-linkedin\"><\/i><\/a>\n<\/div>                    <p class=\"short_bio\">He had worked as a trial lawyer prior to becoming a legal officer to the Secretariat of the House of Representatives of Thailand for 6 years. Mr. Worapon joined S-Forensics Int'l in 2013 and he is responsible for litigation and legal consulting on cyber crime and intellectual property cases as well as business investment law.  <\/p>\n               <\/div>\n          <\/div>\n    <\/div>\n<\/div><\/div>  <\/div>  <\/div><\/section><section id=\"\"  class=\"light_section\"> <div class=\"container\">  <div class=\"row\"><h2 class=\"section_header fancy centered\">OUR DEAR CLIENTS SECTION<small>with an .elegant section header!<\/small><\/h2><div class=\"col-md-12  text-default\" ><div class=\"clients_list\"><a href=\"#\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/wpml.png\" alt=\"wpml\"><\/a><a href=\"#\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/wordpress.png\" alt=\"wordpress\"><\/a><a href=\"#\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/microlancer.png\" alt=\"microlancer\"><\/a><a href=\"#\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/jquery.png\" alt=\"jquery\"><\/a><a href=\"#\"><img src=\"https:\/\/www.s-forensics.com\/wp-content\/uploads\/2014\/08\/client7.png\" alt=\"client7\"><\/a><\/div><\/div>  <\/div>  <\/div><\/section>\n","protected":false},"excerpt":{"rendered":"In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec aliquet tellus enim, a tincidunt nulla. Praesent mollis felis at nulla fermentum mattis. Vivamus vestibulum neque quis nunc convallis venenatis. Nulla tristique lorem sit amet ipsum ornare sit amet feugiat nulla condimentum. Sed faucibus volutpat nunc, at ullamcorper augue elementum id. Quisque at lectus [...]","protected":false},"author":3,"featured_media":0,"parent":211,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/pages\/207"}],"collection":[{"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":0,"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/pages\/211"}],"wp:attachment":[{"href":"https:\/\/www.s-forensics.com\/en\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}