API tools faq
paste
Advertisement
parrishing

ABOUT PAGE #3 - WILD

parrishing
Oct 23rd, 2015
2,300
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  
  3. <!--
  4.  
  5. ABOUT PAGE #3 'wild' - BY PROTECTMCCALL (http://protectmccall.tumblr.com)
  6. -DONT USE AS BASE OR STEAL THE BITS P PLEASE
  7. -ASK ME FOR HELP IF U STRUGGLE
  8. -HOPE U HAVE A GREAT DAY TODAY BUTTERCUP ♥
  9.  
  10. -->
  11.  
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15.  
  16. <head>
  17. <link href='https://fonts.googleapis.com/css?family=Martel:200' rel='stylesheet' type='text/css'>
  18. <title>About.</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  22. <!----jquery----->
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  24. <!----google fonts---->
  25. <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'>
  26. <!---tooltip--->
  27. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("a[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:300,
  34. tip_fade_speed:300,
  35. attribute:"title"
  36. });
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41.  
  42. <style type="text/css">
  43.  
  44. /* the prevailing color in the preview is peach #f5e9d0 if you want to change it press ctrl+f put '#f5e9d0' in the "Search for" space, put the colour you want to change to in "Replace with" space and click "All" voiLA~ */
  45.  
  46. a {
  47. text-decoration:none;
  48. outline:none;
  49. -moz-outline-style:none;
  50. color:#e6d9c1; /* COLOUR OF THE LINKS */
  51. -webkit-transition: all 0.5s ease-in-out;
  52. -moz-transition: all 0.5s ease-in-out;
  53. transition: all 0.5s ease-in-out;
  54. }
  55.  
  56.  
  57.  
  58.  
  59. body {
  60. background:#fff;
  61. font-family:Helvetica;
  62. line-height:110%;
  63. font-weight:300;
  64. letter-spacing:0px;
  65. text-align:justify;
  66. }
  67.  
  68. ::-webkit-scrollbar-thumb:vertical {
  69. background:#e6e6e6;
  70. height: 80px;
  71. }
  72.  
  73. ::-webkit-scrollbar {
  74. height: 10px;
  75. width: 3px;
  76. }
  77.  
  78. #s-m-t-tooltip { /* tooltip is what styles the hover title="" of the link */
  79. margin-top:20px;
  80. background-color:#ffffff;
  81. font-family:Helvetica;
  82. font-size:8px;
  83. color:#333333;
  84. letter-spacing:1px;
  85. text-transform:lowercase;
  86. padding:5px;
  87. padding-bottom:3px;
  88. z-index:999999999999999999999999999999999999;
  89. border-bottom: 9px double #e6d9c1 ; /* COLOUR OF THE ON HOVER LINES UNDER THE TEXT */
  90. font-weight:500;
  91. }
  92.  
  93.  
  94. #container {
  95. width:500px;
  96. height:600px;
  97. position:fixed;
  98. left:50%;
  99. top:50%;
  100. margin-left:-240px;
  101. margin-top:-220px;
  102. border-top: 2px solid #f5e9d0; /* COLOUR OF CONTAINER'S TOP BORDER */
  103. }
  104.  
  105.  
  106. #pic img {
  107. width:160px;
  108. height: 160px;
  109. background:#ffffff;
  110. position: fixed;
  111. margin-left: 170px;
  112. margin-top: 40px;
  113. border-radius: 100%;
  114. }
  115.  
  116. span.text-content {
  117. background: rgba(30,30,30,0.5);
  118. color: black;
  119. height: 160px;
  120. margin-left: 170px;
  121. position: absolute;
  122. margin-top: 40px;
  123. width: 160px;
  124. opacity: 0;
  125. border-radius:100%;
  126. -webkit-transition: all 0.5s ease-in-out;
  127. -moz-transition: all 0.5s ease-in-out;
  128. transition: all 0.5s ease-in-out;
  129. }
  130.  
  131. span.text-content span {
  132. text-align: center;
  133. margin-left:40px;
  134. vertical-align: bottom;
  135. font-family: 'Martel', serif;
  136. font-size:11px;
  137. color:#e6d9c1;
  138. }
  139.  
  140. #pic:hover span.text-content {
  141. opacity: 1;
  142. -webkit-transition: all 0.5s ease-in-out;
  143. -moz-transition: all 0.5s ease-in-out;
  144. transition: all 0.5s ease-in-out;
  145. }
  146.  
  147.  
  148. #quote {
  149. text-align: center;
  150. margin-top: 230px;
  151. width:400px;
  152. padding-left:50px;
  153. font-size:14px;
  154. font-style: italic;
  155. font-family: 'Martel', serif;
  156. font-weight: bold;
  157. }
  158.  
  159. #text {
  160. width:450px;
  161. background:#ffffff;
  162. margin-top:23px;
  163. padding-left:25px;
  164. overflow-x: scroll;
  165. text-align: center;
  166. color: #344247; /* COLOUR OF TEXT */
  167. font-size: 12px; /* SIZE OF THE FONT */
  168. }
  169.  
  170.  
  171. #linkies {
  172. text-align: center;
  173. }
  174.  
  175. #linkies a {
  176. height:30px;
  177. width: 30px;
  178. padding:7px 8px 7px 8px;
  179. border-radius:100px;
  180. background-color:#f5e9d0; /* COLOUR OF LINK CIRCLES */
  181. color: #555;
  182.  
  183. -webkit-transition: all 0.5s ease-in-out;
  184. -moz-transition: all 0.5s ease-in-out;
  185. transition: all 0.5s ease-in-out;
  186. }
  187.  
  188.  
  189. #linkies a:hover {
  190. background-color:#fff; /* COLOUR OF LINK CIRCLES ON HOVER */
  191. -webkit-transition: all 0.5s ease-in-out;
  192. -moz-transition: all 0.5s ease-in-out;
  193. transition: all 0.5s ease-in-out;
  194. }
  195.  
  196.  
  197. #title h1{
  198. margin-top:-10px;
  199. margin-left:207px;
  200. padding:0px 5px 0px 5px;
  201. line-height:100%;
  202. background-color:#fff;
  203. color:#000;
  204. font-family: 'Martel', serif;
  205. font-size:21px;
  206. position:fixed;
  207. text-transform:uppercase;
  208. }
  209.  
  210.  
  211. #credit {
  212. position:fixed;
  213. font-size:16px;
  214. letter-spacing:1px;
  215. right:10px;
  216. bottom:15px;
  217. }
  218. #credit a {
  219. padding:3px;
  220. border-radius:100px;
  221. color:#000;
  222. background-color:#ffffff;
  223. }
  224. #credit a:hover {
  225. color:#ffffff;
  226. background-color:#000;
  227. }
  228.  
  229.  
  230.  
  231.  
  232. {CustomCSS}</style></head><body>
  233.  
  234. <div id="container">
  235.  
  236. <div id="title"><h1>about</h1></div>
  237.  
  238.  
  239. <div id="pic">
  240. <img src="https://41.media.tumblr.com/589d1f9f111ed35a39f8c70f1ef6a286/tumblr_nuxhzvz8911sxhoaio2_r1_400.jpg">
  241. <span class="text-content"><span><p><br>
  242. <b>NAME:</b> Sarah;<br>
  243. <b>AGE:</b> 20;<br>
  244. <b>HOUSE:</b> Hufflepuff;<br>
  245. <b>COUNTRY:</b> Spain;
  246. </span></span>
  247.  
  248.  
  249. </div>
  250.  
  251.  
  252. <div id="quote">"Dean waving.Dean paused waving.Dean looking away."</div>
  253.  
  254. <div id="text">
  255. Lorem ipsum dolor<a href="http://hholke.tumblr.com/post/69198355274/more-white" title="link icons credit"> sit amet,</a> consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et magna aliqua. Ut nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. Duis aute irure dolor reprehenderit in voluptate velit esse cillum dolore eu pariatur. <p>
  256.  
  257. </div>
  258.  
  259. <div id="linkies">
  260. <a href="/" title="back to blog" class="link"><img src="http://33.media.tumblr.com/80a571a81daebb8ef04da3fbe7ce3d83/tumblr_inline_mxeidb5Ett1qhuq5z.png"></a>
  261. <a href="/ask" title="ask" class="link"><img src="http://31.media.tumblr.com/15eac61266f7a7fb260d5763d8596ccf/tumblr_inline_mxeiabZiGf1qhuq5z.png"></a>
  262. <a href="/" title="" class="link"><img src="http://33.media.tumblr.com/33071e97f3ce470dd4f676cacc10e146/tumblr_inline_mxeib4WHT41qhuq5z.png"></a>
  263.  
  264. </div>
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273. </div>
  274.  
  275. <div id="credit"><a href="http://protectmccall.tumblr.com" title="code by protectmccall">©</a></div> <!--DONT TOUCH THIS BROS-->
  276.  
  277.  
  278. </body>
  279. </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!