Advertisement
kaitofrph

Helpless (kaitrps page theme 1)

Dec 15th, 2016
597
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.70 KB | None | 0 0
  1.  
  2.  
  3. <!---- 'helpless' page theme #1 by kaitrps (:
  4. ~don't remove the credit
  5. ~don't edit & rerelease
  6. ~don't be a dick in general
  7. ~srsly. pls. it makes kittens cry & we don't want that. ok thanks (: --->
  8.  
  9.  
  10. <head>
  11.  
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}" />
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  16. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  17.  
  18. <style type="text/css">
  19.  
  20.  
  21. ::-webkit-scrollbar-thumb {
  22. height:auto;
  23. background-color:#ac4343;
  24.  
  25. }
  26.  
  27. ::-webkit-scrollbar {
  28. height:5px;
  29. width:3px;
  30. background-color:{color:scrollbar bg};
  31.  
  32. }
  33.  
  34. /*BODY*/
  35.  
  36. body {
  37. background-color:#aba094;
  38. font-family:arial;
  39. font-size:9px;
  40. }
  41.  
  42. /*LINKS*/
  43.  
  44. #links {
  45. width:700px;
  46. margin-left:325px;
  47. position: fixed;
  48. margin-top:65px;
  49. padding:5px;
  50. background-color:#aa9386;
  51. font-family:arial;
  52. text-transform:lowercase;
  53. text-align:center;
  54. }
  55.  
  56. #links a {
  57. padding:9px;
  58. font-size:18px;
  59. color:#d8d1c4;
  60. -webkit-transition: all 0.4s ease-in-out;
  61. -moz-transition: all 0.4s ease-in-out;
  62. -o-transition: all 0.4s ease-in-out;
  63. -ms-transition: all 0.4s ease-in-out;
  64. transition: all 0.4s ease-in-out;
  65. }
  66.  
  67. #links a:hover {
  68. color:#806855;
  69. }
  70.  
  71. /*SPECIAL FONT & SHIT*/
  72. h1 {
  73. font-size:11px;
  74. background-color:#000;
  75. text-align:center;
  76. color:#fff;}
  77.  
  78. b {
  79. font-size:9px;
  80. color:#ccc;}
  81.  
  82. pre {
  83. font-size:10px;
  84. font-style:italic;
  85. font-weight:bold;
  86. text-align:center;
  87. }
  88.  
  89.  
  90. /*CONTAINER*/
  91. #container{
  92. height:620px;
  93. width:810px;
  94. position: fixed;
  95. background-color:#a5968a;
  96. overflow-y: auto;
  97. overflow-x: hidden;
  98. margin-top:5px;
  99. margin-left:275px;
  100. }
  101.  
  102. #container2{
  103. height:520px;
  104. width:730px;
  105. position: fixed;
  106. background-color:#b29f93;
  107. overflow-y: auto;
  108. overflow-x: hidden;
  109. margin-top:55px;
  110. margin-left:315px;
  111. }
  112.  
  113.  
  114. /*IMAGES*/
  115. #headerimg {
  116. width:400px;
  117. height:150px;
  118. border-radius: 15px 2px 15px 2px;
  119. overflow-x: hidden;
  120. position: fixed;
  121. border: 1px, solid, color:#eee;
  122. margin-top:105px;
  123. margin-left:325px;
  124.  
  125. }
  126.  
  127. #connectimg1 {
  128. height:85px;
  129. width:85px;
  130. border-radius: 15px 2px 15px 2px;
  131. overflow-x: hidden;
  132. position: fixed;
  133. border: 1px, solid, color:#eee;
  134. margin-top:275px;
  135. margin-left:647px;
  136. }
  137.  
  138. #connectimg2 {
  139. height:85px;
  140. width:85px;
  141. border-radius: 15px 2px 15px 2px;
  142. overflow-x: hidden;
  143. position: fixed;
  144. border: 1px, solid, color:#eee;
  145. margin-top:370px;
  146. margin-left:940px;
  147. }
  148.  
  149. #connectimg3 {
  150. height:85px;
  151. width:85px;
  152. border-radius: 15px 2px 15px 2px;
  153. overflow-x: hidden;
  154. position: fixed;
  155. border: 1px, solid, color:#eee;
  156. margin-top:465px;
  157. margin-left:647px;
  158. }
  159.  
  160. /*QUOTE*/
  161. #quote {
  162. height:150px;
  163. width:300px;
  164. position: fixed;
  165. margin-left:735px;
  166. margin-top:105px;
  167. background-color:#a49181;
  168. }
  169.  
  170. .quotes {
  171. font-size:16px;
  172. width:200px;
  173. font-family:sans-serif;
  174. margin-left:50px;
  175. margin-top:30px;
  176. font-weight:bold;
  177. color:#fff;
  178. font-style:italic;
  179. text-align:center;
  180. }
  181.  
  182. /*ABOUT*/
  183. #about {
  184. height:300px;
  185. width:300px;
  186. position:fixed;
  187. margin-left:325px;
  188. margin-top:265px;
  189. background-color:#eee;
  190. }
  191. .info{
  192. font-size:13px;
  193. padding:5px;
  194. padding-left:14px;
  195. text-align:left;
  196. text-transform:lowercase;
  197. font-weight:bold;
  198. background-color:#ac978a;
  199. color:#eee;
  200. }
  201. .info2{
  202. font-size:13px;
  203. padding:5px;
  204. padding-right:14px;
  205. text-align:right;
  206. text-transform:lowercase;
  207. font-weight:bold;
  208. background-color:#ac978a;
  209. color:#eee;
  210. }
  211.  
  212. .fact{
  213. font-size:13px;
  214. padding:5px;
  215. text-transform:lowercase;
  216. font-style:italic;
  217. padding-left:12px;
  218. text-align:left;
  219. background-color:#bea49d;
  220. color:#eee;
  221. }
  222.  
  223. .fact2{
  224. font-size:13px;
  225. padding:5px;
  226. text-transform:lowercase;
  227. font-style:italic;
  228. padding-right:12px;
  229. text-align:right;
  230. background-color:#bea49d;
  231. color:#eee;
  232. }
  233. /*CONNECT*/
  234. #connect {
  235. height:300px;
  236. width:400px;
  237. position:fixed;
  238. margin-left:635px;
  239. margin-top:265px;
  240. background-color:#a49181;
  241. }
  242.  
  243. .name {
  244. font-size:11px;
  245. padding:4px;
  246. text-align:center;
  247. text-transform:lowercase;
  248. font-weight:bold;
  249. background-color:#ac978a;
  250. color:#eee;
  251. }
  252.  
  253. .relate {
  254. font-size:11px;
  255. padding:3px;
  256. text-transform:lowercase;
  257. text-align:center;
  258. background-color:#bea49d;
  259. color:#eee;
  260. overflow-x:hidden;
  261. overflow-y:scroll;
  262. }
  263.  
  264. #connect1{
  265. height:85px;
  266. width:280px;
  267. position:fixed;
  268. margin-left:745px;
  269. margin-top:275px;
  270. background-color:#000;
  271. }
  272.  
  273. #connect2{
  274. height:85px;
  275. width:280px;
  276. position:fixed;
  277. margin-left:645px;
  278. margin-top:370px;
  279. background-color:#000;
  280. }
  281.  
  282. #connect3{
  283. height:85px;
  284. width:280px;
  285. position:fixed;
  286. margin-left:745px;
  287. margin-top:465px;
  288. background-color:#000;
  289. }
  290.  
  291. #c{
  292. font-size:20px;
  293. position:fixed;
  294. bottom:12px;
  295. right:30px;
  296. z-index:10;
  297. text-align:right;
  298. letter-spacing:1px;
  299. padding:2px;
  300. transition-duration: 0.8s;
  301.  
  302.  
  303. }
  304.  
  305. {CustomCSS}
  306.  
  307. </style></head>
  308.  
  309.  
  310. <body>
  311.  
  312.  
  313. <div id="container"></div>
  314. <div id="container2"></div>
  315. <div id="links">
  316. <a href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
  317. <a href="/"><i class="fa fa-commenting" aria-hidden="true"></i></i></a>
  318. <a href="/"><i class="fa fa-users" aria-hidden="true"></i></a>
  319. <a href="/"><i class="fa fa-paper-plane-o" aria-hidden="true"></i>
  320. </a>
  321.  
  322. </div>
  323.  
  324. <div id="headerimg"><img src="http://static.tumblr.com/n9pelqd/3SFoi7pg0/ron.png"></div>
  325. <div id="quote">
  326. <div class="quotes">"look into your eyes and the sky’s the limit. i’m helpless! down for the count and I’m drownin’ in ‘em."</div></div>
  327. <div id="about">
  328. <div class="info">full name</div>
  329. <div class="fact">veronica edith royal</div>
  330. <div class="info2">age & date of birth</div>
  331. <div class="fact2">twenty-five & 08-10-91</div>
  332. <div class="info">gender</div>
  333. <div class="fact">cisfemale</div>
  334. <div class="info2">occupation</div>
  335. <div class="fact2">restaurant owner & mother</div>
  336. <div class="info">zodiac sign</div>
  337. <div class="fact">leo</div>
  338. <div class="info2">face claim</div>
  339. <div class="fact2">zoey deutch</div>
  340. </div>
  341. <div id="connect"></div>
  342. <div id="connect1">
  343. <div class="name">checkers royal. (the husband)</div>
  344. <div class="relate">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
  345. </div>
  346. <div id="connect2">
  347. <div class="name">bentley montgomery. (the ex)</div>
  348. <div class="relate">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
  349. </div>
  350. <div id="connect3">
  351. <div class="name">greta duval. (the confidant)</div>
  352. <div class="relate">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div>
  353. </div>
  354. <div id="connectimg1"><img src="http://static.tumblr.com/n9pelqd/GxOoi7rat/dos.png"></div>
  355. <div id="connectimg2"><img src="http://static.tumblr.com/n9pelqd/mynoi7rb3/un.png"></div>
  356. <div id="connectimg3"><img src="http://static.tumblr.com/n9pelqd/EoBoi7raz/tres.png"></div>
  357. </div>
  358. </div></div></div>
  359.  
  360. <div id="c"><a href="http://kaitrps.tumblr.com/"><i class="fa fa-diamond" style="color:#806855;"></i></a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement