API tools faq
paste
tricksterkid

BULLETIN Page Theme COLORFUL

tricksterkid
Feb 1st, 2020
156
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARVESSEL ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>title</title> <!-- add page title here -->
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link href="https://fonts.googleapis.com/css?family=Bitter:400,400i,700|Overpass:400,400i,700,700i" rel="stylesheet">
  14.  
  15. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  16.  
  17. <style type="text/css">
  18.  
  19. ::-moz-selection{background: #c83454; color: #f6f6f6;}
  20. ::selection {background: #c83454; color: #f6f6f6;}
  21.  
  22. ::-webkit-scrollbar-thumb {background: #8a2037;}
  23. ::-webkit-scrollbar {background: #f6f6f6; width: 5px;}
  24.  
  25. * {margin:0; padding:0;}
  26.  
  27. body {
  28. background: #f6f6f6; /* change background color */
  29. color: #444444; /* change text color */
  30. font-family: Overpass; /* change font */
  31. font-size: 13px; /* change font size */
  32. text-align: justify;
  33. }
  34.  
  35. #container {
  36. background: #dccbe7;
  37. border-radius: 5px;
  38. height: 400px;
  39. left: 50%;
  40. margin-bottom: 40px;
  41. padding: 20px;
  42. position: absolute;
  43. top: 50%;
  44. transform: translate(-50%,-50%);
  45. width: 800px;
  46. }
  47.  
  48. #menu {
  49. background-color: #f6f6f6; /* color of side banner */
  50. border-radius: 5px;
  51. float: left;
  52. height: 380px;
  53. padding-top: 20px;
  54. text-align: center;
  55. width: 200px;
  56. }
  57.  
  58. #info {
  59. border: 1px solid #8a2037;
  60. border-radius: 5px;
  61. font-size: 13px;
  62. font-style: italic;
  63. margin: 10px;
  64. padding: 10px;
  65. text-align: justify;
  66. }
  67.  
  68. #content {
  69. float: right;
  70. height: 305px;
  71. overflow: auto;
  72. margin-top: 10px;
  73. padding: 10px;
  74. width: 575px;
  75. }
  76.  
  77. #credit {
  78. background-color: #c83454;
  79. color: #dccbe7;
  80. border-radius: 10px;
  81. bottom: 0;
  82. display: inline;
  83. margin: 10px;
  84. padding: 10px;
  85. position: fixed;
  86. right: 0;
  87. }
  88.  
  89. #credit:hover{
  90. background-color: #8a2037;
  91. -o-transition: all 0.4s ease;
  92. -moz-transition: all 0.4s ease;
  93. -webkit-transition: all 0.4s ease;
  94. }
  95.  
  96. .project {
  97. background-color: #f6f6f6; /* background color of projects */
  98. border-radius: 5px;
  99. float: left;
  100. height: 200px;
  101. margin: 5px;
  102. overflow: auto;
  103. padding: 10px;
  104. width: 160px;
  105. }
  106.  
  107. .button {
  108. background-color: #dccbe7; /* background color of button */
  109. color: #c83454; /* color of icon */
  110. border-radius: 5px;
  111. margin: 0px 20px 20px;
  112. padding: 20px;
  113. }
  114.  
  115. .button:hover {
  116. background-color: #8a2037;
  117. color:#dccbe7;
  118. -o-transition: all 0.4s ease;
  119. -moz-transition: all 0.4s ease;
  120. -webkit-transition: all 0.4s ease;
  121. }
  122.  
  123. h1 {
  124. border-bottom: 1px solid #8a2037;
  125. color: #c83454;
  126. float: right;
  127. font-family: Bitter;
  128. font-size: 20px;
  129. padding-bottom: 20px;
  130. padding-left: 10px;
  131. padding-right: 10px;
  132. text-align: center;
  133. width: 560px;
  134. }
  135.  
  136. a {
  137. color: #9e9e9e; /* link color */
  138. text-decoration: none;
  139. }
  140.  
  141. a:hover {
  142. color: #222222; /* link hover color */
  143. -o-transition: all 0.4s ease;
  144. -moz-transition: all 0.4s ease;
  145. -webkit-transition: all 0.4s ease;
  146. }
  147.  
  148. </style>
  149.  
  150. </head>
  151.  
  152. <body>
  153.  
  154. <div id="container">
  155.  
  156. <div id="menu">
  157.  
  158. <a href="/">
  159. <div class="button">
  160. <i class="fa fa-home" style="font-size:15px"></i>
  161. </div>
  162. </a>
  163.  
  164. <div id="info">
  165.  
  166. Here you can write a short intro about your personal projects. Unfortunately, it cannot be longer than the size of the banner.
  167.  
  168. <br><br>
  169.  
  170. It looks best when the whole banner is filled with text, but you can play around with margins within the banner to balance it if you don't have enough text.
  171.  
  172. <br><br>
  173.  
  174. This is what <b>bold text</b> and <u>underlined text</u> look like. You can also add <a href="">a link</a> if you want to!
  175.  
  176. </div>
  177.  
  178. </div>
  179.  
  180. <br>
  181.  
  182. <h1>Bulletin</h1>
  183.  
  184. <div id="content">
  185.  
  186. <!-- START PROJECT BLOCK -->
  187.  
  188. <div class="project">
  189.  
  190. <i class="fa fa-arrow-right"></i>
  191.  
  192. <b>TITLE OF PROJECT 1</b>
  193.  
  194. <br><br>
  195.  
  196. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i>
  197.  
  198. <br><br>
  199.  
  200. <b>PROGRESS | </b>
  201.  
  202. <i class="fa fa-star"></i>
  203. <i class="fa fa-star"></i>
  204. <i class="fa fa-star-o"></i>
  205. <i class="fa fa-star-o"></i>
  206. <i class="fa fa-star-o"></i>
  207.  
  208. <br><br>
  209.  
  210. <b><a href="">LINK 1</a> // <a href="">LINK 2</a> // <a href="">LINK 3</a></b>
  211.  
  212. </div>
  213.  
  214. <!-- END PROJECT BLOCK -->
  215.  
  216. <!-- START PROJECT BLOCK -->
  217.  
  218. <div class="project">
  219.  
  220. <i class="fa fa-arrow-right" style="font-size:15px;"></i>
  221.  
  222. <b>TITLE OF PROJECT 2</b>
  223.  
  224. <br><br>
  225.  
  226. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i>
  227.  
  228. <br><br>
  229.  
  230. <b>PROGRESS | </b>
  231.  
  232. <i class="fa fa-star"></i>
  233. <i class="fa fa-star"></i>
  234. <i class="fa fa-star"></i>
  235. <i class="fa fa-star"></i>
  236. <i class="fa fa-star-o"></i>
  237.  
  238. <br><br>
  239.  
  240. <b><a href="">LINK 1</a> // <a href="">LINK 2</a> // <a href="">LINK 3</a></b>
  241.  
  242. </div>
  243.  
  244. <!-- END PROJECT BLOCK -->
  245.  
  246. <!-- START PROJECT BLOCK -->
  247.  
  248. <div class="project">
  249.  
  250. <i class="fa fa-arrow-right" style="font-size:15px;"></i>
  251.  
  252. <b>TITLE OF PROJECT 3</b>
  253.  
  254. <br><br>
  255.  
  256. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </i>
  257.  
  258. <br><br>
  259.  
  260. <b>PROGRESS | </b>
  261.  
  262. <i class="fa fa-star"></i>
  263. <i class="fa fa-star-o"></i>
  264. <i class="fa fa-star-o"></i>
  265. <i class="fa fa-star-o"></i>
  266. <i class="fa fa-star-o"></i>
  267.  
  268. <br><br>
  269.  
  270. <b><a href="">LINK 1</a> // <a href="">LINK 2</a> // <a href="">LINK 3</a></b>
  271.  
  272. </div>
  273.  
  274. <!-- END PROJECT BLOCK -->
  275.  
  276. <!-- START PROJECT BLOCK -->
  277.  
  278. <div class="project">
  279.  
  280. <i class="fa fa-arrow-right"></i>
  281.  
  282. <b>TITLE OF PROJECT 4</b>
  283.  
  284. <br><br>
  285.  
  286. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i>
  287.  
  288. <br><br>
  289.  
  290. <b>PROGRESS | </b>
  291.  
  292. <i class="fa fa-star-o"></i>
  293. <i class="fa fa-star-o"></i>
  294. <i class="fa fa-star-o"></i>
  295. <i class="fa fa-star-o"></i>
  296. <i class="fa fa-star-o"></i>
  297.  
  298. <br><br>
  299.  
  300. <b><a href="">LINK 1</a> // <a href="">LINK 2</a> // <a href="">LINK 3</a></b>
  301.  
  302. </div>
  303.  
  304. <!-- END PROJECT BLOCK -->
  305.  
  306. <!-- START PROJECT BLOCK -->
  307.  
  308. <div class="project">
  309.  
  310. <i class="fa fa-arrow-right" style="font-size:15px;"></i>
  311.  
  312. <b>TITLE OF PROJECT 5</b>
  313.  
  314. <br><br>
  315.  
  316. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i>
  317.  
  318. <br><br>
  319.  
  320. <b>PROGRESS | </b>
  321.  
  322. <i class="fa fa-star"></i>
  323. <i class="fa fa-star"></i>
  324. <i class="fa fa-star"></i>
  325. <i class="fa fa-star"></i>
  326. <i class="fa fa-star"></i>
  327.  
  328. <br><br>
  329.  
  330. <b><a href="">LINK 1</a> // <a href="">LINK 2</a> // <a href="">LINK 3</a></b>
  331.  
  332. </div>
  333.  
  334. <!-- END PROJECT BLOCK -->
  335.  
  336. <!-- START PROJECT BLOCK -->
  337.  
  338. <div class="project">
  339.  
  340. <i class="fa fa-arrow-right" style="font-size:15px;"></i>
  341.  
  342. <b>TITLE OF PROJECT 6</b>
  343.  
  344. <br><br>
  345.  
  346. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </i>
  347.  
  348. <br><br>
  349.  
  350. <b>PROGRESS | </b>
  351.  
  352. <i class="fa fa-star"></i>
  353. <i class="fa fa-star"></i>
  354. <i class="fa fa-star"></i>
  355. <i class="fa fa-star-o"></i>
  356. <i class="fa fa-star-o"></i>
  357.  
  358. <br><br>
  359.  
  360. <b><a href="">LINK 1</a> // <a href="">LINK 2</a> // <a href="">LINK 3</a></b>
  361.  
  362. </div>
  363.  
  364. <!-- END PROJECT BLOCK -->
  365.  
  366. </div>
  367.  
  368. </div>
  369.  
  370. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  371.  
  372. <a target="blank" href="https://nuclearvessel.tumblr.com/"><div id="credit"><i class="fa fa-star" style="font-size:15px"></i></div></a>
  373.  
  374. </body>
  375.  
  376. </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!