API tools faq
paste
Advertisement
hunterthemes

- Page #13 - Color reference v.2

hunterthemes
Mar 24th, 2017
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.72 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!----
  4.  
  5. © hunterthemes.tumblr.com | Page #13 - Color reference (v.2)
  6.  
  7. * Do not redistribute this page and claim it as your own.
  8. * Do not remove the credit or move it to another page.
  9. * Minor changes to this page are allowed.
  10.  
  11. ---->
  12.  
  13. <!-- GOOGLE FONTS -->
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  16. <link href='http://fonts.googleapis.com/css?family=Nova+Slim' rel='stylesheet' type='text/css'>
  17. <link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css?family=Almendra" rel="stylesheet">
  19. <link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
  20.  
  21. <style type="text/css">
  22.  
  23. /* CSS */
  24.  
  25. /*-- GENERAL --*/
  26.  
  27. body {
  28. margin: 0;
  29. padding: 0;
  30. width: 100%;
  31. height: 100%;
  32. color: #ccc;
  33. font-family:Helvetica, Arial, sans-serif;
  34. font-size: 11px;
  35. line-height: 13px;
  36. background-color: #f6f6f6;
  37. background-image:url();
  38. background-attachment: fixed;
  39. background-repeat: no-repeat;
  40. background-size:cover;
  41. overflow:hidden;
  42. }
  43.  
  44. /* Headings */
  45.  
  46. h1{
  47. color: #fff;
  48. max-width:100px;
  49. font-family: Baumans;
  50. font-size: 20px;
  51. line-height: 30px;
  52. padding:5px 10px;
  53. border-bottom: 1px solid #000;
  54. text-align:right;
  55. }
  56.  
  57. h2{
  58. font-family:Helvetica, Arial, sans-serif;
  59. font-size: 11px;
  60. line-height: 13px;
  61. }
  62.  
  63. /* Links */
  64.  
  65. a {
  66. color: #444444;
  67. text-decoration: none;
  68. }
  69.  
  70. a:hover {
  71. text-decoration: none;
  72. color: #eee;
  73. -webkit-transition: all 0.5s ease-in-out;
  74. -moz-transition: all 0.5s ease-in-out;
  75. -o-transition: all 0.5s ease-in-out;
  76. transition: all 0.5s ease-in-out;
  77. }
  78.  
  79. /* Bold and italic */
  80.  
  81. b, strong {color: #222222;}
  82.  
  83. i, em {color: #bbbbbb;}
  84.  
  85. /* Tumblr controls */
  86.  
  87. iframe.tmblr-iframe {
  88. top:0px!important;
  89. right:40px!important;
  90. opacity:0.8;
  91. transform:scale(0.6);
  92. transform-origin:100% 0;
  93. -webkit-transform:scale(0.8);
  94. -webkit-transform-origin:100% 0;
  95. -o-transform:scale(0.8);
  96. -o-transform-origin:100% 0;
  97. -moz-transform:scale(0.8);
  98. -moz-transform-origin:100% 0;
  99. -ms-transform:scale(0.8);
  100. -ms-transform-origin:100% 0;
  101. z-index:100000!important;
  102. filter:invert(1);
  103. -webkit-filter:invert(1);
  104. -o-filter:invert(1);
  105. -moz-filter:invert(1);
  106. -ms-filter:invert(1);
  107. }
  108.  
  109. iframe.tmblr-iframe:hover {
  110. opacity:1!important;}
  111.  
  112. /*-- Webkit scrollbar --*/
  113.  
  114. ::-webkit-scrollbar {
  115. width: 9px;
  116. height: 0px;
  117. }
  118.  
  119. ::-webkit-scrollbar-button:start:decrement,
  120. ::-webkit-scrollbar-button:end:increment {
  121. height: 0px;
  122. display: block;
  123. background-color: #fff;
  124. }
  125.  
  126. ::-webkit-scrollbar-track-piece {
  127. background-color: #fff;
  128. }
  129.  
  130. ::-webkit-scrollbar-thumb:vertical {
  131. height: 0px;
  132. background-color: #ddd;
  133. border: 4px solid #fff;
  134. }
  135.  
  136. /*-- TOOLTIPS --*/
  137.  
  138. #s-m-t-tooltip {
  139. margin:24px 14px 7px 12px;
  140. padding: 5px;
  141. max-width: 250px;
  142. color: #222;
  143. background: #fff;
  144. border: 1px solid #ccc;
  145. font-size: 12px;
  146. line-height: 15px;
  147. z-index: 100000;
  148. }
  149.  
  150. /* Fix */
  151.  
  152. iframe, img, embed, object, video {
  153. max-width: 100%;
  154. border: none;
  155. }
  156.  
  157. input, textarea, select, a { outline: none; }
  158.  
  159. /*------ CONTAINER -----*/
  160.  
  161. #container{
  162. position:fixed;
  163. left:50%;
  164. top:50%;
  165. width:505px;
  166. height:490px;
  167. padding-left:55px;
  168. background:rgba(255,255,255, .6);
  169. background-image:url( );
  170. background-repeat:repeat;
  171. background-size:cover;
  172. border:1px solid #ddd;
  173. z-index:100;
  174. -webkit-transform: translateX(-50%) translateY(-50%);
  175. -moz-transform: translateX(-50%) translateY(-50%);
  176. -ms-transform: translateX(-50%) translateY(-50%);
  177. transform: translateX(-50%) translateY(-50%);
  178. }
  179.  
  180. /*-- MENU --*/
  181.  
  182. #menu{
  183. position:fixed;
  184. margin-top:219px;
  185. margin-left:-275px;
  186. width:490px;
  187. min-width:300px;
  188. height:50px;
  189. background:#fff;
  190. text-align:right;
  191. border-bottom:1px solid #ddd;
  192. -ms-transform: rotate(-90deg);
  193. -webkit-transform: rotate(-90deg);
  194. transform: rotate(-90deg);
  195. }
  196.  
  197. /* Blog title */
  198.  
  199. #blogtitle{
  200. float:left;
  201. margin-left:20px;
  202. font-family:Poiret One;
  203. font-size:30px;
  204. line-height: 50px;
  205. color:#ccc;
  206. letter-spacing:1px;
  207. text-align:center;
  208. z-index:10000;
  209. }
  210.  
  211. /* Main icons */
  212.  
  213. #menu i{
  214. position:relative;
  215. margin-top:10px;
  216. margin-left:0px;
  217. margin-right:15px;
  218. width:20px;
  219. height:30px;
  220. padding:5px;
  221. font-size:20px;
  222. line-height:20px;
  223. text-align:center;
  224. color:#afd2c3;
  225. }
  226.  
  227. #menu i:hover{
  228. color:#ddd;
  229. -webkit-transition: all .7s ease;
  230. -moz-transition: all .7s ease;
  231. -o-transition: all .7s ease;
  232. transition: all .7s ease;
  233. }
  234.  
  235. /*-- COLOR CONTAINER --*/
  236.  
  237. #colors{
  238. position:absolute;
  239. margin-top:0px;
  240. margin-left:0px;
  241. width:465px;
  242. height:460px;
  243. max-height:460px;
  244. padding:20px;
  245. overflow-y:auto;
  246. }
  247.  
  248. .colorcon{
  249. display:inline-block;
  250. width:60px;
  251. height:90px;
  252. margin:15px;
  253. margin-top:10px;
  254. }
  255.  
  256. .color{
  257. margin:0;
  258. width:60px;
  259. height:55px;
  260. border-radius:3px;
  261. border:1px solid #ddd;
  262. }
  263.  
  264. .code{
  265. margin-top:5px;
  266. width:50px;
  267. height:12px;
  268. padding:5px;
  269. line-height:12px;
  270. text-align:center;
  271. color:#ccc;
  272. background:rgba(255,255,255, 0.7);
  273. border:1px solid #ddd;
  274. border-radius:3px;
  275. font-size:10px;
  276. }
  277.  
  278. .code:hover{
  279. color:#fff;
  280. background:#ddd;
  281. }
  282.  
  283. /*-- PAGE CREDIT --*/
  284.  
  285. #credit {
  286. position:fixed;
  287. right:10px;
  288. top:5px;
  289. width:30px;
  290. z-index:10000;
  291. }
  292.  
  293. /* END CSS */
  294.  
  295. {CustomCSS}
  296.  
  297. </style>
  298.  
  299. <script type="text/javascript"
  300. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  301.  
  302. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  303.  
  304. <!-- Font awesome script -->
  305.  
  306. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  307.  
  308. <!-- Style my tooltips script -->
  309.  
  310. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  311. <script src="jquery.style-my-tooltips.js"></script>
  312.  
  313. <script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  314.  
  315. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  316. <script>
  317. (function($){
  318. $(document).ready(function(){
  319. $("[title]").style_my_tooltips({
  320. tip_follows_cursor:true,
  321. tip_delay_time:200,
  322. tip_fade_speed: 300
  323. }
  324. );
  325. });
  326. })(jQuery);
  327. </script>
  328. </head>
  329.  
  330. <meta charset="utf-8">
  331. <title>{Title}</title>
  332. <link rel="shortcut icon" href="{Favicon}">
  333. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  334. <meta name="viewport" content="width=device-width, initial-scale=1">
  335.  
  336. <!-- HTML -->
  337.  
  338. <body>
  339.  
  340. <!-- MAIN CONTAINER -->
  341. <div id="container">
  342.  
  343. <!-- MAIN ICONS -->
  344. <div id="menu">
  345. <!-- BLOG TITLE -->
  346. <div id="blogtitle">Page #13</div>
  347.  
  348. <a href="/" title="Index"><i class="fa fa-home"></i></a>
  349. <a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
  350. <a href="/submit" title="Submit"><i class="fa fa-pencil"></i></a>
  351. <a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
  352. </div>
  353. <!--End Menu-->
  354.  
  355. <div id="colors">
  356.  
  357. <!-- Replace color codes -->
  358.  
  359. <div class="colorcon">
  360. <div class="color" style="background:#FFFAC2"></div>
  361. <!--End color-->
  362. <div class="code">#FFFAC2</div>
  363. <!--End code-->
  364. </div>
  365. <!--End colorcon-->
  366.  
  367.  
  368. <div class="colorcon">
  369. <div class="color" style="background:#FFF3BF"></div>
  370. <!--End color-->
  371. <div class="code">#FFF3BF</div>
  372. <!--End code-->
  373. </div>
  374. <!--End colorcon-->
  375.  
  376.  
  377. <div class="colorcon">
  378. <div class="color" style="background:#FFDFB6"></div>
  379. <!--End color-->
  380. <div class="code">#FDD5B2</div>
  381. <!--End code-->
  382. </div>
  383. <!--End colorcon-->
  384.  
  385.  
  386. <div class="colorcon">
  387. <div class="color" style="background:#FDD5B2"></div>
  388. <!--End color-->
  389. <div class="code">#FDD5B2</div>
  390. <!--End code-->
  391. </div>
  392. <!--End colorcon-->
  393.  
  394.  
  395. <div class="colorcon">
  396. <div class="color" style="background:#FCCBAD"></div>
  397. <!--End color-->
  398. <div class="code">#FCCBAD</div>
  399. <!--End code-->
  400. </div>
  401. <!--End colorcon-->
  402.  
  403.  
  404. <div class="colorcon">
  405. <div class="color" style="background:#FAFAD6"></div>
  406. <!--End color-->
  407. <div class="code">#FAFAD6</div>
  408. <!--End code-->
  409. </div>
  410. <!--End colorcon-->
  411.  
  412. <div class="colorcon">
  413. <div class="color" style="background:#E2ECAF"></div>
  414. <!--End color-->
  415. <div class="code">#E2ECAF</div>
  416. <!--End code-->
  417. </div>
  418. <!--End colorcon-->
  419.  
  420. <div class="colorcon">
  421. <div class="color" style="background:#D3E8C1"></div>
  422. <!--End color-->
  423. <div class="code">#D3E8C1</div>
  424. <!--End code-->
  425. </div>
  426. <!--End colorcon-->
  427.  
  428. <div class="colorcon">
  429. <div class="color" style="background:#C4E2C0"></div>
  430. <!--End color-->
  431. <div class="code">#C4E2C0</div>
  432. <!--End code-->
  433. </div>
  434. <!--End colorcon-->
  435.  
  436. <div class="colorcon">
  437. <div class="color" style="background:#B2DDC1"></div>
  438. <!--End color-->
  439. <div class="code">#B2DDC1</div>
  440. <!--End code-->
  441. </div>
  442. <!--End colorcon-->
  443.  
  444.  
  445. <!----- 3nd row ----->
  446.  
  447. <div class="colorcon">
  448. <div class="color" style="background:#BCE4E6"></div>
  449. <!--End color-->
  450. <div class="code">#BCE4E6</div>
  451. <!--End code-->
  452. </div>
  453. <!--End colorcon-->
  454.  
  455. <div class="colorcon">
  456. <div class="color" style="background:#AAE0F0"></div>
  457. <!--End color-->
  458. <div class="code">#AAE0F0</div>
  459. <!--End code-->
  460. </div>
  461. <!--End colorcon-->
  462.  
  463. <div class="colorcon">
  464. <div class="color" style="background:#ACCDEC"></div>
  465. <!--End color-->
  466. <div class="code">#ACCDEC</div>
  467. <!--End code-->
  468. </div>
  469. <!--End colorcon-->
  470.  
  471. <div class="colorcon">
  472. <div class="color" style="background:#C8C5E2"></div>
  473. <!--End color-->
  474. <div class="code">#C8C5E2</div>
  475. <!--End code-->
  476. </div>
  477. <!--End colorcon-->
  478.  
  479. <div class="colorcon">
  480. <div class="color" style="background:#AFB0CE"></div>
  481. <!--End color-->
  482. <div class="code">#AFB0CE</div>
  483. <!--End code-->
  484. </div>
  485. <!--End colorcon-->
  486.  
  487.  
  488. <!----- 4h row ----->
  489.  
  490. <div class="colorcon">
  491. <div class="color" style="background:#F8C0D9"></div>
  492. <!--End color-->
  493. <div class="code">#F8C0D9</div>
  494. <!--End code-->
  495. </div>
  496. <!--End colorcon-->
  497.  
  498. <div class="colorcon">
  499. <div class="color" style="background:#F0BED9"></div>
  500. <!--End color-->
  501. <div class="code">#F0BED9</div>
  502. <!--End code-->
  503. </div>
  504. <!--End colorcon-->
  505.  
  506. <div class="colorcon">
  507. <div class="color" style="background:#F7C0D3"></div>
  508. <!--End color-->
  509. <div class="code">#F7C0D3</div>
  510. <!--End code-->
  511. </div>
  512. <!--End colorcon-->
  513.  
  514. <div class="colorcon">
  515. <div class="color" style="background:#CCB4D6"></div>
  516. <!--End color-->
  517. <div class="code">#CCB4D6</div>
  518. <!--End code-->
  519. </div>
  520. <!--End colorcon-->
  521.  
  522.  
  523. <div class="colorcon">
  524. <div class="color" style="background:#BFB0D7"></div>
  525. <!--End color-->
  526. <div class="code">#BFB0D7</div>
  527. <!--End code-->
  528. </div>
  529. <!--End colorcon-->
  530.  
  531. </div>
  532. <!--End colors-->
  533.  
  534. </div>
  535. <!--End container-->
  536.  
  537. <!-- CREDIT (DO NOT REMOVE) -->
  538. <div id="credit"><a href="http://www.hunterthemes.tumblr.com">
  539. <img src="http://i60.tinypic.com/b5qp0o.png" title="page #13 by @hunterthemes"></div></a>
  540.  
  541. </body>
  542. </html>
  543.  
  544. <!-- END 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!