API tools faq
paste
ofcuteboys

Navigation Page 03-Miniature

ofcuteboys
Mar 29th, 2014
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.11 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---
  9.  
  10.  
  11. 888 8888888 888b d888 8888888888 .d8888b.
  12. 888 888 8888b d8888 888 d88P Y88b
  13. 888 888 88888b.d88888 888 Y88b.
  14. 888 888 888Y88888P888 8888888 "Y888b.
  15. 888 888 888 Y888P 888 888 "Y88b.
  16. 888 888 888 Y8P 888 888 "888
  17. 888 888 888 " 888 888 Y88b d88P
  18. 88888888 8888888 888 888 8888888888 "Y8888P"
  19.  
  20.  
  21. ABOUT ME PAGE #03 BY LIMESTHEMES/OFCUTEBOYS/CAROLINE
  22.  
  23. This is the third about me page in my "Wanna Talk About Me" page pack, and it's called Kawaii Cutie. Please follow the rules and enjoy!
  24.  
  25. Inspired by Heidi aka ladmilk
  26. --->
  27.  
  28. <meta name="image:icon" content="http://stephanielouie.comule.com/material/x5.gif">
  29.  
  30.  
  31. <style type="text/css">
  32.  
  33. @font-face{font-family:Black Swan;src:url(http://static.tumblr.com/q54tzar/7POm34eyl/a_s_black_swan_3_.ttf);}
  34.  
  35.  
  36. body {
  37. background-color:#fff;
  38. font-family:Helvetica;
  39. font-size:11px;
  40. color:{color:text};
  41. }
  42.  
  43. a {
  44. color:{color:link};
  45. text-decoration:none;
  46. -webkit-transition-duration:.3s;
  47. -moz-transition-duration:.3s;
  48. -o-transition-duration:.3s;
  49. }
  50.  
  51. a:hover {
  52. color:{color:hover};
  53. }
  54.  
  55. h1 {
  56. font-size:48px;
  57. position:fixed;
  58. left:50%;
  59. width:250px;
  60. text-align:center;
  61. margin-left:-125px;
  62. margin-top:100px;
  63. font-weight:normal;
  64. color:#ff66aa;
  65. font-family:Black Swan;
  66. }
  67.  
  68. h2 {
  69. font-family:black swan;
  70. font-size:35px;
  71. color:#ff66aa;
  72. }
  73.  
  74.  
  75. blockquote {
  76. padding:10px;
  77. background-color:#F5F5F5;
  78. text-align:justify;
  79. }
  80.  
  81. blockquote blockquote {
  82. padding-left:10px;
  83. border-left:2px solid {color:accent};
  84. }
  85.  
  86.  
  87. ::selection {
  88. background-color:{color:accent};
  89. }
  90.  
  91.  
  92. ::-webkit-scrollbar {
  93. width:1px;
  94. background-color:transparent;
  95. }
  96.  
  97.  
  98.  
  99. #credit {
  100. bottom:3px;
  101. position:fixed;
  102. right:10px;
  103. float:right;
  104. font-family:calibri;
  105. color:black;
  106. font-size:9px;
  107. letter-spacing:1px;
  108. text-transform:uppercase;
  109. padding:5px;
  110. -webkit-transition-duration:.8s;
  111. -moz-transition-duration:.8s;
  112. -o-transition-duration:.8s;
  113. -ms-transition-duration:.8s;
  114. }
  115.  
  116. #credit img {
  117. color:black;
  118. background-color:white;
  119. transform:scale(.7);
  120. -webkit-transform:scale(.7);
  121. padding:5px;
  122. -webkit-transition-duration:.8s;
  123. -moz-transition-duration:.8s;
  124. -o-transition-duration:.8s;
  125. -ms-transition-duration:.8s;
  126. }
  127.  
  128. #credit img:hover {
  129. -webkit-transform:rotate(180deg);
  130. }
  131.  
  132. #aboutme {
  133. width:250px;
  134. height:300px;
  135. border:1px solid #000;
  136. position:fixed;
  137. margin-left:-310px;
  138. left:50%;
  139. margin-top:-150px;
  140. top:50%;
  141. z-index:9999;
  142. background-color:white;
  143. }
  144.  
  145. .leftop {
  146. left:0%;
  147. top:0%;
  148. margin-top:-7px;
  149. margin-left:-6px;
  150. position:absolute;
  151.  
  152. }
  153.  
  154. .righttop {
  155. margin-left:243px;
  156. margin-top:-7px;
  157. position:absolute;
  158.  
  159. }
  160.  
  161. .leftbottom {
  162. margin-top:291px;
  163. margin-left:-6px;
  164. position:absolute;
  165.  
  166. }
  167.  
  168. .rightbottom {
  169. margin-top:291px;
  170. margin-left:244px;
  171. position:absolute;
  172. }
  173.  
  174. .interior {
  175. width:230px;
  176. padding:10px;
  177. letter-spacing:1px;
  178. height:295px;
  179. z-index:-999;
  180. line-height:140%;
  181. text-align:center;
  182. font-size:10px;
  183. font-family:Consolas;
  184. color:#b1b1b1;
  185. font-weight:100;
  186. }
  187.  
  188.  
  189. .linksy {
  190. margin-top:-20px;
  191. }
  192. .linksy a {
  193. font-family:consolas;
  194. color:black;
  195. background-color:white;
  196. padding:2px;
  197. padding-top:4px;
  198. width:50px;
  199. display:inline-block;
  200. border:1px solid white;
  201. }
  202.  
  203. .linksy a:hover:nth-of-type(odd) {
  204. border-color:#ff66aa;
  205. color:#ff66aa;
  206. }
  207.  
  208. .linksy a:hover:nth-of-type(even) {
  209. border-color:#f6ea5d;
  210. color:#f6ea5d;
  211. }
  212.  
  213. .interior img {
  214. width:150px;
  215. border:1px solid #ccc;
  216. }
  217.  
  218. .interior b {
  219. color:#ff66aa;
  220. }
  221.  
  222. #rightblock {
  223. width:250px;
  224. height:300px;
  225. border:1px solid #000;
  226. position:fixed;
  227. margin-left:50px;
  228. left:50%;
  229. margin-top:-150px;
  230. top:50%;
  231. background-color:white;
  232. }
  233.  
  234.  
  235. #links {
  236. border-left:1px solid #000;
  237. height:100px;
  238. position:fixed;
  239. left:50%;
  240. margin-left:-30px;
  241. width:50px;
  242. margin-top:250px;
  243. }
  244.  
  245. #links a {
  246. font-family:consolas;
  247. display:block;
  248. padding-left:5px;
  249. padding-bottom:2px;
  250. height:10px;
  251. margin-top:10px;
  252. color:#000;
  253. border-bottom:1px solid white;
  254. -webkit-transition-duration:.3s;
  255. -moz-transition-duration:.3s;
  256. -o-transition-duration:.3s;
  257. -ms-transition-duration:.3s;
  258.  
  259. }
  260.  
  261. #links a:hover {
  262. padding-left:25px;
  263. width:40px;
  264. border-color:#000;
  265. }
  266.  
  267. </style>
  268.  
  269. </head>
  270. <body>
  271.  
  272. <center><h1>Caroline's Navigation</h1></center>
  273. <div id="aboutme">
  274. <div class="leftop"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div><div class="righttop"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div><div class="leftbottom"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div><div class="rightbottom"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div>
  275.  
  276. <div class="interior">
  277. <h2>Links</h2>
  278. <div class="linksy">
  279. <a href="/">link</a>
  280. <a href="/">link</a>
  281. <a href="/">link</a>
  282. <a href="/">link</a>
  283. <a href="/">link</a>
  284. <a href="/">link</a>
  285.  
  286. </div>
  287.  
  288. <h2>Friends</h2>
  289. <div class="linksy">
  290. <a href="/">link</a>
  291. <a href="/">link</a>
  292. <a href="/">link</a>
  293. <a href="/">link</a>
  294. <a href="/">link</a>
  295. <a href="/">link</a>
  296. <a href="/">link</a>
  297. <a href="/">link</a>
  298. <a href="/">link</a>
  299. <a href="/">link</a>
  300. <a href="/">link</a>
  301. <a href="/">link</a>
  302. <a href="/">link</a>
  303. <a href="/">link</a>
  304. <a href="/">link</a>
  305. </div>
  306. </div>
  307.  
  308. </div>
  309.  
  310. <div id="links">
  311. <a href="/">home</a>
  312. <a href="/">face</a>
  313. <a href="/friends">friends</a>
  314. <a href="http://ofcuteboys.tumblr.com">credit</a>
  315. </div>
  316.  
  317. <div id="rightblock">
  318. <div class="leftop"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div><div class="righttop"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div><div class="leftbottom"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div><div class="rightbottom"><img src="https://31.media.tumblr.com/tumblr_lskgky4NnA1qmbson.gif"></div>
  319.  
  320. <div class="interior">
  321. <h2>Tags</h2><br>
  322. <div class="linksy">
  323. <a href="/">link</a>
  324. <a href="/">link</a>
  325. <a href="/">link</a>
  326. <a href="/">link</a>
  327. <a href="/">link</a>
  328. <a href="/">link</a>
  329. <a href="/">link</a>
  330. <a href="/">link</a>
  331. <a href="/">link</a>
  332. <a href="/">link</a>
  333. <a href="/">link</a>
  334. <a href="/">link</a>
  335. <a href="/">link</a>
  336. <a href="/">link</a>
  337. <a href="/">link</a>
  338. </div>
  339.  
  340.  
  341. <h2>Misc</h2>
  342. <div class="linksy">
  343. <a href="/">link</a>
  344. <a href="/">link</a>
  345. <a href="/">link</a>
  346. <a href="/">link</a>
  347. <a href="/">link</a>
  348. <a href="/">link</a>
  349.  
  350.  
  351. </div>
  352.  
  353. </div>
  354. <div id="credit"><a href="http://ofcuteboys.tumblr.com/"><img src="https://31.media.tumblr.com/tumblr_lpo58f43q31qlzq96.gif"></a></div>
  355.  
  356.  
  357. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!