API tools faq
paste
Advertisement
enchantingly

About Page 01

enchantingly
Nov 16th, 2013
1,338
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!----
  5. About Page 01 by Elowen (theghostoflove.tumblr.com)
  6.  
  7. Credit stays intact, please. If you get stuck, feel free to message me! Comments and suggestions are welcome.
  8.  
  9. I've inserted comments in the code that look the same colour of grey as this bit. Follow the instructions and you'll be fine :) If it doesn't have a comment, you don't need to touch it, unless you know what you're doing.
  10.  
  11. It might look a tiny bit funny when you're editing it in the preview - at least, it did for me - but it works perfectly fine when you save and close.
  12. --->
  13.  
  14. <head>
  15.  
  16. <link href='https://fonts.googleapis.com/css?family=Rochester|Rouge+Script|Montez|Great+Vibes|Cookie' rel='stylesheet' type='text/css'>
  17.  
  18. <title>{Title} | About</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <style type="text/css">
  23.  
  24. /**BASICS**/
  25.  
  26. body {
  27. text-align:justify;
  28. font-family:Cambria; /**font of everything except title**/
  29. font-size:12px;
  30. color:#d69e38; /**font colour of everything except links**/
  31. background:#eccc8f url(''); /**replace the first # with another colour code to change background colour; add a url between the ''s to insert an image background**/
  32. background-attachment:fixed;
  33. }
  34.  
  35. /**If some of your information doesn't fit the circles, you'll need to edit this; if your info fits perfectly in the circles, you won't need to edit this **/
  36. ::-webkit-scrollbar {width:8px; height:auto;background:#eccc8f; /**background colour of scrollbar**/}
  37. ::-webkit-scrollbar-thumb:vertical {-moz-border-radius-topleft: 6px 6px;border-top-left-radius: 6px 6px; -moz-border-radius-topright: 6px 6px;border-top-right-radius: 6px 6px;-moz-border-radius-bottomleft: 6px 6px;border-bottom-left-radius: 6px 6px; -moz-border-radius-bottomright: 6px 6px;border-bottom-right-radius: 6px 6px;background:#fffdf7 /**background colour of scrollbar thumb (the thing you drag)**/}
  38. ::-webkit-scrollbar-thumb:horizontal {background:#fffdf7; /**same as above comment**/}
  39.  
  40. /**below is just for colour higlighting; make each "color" the same as other colours and "background-color" the same as the other background-colours you use**/
  41. ::selection {color:#fef6e5;background-color:#d69e38;}
  42. ::-moz-selection {color:#fef6e5;background-color:#d69e38;}
  43. ::-webkit-selection {color:#fef6e5;background-color:#d69e38;}
  44.  
  45. a {color:#D48B00;text-decoration:none;-moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;} /**colour of links**/
  46. a:hover {color:#A86F00;text-decoration:underline;} /**colour of links on hover**/
  47.  
  48. #title {
  49. font-weight:normal;
  50. text-align:center;
  51. font-family:'Rouge Script', cursive; /**font for title**/
  52. font-size:40px;
  53. padding:20px 0px 0px 0px;
  54. -webkit-transition: all .8s ease-in-out;
  55. -moz-transition: all .8s ease-in-out;
  56. -o-transition: all .8s ease-in-out;
  57. transition: all .8s ease-in-out;
  58. }
  59.  
  60. #header {
  61. margin-top:-8px;
  62. text-align:center;
  63. height:100px;
  64. width:1089px;
  65. background-color:#fef6e5; /**background colour of header**/
  66. border-bottom:4px double #d8b370; /**border colour of header**/
  67. border-left:4px double #d8b370;
  68. border-right:4px double #d8b370;
  69. }
  70.  
  71. #ctitle {
  72. color:#fef6e5; /**title of the circles**/
  73. background-color:rgba(216,179,112,0.6); /**background colour of circle titles; if you get stuck on rgb colours, please see post for about page 01 on enchantinglythemes.tumblr.com**/
  74. margin-top:105px;
  75. position:absolute;
  76. width:250px;
  77. font-family:'Cookie'; /**font of circle title**/
  78. font-size:30px;
  79. text-align:center;
  80. -webkit-transition: all 1s ease-in-out;
  81. -moz-transition: all 1s ease-in-out;
  82. -o-transition: all 1s ease-in-out;
  83. transition: all 1s ease-in-out;
  84. }
  85. #circle1:hover #ctitle {opacity:0;
  86. -webkit-transition: all 1s ease-in-out;
  87. -moz-transition: all 1s ease-in-out;
  88. -o-transition: all 1s ease-in-out;
  89. transition: all 1s ease-in-out;}
  90. #circle2:hover #ctitle {opacity:0;
  91. -webkit-transition: all 1s ease-in-out;
  92. -moz-transition: all 1s ease-in-out;
  93. -o-transition: all 1s ease-in-out;
  94. transition: all 1s ease-in-out;}
  95. #circle3:hover #ctitle {opacity:0;
  96. -webkit-transition: all 1s ease-in-out;
  97. -moz-transition: all 1s ease-in-out;
  98. -o-transition: all 1s ease-in-out;
  99. transition: all 1s ease-in-out;}
  100. #circle4:hover #ctitle {opacity:0;
  101. -webkit-transition: all 1s ease-in-out;
  102. -moz-transition: all 1s ease-in-out;
  103. -o-transition: all 1s ease-in-out;
  104. transition: all 1s ease-in-out;}
  105.  
  106. /**CONTAINER, NO EDITING REQUIRED**/
  107.  
  108. #container {width:100%;margin: 0 auto;text-align:center;}
  109.  
  110. #container #entries {
  111. margin-top:100px;
  112. margin-bottom:10px;
  113. width:1089px;
  114. text-align:center;
  115. background-color:#fef6e5; /**background colour of the thing that contains the circles**/
  116. border:4px double #d8b370; /**border of the container that keeps the circles**/
  117. }
  118.  
  119. /**CIRCLE 1**/
  120. #circle1 {
  121. background-image:url('https://24.media.tumblr.com/476cfe106853f460f338a678a907d2b2/tumblr_mw9m86skgx1qlliu4o1_250.png'); /**insert the image url of the thing you want in the first circle before hover, make sure it's 250px by 250px**/
  122. background-size:250px;
  123. background-repeat:no-repeat;
  124. overflow:hidden;
  125. display:inline-block;
  126. border-radius:50%;
  127. height:250px;
  128. width:250px;
  129. margin:5px;
  130. -webkit-transform: rotate(-360deg);
  131. -moz-transform: rotate(-360deg);
  132. -ms-transform: rotate(-360deg);
  133. -o-transform: rotate(-360deg);
  134. -webkit-transition: all 1s ease-in-out;
  135. -moz-transition: all 1s ease-in-out;
  136. -o-transition: all 1s ease-in-out;
  137. transition: all 1s ease-in-out;
  138. }
  139. #circle1:hover {
  140. background-image:url('https://media.tumblr.com/6f98e80962b60693c181ef7c0c4f76ab/tumblr_inline_mw9i8hiuHq1qk6lff.png'); /**this is the image you see upon hover; mine is a plain white circle as it matches the colours and also makes the text readable**/
  141. overflow:hidden;
  142. -webkit-transition: all 1s ease-in-out;
  143. -moz-transition: all 1s ease-in-out;
  144. -o-transition: all 1s ease-in-out;
  145. transition: all 1s ease-in-out;
  146. -webkit-transform: rotate(360deg);
  147. -moz-transform: rotate(360deg);
  148. -ms-transform: rotate(360deg);
  149. -o-transform: rotate(360deg);
  150. }
  151.  
  152. #circle1:hover .desc {opacity:1;
  153. -webkit-transform: rotate(360deg);
  154. -moz-transform: rotate(360deg);
  155. -ms-transform: rotate(360deg);
  156. -o-transform: rotate(360deg);
  157. -webkit-transition: all 1s ease-in-out;
  158. -moz-transition: all 1s ease-in-out;
  159. -o-transition: all 1s ease-in-out;
  160. transition: all 1s ease-in-out;
  161. }
  162. .desc {
  163. text-align:justify;
  164. position:absolute;
  165. margin:35px 0px 0px 35px;
  166. opacity:0;
  167. height:180px;
  168. width:177px;
  169. -webkit-transform: rotate(-360deg);
  170. -moz-transform: rotate(-360deg);
  171. -ms-transform: rotate(-360deg);
  172. -o-transform: rotate(-360deg);
  173. -webkit-transition: all 1s ease-in-out;
  174. -moz-transition: all 1s ease-in-out;
  175. -o-transition: all 1s ease-in-out;
  176. transition: all 1s ease-in-out;
  177. -moz-border-radius-topleft: 10px 10px;
  178. border-top-left-radius: 10px 10px;
  179. -moz-border-radius-topright: 10px 10px;
  180. border-bottom-right-radius: 10px 10px;
  181. -moz-border-radius-bottomleft: 10px 10px;
  182. border-bottom-left-radius: 10px 10px;
  183. -moz-border-radius-bottomright: 10px 10px;
  184. border-bottom-right-radius: 10px 10px;
  185. }
  186.  
  187. /**CIRCLE 2**/
  188.  
  189. #circle2 {
  190. background-image:url('https://31.media.tumblr.com/5a00b62652dff2705fd62b2b2af60d65/tumblr_mw9ohiSgjw1qlliu4o2_250.png'); /**as with before, replace with your image url**/
  191. display:inline-block;
  192. border-radius:50%;
  193. height:250px;
  194. width:250px;
  195. margin:5px;
  196. background-size:250px;
  197. background-repeat:no-repeat;
  198. -webkit-transform: rotate(-360deg);
  199. -moz-transform: rotate(-360deg);
  200. -ms-transform: rotate(-360deg);
  201. -o-transform: rotate(-360deg);
  202. -webkit-transition: all 1s ease-in-out;
  203. -moz-transition: all 1s ease-in-out;
  204. -o-transition: all 1s ease-in-out;
  205. transition: all 1s ease-in-out;
  206. }
  207. #circle2:hover {
  208. background-image:url('https://media.tumblr.com/6f98e80962b60693c181ef7c0c4f76ab/tumblr_inline_mw9i8hiuHq1qk6lff.png'); /**again, this is the image that the second circle will fade into upon hover**/
  209. -webkit-transition: all 1s ease-in-out;
  210. -moz-transition: all 1s ease-in-out;
  211. -o-transition: all 1s ease-in-out;
  212. transition: all 1s ease-in-out;
  213. -webkit-transform: rotate(360deg);
  214. -moz-transform: rotate(360deg);
  215. -ms-transform: rotate(360deg);
  216. -o-transform: rotate(360deg);
  217. }
  218.  
  219. #circle2:hover .desc {opacity:1;
  220. -webkit-transform: rotate(360deg);
  221. -moz-transform: rotate(360deg);
  222. -ms-transform: rotate(360deg);
  223. -o-transform: rotate(360deg);
  224. -webkit-transition: all 1s ease-in-out;
  225. -moz-transition: all 1s ease-in-out;
  226. -o-transition: all 1s ease-in-out;
  227. transition: all 1s ease-in-out;
  228. }
  229.  
  230. /**CIRCLE 3**/
  231.  
  232. #circle3 {
  233. background-image:url('https://31.media.tumblr.com/9b80ccb82cc7c79927f267f703f38f40/tumblr_mw9ohiSgjw1qlliu4o1_250.png'); /**replace with your image for circle#3 **/
  234. display:inline-block;
  235. border-radius:50%;
  236. height:250px;
  237. width:250px;
  238. margin:5px;
  239. background-size:250px;
  240. background-repeat:no-repeat;
  241. -webkit-transform: rotate(-360deg);
  242. -moz-transform: rotate(-360deg);
  243. -ms-transform: rotate(-360deg);
  244. -o-transform: rotate(-360deg);
  245. -webkit-transition: all 1s ease-in-out;
  246. -moz-transition: all 1s ease-in-out;
  247. -o-transition: all 1s ease-in-out;
  248. transition: all 1s ease-in-out;
  249. }
  250. #circle3:hover {
  251. background-image:url('https://media.tumblr.com/6f98e80962b60693c181ef7c0c4f76ab/tumblr_inline_mw9i8hiuHq1qk6lff.png'); /**replace with the image you want circle#3 to fade into on hover**/
  252. -webkit-transition: all 1s ease-in-out;
  253. -moz-transition: all 1s ease-in-out;
  254. -o-transition: all 1s ease-in-out;
  255. transition: all 1s ease-in-out;
  256. -webkit-transform: rotate(360deg);
  257. -moz-transform: rotate(360deg);
  258. -ms-transform: rotate(360deg);
  259. -o-transform: rotate(360deg);
  260. }
  261.  
  262. #circle3:hover .desc {opacity:1;
  263. -webkit-transform: rotate(360deg);
  264. -moz-transform: rotate(360deg);
  265. -ms-transform: rotate(360deg);
  266. -o-transform: rotate(360deg);
  267. -webkit-transition: all 1s ease-in-out;
  268. -moz-transition: all 1s ease-in-out;
  269. -o-transition: all 1s ease-in-out;
  270. transition: all 1s ease-in-out;
  271. }
  272.  
  273. /**CIRCLE 4**/
  274.  
  275. #circle4 {
  276. background-image:url('https://24.media.tumblr.com/83701adc08bd4eff77bcad9d70461bff/tumblr_mw9m86skgx1qlliu4o2_250.png'); /**the image you want circle 4 to have before hovering**/
  277. display:inline-block;
  278. border-radius:50%;
  279. height:250px;
  280. width:250px;
  281. margin:5px;
  282. background-size:250px;
  283. background-repeat:no-repeat;
  284. -webkit-transform: rotate(-360deg);
  285. -moz-transform: rotate(-360deg);
  286. -ms-transform: rotate(-360deg);
  287. -o-transform: rotate(-360deg);
  288. -webkit-transition: all 1s ease-in-out;
  289. -moz-transition: all 1s ease-in-out;
  290. -o-transition: all 1s ease-in-out;
  291. transition: all 1s ease-in-out;
  292. }
  293. #circle4:hover {
  294. background-image:url('https://media.tumblr.com/6f98e80962b60693c181ef7c0c4f76ab/tumblr_inline_mw9i8hiuHq1qk6lff.png'); /**the image you want circle 4 to fade into upon hover**/
  295. -webkit-transition: all 1s ease-in-out;
  296. -moz-transition: all 1s ease-in-out;
  297. -o-transition: all 1s ease-in-out;
  298. transition: all 1s ease-in-out;
  299. -webkit-transform: rotate(360deg);
  300. -moz-transform: rotate(360deg);
  301. -ms-transform: rotate(360deg);
  302. -o-transform: rotate(360deg);
  303. }
  304.  
  305. #circle4:hover .desc {opacity:1;
  306. -webkit-transform: rotate(360deg);
  307. -moz-transform: rotate(360deg);
  308. -ms-transform: rotate(360deg);
  309. -o-transform: rotate(360deg);
  310. -webkit-transition: all 1s ease-in-out;
  311. -moz-transition: all 1s ease-in-out;
  312. -o-transition: all 1s ease-in-out;
  313. transition: all 1s ease-in-out;
  314. }
  315.  
  316. /**Pleeeeease don't remove the credit; you may edit it to suit your about page, but I'm trusting you won't remove it because I worked hard on this**/
  317. #credit {
  318. font-weight:bold;
  319. text-align:center;
  320. font-size:16px;
  321. font-family:'Montez';
  322. position:fixed;
  323. bottom:5px;
  324. right:5px;
  325. }
  326. #credit a {
  327. display:inline-block;
  328. height:20px;
  329. width:20px;
  330. background-color:#fef6e5; /**colour of credit background**/
  331. color:#d69e38; /**colour of credit text**/
  332. }
  333. #credit a:hover {
  334. background-color:#d69e38; /**colour of credit background on hover**/
  335. color:#fef6e5; /**colour of credit text on hover**/
  336. }
  337.  
  338. </style>
  339. </head>
  340. <body>
  341.  
  342. <div id="container">
  343. <center>
  344. <div id="header">
  345. <div id="title">About Me</div> <!--title of page-->
  346. <a href="/">home</a> /
  347. <a href="/ask">ask</a> /
  348. <a href="enterlinkhere">link1name</a> /
  349. <a href="enterlinkhere">link2name</a> /
  350. <a href="enterurlhere">link3name</a> /
  351. <a href="URL">link4name</a>
  352. <!--you can add as many links as you wish by copying and pasting one above and replacing all the necessary text-->
  353. </div>
  354. <div id="entries">
  355. <div id="circle1">
  356. <div id="ctitle">Basics</div> <!--title of first circle-->
  357. <div class="desc">
  358. Enter your text for the first circle over here.
  359. </div>
  360. </div>
  361. <div id="circle2">
  362. <div id="ctitle">Favourites</div><!--title for second title; you can change it to whatever you want, it's your page-->
  363.  
  364. <!--okay wait let me explain to you a thing: if your text doesn't fit inside your circle, you're going to do what's done below to make it so that you can scroll the circle. This is completely unnecessary if the text fits the circle; as you can see in the preview, the second circle looks back because it has a scrollbar and the text hasn't overflown-->
  365. <div class="desc" style="overflow-y:scroll">
  366. <u>COLOUR:</u> Stuff here
  367. <p>
  368. <u>FOODS:</u> Stuff here
  369. <p>
  370. <u>MOVIES:</u> More stuff here
  371. <p>
  372. <u>BOOKS:</u> Remember you don't have to keep this
  373. <p>
  374. <u>TV SHOWS:</u> w/e
  375. </div>
  376. </div>
  377. <div id="circle3">
  378. <div id="ctitle">More</div> <!--title of third circle-->
  379. <div class="desc" style="overflow-y:scroll">
  380. Enter the text for the third circle over here.
  381. </div>
  382. </div>
  383. <div id="circle4">
  384. <div id="ctitle">Quotes</div> <!--title of fourth circle-->
  385. <div class="desc" style="overflow-y:scroll">
  386. Enter any text for the fourth circle over here.
  387. </div>
  388. </div>
  389. </div><!--entries--></center>
  390. </div> <!--container-->
  391. <!--PLEASE DO NOT REMOVE-->
  392. <div id="credit"><a href="https://theghostoflove.tumblr.com">E</a></div>
  393. </body>
  394. </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!