API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 09. Chara Page {Over the Garden Wall}

Noir-Et-Blanc
May 1st, 2017
3,706
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.43 KB | None | 0 0
raw download clone embed print report
  1. <!-- Page 09
  2.  
  3. {. Over the Garden Wall + Charcter Page .}
  4.  
  5. Page #09. (Over the Garden Wall)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this theme as a base or claim it as your own.
  9. You are free to edit this page as much as you want, please just don't erase the credits.
  10.  
  11. CREDITS TO:
  12. All images and info were collected from Over the Garden Wall wiki
  13. http://over-the-garden-wall.wikia.com/wiki/Over_the_Garden_Wall_Wiki
  14.  
  15. Anchor code: http://codepedia.info/anchor-hover-effect-jquery-plugin/
  16.  
  17. -->
  18.  
  19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  20. <html xmlns="http://www.w3.org/1999/xhtml">
  21. <head>
  22. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  25. <script type="text/javascript" src="https://static.tumblr.com/g703xso/dW2ovrvkl/anchor.js"></script>
  26. <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Josefin+Sans" rel="stylesheet">
  27.  
  28. <title>{Title}</title>
  29.  
  30. <style>
  31. /* YOU MAY EDIT THE COLORS TO MATCH YOUR THEME. BUT PLEASE DO NOT REMOVE THE CREDITS */
  32. #credit{
  33. position: fixed;
  34. bottom: 0;
  35. right: 0;
  36. }
  37.  
  38. #credit a{
  39. text-decoration: none;
  40. display: block;
  41. background: #000000;
  42. text-align: center;
  43. color: white;
  44. padding: 5px 15px 3px 20px;
  45. -moz-transition:all .4s ease-in-out;
  46. -webkit-transition:all .4s ease-in-out;
  47. -o-transition:all .4s ease-in-out;
  48. transition:all .4s ease-in-out;
  49. }
  50.  
  51. #credit a:hover{
  52. letter-spacing: 3px;
  53. }
  54.  
  55. /*MAIN SCROLL BAR*/
  56.  
  57. Body::-webkit-scrollbar-track
  58. {
  59. background: #7b7360;
  60. }
  61.  
  62. Body::-webkit-scrollbar
  63. {
  64. width: 10px;
  65. }
  66.  
  67. Body::-webkit-scrollbar-thumb
  68. {
  69. background-color: #0b0b0b;
  70. }
  71.  
  72. /*BOX SCROLLBAR*/
  73.  
  74. ::-webkit-scrollbar-track
  75. {
  76. background: rgba(0, 0, 0, 0.28);
  77. }
  78.  
  79. ::-webkit-scrollbar
  80. {
  81. width: 3px;
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb
  85. {
  86. background-color: #b49870;
  87. }
  88.  
  89.  
  90. body{
  91. background: url("https://i.imgur.com/ArZmQaB.jpg") no-repeat center center fixed;
  92. -webkit-background-size: cover;
  93. -moz-background-size: cover;
  94. -o-background-size: cover;
  95. background-size: cover;
  96. /*If you want a bakcground that repeats. Erase the previous code and leave this one:
  97.  
  98. background: url("");
  99.  
  100. */
  101. margin:0;
  102. padding:0;
  103. font-family: 'Josefin Sans', sans-serif;
  104. font-size:12px;
  105. }
  106.  
  107. .header{
  108. position: fixed;
  109. background: #0b0b0b; /*Header background color*/
  110. width: 100%;
  111. height: 120px;
  112. z-index: 100;
  113. text-align: center;
  114. }
  115.  
  116. .header h1{
  117. color: #dbd0ad; /*Header Title color*/
  118. font-family: 'Cinzel Decorative', cursive;
  119. padding-top: 25px;
  120. margin: 0;
  121. -moz-transition:all .5s ease-in-out;
  122. -webkit-transition:all .5s ease-in-out;
  123. -o-transition:all .5s ease-in-out;
  124. transition:all .5s ease-in-out;
  125. }
  126.  
  127. .header h1:hover{
  128. letter-spacing: 2px;
  129. }
  130.  
  131. .links{
  132. padding: 0;
  133. margin: 0;
  134. margin-top:20px;
  135. }
  136.  
  137. .header a{ text-decoration:none;}
  138.  
  139. .header ul a{
  140. display: inline-block;
  141. letter-spacing: 1px;
  142. text-decoration: none;
  143. }
  144.  
  145. .header li {
  146. display: inline-block;
  147. list-style: none;
  148. padding: 10px;
  149. }
  150.  
  151. .brackets a {
  152. color: #ffffff; /*Links colors*/
  153. }
  154.  
  155. .brackets a::before,
  156. .brackets a::after {
  157. display: inline-block;
  158. opacity: 0;
  159. -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  160. -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  161. transition: transform 0.3s, opacity 0.2s;
  162. }
  163. .brackets a::before {
  164. margin-right: 10px;
  165. content: '[';
  166. -webkit-transform: translateX(20px);
  167. -moz-transform: translateX(20px);
  168. transform: translateX(20px);
  169. }
  170. .brackets a::after {
  171. margin-left: 10px;
  172. content: ']';
  173. -webkit-transform: translateX(-20px);
  174. -moz-transform: translateX(-20px);
  175. transform: translateX(-20px);
  176. }
  177. .brackets a:hover::before,
  178. .brackets a:hover::after,
  179. .brackets a:focus::before,
  180. .brackets a:focus::after {
  181. opacity: 1;
  182. -webkit-transform: translateX(0px);
  183. -moz-transform: translateX(0px);
  184. transform: translateX(0px);
  185. color: #dbd0ad; /*Brackets color on hover*/
  186. }
  187.  
  188. .main{
  189. position: absolute;
  190. width:100%;
  191. top: 150px;
  192. text-align: center;
  193. }
  194.  
  195. .boxme{
  196. display: inline-block;
  197. position: relative;
  198. width: 320px;
  199. height: 320px;
  200. overflow: hidden;
  201. margin: 5px;
  202. margin-bottom: 10px;
  203. }
  204.  
  205. .portrait{
  206. position: absolute;
  207. top:15px;
  208. left:15px;
  209. z-index: 1;
  210. height: 100px;
  211. width: 100px;
  212. overflow: hidden;
  213. border: 10px solid #80725e; /*Border color in the character picture*/
  214. -webkit-box-shadow: 10px 10px 13px -7px rgba(0,0,0,0.29);
  215. -moz-box-shadow: 10px 10px 13px -7px rgba(0,0,0,0.29);
  216. box-shadow: 10px 10px 13px -7px rgba(0,0,0,0.29);
  217. -ms-transform: rotate(-15deg); /* IE 9 */
  218. -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */
  219. transform: rotate(-15deg);
  220. }
  221.  
  222. .portrait img{
  223. max-height: 100px;
  224. }
  225.  
  226. .info{
  227. position: absolute;
  228. width: 260px;
  229. height: 260px;
  230. background: rgba(106, 96, 85, 0.65); /*Background color in the info box*/
  231. bottom: 0;
  232. right: 0;
  233. overflow: auto;
  234. color: #decdac; /*Font color in the info boxr*/
  235. }
  236.  
  237. .basics{
  238. display: block;
  239. margin-left: 75px;
  240. height: 70px;
  241. box-sizing: border-box;
  242. padding: 10px;
  243. }
  244.  
  245. .basics b{
  246. display: block;
  247. font-size: 22px;
  248. }
  249.  
  250. .basics i{
  251. display: block;
  252. padding-top: 5px;
  253. font-size: 14px;
  254. }
  255.  
  256. .extra{
  257. padding: 15px 10px;
  258. text-align: justify;
  259. }
  260.  
  261. .extra p{
  262. padding: 0;
  263. margin: 0;
  264. margin-top: 10px;
  265. }
  266.  
  267. .extra li{
  268. font-size: 12px;
  269. list-style: none;
  270. display: block;
  271. margin: 5px 0;
  272. padding-left: 5px;
  273. border-left: 10px solid #dbb97a; /*First trait color*/
  274. }
  275.  
  276. .extra li:nth-child(2) {
  277. border-left: 10px solid #a58131; /*Second trait color*/
  278. }
  279.  
  280. .extra li:nth-child(3) {
  281. border-left: 10px solid #6a461d; /*Third trait color*/
  282. }
  283.  
  284. /* If you make a larger list of traits in the character, you'll need to copy this code and change the number for every new line.
  285.  
  286. .extra li:nth-child(4) {
  287. border-left: 10px solid #000000;
  288. }
  289.  
  290. */
  291.  
  292. </style>
  293. </head>
  294. <body>
  295.  
  296. <div class="header">
  297. <!-- TITLE -->
  298. <h1>Over the Garden Wall</h1>
  299.  
  300. <!-- LINKS. You my add/remove as you wish. -->
  301. <ul class="links">
  302. <li><a href="/">Back</a></li>
  303. <li><a href="/">Link 1</a></li>
  304. <li><a href="/">Link 2</a></li>
  305. <li><a href="/">Link 3</a></li>
  306. <li><a href="/">Link 4</a></li>
  307. </ul>
  308. </div>
  309.  
  310. <div class="main">
  311.  
  312. <!-- COPY TO CREATE A NEW CHARACTER -->
  313. <div class="boxme">
  314. <!-- Character Image-->
  315. <div class="portrait"><img src="https://i.imgur.com/iHPPfeO.png"></div>
  316. <!-- Character Info-->
  317. <div class="info">
  318. <div class="basics">
  319. <b>The Beast</b> <!-- NAME -->
  320. <i>"Are you ready to see true darkness?"</i><!-- FREE TEXT OF YOUR CHOICE-->
  321. </div>
  322.  
  323. <div class="extra">
  324.  
  325. <!-- TRAITS. EDIT AS YOU WILL.
  326. YOU CAN ADD MORE AND CHANGE THE COLORS IN THE LAST LINES OF THE CSS.-->
  327. <li>Antagonist</li>
  328. <li>???</li>
  329. <li>Mysterious info</li>
  330.  
  331. <!-- FREE TEXT -->
  332. <p>The main antagonist of Over the Garden Wall. He is the monster of the The Unknown, and is feared throughout it. His goal is to catch the brothers, Wirt and Gregory, and turn them into Edelwood trees in order to fuel his lantern.</p>
  333. </div>
  334. </div>
  335. </div>
  336. <!-- END OF NEW CHARACTER -->
  337. </div>
  338.  
  339. <div id="credit"><a href="http://noiretblanc-themes.tumblr.com/">Theme</a></div>
  340.  
  341. <script>
  342. $(".links a").anchorHoverEffect({type: 'brackets'});
  343. </script>
  344.  
  345. </body>
  346. </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!