Untitled

SUBMITTED BY: VSmolGay

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

UPDATED: Oct. 5, 2017, 2:28 a.m.

FORMAT: HTML

SIZE: 13.9 kB

History Raw Download

HITS: 487

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>
  11. /*--BIG TITLE--*/
  12. #logo h1{
  13. font-family:'Bebas Neue', "Times New Roman", Times, serif;
  14. font-size:50px;
  15. text-align:center;
  16. color: #79be8a; /*--Colour of the Big Title font.--*/
  17. margin:0;
  18. padding:30px 0 0 0;
  19. text-shadow: -4px 3px 0 #a7dbbc; /*--You can change the colour of the Text Shadow here.--*/
  20. }
  22. /*--MENU--*/
  24. .circlemenu{
  25. width: 100%;
  26. overflow:hidden;
  27. background-color:#b4e4c8;
  28. border: 2px dashed #fff;
  29. margin-bottom: 5px;
  30. margin-left: auto;
  31. margin-right: auto;
  32. }
  34. .circlemenu ul{
  35. margin: 0;
  36. padding: 0;
  37. font: bold 12px 'PT Sans Narrow';
  38. list-style-type: none;
  39. text-align: center; /*--left, center, right, etc etc--*/
  40. }
  42. .circlemenu li{
  43. display: inline;
  44. margin: 0;
  45. }
  47. .circlemenu li a{
  48. display:inline-block;
  49. text-align:center;
  50. text-decoration: none;
  51. color: #fff;
  52. background:#b4e4c8; /*--This is the background colour.--*/
  53. margin: 0;
  54. margin-right:0px;
  55. width:100px;
  56. height:40px;
  57. -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.--*/
  59. }
  61. .circlemenu a span{
  62. position:relative;
  63. top:30%;
  64. }
  66. .circlemenu li a:visited{
  67. color: #fff;
  68. }
  70. .circlemenu a:hover{
  71. background-color: #cdf3dd; /*--This is the hovor background colour.--*/
  72. -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.--*/
  73. letter-spacing: 4px;
  75. }
  77. /*---SCROLL--*/
  79. /*--This is where I got extremely frustrated thank you to fuandon for the help.--*/
  81. ::-webkit-scrollbar {
  82. width:5px;
  84. }
  86. ::-webkit-scrollbar-button:start:decrement
  88. ::-webkit-scrollbar-button:end:increment {
  89. display:block;
  90. height:0px;
  91. background-color:transparent;
  93. }
  95. ::-webkit-scrollbar-track-piece {
  96. background-color:transparent; /*--You CAN change 'transparent' to whatever colour but ehn I think it looks nice w/o colour.--*/
  97. -webkit-border-radius:0;
  98. -webkit-border-bottom-right-radius:3px;
  99. -webkit-border-bottom-left-radius:3px;
  100. margin-top: 15px;
  101. margin-bottom: 15px;
  103. }
  105. ::-webkit-scrollbar-thumb:vertical {
  106. height:75%;
  107. background-color:#a7dbbc; /*--This is the colour of the Scroll Bar jsyk.--*/
  108. -webkit-border-radius:20px;
  110. }
  112. /*---MAIN CSS---*/
  114. body{
  115. background-image: url('http://i.imgur.com/RfQwpw7.gif'); /*--You can change this image I guess--*/
  116. font-family: arial;
  117. font-size: 11px;
  118. color: #000;
  119. }
  121. /*--This is the main Container do not touch.--*/
  123. #container1{
  124. width:770px;
  125. height:100%;
  126. margin-top:150px;
  127. margin: auto;
  128. padding:10;
  129. }
  131. /*--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.--*/
  133. #container2{
  134. margin: 10px;
  135. margin-top: 160px;
  136. width:310;
  137. height:100%;
  138. float:left;
  139. }
  141. #container3{
  142. width:425;
  143. height:100%;
  144. margin-top:75px;
  145. float:right;
  146. }
  148. /*---INFO BOXES---*/
  150. #smallinfo{
  151. height:300px;
  152. width:200px;
  153. border:1px dotted #7a7a7a;
  154. -moz-border-radius:15px;
  155. -webkit-border-radius:15px;
  156. margin:auto;
  157. margin-top: 10px;
  158. padding:10px;
  159. background-color: #fff; /*--Colour of the Little Info Box.--*/
  160. overflow: auto;
  161. }
  163. /*--ACCORDION--*/
  164. /*--K so this whole part is kind of tricky.--*/
  166. .ac-container{
  167. width: 400px;
  168. margin: 10px auto 30px auto;
  169. background: rgba(255, 255, 255, 0.5); /*--This is the Label/Header Background.--*/
  170. }
  172. .ac-container label{
  173. font-family:'Bebas Neue', "Times New Roman";
  174. font-size:18px;
  175. font-weight:normal;
  176. letter-spacing:3px;
  177. text-transform: Capitalize;
  178. padding: 5px 20px;
  179. position: relative;
  180. z-index: 20;
  181. display: block;
  182. height: 30px;
  183. cursor: pointer;
  184. color: #777; /*--Label/Header Font Colour.--*/
  185. text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  186. line-height: 33px;
  187. font-size: 19px;
  188. background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  189. box-shadow:
  190. 0px 0px 0px 1px rgba(155,155,155,0.3),
  191. 1px 0px 0px 0px rgba(255,255,255,0.9) inset,
  192. 0px 2px 2px rgba(0,0,0,0.1);
  193. }
  195. .ac-container label:hover{
  196. background: #fff;
  197. }
  199. .ac-container input:checked + label,
  200. .ac-container input:checked + label:hover{
  201. background: #cdf3dd; /*--New Label/Header Background Colour.--*/
  202. color: #4c975f; /*--New Label/Header Font Colour.--*/
  203. text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
  204. box-shadow:
  205. 0px 0px 0px 1px rgba(155,155,155,0.3),
  206. 0px 2px 2px rgba(0,0,0,0.1);
  207. }
  209. .ac-container label:hover:after,
  210. .ac-container input:checked + label:hover:after{
  211. content: '';
  212. position: absolute;
  213. width: 24px;
  214. height: 24px;
  215. right: 13px;
  216. top: 7px;
  217. }
  219. /*--This is so you don't see any Check Boxes.--*/
  220. .ac-container input{
  221. display: none;
  222. }
  224. .ac-container article{
  225. background: rgba(255, 255, 255, 0.5);
  226. margin-top: -1px;
  227. overflow: hidden;
  228. height: 0px;
  229. position: relative;
  230. z-index: 10;
  231. transition:
  232. height 0.3s ease-in-out,
  233. box-shadow 0.6s linear;
  234. }
  235. .ac-container input:checked ~ article{
  236. transition:
  237. height 0.5s ease-in-out,
  238. box-shadow 0.1s linear;
  239. box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
  240. }
  242. .ac-container article p{
  243. font-style: italic;
  244. color: #777;
  245. line-height: 20px;
  246. font-size: 14px;
  247. padding-left: 20px;
  248. padding-right: 20px;
  249. padding-top:0px;
  250. text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  251. }
  253. .ac-container input:checked ~ article.ac-small{
  254. height: 250px;
  255. overflow: auto;
  256. }
  257. .ac-container input:checked ~ article.ac-medium{
  258. height: 300px;
  259. overflow: auto;
  260. }
  261. .ac-container input:checked ~ article.ac-large{
  262. height: 350px;
  263. overflow: auto;
  264. }
  266. /*---STYLES---*/
  268. /*--This is literately just the Logo Header copied and pasted so uh yeah.--*/
  269. h1{
  270. font-family:'Bebas Neue', "Times New Roman", Times, serif;
  271. font-size:50px;
  272. text-align:center;
  273. color: #79be8a;
  274. margin:0;
  275. padding:30px 0 0 0;
  276. text-shadow: -4px 3px 0 #a7dbbc;
  277. }
  279. /*--Little Info Header.--*/
  280. h2{
  281. color:#000;
  282. font-family:'Bebas Neue', "Times New Roman";
  283. font-size:18px;
  284. font-weight:normal;
  285. letter-spacing:3px;
  286. text-transform: uppercase;
  287. border-bottom: 1px solid #ccc;
  288. }
  290. /*--Little Info Sections.--*/
  291. h3{
  292. color:#000;
  293. font-family:'Bebas Neue', "Times New Roman";
  294. font-size:14px;
  295. font-weight:normal;
  296. letter-spacing:3px;
  297. text-transform: uppercase;
  298. margin-bottom: 0px;
  299. }
  301. /*--Info Sections--*/
  302. h4{
  303. color:#000;
  304. font-family:'Bebas Neue', "Times New Roman";
  305. font-size:18px;
  306. font-weight:normal;
  307. letter-spacing:3px;
  308. text-transform: Capitalize;
  309. margin-bottom: 0px;
  310. border-bottom: 1px solid #ccc;
  311. }
  313. /*--This is Links and stuff.--*/
  314. a:link, a:active, a:visited {
  315. color: #529ecc;
  316. text-decoration:none;
  317. }
  319. /*--This is Hovered Links.--*/
  320. a:hover {
  321. color: #97c5e0;
  322. text-decoration: none;
  323. }
  325. /*--This is the Dashed Horizontal Rule beneath the Little Info sections eyy.--*/
  326. hr {
  327. border: 0;
  328. border-bottom: 1px dashed #ccc;
  329. margin-left: 50px;
  330. margin-right: 50px;
  331. margin-top: 0.5px;
  332. margin-bottom: 0.5px;
  334. }
  336. /*---CREDITS---*/
  337. /*--Don't you dare remove this part i s2g.--*/
  338. #credit {
  339. position: fixed;
  340. bottom: 10px;
  341. left: 10px;
  342. font-family: 'Bebas Neue', "Times New Roman";
  343. font-size: 10px;
  344. text-transform: uppercase;
  345. text-align: right;
  346. font-weight: bold;
  347. letter-spacing: 2px;
  348. }
  350. #credit a {
  351. color: #bc4776;
  352. text-decoration: none;
  353. -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.--*/
  354. }
  356. #credit a:hover{
  357. -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.--*/
  358. font-size: 11px;
  359. letter-spacing: 4px;
  361. }
  363. </style>
  365. <body>
  366. <div id="container1">
  367. <div id="container2">
  368. <div align="center">
  369. <img src='http://placehold.it/200x240'>
  370. </div>
  371. <div id="smallinfo">
  372. <div align="center">
  373. <h2>;; Little Info ;;</h2>
  374. <h3>Name</h3><hr>Example
  375. <h3>Nickname</h3><hr></hr>Example
  376. <h3>Location</h3><hr>Example
  377. <h3>Likes</h3><hr>Example
  378. <h3>Dislikes</h3><hr>Example
  380. </div>
  381. </div>
  383. </div>
  385. <div id="container3">
  387. <div id="logo"><h1>;; About ;;<br>
  388. </div>
  390. <!--MENU-->
  392. <div class="circlemenu">
  393. <ul>
  394. <li><a href="/"><span>Home</span></a></li>
  395. <li><a href="/ask"><span>Ask</span></a></li>
  396. </ul>
  397. </div>
  399. <!--Start of Accordion-->
  401. <section class="ac-container">
  403. <!--Make sure that when adding new sections, change the input id from ac-1 to ac-#section. I.e, change from ac-1 to ac-2-->
  404. <!--Start of Section-->
  406. <div>
  407. <input id="ac-1" name="accordion-1" type="checkbox" />
  408. <label for="ac-1">Section One</label>
  409. <article class="ac-small">
  412. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
  413. </article>
  414. </div>
  416. <!--End of Section-->
  418. <!--Start of Section-->
  420. <div>
  421. <input id="ac-2" name="accordion-1" type="checkbox" />
  422. <label for="ac-2">Section Two</label>
  423. <article class="ac-small">
  426. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
  427. </article>
  428. </div>
  430. <!--End of Section-->
  432. <!--Start of Section-->
  434. <div>
  435. <input id="ac-3" name="accordion-1" type="checkbox" />
  436. <label for="ac-3">Section Three</label>
  437. <article class="ac-small">
  440. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
  441. </article>
  442. </div>
  444. <!--End of Section-->
  446. <!--Start of Section-->
  448. <div>
  449. <input id="ac-4" name="accordion-1" type="checkbox" />
  450. <label for="ac-4">Section Four</label>
  451. <article class="ac-small">
  454. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus nisl ac tincidunt dapibus. Nunc nec libero erat. Duis commodo egestas lacus, eu pulvinar tellus gravida et. Nam ut mauris mi. Donec finibus velit egestas nisi porta, ut elementum velit efficitur. Nullam ultricies egestas odio. Curabitur blandit tempus porttitor. Nam sed dui vel metus vulputate suscipit. Duis tellus erat, fringilla ac ex a, facilisis consequat diam. Integer sed tellus non justo consequat accumsan ac sit amet sapien. Phasellus massa eros, convallis vel leo sed, interdum commodo tellus.</p>
  455. </article>
  456. </div>
  458. <!--End of Section-->
  461. </div>
  462. </div>
  464. <!-- Also do not remove this CREDIT or I will cry actual tears.-->
  465. <div id="credit">
  466. <a href="http://naleacdesigns.tumblr.com">■ Naleac Designs</a>
  467. </div>
  470. <!---IMAGE--->
  471. <!---If you want the corner image to be put to the left, change the 'right' part to 'left'.-->
  473. <img src='http://placehold.it/300x300' style='position:fixed;bottom:30px;right:30px;' width="300px">
  474. </body>
comments powered by Disqus