API tools faq
paste
Advertisement
kennyman123

Untitled

kennyman123
Jun 26th, 2016
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.83 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!doctype html>
  3. <html>
  4. <head>
  5. <title>HI/HELLO</title>
  6.  
  7. <link href='http://fonts.googleapis.com/css?family=Open+sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  9. <script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
  10. <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
  11. <meta charset="utf-8">
  12.  
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.  
  15.  
  16. function commentSubmit(){
  17. if(form1.name.value == '' && form1.comments.value == ''){ //exit if one of the field is blank
  18. alert('Enter your message !');
  19. return;
  20. }
  21. $('#imageload').show();
  22. var name = form1.name.value;
  23. var comments = form1.comments.value;
  24. var answer = form2.answer.value;
  25. var xmlhttp = new XMLHttpRequest(); //http request instance
  26.  
  27. xmlhttp.onreadystatechange = function(){ //display the content of insert.php once successfully loaded
  28. if(xmlhttp.readyState==4&&xmlhttp.status==200){
  29. document.getElementById('comment_logs').innerHTML = xmlhttp.responseText; //the chatlogs from the db will be displayed inside the div section
  30. $('#imageload').hide();
  31. }
  32. }
  33. xmlhttp.open('GET', 'insert.php?name='+name+'&comments='+comments+'&answer='+answer, true); //open and send http request
  34. xmlhttp.send();
  35. $('input[type=text]').val() = '';
  36. }
  37.  
  38. $(document).ready(function(e) {
  39. $.ajaxSetup({cache:false});
  40. setInterval(function() {$('#comment_logs').load('logs.php');}, 2000);
  41. });
  42.  
  43. </script>
  44.  
  45. </head>
  46. <style>
  47. textarea{
  48. width:100%;
  49. height: 100px;
  50. }
  51. </style>
  52. <style>
  53. body3{
  54. background:#999;
  55. font-family:Verdana, Geneva, sans-serif;
  56. font-size:12px;
  57. }
  58. #container3{
  59. background-color:#FFF;
  60. width:50%;
  61. padding:10px;
  62. margin:20px;
  63. margin-left:auto;
  64. margin-right:auto;
  65. }
  66. .page_content{
  67. margin:15px;
  68. padding:5px;
  69. border-bottom:1px solid #CCC;
  70. }
  71. .comment_input{
  72. background:#CCC;
  73. margin:10px;
  74. padding:10px;
  75. border:1px solid #CCC;
  76. }
  77.  
  78. .button{
  79. padding:5px 15px 5px 15px;
  80. background:#567373;
  81. color: #FFF;
  82. border-radius: 3px;
  83. }
  84.  
  85. .button:hover{
  86. background:#4D9494;
  87. }
  88.  
  89. a{
  90. text-decoration:none;
  91. }
  92.  
  93. .comment_logs{
  94. margin:5px;
  95. padding:5px;
  96. border:1px solid #CCC;
  97. }
  98.  
  99. .comments_content{
  100. margin:10px;
  101. padding:5px;
  102. border:1px solid #CCC;
  103. -webkit-border-radius: 5px;
  104. -moz-border-radius: 5px;
  105. border-radius: 5px;
  106. }
  107.  
  108. h1{
  109. font-size:16px;
  110. font-family:Verdana, Geneva, sans-serif;
  111. color:#4040E6;
  112. padding-bottom:0px;
  113. margin-bottom:0px;
  114. }
  115. h2{
  116. font-size:10px;
  117. font-family:Verdana, Geneva, sans-serif;
  118. color:#CECED6;
  119. }
  120. h3{
  121. font-size:12px;
  122. font-family:Verdana, Geneva, sans-serif;
  123. color:#75A3A3;
  124. padding-bottom:5px;
  125. margin-bottom:5px
  126. }
  127. h4{
  128. font-size:14px;
  129. font-family:Verdana, Geneva, sans-serif;
  130. color:#CECED6;
  131. text-decoration:none;
  132. float:right;
  133. }
  134. </style>
  135. <style>
  136. #arrow{
  137. width: 100%;
  138. height: 50px;
  139. text-align: center;
  140. cursor: pointer;
  141. position: fixed;
  142. bottom: 0;
  143. left: 0;
  144. border: 0;
  145. outline: 0;
  146. z-index: 100;
  147. color: #BBB;
  148. background: transparent;
  149. -moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
  150. -o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
  151. -webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
  152. transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
  153. font: 36px Heiti, 'Lucida Grande', Arial;
  154. font-weight: bold;
  155. }
  156. #arrow span{
  157. display: inline-block;
  158. position: relative;
  159. top: -18px;
  160. -moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
  161. -o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
  162. -webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
  163. transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
  164. }
  165. #arrow:hover{
  166. background: #EC008C;
  167. }
  168. #arrow:hover span{
  169. top: 0;
  170. color: #FFF;
  171. }
  172. </style>
  173.  
  174. <style>
  175. #pp-nav li .active span, .pp-slidesNav .active span {
  176. background: #bbb;
  177. }
  178. #pp-nav span, .pp-slidesNav span {
  179. border-color: #bbb !important;
  180. }
  181. </style>
  182. <style>
  183. .section {
  184. background-attachment: fixed;
  185. background-size: auto 80%;
  186. background-position: 50% 0%;
  187. background-repeat: no-repeat;
  188.  
  189. }
  190. #section1 {
  191. background-image: url('');
  192. background-size: cover;
  193. }
  194. #section2 {
  195. background-image: url('');
  196. background-size: cover;
  197.  
  198. }
  199. #section3 {
  200. background-image: url('');
  201. background-size: cover;
  202. }
  203. #section4 .content {
  204. top: 100%;
  205. position: absolute;
  206. left: 0;
  207.  
  208. }
  209. </style>
  210. <style>
  211. #container{
  212. width:1400px;
  213. margin:100px auto;
  214. }
  215. #right-column{
  216. width:600px;
  217. float:right;
  218. background:white;
  219. }
  220. @media screen and (max-width:1399px){
  221. #container{
  222. width:80%;
  223. }
  224. #right-column{
  225. width:60%;
  226. }
  227. @media screen and (max-width:959px){
  228. #container{
  229. width:80%;
  230. }
  231. #right-column{
  232. width:60%;
  233. }
  234. @media screen and (max-width:700px){
  235. #container{
  236. width:80%;
  237. }
  238. #right-column{
  239. width:60%;
  240.  
  241. }
  242. </style>
  243. <style>
  244. .intro {
  245.  
  246. display: inline;
  247. float: right;
  248. width: 90%;
  249. margin-right: 5%;
  250. right: 0px; max-width: 500px;
  251. color: #000000;
  252.  
  253. }
  254. @media screen and (max-width 98%){
  255. margin:0 1%
  256. }
  257. .intro h1 {
  258. font-size: 5px;
  259. font-weight: bold;
  260. color: #000;
  261. position: relative;
  262. left: -1px;
  263. top: 27px;
  264.  
  265. }
  266. #section4 .intro {
  267. color: #000;
  268. }
  269. /* Content page
  270. * --------------------------------------- */
  271. .header {
  272. padding-top: 80px;
  273. text-align: center;
  274. }
  275. .header h1 {
  276. font-size: 5em;
  277. font-weight: bold;
  278. color: #fff;
  279. }
  280. .header p {
  281. color: #f2f2f2;
  282. font-size: 1.7em;
  283.  
  284. }
  285. .page {
  286. width: 80%;
  287. margin: 60px auto;
  288. background:white;
  289. padding: 60px;
  290. -webkit-box-sizing: border-box;
  291. /* Safari<=5 Android<=3 */
  292. -moz-box-sizing: border-box;
  293. /* <=28 */
  294. box-sizing: border-box;
  295. }
  296. .page p {
  297. font-style: 12px;
  298. margin: 20px 0 0 0;
  299. line-height: 1.35em;
  300. color: #333;
  301.  
  302. }
  303. </style>
  304. <style>
  305. .intro1 {
  306. position: absolute;
  307. bottom: 100px;
  308. text-align: justify;
  309. right: 200px; max-width: 500px;
  310. bottom: 200px;
  311.  
  312. }
  313. .intro h1 {
  314. font-size: 5em;
  315. font-weight: bold;
  316. color: #000;
  317. }
  318. #section4 .intro {
  319. color: #000;
  320. }
  321. /* Content page
  322. * --------------------------------------- */
  323. .header {
  324. padding-top: 80px;
  325. text-align: center;
  326. }
  327. .header h1 {
  328. font-size: 5em;
  329. font-weight: bold;
  330. color: #fff;
  331. }
  332. .header p {
  333. color: #f2f2f2;
  334. font-size: 1.7em;
  335. }
  336. .page {
  337. width: 80%;
  338. margin: 60px auto;
  339. background:white;
  340. padding: 60px;
  341. -webkit-box-sizing: border-box;
  342. /* Safari<=5 Android<=3 */
  343. -moz-box-sizing: border-box;
  344. /* <=28 */
  345. box-sizing: border-box;
  346. }
  347. .page p {
  348. font-style: 12px;
  349. margin: 20px 0 0 0;
  350. line-height: 1.35em;
  351. color: #333;
  352. }
  353. </style>
  354. <style>
  355. .intro2 {
  356. position: absolute;
  357.  
  358. text-align: justify;
  359. right: 250px; max-width: 500px;
  360. bottom: 160px;
  361.  
  362. }
  363. .intro h1 {
  364. font-size: 5em;
  365. font-weight: bold;
  366. color: #000;
  367. }
  368. #section4 .intro {
  369. color: #000;
  370. }
  371. /* Content page
  372. * --------------------------------------- */
  373. .header {
  374. padding-top: 80px;
  375. text-align: center;
  376. }
  377. .header h1 {
  378. font-size: 5em;
  379. font-weight: bold;
  380. color: #fff;
  381. }
  382. .header p {
  383. color: #f2f2f2;
  384. font-size: 1.7em;
  385. }
  386. .page {
  387. width: 80%;
  388. margin: 60px auto;
  389. background:white;
  390. padding: 60px;
  391. -webkit-box-sizing: border-box;
  392. /* Safari<=5 Android<=3 */
  393. -moz-box-sizing: border-box;
  394. /* <=28 */
  395. box-sizing: border-box;
  396. }
  397. .page p {
  398. font-style: 12px;
  399. margin: 20px 0 0 0;
  400. line-height: 1.35em;
  401. color: #333;
  402. }
  403. </style>
  404.  
  405. <body>
  406. <button id="arrow"> <span>↓</span>
  407. </button>
  408. <div id="pagepiling">
  409. <div class="section" id="section1">
  410. <div id="container">
  411. <aside id="right-column">
  412. <div class="intro">
  413. <br/>
  414. <br/>
  415. <br/>
  416. <br/>
  417. <br/>
  418. <br/>
  419.  
  420. <font size="4">
  421.  
  422. </br>
  423. </br>
  424.  
  425. </h1>
  426.  
  427. </font>
  428.  
  429. </div>
  430. </aside>
  431. </div>
  432. </div>
  433. <div class="section" id="section2">
  434. <div class="intro1">
  435.  
  436. <font size="4">
  437.  
  438. </font>
  439. </div>
  440. </div>
  441.  
  442. </button>
  443. <div class="section" id="section3">
  444. <div class="intro2">
  445. <font size="4">
  446.  
  447.  
  448. </font>
  449. </div>
  450. </div>
  451. <div class="section pp-scrollable" id="section4">
  452.  
  453. <div id="container3">
  454.  
  455. Kung
  456.  
  457. <div class="page_content">
  458.  
  459. <div class="page"><span style="font-family:Orbitron;font-size:20px;color:black;">
  460.  
  461.  
  462. <form name="form2">
  463. <form method="post" action="message.php">
  464. <input type="radio" name="answer" value="Oo" />Yes
  465. <input type="radio" name="answer" value="Hindi" />No
  466. </form>
  467. </span>
  468. </div>
  469.  
  470. <div class="comment_input">
  471. <form name="form1">
  472. <input type="text" name="name" placeholder="Name..."/></br></br>
  473. <textarea name="comments" placeholder="Leave Comments Here..." ></textarea></br></br>
  474. <a href="#" onClick="commentSubmit()" class="button">Post</a></br>
  475. <div id"imageload" style="display:none;">
  476. <img src="loading.gif"/>
  477. </div>
  478. </form>
  479. </div>
  480. <div id"imageload" style="display:none;">
  481. <img src="loading.gif"/>
  482. </div>
  483. <div id="comment_logs">
  484. Loading comments...<img src="loading.gif"/>
  485.  
  486. </div>
  487.  
  488. </div>
  489.  
  490. </div>
  491.  
  492.  
  493.  
  494. <script>$('#pagepiling').pagepiling({
  495. verticalCentered: false,
  496. css3: false,
  497. sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
  498. onLeave: function(index, nextIndex, direction) {
  499.  
  500. //fading out the txt of the leaving section
  501. $('.section').eq(index - 1).find('h1, p').fadeOut(700, 'easeInQuart');
  502.  
  503. //fading in the text of the destination (in case it was fadedOut)
  504. $('.section').eq(nextIndex - 1).find('h1, p').fadeIn(700, 'easeInQuart');
  505.  
  506. //reaching our last section? The one with our normal site?
  507. if (nextIndex == 4) {
  508. $('#arrow').hide();
  509.  
  510. //fading out navigation bullets
  511. $('#pp-nav').fadeOut();
  512.  
  513. $('#section4').find('.content').animate({
  514. top: '0%'
  515. }, 700, 'easeInQuart');
  516. }
  517.  
  518. //leaving our last section? The one with our normal site?
  519. if (index == 4) {
  520. $('#arrow').show();
  521.  
  522. //fadding in navigation bullets
  523. $('#pp-nav').fadeIn();
  524.  
  525. $('#section4 .content').animate({
  526. top: '100%'
  527. }, 700, 'easeInQuart');
  528. }
  529. },
  530. });
  531.  
  532. $('#arrow').click(function() {
  533. $.fn.pagepiling.moveSectionDown();
  534. });</script>
  535. </body>
  536. </html>
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!