API tools faq
paste
Advertisement
parrishing

ABOUT PAGE #1 - COLD

parrishing
Aug 28th, 2015
4,388
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.46 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 #1 'cold' - BY PROTECTMCCALL (http://protectmccall.tumblr.com)
  6. -DONT USE AS BASE OR STEAL THE BITS OR REMOVE CREDIT P PLEASE
  7. -ASK ME FOR HELP IF U STRUGGLE
  8. -IT'S MY FIRST THEME EVER SO SORRY IF THE CODING'S A MESS I'LL DO BETTER NEXT TIME I PROMISE
  9. -HOPE U HAVE A GREAT DAY TODAY BUTTERCUP ♥
  10.  
  11. -->
  12.  
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16.  
  17. <head>
  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 pale blue #dfe9ed if you want to change it press ctrl+f put '#dfe9ed' 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:#9dbcc7; /* 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:#f0f3fa; /* COLOUR OF BACKGROUND, #fff for white, or you can just type 'white', 'black' etcetc w/o '#' */
  61. font-family:Helvetica;
  62. line-height:110%;
  63. font-weight:300;
  64. letter-spacing:0px;
  65. text-align:justify;
  66. background-image:url(PUT THE URL OF THE PIC U WANT AS BACKGROUND HERE);
  67. background-attachment: fixed;
  68. background-repeat: repeat; /* if you dont want the pic repeated change 'repeat' to 'no-repeat'*/
  69. }
  70.  
  71. ::-webkit-scrollbar-thumb:vertical {
  72. background:#dfe9ed;
  73. height: 80px;
  74. }
  75.  
  76. ::-webkit-scrollbar {
  77. height: 10px;
  78. width: 3px;
  79. }
  80.  
  81. #s-m-t-tooltip { /* tooltip is what styles the hover title="" of the link */
  82. margin-top:20px;
  83. background-color:#ffffff;
  84. font-family:Helvetica;
  85. font-size:8px;
  86. color:#333333;
  87. letter-spacing:1px;
  88. text-transform:lowercase;
  89. padding:5px;
  90. padding-bottom:3px;
  91. z-index:999999999999999999999999999999999999;
  92. border-bottom: 9px double #dfe9ed ; /* COLOUR OF THE ON HOVER LINES UNDER THE TEXT */
  93. font-weight:500;
  94. }
  95.  
  96.  
  97. #container {
  98. background-color: #ffffff; /* COLOUR OF THE BOX */
  99. width:500px;
  100. height:443px;
  101. position:absolute;
  102. left:50%;
  103. top:50%;
  104. margin-left:-240px;
  105. margin-top:-220px;
  106. border-bottom: 4px solid #dfe9ed ; /* COLOUR OF THE BOTTOM LINE OF THE BOX */
  107. }
  108.  
  109. .topbar {
  110. width: 500px;
  111. height:90px;
  112. background-color: #dfe9ed; /* COLOUR OF THE TOP BAR */
  113. margin-bottom: 20px;
  114. border-bottom: 9px double #fff ;
  115. display:block;
  116. }
  117.  
  118.  
  119. #pic img {
  120. width:300px;
  121. height:300px;
  122. margin-left:200px;
  123. background:#ffffff;
  124. overflow: auto;
  125. }
  126.  
  127.  
  128. #text {
  129. width:150px;
  130. height:278px;
  131. background:#ffffff;
  132. padding-left:20px;
  133. padding-right:20px;
  134. padding-top:10px;
  135. padding-bottom:10px;
  136. overflow-x: scroll;
  137. position: fixed;
  138. color: #344247; /* COLOUR OF TEXT */
  139. font-size: 14px; /* SIZE OF THE FONT */
  140. }
  141.  
  142.  
  143. #title h1{
  144. margin-top:15px;
  145. margin-left:350px;
  146. padding:0px;
  147. line-height:100%;
  148. font-size:50px;
  149. color:#fff;
  150. text-shadow: -1px 0 #dfe9ed, 0 1px #dfe9ed, 1px 0 #dfe9ed, 0 -1px #dfe9ed;
  151. font-family: 'Open Sans', sans-serif;
  152. font-weight:700;
  153. letter-spacing:-4px;
  154. position:fixed;
  155. }
  156.  
  157. #title h1:first-letter{
  158. color:#dfe9ed;
  159. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  160. }
  161.  
  162. #links {
  163. margin-left:432px;
  164. margin-top:56px;
  165. display:inline;
  166. position: fixed;
  167.  
  168. }
  169.  
  170. #links a {
  171. display:inline;
  172. color: #fff; /* COLOUR OF THE LINK CIRCLES */
  173. -webkit-transition: all 0.5s ease-in-out;
  174. -moz-transition: all 0.5s ease-in-out;
  175. transition: all 0.5s ease-in-out;
  176.  
  177. }
  178.  
  179. #links a:hover {
  180. color:#dfe9ed; /* COLOUR OF THE LINK CIRCLES ON HOVER */
  181. -webkit-transition: all 0.5s ease-in-out;
  182. -moz-transition: all 0.5s ease-in-out;
  183. transition: all 0.5s ease-in-out;
  184. }
  185.  
  186.  
  187. #credit {
  188. position:fixed;
  189. font-size:14px;
  190. letter-spacing:1px;
  191. right:10px;
  192. bottom:15px;
  193. }
  194. #credit a {
  195. padding:3px;
  196. color:#000;
  197. background-color:#ffffff;
  198. }
  199. #credit a:hover {
  200. color:#ffffff;
  201. background-color:#000;
  202. }
  203.  
  204.  
  205.  
  206. {CustomCSS}</style></head><body>
  207.  
  208. <div id="container">
  209.  
  210. <div class="topbar">
  211. <div id="title"><h1>about</h1></div> <!--i wouldnt advice you change the title bc it would require moving it with css if ur not html-experienced it may be a problem BUT if u are still eager to do it click ctrl+f and search "#title h1" and change the number of margin-left, the bigger the number the more on the right it will move good luck bro -->
  212. <div id="links">
  213. <a href="/" title="back to blog" class="link">●</a>
  214. <a href="/ask" title="ask" class="link">●</a>
  215. <a href="/" title="" class="link">●</a>
  216. </div>
  217. </div>
  218.  
  219. <div id="text">
  220. It’s a freight train, <a href="" title="yoyoyo">low-slung double</a> stacked <b>containers</b>, and in the <i>moonlight</i> the beast is slow enough for Sam to snatch glimpses of his reckless, careless brother in the spaces between cars. Dean in monochrome, freeze frame, split second shots. Dean laughing. Dean waving. Dean paused waving. Dean looking away. Dean caught halfway through a star-jump, clowning for Sam. Punctuated by passing freight cars, reduced to a cartoon image, he could be as inconsequential as Sam’s own reflection in a funhouse mirror. <br>They’re disconnected, uncoupled. An image in black and white, Dean is a stranger in a landscape Sam doesn’t recognize.
  221. </div>
  222.  
  223. <div id="pic"><img src="http://40.media.tumblr.com/8019ad2040869acdf01525862bcbfcf2/tumblr_nsvy7pZMpf1tbb67vo1_1280.jpg"></div> <!-- CHANGE THE PIC HERE, IT SHOULD BE SQUARE AND NOT SMALLER THAN 300X300PX THO SO BEWARE-->
  224.  
  225.  
  226.  
  227. </div>
  228.  
  229. <div id="credit"><a href="http://protectmccall.tumblr.com" title="code by protectmccall">©</a></div> <!--DONT TOUCH THIS BROS-->
  230.  
  231.  
  232. </body>
  233. </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!