API tools faq
paste
Advertisement
cornetespoir

sammyapetals // tag page

cornetespoir
Nov 23rd, 2016
275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.43 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. </head>
  6.  
  7. <style type="text/css">
  8. /* custom font for labels */
  9. @font-face { font-family: "oliver"; src: url('https://dl.dropboxusercontent.com/s/y74b19hkp9def0k/olivier_demo.ttf'); }
  10.  
  11. body {
  12. font-size:1em;
  13. font-family:Helvetica;
  14. background:#f8f8f8; /*background color */
  15. }
  16.  
  17. /*links */
  18. a {
  19. color:#222; /*link color */
  20. text-decoration:none; /*removes default underline */
  21. }
  22.  
  23. #container {
  24. position:relative;
  25. margin:50px auto;
  26. height:200px;
  27. width:800px;
  28. }
  29.  
  30. /*sidebar positioning and width */
  31. .side {
  32. width:110px;
  33. position:fixed;
  34. margin-left:-70px;
  35.  
  36. }
  37.  
  38. /*sidebar image */
  39. .side img {
  40. width:110px;
  41. padding:10px; /*space around image */
  42. background:white; /*background of image */
  43. border:1px solid #ddd; /*image border */
  44. }
  45.  
  46. .text {
  47. padding:10px; /*space around text */
  48. background:white; /*background of text */
  49. border:1px solid #ddd; /*border of text */
  50. width:100%;
  51. margin-top:10px;
  52.  
  53. }
  54.  
  55. /*tags */
  56. .tags {
  57. background:#f3f3f3; /*background of tag section */
  58. left:100px;
  59. margin:0px 100px;
  60. border:1px solid #ddd; /*border of tag section */
  61. }
  62.  
  63. .label {
  64. background:#e791c8; /*background of tag categories */
  65. padding:10px; /*space around categories */
  66. font-size:1em;
  67. }
  68.  
  69. /*individual tags */
  70. .tags li {
  71. border-bottom:1px solid #eee; /*border under each tag */
  72. list-style:none; /*disables bullet points from showing */
  73. background:white; /*background of tag */
  74. padding:6px;
  75. transition:.6s;
  76. }
  77.  
  78. .tags li:hover {
  79. background:#f0d0ec; /*background of tag on hover */
  80. transition:.6s;
  81. }
  82.  
  83. /*allows the tags to be in a grid format */
  84. table {
  85. border-spacing:20px;
  86. }
  87. td {
  88.  
  89. margin:20px;
  90. height:auto;
  91. vertical-align:top;
  92. }
  93.  
  94. .box {
  95. box-shadow:8px 8px rgba(0,0,0,.08); /*box shadow of tag category sections */
  96. border:1px solid #ddd; /*boder of entire tag category section */
  97. background:white;
  98. padding:10px;
  99. width:130px; /*width of tag category */
  100. margin-bottom:30px; /*space from bottom of each category */
  101. }
  102.  
  103. /*navigation links */
  104. #linksbar {
  105. /*this is just all of the positioning */
  106. width:150px;
  107. position:absolute;
  108. right:-90px;
  109. top:-10px;
  110. }
  111.  
  112. #linksbar ul {
  113. border:1px solid #ddd; /*border of link section */
  114. padding:0px;
  115. }
  116.  
  117. /*individual links */
  118.  
  119. #linksbar li {
  120. background:white;
  121. padding:10px;
  122. transition:.6s;
  123. list-style:none;
  124. border-bottom:1px solid #ddd;
  125. }
  126.  
  127. #linksbar li:hover {
  128. background:#eee;
  129. transition:.6s;
  130. }
  131. .abt {
  132. padding:10px;
  133. font-size:1.6em;
  134. font-family:oliver;
  135. color:#444;
  136. border-bottom:1px dotted #ddd;
  137.  
  138. }
  139.  
  140. .abt:first-letter {
  141. color:#DB419C;
  142. opacity:.6;
  143. }
  144. #egg { opacity:.8;right:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  145. font-family: "bitxmap";
  146. border:1px solid #444; z-index:4;
  147.  
  148. }
  149. #egg:hover { animation-name: egg;
  150. animation-duration: 1s;
  151. animation-iteration-count: infinite;}
  152. @keyframes egg{
  153. 0%{}
  154. 10%{transform:rotate(20deg)}
  155. 80%{transform:rotate(-20deg)}
  156. 100%{}
  157. }
  158.  
  159. </style>
  160.  
  161.  
  162. <body>
  163. <a href="http://espoirthemes.tumblr.com" title="theme credit"><div id="egg"></div></a>
  164. <div id="container">
  165. <div class="side">
  166. <!-- this defaults to the icon you have for your blog, but you can replace {PortraitURL-128} with the url of whatever image you want -->
  167. <img src="{PortraitURL-128}" />
  168. <div class="abt text" style="font-size:1.3em; border-bottom:1px solid #ddd">
  169. <!--name --> sammyakei
  170. </div>
  171.  
  172. </div>
  173. <div id="linksbar">
  174. <div class="abt">
  175. <!--navigation label --> Navigation
  176. </div>
  177. <ul>
  178. <!--navigation links -->
  179. <li> <a href="/">Home</a> </li>
  180. <li> <a href="/ask">Ask</a> </li>
  181. <li> <a href="/archive">Archive</a> </li>
  182. <li> <a href="/tags">Tags</a> </li>
  183. <li> <a href="/projects">Projects</a> </li>
  184. <li><a href="http://tumblr.com/dashboard"></a> Dashboard </li>
  185. <!--navigation links -->
  186. </ul>
  187.  
  188.  
  189. </div>
  190.  
  191. <div class="tags">
  192. <table cellpadding="10">
  193.  
  194. <!--section 1-->
  195. <td>
  196.  
  197. <div class="box">
  198. <div class="label">Tag Category</div><!--name of the section of links-->
  199. <!--add the name of your tag after /tagged/, and replace tag name with whatever the tag is -->
  200. <li><a href="/tagged/">tag name</a></li>
  201. <li><a href="/tagged/">tag name</a></li>
  202. <li><a href="/tagged/">tag name</a></li>
  203. <li><a href="/tagged/">tag name</a></li>
  204.  
  205. </div>
  206. <!--section 2 -->
  207.  
  208. <div class="box">
  209. <div class="label">Tag Category</div>
  210. <li><a href="/tagged/">tag name</a></li>
  211. <li><a href="/tagged/">tag name</a></li>
  212. <li><a href="/tagged/">tag name</a></li>
  213. <li><a href="/tagged/">tag name</a></li>
  214.  
  215. </div>
  216. </td>
  217.  
  218. <!--section 3 -->
  219. <td>
  220. <div class="box">
  221. <div class="label">Tag Category</div>
  222.  
  223.  
  224. <li><a href="/tagged/">tag name</a></li>
  225. <li><a href="/tagged/">tag name</a></li>
  226. <li><a href="/tagged/">tag name</a></li>
  227. <li><a href="/tagged/">tag name</a></li>
  228. <li><a href="/tagged/">tag name</a></li>
  229. <li><a href="/tagged/">tag name</a></li>
  230. </div>
  231.  
  232.  
  233. <!--section 4 -->
  234.  
  235. <div class="box">
  236. <div class="label">Tag Category</div>
  237.  
  238. <li><a href="/tagged/">tag name</a></li>
  239. <li><a href="/tagged/">tag name</a></li>
  240. <li><a href="/tagged/">tag name</a></li>
  241. <li><a href="/tagged/">tag name</a></li>
  242. </div>
  243. </td>
  244.  
  245. <!--section 5 -->
  246. <td>
  247. <div class="box">
  248. <div class="label">Tag Category</div>
  249.  
  250. <li><a href="/tagged/">tag name</a></li>
  251. <li><a href="/tagged/">tag name</a></li>
  252. <li><a href="/tagged/">tag name</a></li>
  253. <li><a href="/tagged/">tag name</a></li>
  254. </div>
  255.  
  256. <!--section 6 -->
  257.  
  258. <div class="box">
  259. <div class="label">Tag Category</div>
  260. <li><a href="/tagged/">tag name</a></li>
  261. <li><a href="/tagged/">tag name</a></li>
  262.  
  263. </div>
  264. </td>
  265. </tr></table></div>
  266. </div>
  267.  
  268.  
  269. </body>
  270. </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!