API tools faq
paste
Advertisement
faluvtha

[#2] — Portfolio [Pages]

faluvtha
Apr 7th, 2014
1,836
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. ┏━━━┓╋╋┏┓
  6. ┃┏━━┛╋╋┃┃
  7. ┃┗━━┳┓┏┫┃┏┳┓┏┳━━┓
  8. ┃┏━━┫┃┃┃┗┛┫┃┃┃┏┓┃
  9. ┃┃╋╋┃┗┛┃┏┓┫┗┛┃┗┛┃
  10. ┗┛╋╋┗━━┻┛┗┻━━┻━━┛
  11.  
  12. PORTFOLIO PAGE by Fukuo@Tumblr
  13.  
  14. All content, including illustration, are made by me a.k.a Faiz Ichsan Jaya, please don't steal, redistribute as your own and claim as yours.
  15.  
  16. -->
  17.  
  18.  
  19. <html>
  20. <head>
  21. <title>Portofolio - {Title}</title>
  22.  
  23. <!-- Font -->
  24. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <!-- Style My-Tool-Tips by Malihu -->
  28.  
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30. <script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
  31. <script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:200,
  38. tip_fade_speed:300,
  39. attribute:"title"
  40. });
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45. <style type="text/css">
  46.  
  47. /* ------ GENERAL ------ */
  48. body {
  49. margin:0;
  50. padding:0;
  51. background-color:#f6f6f6;
  52. background-image:url('http://25.media.tumblr.com/tumblr_ltqq73Kh5g1qhvdofo6_250.png');
  53. background-position: fixed;
  54. background-attachment:fixed;
  55. background-repeat:repeat;
  56. }
  57.  
  58. html {
  59. margin:0;
  60. padding:0;
  61. }
  62.  
  63. /* ------ S-M-T TOOLTIP ------ */
  64. #s-m-t-tooltip{
  65. width:auto;
  66. z-index:10;
  67. margin:24px 14px 7px 12px;
  68. padding:8px;
  69. background:#111;
  70. font-family:'Open Sans';
  71. font-size:12px;
  72. line-height:16px;
  73. color:#fff;
  74. text-transform:uppercase;
  75. border:1px solid #fff;
  76. z-index:9999999;
  77. }
  78.  
  79. /* ------ SCROLLBAR ------ */
  80. ::-webkit-scrollbar {width: 6px;}
  81.  
  82. ::-webkit-scrollbar-track-piece
  83. {background-color:#eee;}
  84.  
  85. ::-webkit-scrollbar-thumb:vertical
  86. {width:6px;
  87. background-color:#111;}
  88.  
  89. /* ------ TOP BAR ------ */
  90. #top_menu {
  91. position:fixed;
  92. left:0;
  93. top:0;
  94. width:100%;
  95. text-align:center;
  96. padding:20px 0 20px 0;
  97. background-color:#111;
  98. color:white;
  99. font-family:'Open Sans';
  100. font-size:25px;
  101. z-index:999;
  102. }
  103.  
  104. /* ------ CONTENT ------ */
  105. #content_holder {
  106. margin:-100px auto 50px auto;
  107. background-color:#ddd; /* CONTENT'S BACKGROUND */
  108. padding:0 0 15px 0;
  109. width:800px;
  110. height:relative;
  111. overflow:hidden;
  112. }
  113.  
  114. /* ------ IMAGE CONTENT ------ */
  115. .image_content {
  116. display:inline-block;
  117. width:230px;
  118. height:345px;
  119. border:2px solid #fff; /* BORDER IMAGE */
  120. margin:20px 0 0 22px;
  121. overflow:hidden;
  122. cursor:crosshair;
  123. }
  124.  
  125. /* ------ NAME CONTENT ------ */
  126. .name_content {
  127. position:absolute;
  128. width:230px;
  129. color:transparent;
  130. background:#888; /* BACKGROUND COLOR */
  131. font-family:'Open Sans', sans-serif;
  132. text-align:center;
  133. margin:-160px 0 0 0px;
  134. padding:0;
  135. opacity:0;
  136. cursor:crosshaie;
  137. -webkit-transition: all 0.5s ease-in;
  138. -moz-transition: all 0.5s ease-in;
  139. -o-transition: all 0.5s ease-in;
  140. }
  141.  
  142.  
  143. .image_content:hover .name_content {
  144. opacity:1;
  145. color:#fff; /* COLOR */
  146. width:230px;
  147. margin:-350px 0 0 0;
  148. padding:163px 0 160px 0;
  149. -webkit-transition: all 0.4s ease-out;
  150. -moz-transition: all 0.4s ease-out;
  151. -o-transition: all 0.4s ease-out;
  152. }
  153.  
  154. /* ------ CIRCLE ------ */
  155. .circle-1 , .circle-2, .circle-3 {
  156. position:absolute;
  157. background:#555; /* COLOR */
  158. opacity:0;
  159. width:18px;
  160. height:18px;
  161. border-radius:100%;
  162. -moz-border-radius:100%;
  163. -webkit-transition: all 0.4s ease-out;
  164. -moz-transition: all 0.4s ease-out;
  165. -o-transition: all 0.4s ease-in;
  166. }
  167.  
  168. .circle-1 {
  169. margin:-135px 0 0 15px;
  170. }
  171.  
  172. .circle-2 {
  173. margin:-105px 0 0 105px;
  174. }
  175.  
  176. .circle-3 {
  177. margin:-135px 0 0 195px;
  178. }
  179.  
  180. .image_content:hover .circle-1 {
  181. opacity:1;
  182. margin:-250px 0 0 75px;
  183. -webkit-transition: all 0.4s ease-out;
  184. -moz-transition: all 0.4s ease-out;
  185. -o-transition: all 0.4s ease-out;
  186. }
  187.  
  188. .image_content:hover .circle-2 {
  189. opacity:1;
  190. margin:-250px 0 0 105px;
  191. -webkit-transition: all 0.4s ease-out;
  192. -moz-transition: all 0.4s ease-out;
  193. -o-transition: all 0.4s ease-out;
  194. }
  195.  
  196. .image_content:hover .circle-3 {
  197. opacity:1;
  198. margin:-250px 0 0 135px;
  199. -webkit-transition: all 0.4s ease-out;
  200. -moz-transition: all 0.4s ease-out;
  201. -o-transition: all 0.4s ease-out;
  202. }
  203.  
  204. /* ------ ARROW ------ */
  205. .arrow {
  206. position:absolute;
  207. opacity:0;
  208. margin:-155px 0 0 90px;
  209. background:rgba(0,0,0,0.5);
  210. width:50px;
  211. height:50px;
  212. border-radius:100%;
  213. -moz-border-radius:100%;
  214. -webkit-transition: all 0.4s ease-in;
  215. -moz-transition: all 0.4s ease-in;
  216. -o-transition: all 0.4s ease-in;
  217. }
  218.  
  219. .arrow:hover {
  220. background-color:#111;
  221. }
  222.  
  223. .arrow img {
  224. width:50px;
  225. height:50px;
  226. }
  227.  
  228. .image_content:hover .arrow {
  229. opacity:1;
  230. margin:-105px 0 0 90px;
  231. -webkit-transition: all 0.4s ease-out;
  232. -moz-transition: all 0.4s ease-out;
  233. -o-transition: all 0.4s ease-out;
  234. }
  235.  
  236. /* ------ MULTI-COLORED TOPBAR BY EXCOLO@TUMBLR ------ */
  237.  
  238. #colour-bar {
  239. position:fixed;
  240. left:0;
  241. top:74px;
  242. width:100%;
  243. height:3px;
  244. overflow:hidden;
  245. z-index:99999999999;
  246. }
  247.  
  248. .colour-part {
  249. width:10%;
  250. height:100%;
  251. float:left;
  252. }
  253.  
  254. #position_menu {
  255. width:400px;
  256. margin:220px auto;
  257. z-index:99999;
  258. }
  259.  
  260. .menu_c {
  261. display:inline-block;
  262. width:30px;
  263. height:30px;
  264. margin:0 0 0 50px;
  265. -moz-border-radius:100%;
  266. border-radius:100%;
  267. }
  268.  
  269. .line_c {
  270. position:absolute;
  271. margin:-20px 0 0 -10px;
  272. width:400px;
  273. height:2px;
  274. background-color:#bbb;
  275. z-index:-9;
  276. }
  277.  
  278. </style>
  279. </head>
  280. <body>
  281.  
  282. <div id="top_menu">My Portfolio</div>
  283.  
  284. <!-- multi-colored by Excolo
  285.  
  286. NOTE: Just change the color with your liking
  287.  
  288. -->
  289. <div id="colour-bar">
  290. <div class="colour-part" style="background-color:#ca4a4a;"></div>
  291. <div class="colour-part" style="background-color:#de8110;"></div>
  292. <div class="colour-part" style="background-color:#444;"></div>
  293. <div class="colour-part" style="background-color:#47b847;"></div>
  294. <div class="colour-part" style="background-color:#5491cf;"></div>
  295. <div class="colour-part" style="background-color:#ca4a4a;"></div>
  296. <div class="colour-part" style="background-color:#de8110;"></div>
  297. <div class="colour-part" style="background-color:#444;"></div>
  298. <div class="colour-part" style="background-color:#47b847;"></div>
  299. <div class="colour-part" style="background-color:#5491cf;"></div>
  300. </div>
  301.  
  302.  
  303. <div id="position_menu">
  304. <!-- CIRCLE MENU -->
  305. <a title="home" href="/" class="menu_c" style="background-color:#ca4a4a;"></a>
  306. <a title="ask" href="/ask" class="menu_c" style="background-color:#de8110;"></a>
  307. <a title="history" href="/archive" class="menu_c" style="background-color:#47b847;"></a>
  308. <a title="&copy; Fukuo" href="http://fukuo.tumblr.com/" class="menu_c" style="background-color:#5491cf;"></a>
  309.  
  310. <!-- LINE -->
  311. <div class="line_c"></div>
  312. </div>
  313.  
  314. <!--
  315.  
  316. NOTE:
  317. * Replace the URL image with your own. The size is 230px x 345px!
  318. ** Under <div class="name_content">
  319. i.e YOU & I, replace it with your own name
  320. *** And lastly, replace the URL '#' - under <! -- arrow -- > - with your URL.
  321.  
  322. -->
  323.  
  324. <!-- CONTENT -->
  325. <div id="content_holder"><!-- begin -->
  326. <!-- content 01 ... -->
  327. <div class="image_content">
  328. <img src="http://static.tumblr.com/5ojoydj/0SDn3no5i/image_5.png">
  329. <div class="name_content">
  330. YOU & I
  331. </div>
  332. <div class="circle-1"></div>
  333. <div class="circle-2"></div>
  334. <div class="circle-3"></div>
  335. <!-- arrow -->
  336. <a href="#" class="arrow"><img src="http://static.tumblr.com/5ojoydj/85En3nom4/arrow-fukuo.png"></a>
  337. </div>
  338.  
  339. <!-- content 02 ... -->
  340. <div class="image_content">
  341. <img src="http://static.tumblr.com/5ojoydj/c5mn3ngli/image_2.png">
  342. <div class="name_content">
  343. MUSIC
  344. </div>
  345. <div class="circle-1"></div>
  346. <div class="circle-2"></div>
  347. <div class="circle-3"></div>
  348. <!-- arrow -->
  349. <a href="#" class="arrow"><img src="http://static.tumblr.com/5ojoydj/85En3nom4/arrow-fukuo.png"></a>
  350. </div>
  351.  
  352. <!-- content 03 ... -->
  353. <div class="image_content">
  354. <img src="http://static.tumblr.com/5ojoydj/XFpn3ngq8/image_3.png">
  355. <div class="name_content">
  356. DESIGN
  357. </div>
  358. <div class="circle-1"></div>
  359. <div class="circle-2"></div>
  360. <div class="circle-3"></div>
  361. <!-- arrow -->
  362. <a href="#" class="arrow"><img src="http://static.tumblr.com/5ojoydj/85En3nom4/arrow-fukuo.png"></a>
  363. </div>
  364.  
  365. <!-- content 04 ... -->
  366. <div class="image_content">
  367. <img src="http://static.tumblr.com/5ojoydj/YR8n3nnp0/image_4.png">
  368. <div class="name_content">
  369. TYPOGRAPHY
  370. </div>
  371. <div class="circle-1"></div>
  372. <div class="circle-2"></div>
  373. <div class="circle-3"></div>
  374. <!-- arrow -->
  375. <a href="#" class="arrow"><img src="http://static.tumblr.com/5ojoydj/85En3nom4/arrow-fukuo.png"></a>
  376. </div>
  377.  
  378. <!-- content 05 ... -->
  379. <div class="image_content">
  380. <img src="http://static.tumblr.com/5ojoydj/y9wn3ngee/image_1.png">
  381. <div class="name_content">
  382. CROSS
  383. </div>
  384. <div class="circle-1"></div>
  385. <div class="circle-2"></div>
  386. <div class="circle-3"></div>
  387. <!-- arrow -->
  388. <a href="#" class="arrow"><img src="http://static.tumblr.com/5ojoydj/85En3nom4/arrow-fukuo.png"></a>
  389. </div>
  390.  
  391. <!-- content 06 ... -->
  392. <div class="image_content">
  393. <img src="http://static.tumblr.com/5ojoydj/4iEn3npsb/image_6.png">
  394. <div class="name_content">
  395. SKY BLUE
  396. </div>
  397. <div class="circle-1"></div>
  398. <div class="circle-2"></div>
  399. <div class="circle-3"></div>
  400. <!-- arrow -->
  401. <a href="#" class="arrow"><img src="http://static.tumblr.com/5ojoydj/85En3nom4/arrow-fukuo.png"></a>
  402. </div>
  403.  
  404. <!-- YOU CAN ADD AS MANY AS PICTURE -->
  405. </div><!-- ends -->
  406.  
  407. </body>
  408. </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!