API tools faq
paste
Advertisement
jeckerx

Happy Birthday

jeckerx
Sep 17th, 2014
349
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <link rel="SHORTCUT ICON" href="http://www.hi5style.com/gr/heart.gif">
  3. <title>Happy Birthday Novi Paramita</title>
  4. <meta name="author" content="Happy Birthday Novi Paramita" />
  5. <meta name="keywords" content="Happy Birthday Novi Paramita" />
  6. <meta name="description" content="Happy Birthday Novi Paramita" />
  7. <meta name="autor" content="Jaka Aerlangga" />
  8. <head>
  9. <style id='page-skin-1' type='text/css'><!--
  10. *{
  11. padding:0;
  12. margin:0;
  13. }
  14. .clear{
  15. clear:both;
  16. }
  17. a img{
  18. border:0;
  19. }
  20. a:focus{
  21. outline:0;
  22. }
  23. body{
  24. background:#FFFFCC;
  25. font-family: 'Ubuntu Condensed', sans-serif;
  26. font-size:14px;
  27. }
  28. .wrapper{
  29. width:960px;
  30. margin:0 auto;
  31. }
  32. /* TOP BAR START */
  33. .topbar{
  34. background:#000000;
  35. height:50px;
  36. width:100%;
  37. }
  38. .topbar-center{
  39. width:960px;
  40. margin:0 auto;
  41. }
  42. .topbar-logo{
  43. float:left;
  44. color:#FFF;
  45. text-transform:uppercase;
  46. padding-top:11px;
  47. }
  48. .topbar-logo img{
  49. float:left;
  50. }
  51. .topbar-logo h1{
  52. font-size: 18px;
  53. font-weight: 400;
  54. letter-spacing:0.8px;
  55. float: left;
  56. padding-left: 6px;
  57. padding-top: 3px;
  58. }
  59. .topbar-menu{
  60. float:right;
  61. }
  62. .topbar ul{
  63. list-style:none;
  64. }
  65. .topbar ul li{
  66. float:left;
  67. }
  68. .topbar ul li a{
  69. display:block;
  70. padding:18px 18px 6px 18px;
  71. text-decoration:none;
  72. color:#d6d6d6;
  73. letter-spacing:0.8px;
  74. }
  75. .topbar ul li a:hover,.topbar ul li a.selected{
  76. background:#c72505;
  77. color:#FFF;
  78. }
  79. /* TOP BAR END */
  80. .colorbar{
  81. height:5px;
  82. width:100%;
  83. /*background:url() repeat-x;*/
  84. margin-bottom:25px;
  85. /*box-shadow: 2px 1px 2px #D6D6D6;*/
  86. }
  87. h1.numbering{
  88. font-size:50px;display:none;
  89. font-weight:400;text-shadow:1px 1px 1px #333;
  90. line-height:130px;color:#fff;
  91. }
  92. h3.title{
  93. font-size:38px;margin-top:150px;
  94. font-weight:400;opacity:0.7;
  95. letter-spacing:3px;text-shadow:1px 1px 1px #333;
  96. padding-left:5px;color:#fff;
  97. }
  98. h2.smalltitle{
  99. font-size:28px;
  100. padding-top:20px;
  101. }
  102. .squarecontents{
  103. color:#FFF;
  104. padding-left:20px;
  105. }
  106. .squarecontents p{
  107. line-height:26px;
  108. font-size:16px;
  109. letter-spacing:0.6px;
  110. padding-top:10px;
  111. }
  112. .square-cards{
  113. display:block;
  114. text-decoration:none;
  115. color:#FFF;
  116. padding-left:20px;
  117. }
  118. .square-cards:hover{
  119. color:#EDD;
  120. }
  121. .squares{
  122. position:relative;
  123. overflow:hidden;
  124. }
  125. .moveablesquare{
  126. position:absolute;
  127. /*left:-255px;
  128. top:0;*/
  129. }
  130. .square-1{
  131. width:700px;
  132. height:340px;
  133. margin-right:5px;
  134. float:left;
  135. }
  136. .square-1-card{
  137. width:680px;
  138. height:255px;
  139. background:url(http://s29.postimg.org/4pu9sz05j/kartu_1.png) no-repeat;
  140. padding-top:85px;
  141. }
  142. .about-content{
  143. width:680px;
  144. height:340px;
  145. background:#e34924;
  146. }
  147. .square-2{
  148. width:255px;
  149. height:340px;
  150. color:#FFF;
  151. float:left;
  152. }
  153. .square-2-card{
  154. width:235px;
  155. height:255px;
  156. background:url(http://4.bp.blogspot.com/-tC7Xzl05odg/UxF2V8e5hyI/AAAAAAAACvM/0kxnx8XaOS4/s1600/kartu+2.png) ;
  157. padding-top:85px;
  158. float:left;
  159. }
  160. .follow-content{
  161. width:235px;
  162. height:340px;
  163. background:#324da4;
  164. float:left;
  165. }
  166. .follow-content ul{
  167. list-style:none;
  168. }
  169. .follow-content ul li{
  170. float:left;
  171. padding-right:30px;
  172. padding-bottom:20px;
  173. }
  174. .follow-content ul li a{
  175. display:block;
  176. }
  177. .follow-content ul li a:hover img{
  178. border:5px solid #E34923;
  179. margin:-5px;
  180. }
  181. .googleplusone{
  182. background:#FFF;
  183. padding:3px;
  184. float:left;
  185. border:2px solid #E34923;
  186. }
  187. .square-3{
  188. width:370px;
  189. height:284px;
  190. color:#FFF;
  191. float:left;
  192. margin-top:5px;
  193. margin-right:5px;
  194. }
  195. .square-3-card{
  196. width:350px;
  197. height:224px;
  198. background:url(http://s17.postimg.org/4z9j97jnz/happy.jpg) repeat-x;
  199. padding-top:60px;
  200. float:left;
  201. }
  202. .blog-content{
  203. width:330px;
  204. height:284px;
  205. background:#333;
  206. float:left;
  207. padding-right:20px;
  208. }
  209. .square-4{
  210. width:585px;
  211. height:284px;
  212. color:#FFF;
  213. float:left;
  214. margin-top:5px;
  215. }
  216. .square-4-card{
  217. width:565px;
  218. height:224px;
  219. background:url(http://s9.postimg.org/vmo1b00n3/kartu_4.png) repeat-x;
  220. padding-top:60px;
  221. }
  222. .contact-content{
  223. width:565px;
  224. height:284px;
  225. background:#854554;
  226. }
  227. .contact-content ul{
  228. list-style:none;
  229. }
  230. .contact-msg{
  231. float:right;
  232. padding-top:35px;
  233. padding-right:20px;
  234. }
  235. .contact-msg img{
  236. padding-right:5px;
  237. padding-bottom:1px;
  238. }
  239. .square-5{
  240. width:960px;
  241. height:200px;
  242. color:#FFF;
  243. float:left;
  244. margin-top:5px;
  245. }
  246. .square-5-card{
  247. width:940px;
  248. height:185px;
  249. background:#619b20;
  250. padding-top:15px;
  251. }
  252. .mywork-content{
  253. width:940px;
  254. height:284px;
  255. background:#619b20;
  256. padding-right:20px;
  257. }
  258. .mywork-thumbnail-container{
  259. width:270px;
  260. padding-top:20px;
  261. float:left;
  262. }
  263. .mywork-thumbnail-container ul{
  264. list-style:none;
  265. }
  266. .mywork-thumbnail-container ul li{
  267. float:left;
  268. }
  269. .mywork-thumbnail-container ul li a{
  270. display:block;
  271. margin-right:12px;
  272. margin-bottom:5px;
  273. }
  274. .mywork-thumbnail-container ul li a img{
  275. border:3px #C33 solid;
  276. }
  277. .mywork-thumbnail-container ul li a:hover img,.mywork-thumbnail-container ul li a.selected img{
  278. border:3px #FC0 solid;
  279. }
  280. .mywork-bigimg-container{
  281. height:194px;max-width:200px;
  282. float:left;
  283. border:3px solid #C33;
  284. margin-top:20px;
  285. }
  286. .mywork-bigimg-container img{max-width:200px;
  287. display:none;
  288. }
  289. .mywork-description-container{
  290. height:162px;
  291. float:left;
  292. margin-top:20px;
  293. padding-left:10px;
  294. width:440px;
  295. }
  296. .mywork-description-container div{
  297. display:none;
  298. }
  299. .form-row{
  300. padding-top:15px;
  301. padding-bottom:6px;
  302. width:100%;
  303. }
  304. .form-textfield{
  305. font-family: 'Ubuntu Condensed', sans-serif;
  306. padding:10px 5px;
  307. width:249px;
  308. border:1px #933 solid;
  309. float:left;
  310. margin-right:20px;
  311. background:#681f30;
  312. color:#FFF;
  313. font-size:14px;
  314. }
  315. .form-textarea{
  316. font-family: 'Ubuntu Condensed', sans-serif;
  317. padding:10px 5px;
  318. width:530px;
  319. border:1px #933 solid;
  320. float:left;
  321. margin-right:30px;
  322. background:#681f30;
  323. color:#FFF;
  324. height:75px;
  325. overflow:auto;
  326. font-size:14px;
  327. }
  328. .Lfinal {float:left;width:350px;font-size:20px;margin-top:20px;}
  329. .Rfinal {float:right;width:500px;margin-top:20px;}
  330. input.ya
  331. {
  332. color: #333;
  333. background: lightpink;margin-right:20px;font-weight:bold;
  334. width:200px;height:40px;font-size:30px;
  335. border: 2px solid pink;box-shadow:2px 2px 2px #333;
  336. }
  337. input.ya:hover {box-shadow:2px 2px 2px #000;background:pink;color:#000;border: 2px solid #fff}
  338. input.tidak
  339. {
  340. color: #ccc;box-shadow:2px 2px 2px #333;
  341. background: #555;margin-right:20px;margin-top:5px;height:30px;
  342. width:100px;position:center center;
  343. border: 1px solid #777
  344. }
  345. input.tidak:hover {box-shadow:2px 2px 2px #333;background:gray;color:#fff;border: 1px solid #999}
  346. .submit input
  347. {
  348. color: #000;
  349. background: #ffa20f;
  350. border: 2px outset #d7b9c9
  351. }
  352. .green-submit{
  353. padding:10px;
  354. border:#060 solid 2px;
  355. background:#619b20;
  356. font-family: 'Ubuntu Condensed', sans-serif;
  357. color:#FFF;
  358. float:left;
  359. margin-right:20px;
  360. cursor:pointer;
  361. }
  362. .green-submit:hover{
  363. background:#769356;
  364. }
  365. .green-submit.disabled, .green-submit:active{
  366. background:#769356;
  367. color:#CCC;
  368. }
  369. .callme{
  370. float:left;
  371. padding-right:10px;
  372. padding-top:12px;
  373. }
  374. .phonenumber{
  375. font-size:24px;
  376. padding-top:5px;
  377. }
  378. /* FOR FOOTER */
  379. .footer{
  380. background:#000;
  381. width:100%;
  382. margin-top:50px;
  383. }
  384. .footer-center{
  385. width:960px;
  386. margin:0 auto;
  387. padding-top:10px;
  388. padding-bottom:10px;
  389. }
  390. .footer-center ul{
  391. list-style:none;
  392. }
  393. .footer-center li{
  394. float:left;
  395. padding-right:10px;
  396. }
  397. .footer-center li a{
  398. color:#D6D6D6;
  399. text-decoration:none;
  400. }
  401. .footer-center li a:hover{
  402. text-decoration:underline;
  403. }
  404. .footer-center-left{
  405. float:left;
  406. }
  407. .footer-center-right{
  408. float:right;
  409. color:#D6D6D6;
  410. }
  411.  
  412. --></style>
  413. <script src='http://sayloveonline.googlecode.com/files/jquery-1.7.min.js' type='text/javascript'></script>
  414. <script src='http://sayloveonline.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
  415. <script src='http://sayloveonline.googlecode.com/files/jquery.scrollTo-min.js' type='text/javascript'></script>
  416. <script src='http://sayloveonline.googlecode.com/files/script.js' type='text/javascript'></script>
  417. <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",k="?m=1";function l(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+k;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var m=l();m&&window.location.replace(m)};
  418. </script><script type="text/javascript">
  419. if (window.jstiming) window.jstiming.load.tick('headEnd');
  420. </script></head>
  421. <body oncontextmenu="return false;" onkeydown="return false;" onmousedown="return false">
  422. <div class='navbar section' id='navbar'></div>
  423. <!-- TOP BAR START -->
  424. <div class='topbar'>
  425. <div class='topbar-center'>
  426. <div class='topbar-logo'>
  427. <img alt='Logo' src='http://1.bp.blogspot.com/-v8lKH64XOcY/T9nuZ5WKWpI/AAAAAAAAAR8/NjsrPdZVIc4/s320/surrender.ico' width='32'/>
  428. <h1>HBD Novi Paramita</h1>
  429. </div>
  430. <div class='topbar-menu'>
  431. <ul>
  432. <li>
  433. <a class='selected home-menubtn' href='#'>HOME</a>
  434. </li>
  435. <li>
  436. <a class='about-menubtn' href='#foryou'>FOR YOU</a>
  437. </li>
  438. <li>
  439. <a class='follow-menubtn' href='#support'>CONTACT ME</a>
  440. </li>
  441. <li>
  442. <a class='blog-menubtn' href='#ucapan'>HAPPY</a>
  443. </li>
  444. <li>
  445. <a class='contact-menubtn' href='#itsyou'>GALERY</a>
  446. </li>
  447. <li>
  448. <a class='work-menubtn' href='#toyou'>TO YOU</a>
  449. </li>
  450. </ul>
  451. </div>
  452. </div>
  453. </div>
  454. <!-- TOP BAR END -->
  455. <div class='colorbar'>
  456. </div>
  457. <div class='wrapper'>
  458. <div class='square-1 squares'>
  459. <div class='moveablesquare'>
  460. <a class='square-1-card square-cards' href='#foryou'>
  461. <h3 class='title'>Click Ini ..</h3>
  462. </a>
  463. <div class='about-content squarecontents'>
  464. <h2 class='smalltitle'>Cieee yang ultaahh..</h2>
  465. <p>
  466. <img align='left' alt='Photo' src='http://s27.postimg.org/kt5d6nf4z/10653704_750312118376761_6831960012301612423_n.jpg' style='border: 1px solid #D6D6D6;margin-right: 8px;margin-top: 8px;' width='120px'/>
  467.                                
  468.                              
  469. Hmm bingung jadinya mau nulis apa. hehe.<br/>
  470. Nov? Happy Birthday yah.<br/>
  471. Semoga yang terbaik datang menghampirimu ya.<br/>
  472. Tambah rajin, Tambah pinter, tambah sayang sama ortu, dan tentunya tambah sayang sama aku juga ya haha,<br/>
  473. Semoga cita-citamu terwujud,<br/>
  474. Sisanya ngomong langsung jaa ya hehe.<br/>
  475. Mwaaaahhhh :*<br/>
  476. LOVE U \(^_^)/ <br/>
  477.             </p>
  478. </div>
  479. <div class='clear'></div>
  480. </div>
  481. </div>
  482. <div class='square-2 squares'>
  483. <div class='moveablesquare' style='width:510px; left:-255px;'>
  484. <div class='follow-content squarecontents'>
  485. <ul style='padding-top:30px;'>
  486. <li>
  487. <a href='https://www.fb.com/jeckerx2' target="_blank">
  488. <img alt='Facebook logo' src='http://2.bp.blogspot.com/-TN0wIr9W3lw/T9jLhU94boI/AAAAAAAAET4/M_Hr0k-GxwE/s1600/social-facebook-box-blue-icon.png' width='70'/>
  489. </a>
  490. </li>
  491. <li>
  492. <a href='https://twitter.com/jeckerx1' target="_blank">
  493. <img alt='Twitter Logo' src='http://2.bp.blogspot.com/-U7-rvco7N_0/T9jLkFUlcBI/AAAAAAAAEUI/O441F-gf8ZI/s1600/social-twitter-box-blue-icon.png' width='70'/>
  494. </a>
  495. </li>
  496. <li>
  497. <div class='clear'></div>
  498. <div class='googleplusone'>
  499. <!-- Place this tag where you want the +1 button to render -->
  500. <g:plusone annotation='inline' width='165'></g:plusone>
  501. <!-- Place this render call where appropriate -->
  502. <script type='text/javascript'>
  503.                 (function() {
  504.                   var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  505.                   po.src = 'https://apis.google.com/js/plusone.js';
  506.                   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  507.                 })();
  508.               </script>
  509. </div>
  510. </div>
  511. <a class='square-2-card square-cards' href='#support'>
  512. <h1 class='numbering'>02.</h1>
  513. <h1 class='title'>Click <br/>Me</h1>
  514. </a>
  515. <div class='clear'></div>
  516. </div>
  517. </div>
  518. <div class='square-3 squares'>
  519. <div class='moveablesquare' style='width:740px;'>
  520. <a class='square-3-card square-cards' href='#itsme'>
  521. <h2 class='title'>Click <br/> </h2>
  522. </a>
  523. <div class='blog-content squarecontents'>
  524. <h2 class='smalltitle'>HAPPY BIRTHDAY</h2>
  525. <p>Waktu berjalan tiada henti mengiringi rembulan dan mentari
  526. yang terbit dan tenggelam setiap hari mengiringi usiamu yang terus bertambah dari hari ke hari hingga saat ini.
  527. Selamat ulang tahun NPMP,
  528. Semoga langkah-langkahmu semakin matang dan selalu membawamu ke arah yang lebih baik.
  529.               </p>
  530. </div>
  531. </div>
  532. </div>
  533. <div class='square-4 squares'>
  534. <div class='moveablesquare' style='top:-284px;'>
  535. <div class='contact-content squarecontents'>
  536. <div class='square-title-topbar'>
  537. <h2 class='smalltitle'>GALERY</h2>
  538. <div class='mywork-thumbnail-container'>
  539. <ul>
  540. <li>
  541. <a class='selected' href='#' rel='1'>
  542. <img height='90' src='http://s9.postimg.org/mdzn63vwf/10247214_722939321114041_680448810629273820_n.jpg' width='70'/>
  543. </a>
  544. </li>
  545. <li>
  546. <a href='#' rel='2'>
  547. <img height='90' src='http://s16.postimg.org/bnlxsmrb9/10593083_727300927344547_9149738025212934482_n.jpg' width='70'/>
  548. </a>
  549. </li>
  550. <li>
  551. <a href='#' rel='3'>
  552. <img height='90' src='http://s28.postimg.org/nf7gr44kt/10483296_727301187344521_8932733570429050749_n.jpg' width='70'/>
  553. </a>
  554. </li>
  555. <li>
  556. <a href='#' rel='4'>
  557. <img height='90' src='http://s18.postimg.org/8fsw8lexl/10620653_750312411710065_1801933565753983797_n.jpg' width='70'/>
  558. </a>
  559. </li>
  560. <li>
  561. <a href='#' rel='5'>
  562. <img height='90' src='http://s27.postimg.org/vvfi27fj7/1554561_750314335043206_3581875257664695238_n.jpg' width='70'/>
  563. </a>
  564. </li>
  565. <li>
  566. <a href='#' rel='6'>
  567. <img height='90' src='http://s13.postimg.org/kj0qugdlz/1910646_739705839437389_2071460985872302328_n.jpg' width='70'/>
  568. </a>
  569. </li>
  570. </ul>
  571. </div>
  572. <div class='mywork-bigimg-container'>
  573. <img class='1' height='194' src='http://s9.postimg.org/mdzn63vwf/10247214_722939321114041_680448810629273820_n.jpg' style='display:block'/>
  574. <img class='2' height='194' src='http://s16.postimg.org/bnlxsmrb9/10593083_727300927344547_9149738025212934482_n.jpg'/>
  575. <img class='3' height='194' src='http://s28.postimg.org/nf7gr44kt/10483296_727301187344521_8932733570429050749_n.jpg'/>
  576. <img class='4' height='194' src='http://s18.postimg.org/8fsw8lexl/10620653_750312411710065_1801933565753983797_n.jpg'/>
  577. <img class='5' height='194' src='http://s27.postimg.org/vvfi27fj7/1554561_750314335043206_3581875257664695238_n.jpg'/>
  578. <img class='6' height='194' src='http://s13.postimg.org/kj0qugdlz/1910646_739705839437389_2071460985872302328_n.jpg'/>
  579. </div>
  580. </div>
  581. </div>
  582. <a class='square-4-card square-cards' href='#itsyou'>
  583. <h3 class='title'>GALERY</h3>
  584. </a>
  585. <div class='clear'></div>
  586. </div>
  587. </div>
  588. <div class='square-5 squares'>
  589. <a class='square-5-card square-cards' href='#toyou'>
  590. <h3 class='title' style='text-align:center;margin-top:10px;font-size:90px'>Buka Ini !! ^_^</h3>
  591. </a>
  592. <div class='mywork-content squarecontents'>
  593. <div class='Lfinal'>Maaf ya selama ini aku belum bisa jadi yang terbaik buat kamu :( <br/><br/>
  594. Maaf juga kalo sering buat kamu kecewa :') <br/>
  595. BE MY LAST NOV.. :* <br/>
  596. </div>
  597. <div class='Rfinal'>
  598. <div>hmm sekali lagi<br/>
  599. <h2>SELAMAT ULANG TAHUN NOV..</h2>
  600. <div>Maaf aku cuma bisa ngasih sesuatu yang gak terlalu berharga kaya gini<br/>
  601. <br/>
  602. <h2><i>I LOVE YOU (^_^)/</i></h2>
  603. <img src='http://www.adsense-id.com/forums/images/vtc/09.gif'/>
  604. </div>
  605. </div></div>
  606. </div>
  607. <div class='clear'>
  608. </div>
  609. </div>
  610. <div class='footer'>
  611. <div class='footer-center'>
  612.  
  613. <div class='footer-center-right'>
  614.             Jum'at, 19 September 2014 | Created by <a href='https://facebook.com/jeckerx2'>Jaka Aerlangga</a> for <a href='https://facebook.com/lovejekerx'>Novi Paramita Npmp</a>.
  615.         </div>
  616. <div class='clear'></div>
  617. </div>
  618. </div>
  619. <embed src="http://youtube.googleapis.com/v/ObV4YcGkcQ8&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="1" height="1"></embed>
  620.  
  621.  
  622.  
  623. </body>
  624. </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!