API tools faq
paste
Advertisement
parrishing

PROJECTS PAGE #1 - ZÄRTLICHKEIT

parrishing
Feb 13th, 2017
1,265
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  
  3. <!--
  4.  
  5. PROJECTS PAGE #1 'Zärtlichkeit' - BY NAMJOONEH (http://namjooneh.tumblr.com) [prev. protectmccall]
  6. -DONT USE AS BASE OR STEAL THE BITS P PLEASE
  7. -ASK ME FOR HELP IF U STRUGGLE
  8. -IM OPEN FOR COMMISSIONS IF YOU WANT A SPECIAL PAGE JUST FOR YOU~~ (check http://namjooneh.tumblr.com/rules for more info)
  9. -HOPE U HAVE A GREAT DAY TODAY BUTTERCUP ♥
  10.  
  11. -->
  12.  
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16.  
  17. <head>
  18. <title>Projects.</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. <!----jquery----->
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23. <!----google fonts---->
  24. <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'>
  25. <!---tooltip--->
  26. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  27. <script>
  28. (function($){
  29. $(document).ready(function(){
  30. $("a[title]").style_my_tooltips({
  31. tip_follows_cursor:true,
  32. tip_delay_time:300,
  33. tip_fade_speed:300,
  34. attribute:"title"
  35. });
  36. });
  37. })(jQuery);
  38. </script>
  39.  
  40.  
  41. <style type="text/css">
  42.  
  43. /* the prevailing color in the preview is pale blue #dfe9ed if you want to change it press ctrl+f put '#dfe9ed' in the "Search for" space, put the colour you want to change to in "Replace with" space and click "All" voiLA~ */
  44.  
  45.  
  46. ::selection {
  47. background: #c2b6b6;/* COLOUR OF THE TEXT WHEN SELECTED */
  48. color: #111111;
  49. }
  50.  
  51. ::-moz-selection {
  52. background: #c2b6b6;/* COLOUR OF THE TEXT WHEN SELECTED */
  53. color: #111111;
  54. }
  55.  
  56. ::-webkit-selection {
  57. background: #c2b6b6;/* COLOUR OF THE TEXT WHEN SELECTED */
  58. color: #111111;
  59. }
  60.  
  61. a {
  62. text-decoration:none;
  63. outline:none;
  64. -moz-outline-style:none;
  65. color:#9dbcc7; /* COLOUR OF THE LINKS */
  66. -webkit-transition: all 0.5s ease-in-out;
  67. -moz-transition: all 0.5s ease-in-out;
  68. transition: all 0.5s ease-in-out;
  69. }
  70.  
  71.  
  72. ul {
  73. margin-left:-10px;
  74. }
  75.  
  76.  
  77. body {
  78. background:#fff; /* COLOUR OF BACKGROUND, #fff for white, or you can just type 'white', 'black' etcetc w/o '#' */
  79. font-family:Georgia;
  80. line-height:120%;
  81. letter-spacing:0px;
  82. /*text-align:justify;*/
  83. background-image:url(PUT THE URL OF THE PIC U WANT AS BACKGROUND HERE);
  84. background-attachment: fixed;
  85. background-repeat: repeat; /* if you dont want the pic repeated change 'repeat' to 'no-repeat'*/
  86. color:#000;
  87. }
  88.  
  89. ::-webkit-scrollbar-thumb:vertical {
  90. background:#dfe9ed;
  91. height: 80px;
  92. }
  93.  
  94. ::-webkit-scrollbar {
  95. height: 10px;
  96. width: 3px;
  97. }
  98.  
  99. #s-m-t-tooltip { /* tooltip is what styles the hover title="" of the link */
  100. margin-top:15px;
  101. background-color:#fff;
  102. font-size:8px;
  103. color:#333;
  104. letter-spacing:1px;
  105. text-transform:lowercase;
  106. padding:3px;
  107. padding-bottom:3px;
  108. z-index:999999999999999999999999999999999999;
  109. border: 3px solid #c2b6b6 ; /* COLOUR OF THE ON HOVER LINES UNDER THE TEXT */
  110. font-weight:500;
  111. }
  112.  
  113. #line {
  114. left:50%;
  115. margin-left:-250px;
  116. margin-top:70px;
  117. position:absolute;
  118. padding-bottom:70px;
  119.  
  120. }
  121.  
  122. .container {
  123. background-color: #ffffff; /* COLOUR OF THE BOX */
  124. width:580px;
  125. height:290px;
  126. margin-bottom:0px;
  127. }
  128.  
  129. #sidebar {
  130. position:fixed;
  131. padding-left:12px;
  132. padding-right:67px;
  133.  
  134. margin-top:-4px;
  135. margin-left:-230px;
  136. border-left:6px solid #eee;
  137. /* border-top:6px solid #eee;
  138. border-bottom:6px solid #eee;
  139. padding-top:7px;
  140. padding-bottom:7px;*/
  141.  
  142. }
  143.  
  144. #bigtitle {
  145. font-weight:bold;
  146. font-size:30px;
  147. }
  148.  
  149. #sidebartext {
  150. width:150px;
  151. font-size:10px;
  152. }
  153.  
  154. /**************************************************************************/
  155.  
  156. #pic1 img {
  157. width:290px;
  158. height:290px;
  159. background:#ffffff;
  160. overflow: auto;
  161. position:absolute;
  162. }
  163.  
  164.  
  165. #text1 {
  166. margin-top:0px;
  167. margin-left:290px;
  168. width:215px;
  169. height:270px;
  170. background:#eee;/* BACKGROUND COLOR OF THE TEXT SECTION */
  171. padding-left:25px;
  172. padding-right:50px;
  173. padding-top:10px;
  174. padding-bottom:10px;
  175. position: absolute;
  176. font-size: 14px; /* SIZE OF THE FONT */
  177. line-height:97%;
  178. }
  179.  
  180. #title1 {
  181. font-weight:bold;
  182. font-size:30px;
  183. margin-top:50px;
  184. padding-left:5px;
  185. height:13px;
  186. width:100px;
  187. text-align: right;
  188. }
  189.  
  190. /**************************************************************************/
  191.  
  192. #pic2 img {
  193. width:290px;
  194. height:290px;
  195. background:#ffffff;
  196. overflow: auto;
  197. position:absolute;
  198. margin-top:0px;
  199. margin-left:290px;
  200. }
  201.  
  202.  
  203. #text2 {
  204. width:215px;
  205. height:270px;
  206. background:#eee;/* BACKGROUND COLOR OF THE TEXT SECTION */
  207. padding-left:55px;
  208. padding-right:20px;
  209. padding-top:10px;
  210. padding-bottom:10px;
  211. position: absolute;
  212. font-size: 14px; /* SIZE OF THE FONT */
  213. line-height:97%;
  214. }
  215.  
  216. #title2 {
  217. font-weight:bold;
  218. font-size:30px;
  219. margin-top:50px;
  220. padding-left:5px;
  221. height:13px;
  222. width:100px;
  223. text-align: right;
  224. }
  225.  
  226. /**************************************************************************/
  227.  
  228. .info {
  229. margin-top:-5px;
  230. }
  231.  
  232. #links {
  233. font-size:10px;
  234. margin-left:20px;
  235. margin-top:5px;
  236. width:80px;
  237. height:12px;
  238. text-align: right;
  239. }
  240.  
  241. #linkies {
  242. font-size:10px;
  243. margin-left:25px;
  244. margin-top:5px;
  245. }
  246.  
  247. #linkies a {
  248. color: #000; /* COLOUR OF THE LINK CIRCLES */
  249. -webkit-transition: all 0.5s ease-in-out;
  250. -moz-transition: all 0.5s ease-in-out;
  251. transition: all 0.5s ease-in-out; }
  252.  
  253. #linkies a:hover {
  254. color:#fff; /* COLOUR OF THE LINK CIRCLES ON HOVER */
  255. -webkit-transition: all 0.5s ease-in-out;
  256. -moz-transition: all 0.5s ease-in-out;
  257. transition: all 0.5s ease-in-out;}
  258.  
  259. #links a {
  260. color: #000; /* COLOUR OF THE LINK CIRCLES */
  261. -webkit-transition: all 0.5s ease-in-out;
  262. -moz-transition: all 0.5s ease-in-out;
  263. transition: all 0.5s ease-in-out;}
  264.  
  265. #links a:hover {
  266. color:#fff; /* COLOUR OF THE LINK CIRCLES ON HOVER */
  267. -webkit-transition: all 0.5s ease-in-out;
  268. -moz-transition: all 0.5s ease-in-out;
  269. transition: all 0.5s ease-in-out;}
  270.  
  271.  
  272. #credit {
  273. position:fixed;
  274. font-size:14px;
  275. letter-spacing:1px;
  276. right:10px;
  277. bottom:15px;
  278. }
  279. #credit a {
  280. padding:3px;
  281. color:#000;
  282. background-color:#ffffff;
  283. }
  284. #credit a:hover {
  285. color:#ffffff;
  286. background-color:#000;
  287. }
  288.  
  289. .container ol ul li {
  290. list-style-type: none;
  291. margin-left:-25px;
  292. font-size:10px;
  293. margin-bottom:0px;
  294. }
  295.  
  296. .container ol {
  297. margin-left:-24px
  298. }
  299.  
  300. .container ol li {
  301. font-size:20px;
  302. margin-bottom:8px;
  303. }
  304.  
  305.  
  306.  
  307. {CustomCSS}</style></head><body>
  308. <div id="line">
  309.  
  310.  
  311.  
  312. <div id="sidebar">
  313. <div id="bigtitle">projects;</div>
  314. <div id="linkies">
  315. <a href="http://namjooneh.tumblr.com/" title="hover hover hover">ho·me</a> <a href="http://namjooneh.tumblr.com/">ask</a> <a href="http://namjooneh.tumblr.com/">yi·ke</a>
  316. </div>
  317. <div id="sidebartext">
  318. Lorem ipsum dolor sit amet, elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  319. </div>
  320. </div>
  321.  
  322.  
  323. <!--BEFORE YOU INSERT MORE BOXES READ THIS!!!!!!!!!
  324. okay so as you can see there're two types of blocks: w text on the right and text on the left. each of them have their own coding and tags so you have to insert different codes one after another e.g right, left, right, left etcetc
  325.  
  326. •the right ver of the box has unique tags w the number 1
  327. •the left ver of the box has unique tags w the number 2
  328. (so basically just copy the first and the second boxes alternatively and insert one after another)
  329.  
  330. dont forget to alternate the codes or the page will look like an ugly block ye
  331. -->
  332.  
  333. <!-----------------------------------1------------------------------------->
  334. <div class="container">
  335. <div id="pic1"><img src="https://68.media.tumblr.com/b92cb8b36f422315f15ad9a5fb0a3f19/tumblr_okjyikjizy1sxhoaio1_540.png"></div> <!-- CHANGE THE PIC HERE, IT SHOULD BE SQUARE AND NOT SMALLER THAN 300X300PX -->
  336.  
  337. <div id="text1">
  338. <div id="title1">clarke</div>
  339. <div id="links">
  340. <a href="http://protectmccall.tumblr.com">fa·ce</a> <a href="http://protectmccall.tumblr.com">ayy</a> <a href="http://protectmccall.tumblr.com">pro·file</a>
  341. </div>
  342. <div class="info">
  343. <ol>
  344. <li>
  345. <ul>
  346. <li><strong>a</strong> info info info </li>
  347. <li><strong>b</strong> blabla whatever info you feel like putting</li>
  348. </ul>
  349. </li>
  350. <!--~~~~~~~~~~~~~~~~~~~~~~~-->
  351. <li>
  352. <ul>
  353. <li><strong>a</strong> you can keep these letters as bullpoints</li>
  354. <li><strong>b</strong> or use w/e, rly</li>
  355. <li><strong>c</strong> this page can be anything let ur imagination lead u~*~*~*~*~</li>
  356. <li><strong>d</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco commodo consequat.</li>
  357. </ul>
  358. </li>
  359. </ol>
  360.  
  361. </div>
  362. </div>
  363. </div>
  364.  
  365.  
  366.  
  367. <!-----------------------------------2------------------------------------->
  368. <div class="container">
  369. <div id="pic2"><img src="https://68.media.tumblr.com/9b737364e5190a36f0d72b676ad3ae37/tumblr_okjyikjizy1sxhoaio2_540.png"></div> <!-- CHANGE THE PIC HERE, IT SHOULD BE SQUARE AND NOT SMALLER THAN 300X300PX -->
  370.  
  371. <div id="text2">
  372. <div id="title2">diana</div>
  373. <div id="links">
  374. <a href="http://protectmccall.tumblr.com">fa·ce</a> <a href="http://protectmccall.tumblr.com">ayy</a> <a href="http://protectmccall.tumblr.com">pro·file</a>
  375. </div>
  376. <div class="info">
  377. <ol>
  378. <li>
  379. <ul>
  380. <li><strong>a</strong> name : marina</li>
  381. <li><strong>b</strong> general : belarus, 21, she/her, scorpio, pan</li>
  382. </ul>
  383. </li>
  384. <!--~~~~~~~~~~~~~~~~~~~~~~~-->
  385. <li>
  386. <ul>
  387. <li><strong>a</strong> a graphic design transfer student</li>
  388. <li><strong>b</strong> !!!kim seokjin!!!</li>
  389. <li><strong>c</strong> likes : Lorem ipsum dolor sit amet, elit.</li>
  390. <li><strong>d</strong> dislikes : Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  391. </ul>
  392. </li>
  393. </ol>
  394.  
  395.  
  396. </div>
  397. </div>
  398. </div>
  399.  
  400.  
  401.  
  402.  
  403.  
  404.  
  405.  
  406. <!-----------------------------------3------------------------------------>
  407.  
  408.  
  409. <div class="container">
  410. <div id="pic1"><img src="https://68.media.tumblr.com/076f2b0ede2e56f4b614fbdd20f8f36f/tumblr_okjyikjizy1sxhoaio3_540.png"></div> <!-- CHANGE THE PIC HERE, IT SHOULD BE SQUARE AND NOT SMALLER THAN 300X300PX -->
  411.  
  412. <div id="text1">
  413. <div id="title1">keira</div>
  414. <div id="links">
  415. <a href="http://protectmccall.tumblr.com">fa·ce</a> <a href="http://protectmccall.tumblr.com">ayy</a> <a href="http://protectmccall.tumblr.com">pro·file</a>
  416. </div>
  417. <div class="info">
  418. <ol>
  419. <li>
  420. <ul>
  421. <li><strong>a</strong> name : marina</li>
  422. <li><strong>b</strong> general : belarus, 21, she/her, scorpio, pan</li>
  423. </ul>
  424. </li>
  425. <!--~~~~~~~~~~~~~~~~~~~~~~~-->
  426. <li>
  427. <ul>
  428. <li><strong>a</strong> a graphic design transfer student</li>
  429. <li><strong>b</strong> !!!kim seokjin!!!</li>
  430. <li><strong>c</strong> likes : Lorem ipsum dolor sit amet, elit.</li>
  431. <li><strong>d</strong> dislikes : Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  432. </ul>
  433. </li>
  434.  
  435. </ol>
  436.  
  437.  
  438. </div>
  439. </div>
  440. </div>
  441.  
  442.  
  443.  
  444.  
  445. </div>
  446. <div id="credit"><a href="http://protectmccall.tumblr.com" title="code by protectmccall">©</a></div> <!--DONT TOUCH THIS BROS-->
  447.  
  448. </body>
  449. </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!