API tools faq
paste
tangycode

bowling alley network

tangycode
Jun 24th, 2019
245
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--hi this is a page by tangy!! please only edit the lines with annotations on it otherwise the page might die
  4. also please dont remove the credit, you can edit it but don't remove it thank you!!
  5. enjoy!! love you!!-->
  6. <head>
  7. <meta charset="UTF-8">
  8. <title>network page</title> <!--tab title-->
  9. <link rel="shortcut icon" href="favicon url"> <!--url for favicon-->
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  11.  
  12. <style type="text/css">
  13.  
  14. ::-webkit-scrollbar {
  15. height:6px;
  16. width:6px;
  17. background-color: transparent; /*scrollbar background color*/
  18. }
  19.  
  20. ::-webkit-scrollbar-thumb {
  21. background-color: #000; /*scrollbar color*/
  22. }
  23.  
  24. body {
  25. background:#8377ef; /*main background color*/
  26. background-image:url(''); /*if you want a tiling background, put your url here*/
  27. background-attachment:fixed;
  28. color:#000; /*main font color*/
  29. font-family:monospace; /*main font*/
  30. font-size:14px; /*main font size*/
  31. overflow:auto;
  32. margin:0;
  33. padding:0;
  34. }
  35.  
  36. a {
  37. color:#000; /*main links color*/
  38. text-decoration:underline; /*makes all the links underlined, remove if you don't want that*/
  39. -moz-transition-duration:0.5s;
  40. -o-transition-duration:0.5s;
  41. -webkit-transition-duration:0.5s;
  42. transition-duration:0.5s;
  43. }
  44.  
  45. a:hover {
  46. color:#000; /*main links hover*/
  47. text-transform:uppercase; /*makes all the links uppercase upon hovering, remove if you don't want that*/
  48. -moz-transition-duration:0.5s;
  49. -o-transition-duration:0.5s;
  50. -webkit-transition-duration:0.5s;
  51. transition-duration:0.5s;
  52. }
  53.  
  54. .sidebar {
  55. position:fixed;
  56. width:25%;
  57. height:100%;
  58. margin-right:25px;
  59. padding:10px;
  60. background-color:#2b2b2b; /*sidebar background color*/
  61. background-image:url(''); /*if you want a tiling background for your sidebar, put your url here*/
  62. color:#fff;
  63. border-right:1px solid #000; /*sidebar right border width, style, color*/
  64. text-align:center;
  65. z-index:10;
  66. }
  67.  
  68. .sidebarpic {
  69. width:150px;
  70. height:150px;
  71. margin-left:auto;
  72. margin-right:auto;
  73. margin-top:25px;
  74. display:inline-block;
  75. }
  76.  
  77. .sidebarpic img {
  78. border-radius:50%; /*if you want the sidebar image to be square, remove this*/
  79. border:1px solid #fff; /*sidebar image border width, style, color*/
  80. }
  81.  
  82. .title {
  83. margin-left:auto;
  84. margin-right:auto;
  85. margin-top:25px;
  86. font-size:30px; /*title font size*/
  87. color:#fff; /*title color*/
  88. display:inline-block;
  89. word-break:normal;
  90. }
  91.  
  92. .sidebartext {
  93. color:#fff; /*sidebar text color*/
  94. display:inline-block;
  95. word-break:normal;
  96. }
  97.  
  98. .links {
  99. margin-top:15px;
  100. width:50%;
  101. display:inline-block;
  102. }
  103.  
  104. .links a {
  105. color:#fff; /*sidebar links color*/
  106. }
  107.  
  108. .links a:hover {
  109. color:#fff; /*sidebar links hover color*/
  110. }
  111.  
  112. .links table, th, td {
  113. border:1px solid #fff; /*sidebar links border width, style, color*/
  114. }
  115.  
  116. .container {
  117. position:absolute;
  118. width:75%;
  119. right:0;
  120. overflow:hidden;
  121. text-align:center;
  122. }
  123.  
  124. .boxwrapper {
  125. width:350px;
  126. height:225px;
  127. margin:20px;
  128. position:relative;
  129. overflow:hidden;
  130. display:inline-block;
  131. z-index:10;
  132. }
  133.  
  134. .boxpic {
  135. width:100px;
  136. height:100px;
  137. overflow:hidden;
  138. border:1px solid #000; /*entry box picture border width, style, color*/
  139. display:inline-block;
  140. vertical-align:top;
  141. }
  142.  
  143. .box {
  144. width:225px;
  145. height:200px;
  146. overflow:hidden;
  147. border:1px solid #000; /*entry box border width, style, color*/
  148. background:#fff; /*entry box background color*/
  149. display:inline-block;
  150. }
  151.  
  152. .boxtext {
  153. color:#000; /*entry box text color*/
  154. text-align:left;
  155. margin-left:10px;
  156. margin-right:10px;
  157. word-break:normal;
  158. }
  159.  
  160. .boxtext h2 {
  161. font-size:20px; /*entry box title font size*/
  162. font-weight:bold; /*makes entry box titles bold, remove if you don't want that*/
  163. text-align:center; /*entry box title alignment*/
  164. color:#000; /*entry box title color*/
  165. }
  166.  
  167. .question {
  168. text-transform:uppercase; /*makes all bio questions uppercase, remove if you don't want that*/
  169. font-weight:bold;
  170. display:inline-block;
  171. font-size:16px; /*bio question font size*/
  172. background:#8377ef; /*bio question background color*/
  173. color:#000; /*bio question color*/
  174. }
  175. /*please don't touch this unless you're editing the color or font size*/
  176. .credit a {
  177. color:#000;
  178. position:fixed;
  179. bottom:5px;
  180. right:5px;
  181. font-size:25px;
  182. }
  183. /*credit end*/
  184. </style>
  185. </head>
  186. <body>
  187. <div class="sidebar">
  188. <!--replace this url with your image of choice-->
  189. <div class="sidebarpic"><img src="https://66.media.tumblr.com/6751be5e3db2f20b3961eac978911d80/tumblr_p28ry16yig1wj8yvro1_1280.jpg" width="150px" height="150px"></div>
  190. <!--change sidebar title here-->
  191. <div class="title">network name</div>
  192. <div class="sidebartext">
  193. <!--sidebar text begin-->
  194. <p>hi this is where you put info about your network and things</p>
  195. <!--sidebar text end-->
  196. </div>
  197. <div class="links">
  198. <!--change the urls here to your desired urls, and you can change the name of the link too
  199. if you want to add another link, simply copy/paste the line from <tr> to </tr> and add it underneath the last link-->
  200. <table style="width:100%;height:100%;border-collapse:collapse">
  201. <tr><th><p><a href="url">link 1</a></p></th></tr>
  202. <tr><th><p><a href="url">link 2</a></p></th></tr>
  203. <tr><th><p><a href="url">link 3</a></p></th></tr>
  204. <tr><th><p><a href="url">link 4</a></p></th></tr>
  205. </table>
  206. </div>
  207. </div>
  208.  
  209. <div class="container">
  210. <!--here's where the entries start. if you want more entries, copy/paste from here...-->
  211. <div class="boxwrapper">
  212. <!--replace url here with your desired image url-->
  213. <div class="boxpic"><img src="https://66.media.tumblr.com/5e75e89dff14f84e38904fd84cee73ee/tumblr_inline_oz5lajrnFH1ufylni_500.jpg" width="100px" height="100px"></div>
  214. <div class="box">
  215. <div class="boxtext">
  216. <!--entry box title-->
  217. <h2>name</h2>
  218. <!--entry box bio begin-->
  219. <p><div class="question">age:</div> nfkjsn</p>
  220. <p><div class="question">prns:</div> fjksdfs</p>
  221. <p><div class="question">role:</div> fsdnskf</p>
  222. <p><center><a href="url">about</a></center></p>
  223. <!--entry box bio end-->
  224. </div>
  225. </div>
  226. </div> <!--...to here-->
  227.  
  228. <!--it's the same thing for each entry box-->
  229. <div class="boxwrapper">
  230. <div class="boxpic"><img src="https://66.media.tumblr.com/5e75e89dff14f84e38904fd84cee73ee/tumblr_inline_oz5lajrnFH1ufylni_500.jpg" width="100px" height="100px"></div>
  231. <div class="box">
  232. <div class="boxtext">
  233. <h2>name</h2>
  234. <p><div class="question">age:</div> nfkjsn</p>
  235. <p><div class="question">prns:</div> fjksdfs</p>
  236. <p><div class="question">role:</div> fsdnskf</p>
  237. <p><center><a href="url">about</a></center></p>
  238. </div>
  239. </div>
  240. </div>
  241.  
  242. <div class="boxwrapper">
  243. <div class="boxpic"><img src="https://66.media.tumblr.com/5e75e89dff14f84e38904fd84cee73ee/tumblr_inline_oz5lajrnFH1ufylni_500.jpg" width="100px" height="100px"></div>
  244. <div class="box">
  245. <div class="boxtext">
  246. <h2>name</h2>
  247. <p><div class="question">age:</div> nfkjsn</p>
  248. <p><div class="question">prns:</div> fjksdfs</p>
  249. <p><div class="question">role:</div> fsdnskf</p>
  250. <p><center><a href="url">about</a></center></p>
  251. </div>
  252. </div>
  253. </div>
  254.  
  255. <div class="boxwrapper">
  256. <div class="boxpic"><img src="https://66.media.tumblr.com/5e75e89dff14f84e38904fd84cee73ee/tumblr_inline_oz5lajrnFH1ufylni_500.jpg" width="100px" height="100px"></div>
  257. <div class="box">
  258. <div class="boxtext">
  259. <h2>name</h2>
  260. <p><div class="question">age:</div> nfkjsn</p>
  261. <p><div class="question">prns:</div> fjksdfs</p>
  262. <p><div class="question">role:</div> fsdnskf</p>
  263. <p><center><a href="url">about</a></center></p>
  264. </div>
  265. </div>
  266. </div>
  267.  
  268. <div class="boxwrapper">
  269. <div class="boxpic"><img src="https://66.media.tumblr.com/5e75e89dff14f84e38904fd84cee73ee/tumblr_inline_oz5lajrnFH1ufylni_500.jpg" width="100px" height="100px"></div>
  270. <div class="box">
  271. <div class="boxtext">
  272. <h2>name</h2>
  273. <p><div class="question">age:</div> nfkjsn</p>
  274. <p><div class="question">prns:</div> fjksdfs</p>
  275. <p><div class="question">role:</div> fsdnskf</p>
  276. <p><center><a href="url">about</a></center></p>
  277. </div>
  278. </div>
  279. </div>
  280.  
  281. <div class="boxwrapper">
  282. <div class="boxpic"><img src="https://66.media.tumblr.com/5e75e89dff14f84e38904fd84cee73ee/tumblr_inline_oz5lajrnFH1ufylni_500.jpg" width="100px" height="100px"></div>
  283. <div class="box">
  284. <div class="boxtext">
  285. <h2>name</h2>
  286. <p><div class="question">age:</div> nfkjsn</p>
  287. <p><div class="question">prns:</div> fjksdfs</p>
  288. <p><div class="question">role:</div> fsdnskf</p>
  289. <p><center><a href="url">about</a></center></p>
  290. </div>
  291. </div>
  292. </div>
  293.  
  294. </div>
  295. <!--please don't remove this or edit it unless you are changing the symbol, thank you-->
  296. <div class="credit"><a href="https://tangycode.tumblr.com">☀</a>
  297. </body>
  298. </html>
Advertisement
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!