API tools faq
paste
angelicxi

TAGS PAGE #001: TRANQUIL by angelicxi

angelicxi
Jul 15th, 2016
567
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head><title>{title}</title>
  5. <link rel="shortcut icon" href="{favicon}">
  6.  
  7. <!--------------------------------------------------------------------
  8.  
  9. TAGS PAGE #001: TRANQUIL BY ANGELICXI
  10. published july 15, 2016
  11. ᴀʟʟ ʀɪɢʜᴛs ʀᴇsᴇʀᴠᴇᴅ
  12.  
  13. Terms of Use:
  14. - DO NOT REPRODUCE (STEAL) THE CODE OR PARTS OF IT.
  15. - DO NOT MODIFY IT TO THE POINT WHERE IT IS NO LONGER RECOGNIZABLE.
  16. - UNDER NO CIRCUMSTANCES REMOVE THE CREDIT FROM ITS' SPOT.
  17. - UNDER NO CIRCUMSTANCES CLAIM AS YOUR OWN WORK.
  18.  
  19. By using this page, you agree to the aforementioned rules. Included within the code are directions that explain what everything does - if you see gray text like this one, that's an instruction. Please feel free to customize as you wish, within limit of reason. Enjoy!
  20.  
  21. ~Lia
  22.  
  23. PS: For any questions you might have, feel free to drop me an ask.
  24.  
  25. --------------------------------------------------------------------->
  26.  
  27. <!---FONTS--->
  28. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  29.  
  30. <style type="text/css">
  31.  
  32. body {
  33. background-color: ; /* USE THIS TO SET A COLOR INSTEAD OF A TEXTURE! REMEBER TO DELETE THE LINE BELOW IF YOU WANT IT PLAIN, THOUGH. */
  34. background-image: url('http://i.imgur.com/rszkJ5f.png');
  35. margin: 0px;
  36.  
  37. }
  38.  
  39. a, a:active, a:visited, a:hover {
  40. text-decoration: none;
  41. }
  42.  
  43. /* MENU */
  44.  
  45. /* THIS IS THE OVERALL CONTAINER FOR THE MENU. */
  46.  
  47. #topbar {
  48. height: 100px;
  49. width: 500px;
  50. margin-top: 50px;
  51. margin-left: 427px;
  52. position: fixed;
  53. }
  54.  
  55. #image {
  56. background-image: url('http://i.imgur.com/wCwor9n.png'); /* HERE YOU REPLACE THE LINK FOR THE PICTURE~ */
  57. height: 100px;
  58. width: 100px;
  59. border: 5px solid #DBD0DD; /* BORDER COLOR. MAKE SURE TO MATCH 'EM FOR A PRETTY RESULT! */
  60. border-radius: 100px;
  61. -webkit-border-radius: 100px;
  62. -moz-border-radius: 100px;
  63. -o-border-radius: 100px;
  64. position: fixed;
  65. z-index: 2;
  66. }
  67.  
  68. h1 {
  69. width: 400px;
  70. color: #DBD0DD; /* TEXT COLOR. THIS ALSO AFFECTS THE COLOR OF THE BORDER BETWEEN IT AND THE LINKS THEMSELVES.*/
  71. font-family: 'Arial';
  72. font-size: 13px;
  73. text-align: center;
  74. text-transform: uppercase;
  75. border-bottom: 2px solid #DBD0DD;
  76. margin-top: 37px;
  77. margin-left: 100px;
  78. position: fixed;
  79. z-index: 1;
  80. }
  81.  
  82. #menu {
  83. width: 390px;
  84. color: #D8D0DD;
  85. font-family: 'Raleway';
  86. font-size: 8px;
  87. font-weight: 300;
  88. text-align: center;
  89. text-transform: uppercase;
  90. letter-spacing: 1px;
  91. margin-top: 60px;
  92. margin-left: 110px;
  93. position: fixed;
  94. z-index: 1;
  95. }
  96.  
  97. #menu a, a:active, a:visited {
  98. color: #D8D0DD;
  99. }
  100.  
  101. #menu a:hover {
  102. color: #D8D0DD;
  103. }
  104.  
  105. /* CONTAINER & TAG FIELDS */
  106.  
  107. #container {
  108. background-image: url('http://i.imgur.com/aadbB2e.png'); /* THIS IS THE BACKGROUND FOR THE CONTAINER. CHANGE IT TO background-color: ; AND USE A COLOR HEX IF YOU'D PREFER IT PLAIN INSTEAD. */
  109. height: 400px;
  110. width: 864px;
  111. border: 2px solid #D8D0DD; /* REMEMBER TO MATCH THE COLORS FOR THE PRETTIEST RESULT! uwu*/
  112. margin-top: 200px;
  113. margin-left: 251px;
  114. overflow-y: auto;
  115. position: fixed;
  116. z-index: 2;
  117. }
  118.  
  119. /* THIS IS THE TAG PANEL ITSELF. */
  120.  
  121. #panel {
  122. width: 150px;
  123. border: #C4B2C8 double 4px;
  124. margin: 25px;
  125. display: inline-block;
  126. float: left;
  127. }
  128.  
  129. /* THIS IS THE TAG PANNEL TITLE. */
  130.  
  131. .title {
  132. background-color: #eeeeec;
  133. color: #C4B2C8;
  134. font-family: 'Arial';
  135. font-size: 12px;
  136. font-weight: 300;
  137. text-align: center;
  138. letter-spacing: 1.5px;
  139. word-wrap:break-word;
  140. padding-top: 10px;
  141. padding-bottom: 8px;
  142. }
  143.  
  144. /* THIS PART WILL AFFECT HOW THE LINKS LOOK. */
  145.  
  146. .link a, a:active, a:visited {
  147. background-color: rgba(195,195,195,0.4);
  148. color: #9A86A8;
  149. font-family: 'Raleway';
  150. font-size: 8px;
  151. text-align: center;
  152. text-transform: uppercase;
  153. letter-spacing: 1px;
  154. word-wrap: break-word;
  155. padding-top: 10px;
  156. padding-bottom: 10px;
  157. border-top: 1px solid #C4B2C8;
  158. display: block;
  159. transition: all 0.4s ease-in-out;
  160. -webkit-transition: all 0.4s ease-in-out;
  161. -moz-transition: all 0.4s ease-in-out;
  162. -o-transition: all 0.4s ease-in-out;
  163. -ms-transition: all 0.4s ease-in-out;
  164. }
  165.  
  166. .link a:hover {
  167. background-color: #C4B2C8;
  168. color: #eeeeec;
  169. letter-spacing: 2px;
  170. transition: all 0.4s ease-in-out;
  171. -webkit-transition: all 0.4s ease-in-out;
  172. -moz-transition: all 0.4s ease-in-out;
  173. -o-transition: all 0.4s ease-in-out;
  174. -ms-transition: all 0.4s ease-in-out;
  175. }
  176.  
  177. </style><body>
  178.  
  179. <div id="topbar">
  180. <div id="image"></div>
  181. <h1>and so we wander, aimlessly</h1>
  182. <div id="menu"><a href="">home.</a> &nbsp; / / &nbsp; <a href="">ask.</a> &nbsp; / / &nbsp; <a href="">link I.</a> &nbsp; / / &nbsp; <a href="">link II.</a> &nbsp; / / &nbsp; <a href="">link III.</a> &nbsp; / / &nbsp; <a href="http://angelicxi.tumblr.com/" title="ᴛʜᴇᴍᴇ ʙʏ ᴀɴɢᴇʟɪᴄxɪ">♛</a> /* THIS IS THE CREDIT. PLEASE LEAVE IT WHERE IT IS. Also: if you would like all your links to be numbered (ie. I, II, III, IV & V, then change them to these numbers and simply add title="your title here" in between the link itself and before the closing tag of the href, as in <a href="example" title="example">I</a>. ^^ */</div>
  183. </div>
  184.  
  185.  
  186. <div id="container">
  187.  
  188. <div id="panel">
  189. <div class="title">Title</div>
  190. <div class="link">
  191. <a href="">Link</a>
  192. <a href="">Link</a>
  193. <a href="">Link</a>
  194. <a href="">Link</a>
  195. <a href="">Link</a>
  196. <a href="">Link</a>
  197. </div>
  198. </div>
  199.  
  200. <div id="panel">
  201. <div class="title">Title</div>
  202. <div class="link">
  203. <a href="">Link</a>
  204. <a href="">Link</a>
  205. <a href="">Link</a>
  206. <a href="">Link</a>
  207. <a href="">Link</a>
  208. <a href="">Link</a>
  209. </div>
  210. </div>
  211.  
  212. <div id="panel">
  213. <div class="title">Title</div>
  214. <div class="link">
  215. <a href="">Link</a>
  216. <a href="">Link</a>
  217. <a href="">Link</a>
  218. <a href="">Link</a>
  219. <a href="">Link</a>
  220. <a href="">Link</a>
  221. </div>
  222. </div>
  223.  
  224. <div id="panel">
  225. <div class="title">Title</div>
  226. <div class="link">
  227. <a href="">Link</a>
  228. <a href="">Link</a>
  229. <a href="">Link</a>
  230. <a href="">Link</a>
  231. <a href="">Link</a>
  232. <a href="">Link</a>
  233. </div>
  234. </div>
  235.  
  236. <div id="panel">
  237. <div class="title">Title</div>
  238. <div class="link">
  239. <a href="">Link</a>
  240. <a href="">Link</a>
  241. <a href="">Link</a>
  242. <a href="">Link</a>
  243. <a href="">Link</a>
  244. <a href="">Link</a>
  245. </div>
  246. </div>
  247.  
  248. <div id="panel">
  249. <div class="title">Title</div>
  250. <div class="link">
  251. <a href="">Link</a>
  252. <a href="">Link</a>
  253. <a href="">Link</a>
  254. <a href="">Link</a>
  255. <a href="">Link</a>
  256. <a href="">Link</a>
  257. </div>
  258. </div>
  259.  
  260. <div id="panel">
  261. <div class="title">Title</div>
  262. <div class="link">
  263. <a href="">Link</a>
  264. <a href="">Link</a>
  265. <a href="">Link</a>
  266. <a href="">Link</a>
  267. <a href="">Link</a>
  268. <a href="">Link</a>
  269. </div>
  270. </div>
  271.  
  272. <div id="panel">
  273. <div class="title">Title</div>
  274. <div class="link">
  275. <a href="">Link</a>
  276. <a href="">Link</a>
  277. <a href="">Link</a>
  278. <a href="">Link</a>
  279. <a href="">Link</a>
  280. <a href="">Link</a>
  281. </div>
  282. </div>
  283.  
  284.  
  285. </div>
  286.  
  287. </body>
  288.  
  289. <!-------------------------------------------------------------------
  290.  
  291. I will leave you here an empty format just in case, so you don't have to keep typing everything manually if you have over eight fields needing to be indexed. ^^
  292.  
  293. <div id="panel">
  294. <div class="title"></div>
  295. <div class="link">
  296. <a href=""></a>
  297. <a href=""></a>
  298. <a href=""></a>
  299. <a href=""></a>
  300. <a href=""></a>
  301. <a href=""></a>
  302. </div>
  303. </div>
  304.  
  305. Don't worry about adding too many, they will automatically float. However I would suggest you try to keep some balance to how many rows each panel has, otherwise they might end up looking odd.
  306.  
  307. -------------------------------------------------------------------->
  308.  
  309. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!