API tools faq
paste
Advertisement
csloani

PAGE 04 | MEDS

csloani
Feb 5th, 2015
4,162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.56 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!------
  3.  
  4.  
  5. ---
  6. --
  7. ---- M E D S
  8. ---
  9. ---- iliyon
  10. --
  11. ---
  12.  
  13.  
  14. -------->
  15. <head><link rel="shortcut icon" href="{Favicon}"><link href='http://static.tumblr.com/wb7siqo/Omqnia97g/cssnormalize.css' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Karla:400italic,400,700,700italic' rel='stylesheet' type='text/css'>
  16. <title>Meds</title> <!-- CHANGE TITLE HERE -->
  17. <style type="text/css">
  18. body{
  19. font-family:Karla;
  20. color:#333; /* - Global text color - */
  21. background:#fff; /* - Background color - */
  22. font-size:1em;
  23. }
  24. b, strong{font-weight:700;}
  25. i, em{font-style:italic;}
  26. small{font-size:80%;}big{font-size:120%;}
  27. a{
  28. text-decoration:none;
  29. color:#aaa;
  30. /*- Remove this comment marker if you want a transition -
  31. -webkit-transition:0.4s;
  32. -moz-transition:0.4s;
  33. -ms-transition:0.4s;
  34. -o-transition:0.4s;
  35. transition:0.4s;
  36. */
  37. }
  38. a:hover{
  39. color:#333;
  40. /*- Remove this comment marker if you want a transition -
  41. -webkit-transition:0.4s;
  42. -moz-transition:0.4s;
  43. -ms-transition:0.4s;
  44. -o-transition:0.4s;
  45. transition:0.4s;
  46. color:#aaa;
  47. */
  48. }
  49. ::-webkit-scrollbar{
  50. width:16px;
  51. height:16px;
  52. }
  53. ::-webkit-scrollbar-thumb {
  54. height:6px;
  55. border:4px solid rgba(0, 0, 0, 0);
  56. background-clip: padding-box;
  57. -webkit-border-radius: 14px;
  58. -webkit-box-shadow: inset 0px 0px 3px #aaa;
  59. background-color: rgba(255,255,255, 0.5);
  60. }
  61. ::-webkit-scrollbar-button {
  62. width: 0; height: 0; display: none;
  63. }
  64. ::-webkit-scrollbar-corner{
  65. background-color: transparent;
  66. }
  67. .desc a{
  68. padding-bottom:2px;
  69. color:#aaa; /* - Links next to the title - */
  70. border-bottom:1px solid transparent;
  71. margin-right:11px;
  72. }
  73. .desc a:hover{
  74. color:#333;
  75. border-bottom:1px #aaa solid;
  76. }
  77. .holder{
  78. width:500px; /* - Container width - */
  79. position:absolute;
  80. left:0px;
  81. right:0px;
  82. margin:auto;
  83. top:120px;
  84. }
  85. .bloghead{
  86. font-size:2em; /* - Title font size - */
  87. font-weight:700;
  88. border-bottom:3px #333 solid; /* - Adjust border properties - */
  89. padding-bottom:2px;
  90. max-width:150px; /* - Adjust width if necessary. Mind the .desc too - */
  91. display:inline-block;
  92. vertical-align:middle;
  93. }
  94. .desc{
  95. display:inline-block;
  96. vertical-align:middle;
  97. max-width:350px; /* - Adjust width if necessary. Mind the .bloghead too - */
  98. font-size:.7em;
  99. line-height:1.2em;
  100. box-sizing:border-box;
  101. padding-left:30px; /* - Adjust if necessary - */
  102. }
  103. /* - FILL-IN-THE-BLANKS - */
  104. .spacer{
  105. margin-top:40px;
  106. }
  107. .sub{ /* Title for each section - */
  108. font-size:1em;
  109. letter-spacing:1px;
  110. font-style:italic;
  111. border-bottom:2px #333 solid;
  112. padding-bottom:4px;
  113. display:inline-block;
  114. }
  115. .link{ /* - Link section - */
  116. font-size:.75em;
  117. margin:1em 0em 3em 0em;
  118. }
  119. .link ol{
  120. counter-reset: LIST-ITEMS;
  121. }
  122. .link ol li{
  123. display:inline-block;
  124. text-align:right;
  125. width:29%;
  126. margin:2.75% 1.5%;
  127. box-sizing:border-box;
  128. border-bottom:1px #aaa solid;
  129. padding:5px;
  130. vertical-align:bottom/* Other options: top, baseline, middle. Use if your links exceed one line */;
  131. }
  132. .link li:before{
  133. content: counter( LIST-ITEMS ) ".";
  134. counter-increment: LIST-ITEMS;
  135. padding-right:3px;
  136. float:left;
  137. font-size:.85em;
  138. position:relative;
  139. top:2px;
  140. left:-3px;
  141. }
  142. .link li > a{
  143. display:block;
  144. color:#333;
  145. }
  146. .link li > a:hover{
  147. color:#aaa;
  148. }
  149. .cr{
  150. position:fixed;
  151. }
  152. </style>
  153. </head>
  154. <body>
  155. <section class="holder">
  156. <section class="bloghead">Meds</section> <!-- YOUR TITLE HERE -->
  157. <section class="desc">
  158. <!-- LINKS HERE --><a href="/">Return</a>
  159. <a href="/ask">Message</a>
  160. <a href="http://tumblr.com/">Dashboard</a>
  161. <a href="/">Some</a>
  162. <a href="/">More</a>
  163. <a href="http://iliyon.tumblr.com" target="_blank">&copy;</a>
  164. </section>
  165. <section class="spacer"></section> <!-- NO YOU CAN'T TOUCH THIS -->
  166.  
  167. <!-- BEGIN CONTENT -->
  168.  
  169. <section class="sub">Section 01</section> <!-- SECTION START -->
  170. <section class="link">
  171.  
  172. <!-- LINK STRUCTURE -->
  173. <ol>
  174. <!-- INDIVIDUAL LINKS -->
  175. <li><a href="/">Link 1</a></li>
  176. <li><a href="/">Link 2</a></li>
  177. <li><a href="/">Link 3</a></li>
  178. <li><a href="/">Link 4</a></li>
  179. <li><a href="/">Link 5</a></li>
  180. <li><a href="/">Link 6</a></li>
  181. </ol>
  182. </section>
  183. <!-- /SECTION START -->
  184. <!-- DUPLICATE THIS AS MUCH AS YOU NEED -->
  185.  
  186. <!--------
  187.  
  188. BREAK
  189.  
  190. ---------->
  191.  
  192. <!-- LOOK, ANOTHER SECTION -->
  193.  
  194. <section class="sub">Section 02</section> <!-- SECTION START -->
  195. <section class="link">
  196.  
  197. <!-- LINK STRUCTURE -->
  198. <ol>
  199. <!-- INDIVIDUAL LINKS -->
  200. <li><a href="/">Link 1</a></li>
  201. <li><a href="/">Link 2</a></li>
  202. <li><a href="/">Link 3</a></li>
  203. <li><a href="/">Link 4</a></li>
  204. <li><a href="/">Link 5</a></li>
  205. <li><a href="/">Link 6</a></li>
  206. <li><a href="/">Link 7</a></li>
  207. <li><a href="/">Link 8</a></li>
  208. <li><a href="/">Link 9</a></li>
  209. </ol>
  210. </section>
  211.  
  212. <!--------
  213.  
  214. BREAK
  215.  
  216. ---------->
  217.  
  218. <!-- WHAT, YOU NEED MORE? -->
  219.  
  220. <section class="sub">Section 03</section> <!-- SECTION START -->
  221. <section class="link">
  222.  
  223. <!-- LINK STRUCTURE -->
  224. <ol>
  225. <!-- INDIVIDUAL LINKS -->
  226. <li><a href="/">Link 1</a></li>
  227. <li><a href="/">Link 2</a></li>
  228. <li><a href="/">Link 3</a></li>
  229. <li><a href="/">Link 4</a></li>
  230. <li><a href="/">Link 5</a></li>
  231. <li><a href="/">Link 6</a></li>
  232. <li><a href="/">Link 7</a></li>
  233. <li><a href="/">Link 8</a></li>
  234. <li><a href="/">Link 9</a></li>
  235. <li><a href="/">Link 10</a></li>
  236. <li><a href="/">Link 11</a></li>
  237. <li><a href="/">Link 12</a></li>
  238. </ol>
  239. </section>
  240.  
  241. <!--------
  242.  
  243. BREAK
  244.  
  245. ---------->
  246.  
  247. <!-- BOOYAH, MAKING LIST IS FUN -->
  248.  
  249. <section class="sub">Section 04</section> <!-- SECTION START -->
  250. <section class="link">
  251.  
  252. <!-- LINK STRUCTURE -->
  253. <ol>
  254. <!-- INDIVIDUAL LINKS -->
  255. <li><a href="/">Link 1</a></li>
  256. <li><a href="/">Link 2</a></li>
  257. <li><a href="/">Link 3</a></li>
  258. <li><a href="/">Link 4</a></li>
  259. <li><a href="/">Link 5</a></li>
  260. <li><a href="/">Link 6</a></li>
  261. <li><a href="/">Link 7</a></li>
  262. <li><a href="/">Link 8</a></li>
  263. <li><a href="/">Link 9</a></li>
  264. </ol>
  265. </section>
  266.  
  267.  
  268. </section>
  269. </section>
  270. </body>
  271. </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!