API tools faq
paste
Advertisement
briqhter

theme pack 1 navi

briqhter
Nov 28th, 2014
297
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.35 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. theme pack #1 - navigation by Sabina (briqhter/cutiephil)
  3. please do not remove the credit
  4. -->
  5.  
  6. <!DOCTYPE html>
  7. <html lang="en">
  8.  
  9. <head>
  10.  
  11. <style type="text/css">
  12.  
  13. /* fonts */
  14. @font-face { font-family:"bb"; src: url('https://dl.dropboxusercontent.com/s/mw5tqnd88mxflxw/Saniretro.ttf');}
  15.  
  16. /* basics1 */
  17. body {
  18. font-family:calibri;
  19. font-size:11px;
  20. line-height:12px;
  21. color:#888;
  22. background-color:#ffffff;
  23. background-image:url(http://static.tumblr.com/bgzjy3u/0Zznfopt2/tumblr_inline_mx3lrqyox41r8f9nah.gif); /* replace this with your background image */
  24. background-attachment:fixed;
  25. background-repeat:repeat;
  26. }
  27.  
  28. a:link, a:active, a:visited{
  29. color:#888;
  30. text-decoration:none;
  31. }
  32.  
  33. a:hover {
  34. color: #888;
  35. }
  36.  
  37. img {
  38. border:0;
  39. max-width:100%;
  40. }
  41.  
  42. #wrap{
  43. margin:auto;
  44. position: absolute;
  45. overflow:hidden;
  46. width:880px;
  47. height:600px;
  48. top: 0; left: 0; bottom: 0; right: 0;
  49. }
  50.  
  51. ::-webkit-scrollbar {width: 2px; height: 4px; background: #f3e2d7; }
  52. ::-webkit-scrollbar-thumb { background-color: #f0b484; -webkit-border-radius: 1ex; }
  53.  
  54. /* basics2 */
  55.  
  56. #content {
  57. z-index:10;
  58. position:fixed;
  59. overflow:hidden;
  60. margin-top:0px;
  61. margin-left:420px;
  62. width:440px;
  63. height:600px;
  64. background-color:#ffffff;
  65. background-image:url(http://static.tumblr.com/bgzjy3u/0Zznfopt2/tumblr_inline_mx3lrqyox41r8f9nah.gif); /* replace this with your background image */
  66. background-attachment:fixed;
  67. background-repeat:repeat;
  68. }
  69.  
  70. #sidebar {
  71. position:fixed;
  72. margin-left:0px;
  73. margin-top:0px;
  74. width:440px;
  75. height:600px;
  76. background:#fff;
  77. }
  78.  
  79. #sidebar img{
  80. height:600px;
  81. width:440px;
  82. overflow:hidden;
  83. }
  84.  
  85. #backbar {
  86. z-index:1;
  87. position:fixed;
  88. margin-left:440px;
  89. margin-top:0px;
  90. width:440px;
  91. height:600px;
  92. background:#fff;
  93. }
  94.  
  95. #backbar img{
  96. height:600px;
  97. width:440px;
  98. overflow:hidden;
  99. }
  100.  
  101. #maintitle{
  102. z-index:3;
  103. position:fixed;
  104. margin-top:10px;
  105. margin-left:12px;
  106. width:400px;
  107. color:#f0b484;
  108. font-family:bb;
  109. font-size:40px;
  110. line-height:30px;
  111. text-transform:uppercase;
  112. text-align:right;
  113. }
  114.  
  115. #maintitleshadow{
  116. z-index:2;
  117. position:fixed;
  118. margin-top:7px;
  119. margin-left:16px;
  120. width:400px;
  121. color:#f3e2d7;
  122. font-family:bb;
  123. font-size:40px;
  124. line-height:30px;
  125. text-transform:uppercase;
  126. text-align:right;
  127. }
  128.  
  129. #box1 {
  130. z-index:4;
  131. position:fixed;
  132. margin-top:35px;
  133. margin-left:20px;
  134. width:410px;
  135. height:auto;
  136. padding:10px;
  137. color:white;
  138. font-size:20px;
  139. line-height:24px;
  140. text-align:center;
  141. font-family:bb;
  142. }
  143.  
  144. #box1 a{
  145. color:white;
  146. }
  147.  
  148. #l1 {
  149. position:fixed;
  150. margin-top:0px;
  151. margin-left:0px;
  152. width:120px;
  153. height:auto;
  154. background:#f0b484;
  155. border:1px solid #f0b484;
  156. transition: all 0.4s ease-out;
  157. -o-transition-transition: all 0.4s ease-out;
  158. -webkit-transition: all 0.4s ease-out;
  159. -moz-transition: all 0.4s ease-out;
  160. }
  161.  
  162. #l1:hover{
  163. color:#f0b484;
  164. background:white;
  165. }
  166.  
  167. #l2 {
  168. position:fixed;
  169. margin-top:0px;
  170. margin-left:130px;
  171. width:120px;
  172. height:auto;
  173. background:#f0b484;
  174. border:1px solid #f0b484;
  175. transition: all 0.4s ease-out;
  176. -o-transition-transition: all 0.4s ease-out;
  177. -webkit-transition: all 0.4s ease-out;
  178. -moz-transition: all 0.4s ease-out;
  179. }
  180.  
  181. #l2:hover{
  182. color:#f0b484;
  183. background:white;
  184. }
  185.  
  186. #l3 {
  187. position:fixed;
  188. margin-top:0px;
  189. margin-left:260px;
  190. width:120px;
  191. height:auto;
  192. background:#f0b484;
  193. border:1px solid #f0b484;
  194. transition: all 0.4s ease-out;
  195. -o-transition-transition: all 0.4s ease-out;
  196. -webkit-transition: all 0.4s ease-out;
  197. -moz-transition: all 0.4s ease-out;
  198. }
  199.  
  200. #l3:hover{
  201. color:#f0b484;
  202. background:white;
  203. }
  204.  
  205. #l4 {
  206. position:fixed;
  207. margin-top:35px;
  208. margin-left:0px;
  209. width:120px;
  210. height:auto;
  211. background:#f0b484;
  212. border:1px solid #f0b484;
  213. transition: all 0.4s ease-out;
  214. -o-transition-transition: all 0.4s ease-out;
  215. -webkit-transition: all 0.4s ease-out;
  216. -moz-transition: all 0.4s ease-out;
  217. }
  218.  
  219. #l4:hover{
  220. color:#f0b484;
  221. background:white;
  222. }
  223.  
  224. #l5 {
  225. position:fixed;
  226. margin-top:35px;
  227. margin-left:130px;
  228. width:120px;
  229. height:auto;
  230. background:#f0b484;
  231. border:1px solid #f0b484;
  232. transition: all 0.4s ease-out;
  233. -o-transition-transition: all 0.4s ease-out;
  234. -webkit-transition: all 0.4s ease-out;
  235. -moz-transition: all 0.4s ease-out;
  236. }
  237.  
  238. #l5:hover{
  239. color:#f0b484;
  240. background:white;
  241. }
  242.  
  243. #l6 {
  244. position:fixed;
  245. margin-top:35px;
  246. margin-left:260px;
  247. width:120px;
  248. height:auto;
  249. background:#f0b484;
  250. border:1px solid #f0b484;
  251. transition: all 0.4s ease-out;
  252. -o-transition-transition: all 0.4s ease-out;
  253. -webkit-transition: all 0.4s ease-out;
  254. -moz-transition: all 0.4s ease-out;
  255. }
  256.  
  257. #l6:hover{
  258. color:#f0b484;
  259. background:white;
  260. }
  261.  
  262. #etctitle{
  263. z-index:3;
  264. position:fixed;
  265. margin-top:160px;
  266. margin-left:32px;
  267. width:400px;
  268. color:#f0b484;
  269. font-family:bb;
  270. font-size:40px;
  271. line-height:30px;
  272. text-transform:uppercase;
  273. text-align:left;
  274. }
  275.  
  276. #etctitleshadow{
  277. z-index:2;
  278. position:fixed;
  279. margin-top:157px;
  280. margin-left:36px;
  281. width:400px;
  282. color:#f3e2d7;
  283. font-family:bb;
  284. font-size:40px;
  285. line-height:30px;
  286. text-transform:uppercase;
  287. text-align:left;
  288. }
  289.  
  290. #box2 {
  291. position:fixed;
  292. margin-top:190px;
  293. margin-left:0px;
  294. width:440px;
  295. height:312px;
  296. background:white;
  297. font-size:11px;
  298. line-height:20px;
  299. }
  300.  
  301. #navi {
  302. position:fixed;
  303. overflow-y:scroll;
  304. margin-top:10px;
  305. margin-left:10px;
  306. width:420px;
  307. height:292px;
  308. background:#f3e2d7;
  309. text-align:left;
  310. color:#888;
  311. }
  312.  
  313. #navi a{
  314. color:#888;
  315. }
  316.  
  317. #navi a:hover{
  318. color:#888;
  319. }
  320.  
  321. #n1 {
  322. float:left;
  323. margin-top:4px;
  324. margin-left:4px;
  325. width:193px;
  326. height:20px;
  327. background:white;
  328. padding-left:10px;
  329. transition: all 0.1s ease-out;
  330. -o-transition-transition: all 0.1s ease-out;
  331. -webkit-transition: all 0.1s ease-out;
  332. -moz-transition: all 0.1s ease-out;
  333. }
  334.  
  335. #n1:hover {
  336. margin-left:19px;
  337. width:178px;
  338. }
  339.  
  340. #n2 {
  341. float:left;
  342. margin-top:4px;
  343. margin-left:4px;
  344. width:400px;
  345. height:20px;
  346. background:white;
  347. padding-left:10px;
  348. transition: all 0.1s ease-out;
  349. -o-transition-transition: all 0.1s ease-out;
  350. -webkit-transition: all 0.1s ease-out;
  351. -moz-transition: all 0.1s ease-out;
  352. }
  353.  
  354. #n2:hover {
  355. margin-left:19px;
  356. width:385px;
  357. }
  358.  
  359. #btitle {
  360. z-index:3;
  361. position:fixed;
  362. margin-top:540px;
  363. margin-left:12px;
  364. width:440px;
  365. height:100px;
  366. color:#f0b484;
  367. font-family:bb;
  368. font-size:80px;
  369. line-height:60px;
  370. text-transform:uppercase;
  371. }
  372.  
  373. #btitleshadow{
  374. z-index:2;
  375. position:fixed;
  376. margin-top:537px;
  377. margin-left:16px;
  378. width:440px;
  379. height:100px;
  380. color:#f3e2d7;
  381. font-family:bb;
  382. font-size:80px;
  383. line-height:60px;
  384. text-transform:uppercase;
  385. }
  386.  
  387. #credit {
  388. z-index: 4783;
  389. position:fixed;
  390. bottom:10px;
  391. right:10px;
  392. background:white;
  393. border: 1px solid #eee;
  394. padding: 3px;
  395. font-family: times;
  396. font-size: 10px;
  397. line-height: 15px;
  398. font-style:italic;
  399. transition: all 0.6s ease-out;
  400. -o-transition-transition: all 0.4s ease-out;
  401. -webkit-transition: all 0.4s ease-out;
  402. -moz-transition: all 0.4s ease-out;
  403. }
  404.  
  405. #credit a{
  406. color:#bbb;
  407. }
  408.  
  409. #credit:hover{
  410. opacity: 2;
  411. transition: all 0.6s ease-out;
  412. -o-transition-transition: all 0.4s ease-out;
  413. -webkit-transition: all 0.4s ease-out;
  414. -moz-transition: all 0.4s ease-out;
  415. }
  416.  
  417. {CustomCSS}
  418.  
  419. </style>
  420.  
  421. <title>Navigation</title>
  422. <link rel="shortcut icon" href="{Favicon}" />
  423.  
  424. </head>
  425.  
  426. <body>
  427.  
  428. <div id="credit"><a href="http://cutiephil.tumblr.com">CP</a></div>
  429.  
  430. <div id="wrap">
  431.  
  432. <div id="sidebar">
  433. <img src="http://static.tumblr.com/bgzjy3u/gSynfopuz/grace_helbig_robin_roemer_002snjk.jpg"><!--put the url of the image you want here-->
  434. </div>
  435. <div id="backbar">
  436. <img src="http://static.tumblr.com/bgzjy3u/gSynfopuz/grace_helbig_robin_roemer_002snjk.jpg"><!--put the url of the image you want here-->
  437. </div><!--sidebar-->
  438.  
  439. <div id="content">
  440.  
  441. <!-----change (//general) to anything you want as the first title------>
  442. <div id="maintitle">//general</div>
  443. <div id="maintitleshadow">//general</div>
  444.  
  445. <div id="box1">
  446.  
  447. <!-------------------------------------------------------------------
  448. these are the main links
  449. replace the slashes(/) in <a href="/"> with the link and the words with what every you want as the name of the link
  450. -------------------------------------------------------------------->
  451. <a href="/"><div id="l1">link one</div></a>
  452. <a href="/"><div id="l2">link two</div></a>
  453. <a href="/"><div id="l3">link three</div></a>
  454. <a href="/"><div id="l4">link four</div></a>
  455. <a href="/"><div id="l5">link five</div></a>
  456. <a href="/"><div id="l6">link six</div></a>
  457. </div>
  458.  
  459. <!-----change (more//) to anything you want as the second title------>
  460. <div id="etctitle">more//</div>
  461. <div id="etctitleshadow">more//</div>
  462.  
  463. <!------------------------------------------------------------------
  464. replace the slashes(/) in <a href="/"> with the link and the words (these are links) and (these links are longer than the ones above) with the name of the link
  465.  
  466. the lines with (n1) is the shorter links for 2 columns and (n2) is the longer links for 1 column.
  467. ------------------------------------------------------------------->
  468. <div id="box2">
  469. <div id="navi">
  470. <a href="/"><div id="n1">these are links</div></a>
  471. <a href="/"><div id="n1">these are links</div></a>
  472. <a href="/"><div id="n1">these are links</div></a>
  473. <a href="/"><div id="n1">these are links</div></a>
  474. <a href="/"><div id="n1">these are links</div></a>
  475. <a href="/"><div id="n1">these are links</div></a>
  476. <a href="/"><div id="n1">these are links</div></a>
  477. <a href="/"><div id="n1">these are links</div></a>
  478. <a href="/"><div id="n1">these are links</div></a>
  479. <a href="/"><div id="n1">these are links</div></a>
  480. <a href="/"><div id="n1">these are links</div></a>
  481. <a href="/"><div id="n1">these are links</div></a>
  482. <a href="/"><div id="n1">these are links</div></a>
  483. <a href="/"><div id="n1">these are links</div></a>
  484.  
  485. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  486. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  487. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  488. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  489. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  490. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  491. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  492. <a href="/"><div id="n2">these links are longer than the ones above</div></a>
  493. </div>
  494. </div>
  495.  
  496. <!-----change (navigation//) to anything you want as the main title------>
  497. <div id="btitle">navigation//</div>
  498. <div id="btitleshadow">navigation//</div>
  499.  
  500. </div><!--content-->
  501.  
  502. </div><!--wrap-->
  503. </body>
  504.  
  505. </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!