API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 6th, 2015
201
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no" />
  6. <title>TECHNOCATS</title>
  7.  
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
  9.  
  10. <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
  11.  
  12. <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
  13.  
  14. <link rel="stylesheet" type="text/css" href="style-test.css" media="all" />
  15.  
  16. <!-- REVOLUTION SLIDER CSS -->
  17. <link rel="stylesheet" type="text/css" href="rs-css/responsive.css" media="screen" />
  18. <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
  19.  
  20. </head>
  21.  
  22. <body>
  23.  
  24. <div id="main">
  25.  
  26. <div class="bannercontainer">
  27.  
  28. <div class="banner">
  29.  
  30. <ul>
  31. <li data-transition="random" data-slotamount="7" data- link="http://www.google.de">
  32. <img src="rs-images/slides/marines-960.jpg">
  33. <div class="caption sft big_white" data-x="100" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">Nunc tellus purus, auctor.</div>
  34. <div class="caption sfb big_orange" data-x="100" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">Facilisis auctor id, tempor quis nulla.</div>
  35. <div class="caption lfr medium_grey" data-x="100" data-y="210" data-speed="300" data-start="2000"> Sed et elementum tortor.</div>
  36. </li>
  37. <li data-transition="random" data-slotamount="7" data-link="http://www.google.de">
  38. <img src="rs-images/slides/legoman-tattoo-960.jpg">
  39. <div class="caption sft big_white" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">Nunc tellus purus, auctor.</div>
  40. <div class="caption sfb big_orange" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">Facilisis auctor id, tempor quis nulla.</div>
  41. <div class="caption lfr medium_grey" data-x="510" data-y="210" data-speed="300" data-start="2000"> Sed et elementum tortor.</div>
  42. </li>
  43.  
  44. </ul>
  45. </div> <!-- .banner -->
  46.  
  47. </div> <!-- .bannercontainer -->
  48.  
  49.  
  50. <div style="width:100%; height:50px;"></div>
  51.  
  52. <div style="width:960px; margin-left:auto; margin-right:auto;">
  53. <!-- Begin Portfolio -->
  54. <div class="portfolio-wrapper">
  55. <ul class="filter">
  56. <li><a class="active" href="#" data-filter="*">All</a></li>
  57. <li><a href="#" data-filter=".ecommerce">eCommerce</a></li>
  58. </ul>
  59. <ul class="items col4">
  60.  
  61. <!-- Begin 1st Portfolio Item -->
  62. <li class="item web ecommerce" data-callback="callPortfolioScripts();"
  63. data-detailcontent='<div class="content">
  64. <div id="myCarousel" class="carousel slide">
  65. <!-- Carousel items -->
  66. <div class="carousel-inner">
  67. <div class="active item">
  68. <img alt="" width="100%" src="style/images/tcs-screen-1.jpg"><a href="style/images/art/ds1-1.jpg" class="fancybox-media" rel="item-1">
  69. <span class="link"></span></a>
  70. </div>
  71. <div class="item">
  72. <img alt="" width="100%" src="style/images/tcs-screen-4.jpg"><a href="style/images/art/ds1-2.jpg" class="fancybox-media" rel="item-1">
  73. <span class="link"></span></a>
  74. </div>
  75. <div class="item">
  76. <img alt="" width="100%" src="style/images/tcs-screen-3.jpg"><a href="style/images/art/ds1-3.jpg" class="fancybox-media" rel="item-1">
  77. <span class="link"></span></a>
  78. </div>
  79. </div>
  80.  
  81. <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
  82. <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  83. </div>
  84.  
  85. </div>
  86. <div class="item-details">
  87. <h2>Town & Country Style</h2>
  88.  
  89. <ul class="item-info">
  90. <li><span class="lite1">Date:</span>2012 - 2013</li>
  91. <li><span class="lite1">Technologies:</span> WordPress Theme Development, PHP, MySQL, jQuery, CSS, HTML</li>
  92. <li><span class="lite1">Client:</span>Town & Country Style</li>
  93. </ul>
  94. <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>
  95.  
  96. <a href="http://www.townandcountrystyle.com.au/" target="_blank" class="button">Launch Site</a>
  97. </div>
  98. <div class="clear"></div>'
  99. > <a href="#">
  100. <div class="overlay">
  101. <h3>Town & Country Style</h3>
  102. <span class="meta">eCommerce Website, Custom WordPress Theme & Blog</span> </div>
  103. <img src="images/tcs-thumb.jpg" alt="" /></a> </li>
  104. <!-- End 1st Portfolio Item -->
  105.  
  106. <!-- Begin 2nd Portfolio Item -->
  107. <li class="item web" data-callback="callPortfolioScripts();"
  108. data-detailcontent='<div class="content">
  109. <div id="myCarousel" class="carousel slide">
  110. <!-- Carousel items -->
  111. <div class="carousel-inner">
  112. <div class="active item">
  113. <img alt="" width="100%" src="style/images/art/ds2-1.jpg"><a href="style/images/tcs-screen-1.jpg" class="fancybox-media" rel="item-2">
  114. <span class="link"></span></a>
  115. </div>
  116. <div class="item">
  117. <img alt="" width="100%" src="style/images/art/ds2-2.jpg"><a href="style/images/art/ds2-2.jpg" class="fancybox-media" rel="item-2">
  118. <span class="link"></span></a>
  119. </div>
  120. </div>
  121.  
  122. <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
  123. <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  124. </div>
  125.  
  126. </div>
  127. <div class="item-details">
  128. <h2>K & P Legal</h2>
  129.  
  130. <ul class="item-info">
  131. <li><span class="lite1">Date:</span>2009 - 2012</li>
  132. <li><span class="lite1">Categories:</span> HTML, CSS, jQuery, Database Development</li>
  133. <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
  134. </ul>
  135. <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>
  136.  
  137. <a href="#" class="button">Launch Site</a>
  138. </div>
  139. <div class="clear"></div>'> <a href="#">
  140. <div class="overlay">
  141. <h3>K&P Legal</h3>
  142. <span class="meta">Website Development</span> </div>
  143. <img src="images/kplegal-thumb.jpg" alt="" /></a></li>
  144. <!-- End 2nd Portfolio Item -->
  145.  
  146. <!-- Begin 3rd Portfolio Item -->
  147. <li class="item web ecommerce" data-callback="callPortfolioScripts();"
  148. data-detailcontent='<div class="content">
  149. <div class="single"> <img alt="" width="100%" src="style/images/lullaby-1.jpg"><a href="style/images/art/ds3-1.jpg" class="fancybox-media" rel="item-3"><span class="link"></span></a></div>
  150.  
  151. </div>
  152. <div class="item-details">
  153. <h2>Lullaby Linen</h2>
  154. <ul class="item-info">
  155.  
  156. <li><span class="lite1">Date:</span>2010 - 2012</li>
  157.  
  158. </ul>
  159.  
  160. <p>As their business matured, Lullaby Linen outgrew their original site, built by Technocats in 2010.</p>
  161.  
  162. <p>We are now involved in the redevelopment of the Lullaby Linen site, creating an online store with shopping cart. Expected completion date is June 2013.</p>
  163.  
  164. <ul class="item-info">
  165.  
  166. <li><span class="lite1">Technologies:</span>WordPress, HTML, CSS, jQuery, PHP, MySQL</li>
  167.  
  168. </ul>
  169.  
  170. <a href="#" class="button">New Site Coming Soon</a>
  171. </div>
  172. <div class="clear"></div>'
  173. > <a href="#" >
  174. <div class="overlay">
  175. <h3>Lullaby Linen</h3>
  176. <span class="meta">Website Development</span> </div>
  177. <img src="images/lullaby-thumb.jpg" alt="" /></a></li>
  178. <!-- End 3rd Portfolio Item -->
  179.  
  180. <!-- Begin 4th Portfolio Item -->
  181. <li class="item web ecommerce" data-callback="callPortfolioScripts();"
  182. data-detailcontent='<div class="content">
  183. <div class="single"> <img alt="" width="100%" src="style/images/art/ds4-1.jpg"><a href="style/images/art/ds4-1.jpg" class="fancybox-media" rel="item-4"><span class="link"></span></a></div>
  184.  
  185. </div>
  186. <div class="item-details">
  187. <h2>Wild! </h2>
  188.  
  189. <ul class="item-info">
  190. <li><span class="lite1">Date:</span>January 2013</li>
  191. <li><span class="lite1">Categories:</span>HTML5, CSS3, jQuery, PHP, MySQL</li>
  192. <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
  193. </ul>
  194. <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>
  195.  
  196. <a href="http://eltoro-uk.com/" class="button">Launch Site</a>
  197. </div>
  198. <div class="clear"></div>'
  199. > <a href="#" >
  200. <div class="overlay">
  201. <h3>Wild</h3>
  202. <span class="meta">eCommerce</span> </div>
  203. <img src="images/wild-thumb.jpg" alt="" /></a></li>
  204. <!-- End 4th Portfolio Item -->
  205.  
  206. <!-- Begin 5th Portfolio Item -->
  207. <li class="item web" data-callback="callPortfolioScripts();"
  208. data-detailcontent='<div class="content">
  209. <div id="myCarousel" class="carousel slide">
  210. <!-- Carousel items -->
  211. <div class="carousel-inner">
  212. <div class="active item">
  213. <img alt="" width="100%" src="style/images/art/ds5-1.jpg"><a href="style/images/art/ds5-1.jpg" class="fancybox-media" rel="item-5">
  214. <span class="link"></span></a>
  215. </div>
  216. <div class="item">
  217. <img alt="" width="100%" src="style/images/art/ds5-2.jpg"><a href="style/images/art/ds5-2.jpg" class="fancybox-media" rel="item-5">
  218. <span class="link"></span></a>
  219. </div>
  220. </div>
  221.  
  222. <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
  223. <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  224. </div>
  225.  
  226. </div>
  227. <div class="item-details">
  228. <h2>Concept Concrete</h2>
  229.  
  230. <ul class="item-info">
  231. <li><span class="lite1">Date:</span>2012</li>
  232. <li><span class="lite1">Categories:</span>HTML, CSS, jQuery, PHP, Development of Calculator app.</li>
  233. <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
  234. </ul>
  235. <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>
  236.  
  237. <a href="#" class="button">Launch Site</a>
  238. </div>
  239. <div class="clear"></div>'
  240. > <a href="#" >
  241. <div class="overlay">
  242. <h3>Concept Concrete</h3>
  243. <span class="meta">Website Development</span> </div>
  244. <img src="images/concept-concrete-thumb.jpg" alt="" /></a></li>
  245. <!-- End 5th Portfolio Item -->
  246.  
  247. <!-- Begin 6th Portfolio Item -->
  248. <li class="item web" data-callback="callPortfolioScripts();"
  249. data-detailcontent='<div class="content">
  250. <div class="single"> <img alt="" width="100%" src="style/images/art/ds6-1.jpg"><a href="style/images/art/ds6-1.jpg" class="fancybox-media" rel="item-6"><span class="link"></span></a></div>
  251.  
  252. </div>
  253. <div class="item-details">
  254. <h2>Nurturing Hands</h2>
  255.  
  256. <ul class="item-info">
  257. <li><span class="lite1">Date:</span>2011</li>
  258. <li><span class="lite1">Categories:</span>HTML, CSS</li>
  259. <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
  260. </ul>
  261. <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>
  262.  
  263. <a href="#" class="button">Launch Site</a>
  264. </div>
  265. <div class="clear"></div>'
  266. > <a href="#" >
  267. <div class="overlay">
  268. <h3>Nurturing Hands</h3>
  269. <span class="meta">Website Development</span> </div>
  270. <img src="images/nurturing-hands-thumb.jpg" alt="" /></a></li>
  271. <!-- End 6th Portfolio Item -->
  272.  
  273.  
  274.  
  275. </ul>
  276.  
  277. </div> <!-- End Portfolio -->
  278.  
  279. </div>
  280.  
  281. </div> <!-- main -->
  282.  
  283. <script type="text/javascript" src="js/init.js"></script>
  284.  
  285. </body>
  286. </html>
  287.  
  288. /*----------------------------------------------------------------------------------- */
  289. /* REVOLUTION SLIDER
  290. /*-----------------------------------------------------------------------------------*/
  291.  
  292. var tpj=jQuery;
  293. tpj.noConflict();
  294.  
  295. tpj(document).ready(function() {
  296.  
  297. if (tpj.fn.cssOriginal!=undefined)
  298. tpj.fn.css = tpj.fn.cssOriginal;
  299.  
  300. tpj('.banner').revolution(
  301. {
  302. delay:6000,
  303. startwidth:960,
  304. startheight:500,
  305.  
  306. onHoverStop:"on",
  307.  
  308. thumbWidth:100,
  309. thumbHeight:50,
  310. thumbAmount:3,
  311.  
  312. hideThumbs:0,
  313. navigationType:"none",
  314. navigationArrows:"none",
  315.  
  316. navigationStyle:"round",
  317.  
  318.  
  319. navigationHAlign:"left",
  320. navigationVAlign:"bottom",
  321. navigationHOffset:30,
  322. navigationVOffset:30,
  323.  
  324. soloArrowLeftHalign:"left",
  325. soloArrowLeftValign:"center",
  326. soloArrowLeftHOffset:20,
  327. soloArrowLeftVOffset:0,
  328.  
  329. soloArrowRightHalign:"right",
  330. soloArrowRightValign:"center",
  331. soloArrowRightHOffset:20,
  332. soloArrowRightVOffset:0,
  333.  
  334. touchenabled:"on",
  335.  
  336.  
  337. stopAtSlide:-1,
  338. stopAfterLoops:-1,
  339. hideCaptionAtLimit:0,
  340. hideAllCaptionAtLilmit:0,
  341. hideSliderAtLimit:0,
  342.  
  343.  
  344. fullWidth:"on",
  345.  
  346. shadow:0
  347.  
  348. });
  349.  
  350. });
  351.  
  352. /*-----------------------------------------------------------------------------------*/
  353. /* ISOTOPE PORTFOLIO
  354. /*----------------------------------------------------------------------------------- */
  355. $(document).ready(function () {
  356. var $container = $('.portfolio-wrapper .items');
  357. $container.imagesLoaded(function () {
  358. $container.isotope({
  359. itemSelector: '.item',
  360. layoutMode: 'fitRows'
  361. });
  362. });
  363.  
  364. $('.filter li a').click(function () {
  365.  
  366. $('.filter li a').removeClass('active');
  367. $(this).addClass('active');
  368.  
  369. var selector = $(this).attr('data-filter');
  370. $container.isotope({
  371. filter: selector
  372. });
  373.  
  374. return false;
  375. });
  376. });
  377. /*----------------------------------------------------------------------------------- */
  378.  
  379. Try to modify your init.js, You may get your answer
  380. /*--------------------------------------- */
  381. /* REVOLUTION SLIDER
  382. /*------------------------------------------------*/
  383.  
  384. jQuery(document).ready(function() {
  385.  
  386. if (jQuery.fn.cssOriginal!=undefined)
  387. jQuery.fn.css = jQuery.fn.cssOriginal;
  388. jQuery('.banner').revolution({
  389. delay:6000,
  390. startwidth:960,
  391. startheight:500,
  392. onHoverStop:"on",
  393. thumbWidth:100,
  394. thumbHeight:50,
  395. thumbAmount:3,
  396. hideThumbs:0,
  397. navigationType:"none",
  398. navigationArrows:"none",
  399. navigationStyle:"round",
  400. navigationHAlign:"left",
  401. navigationVAlign:"bottom",
  402. navigationHOffset:30,
  403. navigationVOffset:30,
  404. soloArrowLeftHalign:"left",
  405. soloArrowLeftValign:"center",
  406. soloArrowLeftHOffset:20,
  407. soloArrowLeftVOffset:0,
  408. soloArrowRightHalign:"right",
  409. soloArrowRightValign:"center",
  410. soloArrowRightHOffset:20,
  411. soloArrowRightVOffset:0,
  412. touchenabled:"on",
  413. stopAtSlide:-1,
  414. stopAfterLoops:-1,
  415. hideCaptionAtLimit:0,
  416. hideAllCaptionAtLilmit:0,
  417. hideSliderAtLimit:0,
  418. fullWidth:"on",
  419. shadow:0
  420. });
  421.  
  422. });
  423.  
  424. /*--------------------------------------------*/
  425. /* ISOTOPE PORTFOLIO
  426. /*--------------------------------------- */
  427. jQuery(document).ready(function () {
  428. var $container = jQuery('.portfolio-wrapper .items');
  429. $container.imagesLoaded(function () {
  430. $container.isotope({
  431. itemSelector: '.item',
  432. layoutMode: 'fitRows'
  433. });
  434. });
  435. jQuery('.filter li a').click(function () {
  436. jQuery('.filter li a').removeClass('active');
  437. jQuery(this).addClass('active');
  438.  
  439. var selector = jQuery(this).attr('data-filter');
  440. $container.isotope({
  441. filter: selector
  442. });
  443. return false;
  444. });
  445. });
  446. /*---------------------------------------------------- */
  447.  
  448. var abc=jQuery;
  449. abc.noConflict();
  450. abc(document).ready(function () {
  451. var $container = abc('.portfolio-wrapper .items');
  452. $container.imagesLoaded(function () {
  453. $container.isotope({
  454. itemSelector: '.item',
  455. layoutMode: 'fitRows'
  456. });
  457. });
  458. abc('.filter li a').click(function () {
  459.  
  460. abc('.filter li a').removeClass('active');
  461. abc(this).addClass('active');
  462.  
  463. var selector = abc(this).attr('data-filter');
  464. $container.isotope({
  465. filter: selector
  466. });
  467.  
  468. return false;
  469. });
  470. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!