API tools faq
paste
Advertisement
bsethemes

windows 8 navi page

bsethemes
Jan 10th, 2015
2,639
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- BASE CODE BY DYLAENOBRIENS
  4.  
  5. THEME BY BSETHEMES
  6.  
  7. -don't! remove! credit!!!!!!!!!!!!!!!!!!!!!!!!!!
  8.  
  9. -for any bugs or comments don't hesitate to contact me!
  10.  
  11. -everything is extremely customizable and explained as best as possible
  12.  
  13. -please don't touch things where it says not to (unless you know what you are doing)
  14.  
  15. -filled folder url http://s13.postimg.org/4tdxxtktv/filled_folder.jpg
  16.  
  17. -empty folder url http://s1.postimg.org/f0hapgfa3/empty_folder.jpg
  18.  
  19. -there are no meta names, you must change everything manually
  20.  
  21. -->
  22.  
  23. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  24.  
  25.  
  26. <head>
  27.  
  28. <title>{Title}</title>
  29.  
  30. <link rel="shortcut icon" href="{Favicon}" />
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  32.  
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37.  
  38.  
  39. body {
  40. font-style:none;
  41. background: #ede5f3;
  42. font-family:arial;
  43. color:{color:text};
  44. font-size:9px;
  45. }
  46.  
  47.  
  48. a {
  49. padding:2px;
  50. color: #cecdcd; /*--link color--*/
  51. text-decoration:none;
  52. -webkit-transition: all 0.5s ease-out;
  53. -moz-transition: all 0.5s ease-out;
  54. transition: all 0.5s ease-out;
  55. }
  56.  
  57. a:hover {
  58. color: #000; /*--link color on hover--*/
  59. border-bottom:1px dotted #c0c0c0; /*-- link bottom border color and stlye --*/
  60. background-color:#; /*--link background color on hover--*/
  61. -webkit-transition: all 0.8s ease-out;
  62. -moz-transition: all 0.8s ease-out;
  63. transition: all 0.8s ease-out;
  64.  
  65. }
  66.  
  67. /*--Cursor code, don't touch it!--*/
  68.  
  69.  
  70. *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto }
  71.  
  72. /*--don't touch this--*/
  73.  
  74. #container {
  75. position:fixed;
  76. width:950px;
  77. height: 430px;
  78. background: #fff;
  79. margin-top:-1px;
  80. margin-left:205px;
  81. border:1px solid #cab1da; /*--border color--*/
  82. overflow: auto;
  83. overflow-x: hidden;
  84. }
  85.  
  86. /*--don't touch this--*/
  87.  
  88. #contitle {
  89. text-align:center;
  90. font-style:none;
  91. font-family:'arial';
  92. color:#fff; /*--the title's text color--*/
  93. background:#dccbe7; /*--the tite's background color --*/
  94. font-size:11px;
  95. width:950px;
  96. height: 25px;
  97. margin-left:205px;
  98. margin-top: 65px;
  99. padding-bottom:3px;
  100. padding-top:3px;
  101. border: 1px solid #cab1da; /*-- border color, change along with the one on top and below to the same color, i advise to change it to a darker shade of the background--*/
  102. border-bottom: none;
  103. }
  104.  
  105. /*--don't touch this--*/
  106.  
  107. div.buttons {
  108. margin-top: -31px;
  109. margin-left:1035px;
  110. display: block;
  111. border: none;
  112. content: url(http://s17.postimg.org/p0a8umzkb/buttons.png);
  113. width: 113px;
  114. height: 22px;
  115. padding-bottom:3px;
  116. }
  117.  
  118. /*--don't touch this--*/
  119.  
  120. div.header {
  121. margin-top: 5px;
  122. margin-left: 205px;
  123. display: block;
  124. content: url(http://i.imgur.com/tVx4h2Y.png);
  125. width: 950px;
  126. height: 62px;
  127. border:1px solid #cab1da; /*-- border color--*/
  128. border-bottom:1px solid #cecdcd; /* don't change this borders color*/
  129. z-index:1;
  130. }
  131.  
  132. /*--don't touch this--*/
  133.  
  134. #headername {
  135. position:absolute;
  136. font-style: none;
  137. font-family: 'arial';
  138. font-size: 12px;
  139. margin-top:-28px;
  140. margin-left: 349px;
  141. }
  142.  
  143. /*--don't touch this--*/
  144.  
  145. #linksbox {
  146. position:absolute;
  147. width:180px;
  148. height: 100%;
  149. border-right:1px solid #eaeaea; /*-- color of the border inside the container, i advise not to change it--*/
  150.  
  151. }
  152.  
  153. /*--don't touch this--*/
  154.  
  155. div.about {
  156. position:absolute;
  157. margin-top:0px;
  158. margin-left:181px;
  159. display:block;
  160. border: none;
  161. content: url(http://i.imgur.com/4H8dsRX.jpg);
  162. width: 760px;
  163. height: 27px;
  164. }
  165.  
  166. /*--don't touch this--*/
  167.  
  168. #aboutstuff {
  169. font-style: none;
  170. font-family: 'arial';
  171. font-size: 12px;
  172. margin-top:30px;
  173. margin-left: 350px;
  174. }
  175.  
  176. #profile {
  177. position:absolute;
  178. content: url(https://yt3.ggpht.com/-IYvE45t6DeI/AAAAAAAAAAI/AAAAAAAAAAA/oq9yXz5vVXk/s100-c-k-no/photo.jpg); /*--the pic in the about tab, change only the green thingy, best with 100x100 pics, don't touch anything else--*/
  179. margin-top:-120px;
  180. margin-left:220px;
  181. width: 100px;
  182. height: 100px;
  183. border-radius: 150px;
  184. -webkit-border-radius: 150px;
  185. -moz-border-radius: 150px;
  186.  
  187. }
  188. /*--don't touch this--*/
  189.  
  190. div.tags {
  191. position:absolute;
  192. margin-top: 0px;
  193. margin-left: 181px;
  194. display:block;
  195. border: none;
  196. content: url(http://i.imgur.com/UgoYn2F.jpg);
  197. width: 760px;
  198. height: 27px;
  199. }
  200.  
  201. div.folder1 {
  202. margin-top: 40px;
  203. margin-left: 220px;
  204. display:block;
  205. border: none;
  206. content: url(http://s14.postimg.org/s9zqlhd6l/empty_folder.jpg); /*--change the green code only, if you want a filled folder the url is at the top!! don't touch anything else--*/
  207. width: 105px;
  208. height: 131px;
  209. }
  210.  
  211. #folder1title {
  212. color: black;
  213. font-style: underline;
  214. text-transform: capitalize;
  215. font-size:13px;
  216. margin-left:240px; /*--change this only if the text under each folder isn't to your liking please don't touch anything else--*/
  217. margin-top:-20px;
  218. }
  219.  
  220. /*--don't touch this--*/
  221.  
  222. #folder1links {
  223. position:absolute;
  224. text-transform:uppercase;
  225. text-size:12px;
  226. margin-left:360px;
  227. margin-top:-140px;
  228. }
  229.  
  230. /*--don't touch this--*/
  231.  
  232. #folder1links2 {
  233. position:absolute;
  234. text-transform:uppercase;
  235. text-size:12px;
  236. margin-left:460px;
  237. margin-top:-140px;
  238. }
  239.  
  240. div.folder2 {
  241. margin-top: -125px;
  242. margin-left: 580px;
  243. display:block;
  244. border: none;
  245. content: url(http://s12.postimg.org/c0efnw8ll/filled_folder.jpg);/*--change the green code only, if you want a filled folder the url is at the top!! don't touch anything else--*/
  246. width: 105px;
  247. height: 131px;
  248. }
  249.  
  250. #folder2title {
  251. color: black;
  252. font-style: underline;
  253. text-transform: capitalize;
  254. font-size:13px;
  255. margin-left:600px; /*--change this only if the text under each folder isn't to your liking please don't touch anything else--*/
  256. margin-top:-20px;
  257. }
  258.  
  259. /*--don't touch this--*/
  260.  
  261. #folder2links {
  262. position:absolute;
  263. text-transform:uppercase;
  264. text-size:12px;
  265. margin-left:750px;
  266. margin-top:-140px;
  267. }
  268.  
  269. /*--don't touch this--*/
  270.  
  271. #folder2links2 {
  272. position:absolute;
  273. text-transform:uppercase;
  274. text-size:12px;
  275. margin-left:850px;
  276. margin-top:-140px;
  277. }
  278.  
  279.  
  280. #linkylinks {
  281. content:url(http://i.imgur.com/iCfM7wI.jpg);
  282. margin-top:-285px;
  283. margin-left:0pc;
  284.  
  285. }
  286.  
  287. /*--don't touch this--*/
  288.  
  289. #lamelol {
  290. position:absolute;
  291. text-transform: capitalize;
  292. font-size: 15px;
  293. margin-left: 40px;
  294. margin-top: 5px;
  295. }
  296.  
  297. #credit {
  298. padding:5px;
  299. bottom:10px;
  300. right:10px;
  301. position:fixed;
  302. background:#fff;
  303. transition-duration:2s;
  304. -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.09);
  305. -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.09);
  306. box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.09);
  307. }
  308.  
  309. #credit a {
  310. letter-spacing:5px;
  311. }
  312.  
  313. #credit a:hover {
  314. color:#000;
  315. border-bottom:0px;
  316. background:transparent;
  317. letter-spacing:3px;
  318. }
  319.  
  320. #credit:hover {
  321. background:transparent;
  322. border:1px dotted #fff;
  323. transition-duration:1s;
  324. -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.09);
  325. -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.09);
  326. box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.09);
  327. }
  328.  
  329. {CustomCSS}
  330.  
  331. </style></head>
  332.  
  333.  
  334. <body>
  335.  
  336.  
  337.  
  338. <div id="contitle"><big>{Title}</div>
  339. <div class="buttons"></div>
  340. <div class="header"></div> <div id="headername">This PC</div> <div id="container">
  341. <div id="linksbox"></div>
  342. <div class="about"></div>
  343.  
  344.  
  345. <div id="aboutstuff">
  346.  
  347. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit sed nisi ut euismod. Morbi ligula orci, sodales sit amet purus et, dapibus tempus diam. Cras vulputate, lacus eget laoreet pretium, nibh massa vehicula elit, nec sodales tellus turpis non dolor. Nunc quis mollis mauris. Etiam consequat<br>
  348.  
  349. magna vel felis tempus, id finibus sem ultricies. Morbi in porttitor sapien. Nullam luctus ac ante eu feugiat. Sed dictum est a consequat viverra. Nam eleifend volutpat nulla et aliquam. Duis sit amet porttitor mi.<br> Mauris ultrices sem nisl, vitae consequat velit semper nec. Cras vestibulum consectetur diam, id molestie est blandit pellentesque.
  350. <!--this is your description-->
  351.  
  352. </div>
  353.  
  354. <div id="profile"></div>
  355. <div class="tags"></div>
  356. <div class="folder1"></div>
  357.  
  358. <div id="folder1title">Cateogry</div><!--this is the title of the first folder-->
  359.  
  360. <div id="folder1links">
  361. <a href="/">link</a><p>
  362. <a href="/">link</a><p>
  363. <a href="/">link</a><p>
  364. <a href="/">link</a><p>
  365. <a href="/">link</a><p>
  366. <a href="/">link</a><p>
  367. <a href="/">link</a><p>
  368. <a href="/">link</a><p>
  369. <a href="/">link</a><p>
  370. <a href="/">link</a><p>
  371. <a href="/">link</a><p>
  372. </div>
  373.  
  374. <div id="folder1links2">
  375. <a href="/">link</a><p>
  376. <a href="/">link</a><p>
  377. <a href="/">link</a><p>
  378. <a href="/">link</a><p>
  379. <a href="/">link</a><p>
  380. <a href="/">link</a><p>
  381. <a href="/">link</a><p>
  382. <a href="/">link</a><p>
  383. <a href="/">link</a><p>
  384. <a href="/">link</a><p>
  385. <a href="/">link</a><p>
  386. </div>
  387. <div class="folder2"></div>
  388.  
  389. <div id="folder2title">Cateogry</div><!--this is the title of the second folder-->
  390.  
  391. <div id="folder2links">
  392. <a href="/">link</a><p>
  393. <a href="/">link</a><p>
  394. <a href="/">link</a><p>
  395. <a href="/">link</a><p>
  396. <a href="/">link</a><p>
  397. <a href="/">link</a><p>
  398. <a href="/">link</a><p>
  399. <a href="/">link</a><p>
  400. <a href="/">link</a><p>
  401. <a href="/">link</a><p>
  402. <a href="/">link</a><p>
  403. </div>
  404.  
  405. <div id="folder2links2">
  406. <a href="/">link</a><p>
  407. <a href="/">link</a><p>
  408. <a href="/">link</a><p>
  409. <a href="/">link</a><p>
  410. <a href="/">link</a><p>
  411. <a href="/">link</a><p>
  412. <a href="/">link</a><p>
  413. <a href="/">link</a><p>
  414. <a href="/">link</a><p>
  415. <a href="/">link</a><p>
  416. <a href="/">link</a><p>
  417. </div>
  418. <div id="linkylinks"></div>
  419.  
  420. <div id="lamelol">
  421.  
  422. <!--these are the side links-->
  423.  
  424. <a href="http://www.twitter.com/"><!-- << fill the quote marks with the link--><font color="black"><img src="http://static.squarespace.com/static/522f256de4b088d34db9a62f/5251f557e4b0b9b7feb030a6/525213a1e4b0ec712549e701/1381148510163/twitter+favicon+1200x974.png" width="15px"/> <!--<< fill the quote mark with the url to any favicon, don't change the width--> Twitter!<!-- << this is the title--></a>
  425. <p>
  426.  
  427. <a href="http://instagram.com/"><font color="black"><img src="http://cdn.pamorama.net/wp-content/uploads/2012/12/instagram.jpg" width="15px"/> Instagram!</a><p>
  428.  
  429. <a href=""><font color="black"><img src="http://s1.postimg.org/f0hapgfa3/empty_folder.jpg" width="20px"/> title</a></font><p>
  430.  
  431. <a href=""><font color="black"><img src="http://s1.postimg.org/f0hapgfa3/empty_folder.jpg" width="20px"/> title</a></font><p>
  432.  
  433. <a href=""><font color="black"><img src="http://s1.postimg.org/f0hapgfa3/empty_folder.jpg" width="20px"/> title</a></font><p>
  434.  
  435. <a href=""><font color="black"><img src="http://s1.postimg.org/f0hapgfa3/empty_folder.jpg" width="20px"/> title</a></font><p>
  436.  
  437. <a href=""><font color="black"><img src="http://s1.postimg.org/f0hapgfa3/empty_folder.jpg" width="20px"/> title</a></font><p>
  438.  
  439. <a href=""><font color="black"><img src="http://s1.postimg.org/f0hapgfa3/empty_folder.jpg" width="20px"/> title</a></font><p>
  440.  
  441. </div>
  442.  
  443.  
  444. </div>
  445.  
  446. </div>
  447.  
  448. <div id="credit"><a href="http://bsethemes.tumblr.com/">CREDIT!</a></div>
  449. </body>
  450. </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!