API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 3rd, 2012
161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  6. <title>SlyFiles BETA</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  8. <meta name="description" content="SlyFiles upload"/>
  9. <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  10. <link rel="stylesheet" href="flexslider.css" type="text/css"/>
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  12. <script type="text/javascript" src="js/bootstrap.js"></script>
  13. <link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'/>
  14. <script type="text/javascript">
  15. $(function($) {
  16. $("#backtop").hide();
  17. $(window).scroll(function () {
  18. if ($(this).scrollTop() > 200) {
  19. $('#backtop').fadeIn(200);
  20. } else {
  21. $('#backtop').fadeOut(200);
  22. }
  23. });
  24. $('.go-top').click(function () {
  25. $('body,html').animate({
  26. scrollTop: 0
  27. }, 800);
  28. return false;
  29. });
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <header>
  35.  
  36. <div class="header">
  37. <div class="container">
  38.  
  39. <div class="delogin">
  40. <div class="login">
  41. <div id="lock"></div>
  42. <span id="login"><a href="login.php">LOGIN</a></span>
  43. </div>
  44. </div>
  45.  
  46. <div id="logo"><a href="/"><input type="image" src="img/logo.png"/></a></div>
  47. <div class="menu">
  48. <ul>
  49. <li><span id="selected"><a href="#">Home</a></span><span id="desc"><span id="selected-description">Main Page</span></span></li><img class="spacing-menu" src="img/space.png"/>
  50. <li><span id="item"><a href="#FAQ">FAQ</a></span><span id="desc"><span id="description">Information</span></span></li><img class="spacing-menu" src="img/space.png"/>
  51. <li><span id="item"><a href="#facebook">Facebook</a></span><span id="desc"><span id="description">Like us</span></span></li><img class="spacing-menu" src="img/space.png"/>
  52. <li><span id="item"><a href="#twitter">Twitter</a></span><span id="desc"><span id="description">Follow us</span></span></li><img class="spacing-menu" src="img/space.png"/>
  53. <li><span id="item"><a href="#contact">Contact</a></span><span id="desc"><span id="description">Email support</span></span></li>
  54. </ul>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="subheader"></div>
  59. </header>
  60. <div class="container">
  61. <div class="wrapper">
  62. <span class="logo-text">Make <span class="logo-text_yellow">money</span> with SlyFiles</span>
  63. <span class="home-logo"><input type="image" src="img/home-bg.png" class="home-logo"/></span>
  64. <span class="features-list"><br /><br />
  65. <ul>
  66. <li>Stable system with amazing automated systems.</li>
  67. <br />
  68. <li>PayPal payments with no refunds.</li>
  69. <br />
  70. <li>Cash out with minimum of $15.</li>
  71. <br />
  72. <li>Stable new business control panel 'SlyPanel'.</li>
  73. <br />
  74. <li>Highest paying networks for you to earn double.</li>
  75. </ul>
  76. <br />
  77. <span class="getstarted"><a href="signup.php"><input type="image" src="img/started.png" class="getstarted"/></a></span>
  78. <div id="line"></div>
  79. <div class="row">
  80. <div class="span4">
  81. <div id="box">
  82. <input type="image" src="img/upload.png" class="image_margin"/> <!-- Backup <img src="img/upload.png" class="image_margin"/> Backup End -->
  83. <span class="box_title">UPLOAD</span>
  84. <span class="box-description">Upload files straight from your
  85. hard disc. Up to 600MB per
  86. file upload! the more you earn
  87. the more file storage you get.
  88. </span>
  89. </div>
  90. </div>
  91. <div class="span4">
  92. <div id="box">
  93. <input type="image" src="img/share.png" class="image_margin"/> <!-- Backup <img src="img/share.png" class="image_margin"/> Backup End -->
  94. <span class="box_title">SHARE</span>
  95. <span class="box-description">Share your files across the net<Br />
  96. with a custom unique URL.
  97. <br />Place a SlyFiles specific<br />
  98. download widget on your site.
  99. </span>
  100. </div>
  101. </div>
  102.  
  103. <div class="span4">
  104. <div id="box">
  105. <input type="image" src="img/earn.png" class="image_margin"/> <!-- Backup <img src="img/earn.png" class="image_margin"/> Backup End-->
  106. <span class="box_title">EARN</span>
  107. <span class="box-description">Earn profit from just uploading<br />
  108. and sharing files! We use the<br />
  109. highest paying networks, you<br />
  110. earn about $1.50 per download!
  111. </span>
  112. </div>
  113. </div>
  114. </div>
  115. <br />
  116. <br />
  117.  
  118.  
  119.  
  120. <h1 class="continue-title">Why SlyFiles?</h1>
  121. <p class="another_description">We do the best to make SlyFiles members happier than they ever
  122. were.<br /> We're paying 80% for each download, 10% for our Developers <br />
  123. and rest for SlyFiles powerful hosting and upgrades.</p>
  124. <div class="row">
  125. <div class="span4">
  126. <div id="spoiler1" data-hidden="hide1" class="spoiler"><span class="featurelist_2-text-margin">Networks</span><a href="#"></a>
  127. </div>
  128. <div id="hide1" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more.
  129. We do a SQL backup every hour to protect us from our data being lost.</p></div>
  130.  
  131. <div id="spoiler2" data-hidden="hide2" class="spoiler"><span class="featurelist_2-text-margin">Payment Avarge</span></div>
  132. <div id="hide2" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more.
  133. We do a SQL backup every hour to protect us from our data being lost.</p></div>
  134.  
  135.  
  136. <div id="spoiler3" data-hidden="hide3" class="spoiler"><span class="featurelist_2-text-margin">Control Panel - SlyPanel</span></div>
  137. <div id="hide3" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more.
  138. We do a SQL backup every hour to protect us from our data being lost.</p></div>
  139.  
  140. <div id="spoiler4" data-hidden="hide4" class="spoiler"><span class="featurelist_2-text-margin">Security</span></div>
  141. <div id="hide4" class="hide"><p id="texting1">We have a very security system, including secure logging in, management, balance management and more.
  142. We do a SQL backup every hour to protect us from our data being lost.</p>
  143. </div> </div>
  144. <div class="span8">
  145. <input type="image" src="img/screen.png" class="image-margin"/></div></div> <!-- Backup <img src="img/screen.png"/> Backup End -->
  146. </div>
  147. <script>
  148. $('.spoiler').click(function() {
  149. var hiddenid = $(this).data('hidden');
  150. $('#' + hiddenid).slideToggle();
  151. $('.hide:not(#' + hiddenid + ')').slideUp();
  152. });
  153. </script>
  154. </div>
  155. </div><div class="span8">
  156.  
  157. <br /><br /><br />
  158. </div>
  159. </div>
  160. </div>
  161. </body>
  162. <footer>
  163. <div class="subfooter"></div>
  164. <div class="footer">
  165. <div class="container">
  166. <span id="copyright">SlyFiles copyrighted &copy; 2012, All rights deserved.</span>
  167. <div class="footerlinks">
  168. <ul>
  169. <li><a href="#">TOS</a></li>
  170. <li><a href="#">DMCA</a></li>
  171. <li><a href="#">About</a></li>
  172. </ul>
  173. </div>
  174. <div id="backtop" class="go-top"><img href="#top" src="img/back-to-top.png"/></div>
  175. </div>
  176. </div>
  177. </html>
  178.  
  179. CSS
  180.  
  181.  
  182.  
  183.  
  184.  
  185. *{
  186. font-family: arial;
  187. margin: 0;
  188. }
  189. .header {
  190. background: #6b6353 url("../img/header.png");
  191. width: 100%;
  192. height: 112px;
  193. }
  194.  
  195. #logo {
  196. float: left;
  197. margin-top:22px;
  198. }
  199. .home-logo{
  200. cursor: default;
  201. }
  202. .subheader {
  203. background: #deac12 url("../img/subheader.png");
  204. width: 100%;
  205. height: 36px;
  206. }
  207.  
  208. .delogin {
  209. width: 70px;
  210. height: 20px;
  211. background-color: #443b28;
  212. -webkit-border-radius: 0px 0px 7px 7px;
  213. border-radius: 0px 0px 7px 7px;
  214. position: absolute;
  215. margin-left: 51%;
  216. -webkit-transition: all 100ms ease-in-out;
  217. -moz-transition: all 100ms ease-in-out;
  218. -ms-transition: all 100ms ease-in-out;
  219. -o-transition: all 100ms ease-in-out;
  220. transition: all 100ms ease-in-out;
  221. }
  222.  
  223. .login {
  224. width: 70px;
  225. height: 20px;
  226. background-color: #443b28;
  227. -webkit-border-radius: 0px 0px 7px 7px;
  228. border-radius: 0px 0px 7px 7px;
  229. position: absolute;
  230. margin-left: 51%;
  231. right: 0px;
  232. -webkit-transition: all 100ms ease-in-out;
  233. -moz-transition: all 100ms ease-in-out;
  234. -ms-transition: all 100ms ease-in-out;
  235. -o-transition: all 100ms ease-in-out;
  236. transition: all 100ms ease-in-out;
  237. }
  238. .login:hover{
  239. width: 70px;
  240. height: 20px;
  241. background-color: #443b28;
  242. -webkit-border-radius: 0px 0px 7px 7px;
  243. border-radius: 0px 0px 7px 7px;
  244. position: absolute;
  245. margin-left: 51%;
  246. top: 5px;
  247. -webkit-transition: all 100ms ease-in-out;
  248. -moz-transition: all 100ms ease-in-out;
  249. -ms-transition: all 100ms ease-in-out;
  250. -o-transition: all 100ms ease-in-out;
  251. transition: all 100ms ease-in-out;
  252. }
  253.  
  254. #login {
  255. float: right;
  256. margin-right: 11px;
  257. font-weight: bold;
  258. font-size: 11px;
  259. color: #fff;
  260. -webkit-transition: all 100ms ease-in-out;
  261. -moz-transition: all 100ms ease-in-out;
  262. -ms-transition: all 100ms ease-in-out;
  263. -o-transition: all 100ms ease-in-out;
  264. transition: all 100ms ease-in-out;
  265. }
  266. #lock {
  267. background-image: url("../img/lock.png");
  268. width: 13px;
  269. height: 10px;
  270. position: absolute;
  271. top: 5px;
  272. left: 7px;
  273. -webkit-transition: all 100ms ease-in-out;
  274. -moz-transition: all 100ms ease-in-out;
  275. -ms-transition: all 100ms ease-in-out;
  276. -o-transition: all 100ms ease-in-out;
  277. transition: all 100ms ease-in-out;
  278. }
  279.  
  280. .menu ul li{
  281. display: inline-block;
  282. margin: 10px;
  283. }
  284.  
  285. footer { margin-top: 75px}
  286.  
  287. .menu {
  288. float: right;
  289. margin-top: 28px;
  290. }
  291. .menu a:hover{
  292. text-decoration: none;
  293. }
  294. .spacing-menu {
  295. margin-bottom: 20px;
  296. margin-left: 10px;
  297. margin-right: 10px;
  298. }
  299. #item {
  300. color: #d3c5a7;
  301. font-weight: bold;
  302. font-size: 18px;
  303. text-shadow: 0px 1px 0px #000;
  304. filter: dropshadow(color=#000, offx=0, offy=5);
  305. }
  306. #item a{
  307. color: #d3c5a7;
  308. font-weight: bold;
  309. font-size: 18px;
  310. text-shadow: 0px 1px 0px #000;
  311. filter: dropshadow(color=#000, offx=0, offy=5);
  312. }
  313. #item a:hover{
  314. color: #eac717;
  315. font-size: 18px;
  316. text-decoration: none;
  317. text-shadow: 0px 1px 0px #000;
  318. filter: dropshadow(color=#000, offx=0, offy=5);
  319. font-weight: bold;
  320. }
  321. #selected a{
  322. color: #eac717;
  323. font-size: 18px;
  324. text-decoration: none;
  325. text-shadow: 0px 1px 0px #000;
  326. filter: dropshadow(color=#000, offx=0, offy=5);
  327. font-weight: bold;
  328. }
  329. #selected-description{
  330. color: #ece9d6;
  331. font-size: 14px;
  332. text-shadow: 0px 1px 0px #333333;
  333. filter: dropshadow(color=#333333, offx=0, offy=5);
  334. }
  335. #description{
  336. color: #a29882;
  337. font-size: 14px;
  338. text-shadow: 0px 1px 0px #333333;
  339. filter: dropshadow(color=#333333, offx=0, offy=5);
  340. }
  341.  
  342. #desc {
  343. display: block;
  344. }
  345.  
  346. #spaces {
  347. background-image: url("../img/spaces.png");
  348. width: 5px;
  349. height: 32px;
  350. }
  351. #footer-wrap{
  352. bottom: 0px;
  353. margin-bottom: 0px;
  354. position: relative;
  355. padding-bottom: 0px;
  356. padding-top: 100px;
  357. }
  358. .footer{
  359. background-image: url("../img/footer.png");
  360. width: 100%;
  361. height: 50px;
  362. }
  363. .subfooter{
  364. background-image: url("../img/subheader.png");
  365. height: 20px;
  366. width: 100%;
  367.  
  368. }
  369.  
  370. #copyright {
  371. color: white;
  372. position: relative;
  373. top: 16px;
  374. }
  375. .footerlinks{
  376. float: right;
  377. position: relative;
  378. top: 16px;
  379. color: #4A97D6;
  380. }
  381. .footerlinks a{
  382. color: #A7D2F5;
  383. }
  384. .footerlinks a:hover{
  385. color: #98BCD9;
  386. }
  387. .footerlinks li{
  388. display: inline;
  389. margin: 10px;
  390. }
  391.  
  392. #backtop {
  393. margin-left: 50%;
  394. margin-top: -3px;
  395. }
  396. #backtop:hover {
  397. opacity: 0.7;
  398. cursor: pointer;
  399. }
  400. .footer-text_copyright{
  401. margin-left: 12%;
  402. top: 15px;
  403. position: absolute;
  404. color: white;
  405. line-height: 15px;
  406. }
  407. .footer-text_upload{
  408. top: 14px;
  409. position: absolute;
  410. margin-left: 50%;
  411. float: left;
  412. }
  413. .footer-text_upload a:hover{
  414. opacity: .5;
  415. }
  416. .footer-text_links{
  417. text-align: right;
  418. margin-left: 75%;
  419. word-spacing: 10px;
  420. position: absolute;
  421. word-spacing: 10px;
  422. top: 15px;
  423. }
  424. .footer-text_links a{
  425. color: #b1ceba;
  426. text-decoration: none;
  427. font-weight: none;
  428. }
  429. .footer-text_links a:hover{
  430. color: #b1ceba;
  431. text-decoration: underline;
  432. font-weight: none;
  433. }
  434. #content-wrap{
  435. margin-top: 30px;
  436. width: 960px;
  437. margin-left: auto;
  438. margin-right: auto;
  439. padding-bottom:70px;
  440. }
  441. .logo-text{
  442. font-size: 36px;
  443. color: #c4c4c4;
  444. }
  445. .logo-text_yellow{
  446. color: #e9c517;
  447. }
  448. .features-list{
  449. list-style-image: url("../img/tick.png");
  450. font-size: 18px;
  451. color: #c4c4c4;
  452. line-height: 25px;
  453. text-shadow: 0px 1px 0px #f4f4f4;
  454. filter: dropshadow(color=#fff, offx=0, offy=1);
  455. }
  456. .home-logo{
  457. float: right;
  458. margin-top: 25px;
  459. }
  460. .getstarted a{
  461. -webkit-transition: all 200ms ease-in-out;
  462. -moz-transition: all 200ms ease-in-out;
  463. -ms-transition: all 200ms ease-in-out;
  464. -o-transition: all 200ms ease-in-out;
  465. transition: all 200ms ease-in-out;
  466. }
  467. .getstarted a:hover{
  468. cursor: pointer;
  469. opacity: 0.8;
  470. -webkit-transition: all 200ms ease-in-out;
  471. -moz-transition: all 200ms ease-in-out;
  472. -ms-transition: all 200ms ease-in-out;
  473. -o-transition: all 200ms ease-in-out;
  474. transition: all 200ms ease-in-out;
  475. }
  476. #box{
  477. background-image: url("../img/box.png");
  478. background-repeat: no-repeat;
  479. width: 302px;
  480. height: 147px;
  481. }
  482. .wrapper {
  483. margin-top: 47px;
  484. }
  485.  
  486. #plus {
  487. background-image: url("http://cdn4.iconfinder.com/data/icons/bitcons/blue/16x16/toggle.gif");
  488. height: 17px;
  489. width: 17px;
  490. float: right;
  491. margin-top: 17px;
  492. margin-right: 10px;
  493. }
  494.  
  495. .content { display: none }
  496.  
  497. .open .content { display: block }
  498. .spoiler {
  499. font-size: 16px;
  500. background-image: url("../img/bg1.png");
  501. background-repeat: no-repeat;
  502. height: 35px;
  503. width: 437px;
  504. text-shadow: 0px 1px 0px #f4f4f4;
  505. filter: dropshadow(color=#fff, offx=0, offy=1);
  506. margin-top: 3px;
  507. cursor: pointer;
  508. min-width: 511px;
  509. position: relative;
  510. -webkit-transition: background 200ms ease-in-out;
  511. -moz-transition: background 200ms ease-in-out;
  512. -ms-transition: background 200ms ease-in-out;
  513. -o-transition: background 200ms ease-in-out;
  514. transition: background 200ms ease-in-out;
  515. }
  516. .spoiler:hover {
  517. font-size: 16px;
  518. background-image: url("../img/bg2.png");
  519. background-repeat: no-repeat;
  520. height: 35px;
  521. width: 437px;
  522. color: #000;
  523. text-shadow: 0px 1px 0px #f4f4f4;
  524. filter: dropshadow(color=#fff, offx=0, offy=1);
  525. margin-top: 3px;
  526. cursor: pointer;
  527. min-width: 511px;
  528. position: relative;
  529. -webkit-transition: background 200ms ease-in-out;
  530. -moz-transition: background 200ms ease-in-out;
  531. -ms-transition: background 200ms ease-in-out;
  532. -o-transition: background 200ms ease-in-out;
  533. transition: background 200ms ease-in-out;
  534. }
  535. .hide{
  536. font-size: 15px;
  537. background-color: #dedede;
  538. border: 1px solid #c1c1c1;
  539. width: 471px;
  540. height: auto;
  541. color: #262626;
  542. text-shadow: 0px 1px 0px #f4f4f4;
  543. filter: dropshadow(color=#fff, offx=0, offy=1);
  544. margin-top: 3px;
  545. display: none;
  546. }
  547. #texting1 {
  548. padding: 15px;
  549. }
  550.  
  551.  
  552. .image_margin{
  553. margin-top: 35px;
  554. margin-left: 25px;
  555. cursor: default;
  556. }
  557. .box_title{
  558. font-size: 24px;
  559. color: #8d8d8d;
  560. margin-left: 15px;
  561. margin-top: 20px;
  562. position: absolute;
  563. text-shadow: 0px 1px 0px #f4f4f4;
  564. filter: dropshadow(color=#fff, offx=0, offy=1);
  565. }
  566. .box-description{
  567. margin-top: 45px;
  568. position: absolute;
  569. margin-left: 15px;
  570. font-size: 13px;
  571. width: 200px;
  572. line-height: 17px;
  573. color: #8c8c8c;
  574. text-shadow: 0px 1px 0px #f4f4f4;
  575. filter: dropshadow(color=#fff, offx=0, offy=1);
  576. }
  577. .continue-title{
  578. font-size: 36px;
  579. color: #8d8d8d;
  580. text-shadow: 0px 1px 0px #f4f4f4;
  581. filter: dropshadow(color=#fff, offx=0, offy=1);
  582. }
  583. .another_description{
  584. font-size: 14px;
  585. color: #a5a5a4;
  586. width: 610px;
  587. text-shadow: 0px 1px 0px #f4f4f4;
  588. filter: dropshadow(color=#fff, offx=0, offy=1);
  589. }
  590. .featureslist_2{
  591. font-size: 16px;
  592. background-color: #c0e6d2;
  593. border: 1px solid #a7c8b7;
  594. height: 45px;
  595. width: 530px;
  596. position: absolute;
  597. text-shadow: 0px 1px 0px #f4f4f4;
  598. filter: dropshadow(color=#fff, offx=0, offy=1);
  599. }
  600. #featurelist_2_wrap{
  601. display: block;
  602. }
  603. .featurelist_2-text-margin{
  604. margin-top: 5px;
  605. position: absolute;
  606. margin-left: 20px;
  607. text-align: left;
  608. color: #259acb;
  609. -moz-transition: background 200ms ease-in-out;
  610. -ms-transition: background 200ms ease-in-out;
  611. -o-transition: background 200ms ease-in-out;
  612. transition: background 200ms ease-in-out;
  613. }
  614. .featurelist_2-text-margin:hover{
  615. margin-top: 5px;
  616. position: absolute;
  617. margin-left: 20px;
  618. text-align: left;
  619. color: #3e8098;
  620.  
  621. -moz-transition: background 200ms ease-in-out;
  622. -ms-transition: background 200ms ease-in-out;
  623. -o-transition: background 200ms ease-in-out;
  624. transition: background 200ms ease-in-out;
  625. }
  626. #line {
  627. background-image: url("../img/line.png");
  628. background-repeat: no-repeat;
  629. width: 100%;
  630. height: 53px;
  631. margin-top: 18px;
  632. opacity: 0.8;
  633. }
  634.  
  635. .featurelist_3{
  636. font-size: 16px;
  637. background-color: #dedede;
  638. border: 1px solid #c1c1c1;
  639. width: 530px;
  640. height: 120px;
  641. position: absolute;
  642. text-shadow: 0px 1px 0px #f4f4f4;
  643. filter: dropshadow(color=#fff, offx=0, offy=1);
  644. }
  645. .featurelist_3-text-margin{
  646. margin-top: 10px;
  647. position: absolute;
  648. margin-left: 20px;
  649. text-align: left;
  650. color: #259acb;
  651. min-width: 511px;
  652. height: 45px;
  653.  
  654. }
  655. .image-margin{
  656. float: right;
  657. cursor: default;
  658. margin-top: -140px;
  659.  
  660. }
  661. .credit{
  662. font-size: 12px;
  663. color: white;
  664. }
  665. .credit a{
  666. font-size: 12px;
  667. color: #b1ceba;
  668. font-weight: none;
  669. text-decoration: none;
  670. }
  671. .credit a:hover{
  672. font-size: 12px;
  673. color: #b1ceba;
  674. font-weight: none;
  675. text-decoration: underline;
  676. }
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!