API tools faq
paste
Advertisement
lizacodes

Navigation Page 01

lizacodes
Apr 26th, 2018
4,622
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <title>navigation</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7.  
  8.  
  9.  
  10. <style type="text/css">
  11.  
  12.  
  13.  
  14. /*-- scrollbar --*/
  15.  
  16. ::-webkit-scrollbar-thumb:vertical {
  17. background-color:#999999;
  18. -moz-border-radius:10px;
  19. -webkit-border-radius:10px;
  20. }
  21.  
  22. ::-webkit-scrollbar {
  23. width:2px;
  24. height:2px;
  25. background-color:#ffffff; /* BACKGROUND COLOUR */
  26. }
  27.  
  28. /*-- tumblr controls --*/
  29. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{
  30. z-index:999999999!important;
  31. }
  32.  
  33.  
  34.  
  35. body {
  36. color:#666; /* TEXT COLOUR */
  37. background-color:#FDFDFD; /* BACKGROUND COLOUR */
  38. font-family:Lato;
  39. font-size:11px;
  40. font-weight:300;
  41. line-height:200%;
  42. }
  43.  
  44.  
  45.  
  46. a {
  47. color:#000;
  48. text-decoration:none;
  49. border-bottom:1px solid #eee;
  50. -webkit-transition-duration:600ms;
  51. -o-transition-duration:600ms;
  52. -moz-transition-duration:600ms;
  53. -ms-transition-duration:600ms;
  54.  
  55. }
  56.  
  57.  
  58. a:hover, a:active {
  59. color:#cc949c; /* CHANGE LINK HOVER COLOUR */
  60. border-bottom-color:#cc949c; /* CHANGE LINK HOVER COLOUR */
  61. -webkit-transition-duration:.6s;
  62. -moz-transition-duration:.6s;
  63. -o-transition-duration:.6s;
  64. -ms-transition-duration:.6s;
  65.  
  66. }
  67.  
  68. b, em {
  69. font-weight:bold;
  70. color:#cc949c; /* CHANGE BOLD LETTERS COLOUR */
  71. }
  72.  
  73. h1 {
  74. font-size:9px;
  75. letter-spacing:1px;
  76. font-family:Lato;
  77. }
  78.  
  79.  
  80. /* HEADER */
  81. #title{
  82. font-size:20px;
  83. color:#727272; /* TITLE COLOUR */
  84. width:500px;
  85. margin-bottom:10px;
  86. margin-left:100px;
  87. letter-spacing:1px;
  88. text-align:center;
  89. text-transform:uppercase;
  90. }
  91.  
  92. .links {
  93. text-transform:uppercase;
  94. margin-top:15px;
  95. font-size:9px;
  96. text-decoration:none;
  97. text-align:center;
  98. }
  99.  
  100. .links a {
  101. border:none;
  102. padding:4px;
  103. color:#666;
  104. }
  105.  
  106. .links a:hover {
  107. color:#EACC2C;/* CHANGE LINK HOVER COLOUR */
  108.  
  109. }
  110.  
  111.  
  112. .desc{
  113. color:#444;
  114. width:350px;
  115. margin:auto;
  116. font-weight:300;
  117. font-size:10px;
  118. color:#727272;
  119. text-align:center;
  120. }
  121.  
  122. .container {
  123. width:700px;
  124. margin:auto;
  125. top: 50px;
  126. position:relative;
  127. border-bottom:1px solid #eee;
  128. }
  129.  
  130.  
  131. .cont{
  132. position:relative;
  133. border:none;
  134.  
  135. }
  136.  
  137. .cont img{
  138. display: block;
  139. margin-left: auto;
  140. margin-right:auto;
  141. bottom:10px;
  142. position:relative;
  143. max-width:50px;
  144. border-radius: 50%;
  145. max-height:50px;
  146. }
  147.  
  148.  
  149. .cont a {
  150. color:#444; /* CHANGE LINK COLOUR */
  151. font-size:8px;
  152. letter-spacing:1px;
  153. display:block;
  154. text-align:center;
  155. padding:5px 0px;
  156. font-family:Lato;
  157. }
  158.  
  159. .cont a:hover {
  160. color:#cc949c; /* CHANGE LINK HOVER COLOUR */
  161. }
  162.  
  163.  
  164.  
  165. /* LINKS */
  166. .container2 {
  167. width:700px;
  168. margin:auto;
  169. top: 50px;
  170. position:relative;
  171.  
  172. }
  173.  
  174. .cont2{
  175. position:relative;
  176. border:1px solid #eee;
  177. width:200px;
  178. height:200px;
  179. margin-top:25px;
  180. margin-left:25px;
  181. float:left;
  182. background-color:#FFF;
  183.  
  184. }
  185.  
  186. .subcont{
  187. position:relative;
  188. border:1px solid #eee;
  189. width:100px;
  190. height:135px;
  191. top:5px;
  192. left:50px;
  193. margin-bottom:25px;
  194. overflow:scroll;
  195. background-color:#FFF;
  196. }
  197.  
  198. .boxtitle{
  199. font-size:11px;
  200. color:#727272; /* TITLE COLOUR */
  201. text-transform:uppercase;
  202. margin:auto;
  203. letter-spacing:3px;
  204. text-align:center;
  205. }
  206.  
  207. .subtitle{
  208. font-size:10px;
  209. color:#727272; /* TITLE COLOUR */
  210. text-transform:uppercase;
  211. margin:auto;
  212. letter-spacing:3px;
  213. text-align:center;
  214. }
  215.  
  216. .tags{
  217. color:#444; /* CHANGE LINK COLOUR */
  218. font-size:9px;
  219. letter-spacing:1px;
  220. display:block;
  221. text-align:center;
  222. padding:5px 0px;
  223. font-family:Lato;
  224. }
  225.  
  226. .tags a {
  227. border:none;
  228. padding:0px 4px;
  229. color:#666;
  230. }
  231.  
  232. .tags a:hover {
  233. color:#EACC2C;/* CHANGE LINK HOVER COLOUR */
  234.  
  235. }
  236.  
  237.  
  238. /* credit pls don't remove */
  239. .credit {
  240. position:fixed;
  241. right:14px;
  242. font-size:13px;
  243. bottom:10px;}
  244. /* credit pls don't remove */
  245.  
  246.  
  247.  
  248.  
  249. </style>
  250. </head>
  251.  
  252. <body>
  253.  
  254. <section>
  255. <div class="container">
  256.  
  257. <div class="cont"><!--- EDIT THIS LINK RIGHT HERE TO CHANGE THE ICON --->
  258. <img class="img" src="https://i.pinimg.com/564x/22/4e/e2/224ee2d205cae3cd07d1d26d9ffcc685.jpg"></a>
  259. <div id="title">
  260. <!--- TITLE HERE --->navigation page 01<!--- TITLE HERE ---></div>
  261. </div>
  262.  
  263. <div class="links">
  264. <a href="/">home</a>
  265. <a href="/ask">ask</a>
  266. <a href="/archive">archive</a>
  267. <a href="/">link1</a>
  268. <a href="/">link2</a>
  269. <a href="/">link3</a><p>
  270. </div>
  271. <div class="desc">
  272. <!--text goes here-->
  273. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  274. <!--text goes here-->
  275. <p></p></div>
  276. </div>
  277.  
  278.  
  279. <div class="container2">
  280.  
  281. <!--- TEMPLATE:
  282.  
  283. <div class="cont2">
  284. <div class="tags">
  285. <div class="boxtitle">title.</div>
  286. <div class="subcont">
  287. <a href="/" >blah</a><br>
  288. <a href="/" >blah</a><br>
  289. <a href="/" >blah</a><br>
  290. <a href="/" >blah</a><br>
  291. <a href="/" >blah</a><br>
  292. <a href="/" >blah</a><br>
  293. </div>
  294. </div>
  295. </div>
  296.  
  297. HOW TO USE:
  298. 1. <div class="boxtitle">title.</div> HERE YOU CHANGE YOUR TITLE
  299. 2. <a href="/" >blah</a><br> HERE YOU PUT YOUR LINKS
  300. EXAMPLE: <a href="/tagged/photography" >photography</a><br>
  301.  
  302.  
  303.  
  304. TEMPLATE WITH SUBTITLE:
  305.  
  306. <div class="cont2">
  307. <div class="tags">
  308. <div class="boxtitle">title.</div>
  309. <div class="subcont">
  310. <a href="/" >blah</a><br>
  311. <a href="/" >blah</a><br>
  312. <div class="subtilte">- subtitle -</div>
  313. <a href="/" >blah</a><br>
  314. <a href="/" >blah</a><br>
  315. <a href="/" >blah</a><br>
  316. </div>
  317. </div>
  318. </div>
  319.  
  320. HOW TO USE:
  321. 1. <div class="boxtitle">title.</div> HERE YOU CHANGE YOUR TITLE
  322. 2. <a href="/" >blah</a><br> HERE YOU PUT YOUR LINKS
  323. EXAMPLE: <a href="/tagged/photography" >photography</a><br>
  324. 3. <div class="subtilte">- subtitle -</div> HERE IS THE NAME OF YOUR SUBTITLE EVERYTHING ELSE WORKS THE SAME
  325.  
  326. --->
  327.  
  328.  
  329. <div class="cont2">
  330. <div class="tags">
  331. <div class="boxtitle">title.</div>
  332. <div class="subcont">
  333. <a href="/" >blah</a><br>
  334. <a href="/" >blah</a><br>
  335. <a href="/" >blah</a><br>
  336. <a href="/" >blah</a><br>
  337. <a href="/" >blah</a><br>
  338. <a href="/" >blah</a><br>
  339. </div>
  340. </div>
  341. </div>
  342.  
  343. <div class="cont2">
  344. <div class="tags">
  345. <div class="boxtitle">title.</div>
  346. <div class="subcont">
  347. <a href="/" >blah</a><br>
  348. <a href="/" >blah</a><br>
  349. <div class="subtilte">- subtitle -</div>
  350. <a href="/" >blah</a><br>
  351. <a href="/" >blah</a><br>
  352. <a href="/" >blah</a><br>
  353. </div>
  354. </div>
  355. </div>
  356.  
  357. <div class="cont2">
  358. <div class="tags">
  359. <div class="boxtitle">title.</div>
  360. <div class="subcont">
  361. <a href="/" >blah</a><br>
  362. <a href="/" >blah</a><br>
  363. <a href="/" >blah</a><br>
  364. <a href="/" >blah</a><br>
  365. <a href="/" >blah</a><br>
  366. <a href="/" >blah</a><br>
  367. </div>
  368. </div>
  369. </div>
  370.  
  371. <div class="cont2">
  372. <div class="tags">
  373. <div class="boxtitle">title.</div>
  374. <div class="subcont">
  375. <a href="/" >blah</a><br>
  376. <a href="/" >blah</a><br>
  377. <a href="/" >blah</a><br>
  378. <a href="/" >blah</a><br>
  379. <a href="/" >blah</a><br>
  380. <a href="/" >blah</a><br>
  381. </div>
  382. </div>
  383. </div>
  384.  
  385. <div class="cont2">
  386. <div class="tags">
  387. <div class="boxtitle">title.</div>
  388. <div class="subcont">
  389. <a href="/" >blah</a><br>
  390. <a href="/" >blah</a><br>
  391. <a href="/" >blah</a><br>
  392. <a href="/" >blah</a><br>
  393. <a href="/" >blah</a><br>
  394. <a href="/" >blah</a><br>
  395. <a href="/" >blah</a><br>
  396. <a href="/" >blah</a><br>
  397. <a href="/" >blah</a><br>
  398. <a href="/" >blah</a><br>
  399. <a href="/" >blah</a><br>
  400. <a href="/" >blah</a><br>
  401. </div>
  402. </div>
  403. </div>
  404.  
  405. <div class="cont2">
  406. <div class="tags">
  407. <div class="boxtitle">title.</div>
  408. <div class="subcont">
  409. <a href="/" >blah</a><br>
  410. <a href="/" >blah</a><br>
  411. <a href="/" >blah</a><br>
  412. <a href="/" >blah</a><br>
  413. <a href="/" >blah</a><br>
  414. <a href="/" >blah</a><br>
  415. </div>
  416. </div>
  417. </div><div class="cont2">
  418. <div class="tags">
  419. <div class="boxtitle">title.</div>
  420. <div class="subcont">
  421. <a href="/" >blah</a><br>
  422. <a href="/" >blah</a><br>
  423. <a href="/" >blah</a><br>
  424. <a href="/" >blah</a><br>
  425. <a href="/" >blah</a><br>
  426. <a href="/" >blah</a><br>
  427. </div>
  428. </div>
  429. </div><div class="cont2">
  430. <div class="tags">
  431. <div class="boxtitle">title.</div>
  432. <div class="subcont">
  433. <a href="/" >blah</a><br>
  434. <a href="/" >blah</a><br>
  435. <a href="/" >blah</a><br>
  436. <a href="/" >blah</a><br>
  437. <a href="/" >blah</a><br>
  438. <a href="/" >blah</a><br>
  439. </div>
  440. </div>
  441. </div><div class="cont2">
  442. <div class="tags">
  443. <div class="boxtitle">title.</div>
  444. <div class="subcont">
  445. <a href="/" >blah</a><br>
  446. <a href="/" >blah</a><br>
  447. <a href="/" >blah</a><br>
  448. <a href="/" >blah</a><br>
  449. <a href="/" >blah</a><br>
  450. <a href="/" >blah</a><br>
  451. </div>
  452. </div>
  453. </div>
  454.  
  455.  
  456. </div>
  457. </section>
  458.  
  459.  
  460. <!-- PLEASE DON'T TOUCH -->
  461.  
  462. <div class="credit"><a href="https://lizascodes.tumblr.com/">©</a></div>
  463.  
  464. </body>
  465. </html>
  466.  
  467.  
  468. <!-- !!! COMMENTS !!!
  469.  
  470.  
  471. -i am still new to this so pleace contact me if youface any problems
  472. http://lizascodes.tumblr.com (you can find more info there too)
  473. -please don't remove the credit and don't steal any part of this
  474. code
  475.  
  476.  
  477. -->
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!