Zig Zag About (SCROLL) - Tumblr Page Code

SUBMITTED BY: VSmolGay

DATE: May 31, 2017, 4:18 p.m.

UPDATED: May 31, 2017, 4:19 p.m.

FORMAT: CSS

SIZE: 10.4 kB

History Raw Download

HITS: 365

Report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <!Please do not claim as your own.
  4. Feel free to edit as you see fit, but please don't take parts from this to create your own about page.
  5. This was a lot of me yelling at my computer in frustration and a lot of me laying my head down on my desk.>
  7. <head>
  8. <title>About</title>
  10. <style>
  12. /*--BIG TITLE--*/
  13. #logo h1{
  14. font-family:'Bebas Neue', "Times New Roman", Times, serif;
  15. font-size:50px;
  16. text-align:center;
  17. color: #79be8a; /*--Colour of the Big Title font.--*/
  18. margin:0;
  19. padding:30px 0 0 0;
  20. text-shadow: -4px 3px 0 #a7dbbc; /*--You can change the colour of the Text Shadow here.--*/
  21. }
  23. /*--MENU--*/
  25. .circlemenu{
  26. width: 100%;
  27. overflow:hidden;
  28. background-color:#b4e4c8;
  29. border: 2px dashed #fff;
  30. margin-bottom: 5px;
  31. margin-left: auto;
  32. margin-right: auto;
  33. }
  35. .circlemenu ul{
  36. margin: 0;
  37. padding: 0;
  38. font: bold 12px 'PT Sans Narrow';
  39. list-style-type: none;
  40. text-align: center; /*--left, center, right, etc etc--*/
  41. }
  43. .circlemenu li{
  44. display: inline;
  45. margin: 0;
  46. }
  48. .circlemenu li a{
  49. display:inline-block;
  50. text-align:center;
  51. text-decoration: none;
  52. color: #fff;
  53. background:#b4e4c8; /*--This is the background colour.--*/
  54. margin: 0;
  55. margin-right:0px;
  56. width:100px;
  57. height:40px;
  58. -webkit-transition: background-color 0.3s linear, letter-spacing 0.3s linear; /*--This is the Transition Back. You can change the 's' to however long you want.--*/
  60. }
  62. .circlemenu a span{
  63. position:relative;
  64. top:30%;
  65. }
  67. .circlemenu li a:visited{
  68. color: #fff;
  69. }
  71. .circlemenu a:hover{
  72. background-color: #cdf3dd; /*--This is the hovor background colour.--*/
  73. -webkit-transition: background-color 0.3s linear, letter-spacing 0.3s linear; /*--This is the Transition. You can change the 's' to however long you want.--*/
  74. letter-spacing: 4px;
  76. }
  78. /*---SCROLL--*/
  80. /*--This is where I got extremely frustrated thank you to fuandon for the help.--*/
  82. ::-webkit-scrollbar {
  83. width:5px;
  85. }
  87. ::-webkit-scrollbar-button:start:decrement
  89. ::-webkit-scrollbar-button:end:increment {
  90. display:block;
  91. height:0px;
  92. background-color:transparent;
  94. }
  96. ::-webkit-scrollbar-track-piece {
  97. background-color:transparent; /*--You CAN change 'transparent' to whatever colour but ehn I think it looks nice w/o colour.--*/
  98. -webkit-border-radius:0;
  99. -webkit-border-bottom-right-radius:3px;
  100. -webkit-border-bottom-left-radius:3px;
  101. margin-top: 15px;
  102. margin-bottom: 15px;
  104. }
  106. ::-webkit-scrollbar-thumb:vertical {
  107. height:75%;
  108. background-color:#a7dbbc; /*--This is the colour of the Scroll Bar jsyk.--*/
  109. -webkit-border-radius:20px;
  111. }
  113. /*---MAIN CSS---*/
  115. body{
  116. background-image: url('http://i.imgur.com/RfQwpw7.gif'); /*--You can change this image I guess--*/
  117. font-family: arial;
  118. font-size: 11px;
  119. color: #000;
  120. }
  122. /*--This is the main Container do not touch.--*/
  124. #container1{
  125. width:770px;
  126. height:100%;
  127. margin-top:170px;
  128. margin: auto;
  129. padding:10;
  130. }
  132. /*--Even though it isn't suggested, you can flip which side the Little Info & Info Boxes are by editing the following two containers. In Container2, switch the 'float' from left to right. In Container3, switch the 'float' from right to left. Et Voila.--*/
  134. #container2{
  135. margin: 10px;
  136. margin-top: 160px;
  137. width:310;
  138. height:100%;
  139. float:left;
  140. }
  142. #container3{
  143. width:425;
  144. height:100%;
  145. margin-top:75px;
  146. float:right;
  147. }
  149. /*---INFO BOXES---*/
  151. #smallinfo{
  152. height:300px;
  153. width:200px;
  154. border:1px dotted #7a7a7a;
  155. -moz-border-radius:15px;
  156. -webkit-border-radius:15px;
  157. margin:auto;
  158. margin-top: 10px;
  159. padding:10px;
  160. background-color: #fff; /*--Colour of the Little Info Box.--*/
  161. overflow: auto;
  162. }
  164. #infobox{
  165. height:500px;
  166. width:400px;
  167. -moz-border-radius:15px;
  168. -webkit-border-radius:15px;
  169. border:1px dotted #7a7a7a;
  170. margin: auto;
  171. padding:10px;
  172. overflow:auto;
  173. background-color: #fff; /*--Colour of the Info Box.--*/
  174. }
  176. /*---STYLES---*/
  178. /*--This is literately just the Logo Header copied and pasted so uh yeah.--*/
  179. h1{
  180. font-family:'Bebas Neue', "Times New Roman", Times, serif;
  181. font-size:50px;
  182. text-align:center;
  183. color: #79be8a;
  184. margin:0;
  185. padding:30px 0 0 0;
  186. text-shadow: -4px 3px 0 #a7dbbc;
  187. }
  189. /*--Little Info Header.--*/
  190. h2{
  191. color:#000;
  192. font-family:'Bebas Neue', "Times New Roman";
  193. font-size:18px;
  194. font-weight:normal;
  195. letter-spacing:3px;
  196. text-transform: uppercase;
  197. border-bottom: 1px solid #ccc;
  198. }
  200. /*--Little Info Sections.--*/
  201. h3{
  202. color:#000;
  203. font-family:'Bebas Neue', "Times New Roman";
  204. font-size:14px;
  205. font-weight:normal;
  206. letter-spacing:3px;
  207. text-transform: uppercase;
  208. margin-bottom: 0px;
  209. }
  211. /*--Info Sections--*/
  212. h4{
  213. color:#000;
  214. font-family:'Bebas Neue', "Times New Roman";
  215. font-size:18px;
  216. font-weight:normal;
  217. letter-spacing:3px;
  218. text-transform: Capitalize;
  219. margin-bottom: 0px;
  220. border-bottom: 1px solid #ccc;
  221. }
  223. /*--This is Links and stuff.--*/
  224. a:link, a:active, a:visited {
  225. color: #529ecc;
  226. text-decoration:none;
  227. }
  229. /*--This is Hovered Links.--*/
  230. a:hover {
  231. color: #97c5e0;
  232. text-decoration: none;
  233. }
  235. /*--This is the Dashed Horizontal Rule beneath the Little Info sections eyy.--*/
  236. hr {
  237. border: 0;
  238. border-bottom: 1px dashed #ccc;
  239. margin-left: 50px;
  240. margin-right: 50px;
  241. margin-top: 0.5px;
  242. margin-bottom: 0.5px;
  244. }
  246. /*---CREDITS---*/
  247. /*--Don't you dare remove this part i s2g.--*/
  248. #credit {
  249. position: fixed;
  250. bottom: 10px;
  251. left: 10px;
  252. font-family: 'Bebas Neue', "Times New Roman";
  253. font-size: 10px;
  254. text-transform: uppercase;
  255. text-align: right;
  256. font-weight: bold;
  257. letter-spacing: 2px;
  258. }
  260. #credit a {
  261. color: #bc4776;
  262. text-decoration: none;
  263. -webkit-transition: font-size 0.3s linear, letter-spacing 0.3s linear; /*--This is the Transition Back. You can change the 's' to however long you want.--*/
  264. }
  266. #credit a:hover{
  267. -webkit-transition: font-size 0.3s linear, letter-spacing 0.3s linear; /*--This is the Transition. You can change the 's' to however long you want.--*/
  268. font-size: 11px;
  269. letter-spacing: 4px;
  271. }
  273. </style>
  275. <body>
  276. <div id="container1">
  277. <div id="container2">
  278. <div align="center">
  279. <img src='http://placehold.it/200x240'>
  280. </div>
  281. <div id="smallinfo">
  282. <div align="center">
  283. <h2>;; Little Info ;;</h2>
  284. <h3>Name</h3><hr>Example
  285. <h3>Nickname</h3><hr></hr>Example
  286. <h3>Location</h3><hr>Example
  287. <h3>Likes</h3><hr>Example
  288. <h3>Dislikes</h3><hr>Example
  290. </div>
  291. </div>
  292. </div>
  294. <div id="container3">
  296. <div id="logo"><h1>;; About ;;<br>
  297. </div>
  299. <!--MENU-->
  301. <div class="circlemenu">
  302. <ul>
  303. <li><a href="/"><span>Home</span></a></li>
  304. <li><a href="/ask"><span>Ask</span></a></li>
  305. </ul>
  306. </div>
  307. <div id="infobox">
  309. <!---Start Section--->
  310. <h4>Section one</h4>
  311. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet nulla nec erat lobortis, quis convallis neque ullamcorper. Nulla et turpis a odio tristique cursus. Vivamus viverra nisl pretium elit auctor, nec cursus augue tristique. Nullam ac leo commodo, luctus risus laoreet, eleifend neque. Duis ac sapien quis sem molestie vehicula. Duis laoreet scelerisque diam, ac porta lectus semper eget. Proin eleifend tincidunt vestibulum. Proin nulla dui, vehicula non purus in, adipiscing dignissim leo.
  312. <!---End Section--->
  314. <!---Start Section--->
  315. <h4>Section two</h4>
  316. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet nulla nec erat lobortis, quis convallis neque ullamcorper. Nulla et turpis a odio tristique cursus. Vivamus viverra nisl pretium elit auctor, nec cursus augue tristique. Nullam ac leo commodo, luctus risus laoreet, eleifend neque. Duis ac sapien quis sem molestie vehicula. Duis laoreet scelerisque diam, ac porta lectus semper eget. Proin eleifend tincidunt vestibulum. Proin nulla dui, vehicula non purus in, adipiscing dignissim leo.
  317. <!---End Section--->
  319. <!---Start Section--->
  320. <h4>Section three</h4>
  321. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet nulla nec erat lobortis, quis convallis neque ullamcorper. Nulla et turpis a odio tristique cursus. Vivamus viverra nisl pretium elit auctor, nec cursus augue tristique. Nullam ac leo commodo, luctus risus laoreet, eleifend neque. Duis ac sapien quis sem molestie vehicula. Duis laoreet scelerisque diam, ac porta lectus semper eget. Proin eleifend tincidunt vestibulum. Proin nulla dui, vehicula non purus in, adipiscing dignissim leo.
  322. <!---End Section--->
  324. <!---Start Section--->
  325. <h4>Section four</h4>
  326. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet nulla nec erat lobortis, quis convallis neque ullamcorper. Nulla et turpis a odio tristique cursus. Vivamus viverra nisl pretium elit auctor, nec cursus augue tristique. Nullam ac leo commodo, luctus risus laoreet, eleifend neque. Duis ac sapien quis sem molestie vehicula. Duis laoreet scelerisque diam, ac porta lectus semper eget. Proin eleifend tincidunt vestibulum. Proin nulla dui, vehicula non purus in, adipiscing dignissim leo.
  327. <!---End Section--->
  330. <!---FOR MORE SECTIONS, COPY AND PASTE FROM 'START SECTION' TO 'END SECTION'--->
  332. </div>
  335. </div>
  336. </div>
  338. <!-- Also do not remove this CREDIT or I will cry actual tears.-->
  339. <div id="credit">
  340. <a href="http://naleacdesigns.tumblr.com">■ Naleac Designs</a>
  341. </div>
  343. <!---CORNER IMAGE--->
  344. <!---If you want the corner image to be put to the left, change the 'right' part to 'left'.-->
  346. <img src='http://placehold.it/300x300' style='position:fixed;bottom:30px;right:30px;' width="300px">
  347. </body>
comments powered by Disqus