API tools faq
paste
Advertisement
word-bazaar

ABOUT PAGE N° 1

word-bazaar
Mar 29th, 2018
3,225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.95 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2. <!------------------------------------------------------------------------
  3.  
  4. ♡ made by http://cassiopeis.tumblr.com/ ♡
  5.  
  6. - YOU MAY EDIT OR CHANGE AS MUCH AS YOU LIKE BUT
  7. !!!!! DO NOT REMOVE CREDIT !!!!!
  8.  
  9. - IF YOU HAVE A QUESTION OR SOMETHING GOES WRONG, YOU CAN MESSAGE ME AT:
  10. http://scottpilgvrim.tumblr.com/ask
  11.  
  12.  
  13. -------------------------------------------------------------------------->
  14.  
  15. <html>
  16. <head>
  17.  
  18.  
  19. <title>About</title>
  20.  
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  26.  
  27.  
  28. <style type="text/css">
  29.  
  30.  
  31. ::-webkit-scrollbar {width: 10px;}
  32. ::-webkit-scrollbar-track {background: white;}
  33. ::-webkit-scrollbar-thumb {background: #white;}
  34.  
  35. ::selection {background: #c1b4b4; color:#FFF;}
  36. ::-moz-selection {background: #c1b4b4; color:#FFF;}
  37. ::-webkit-selection {background: #c1b4b4; color:#FFF;}
  38.  
  39.  
  40. body {
  41. background: url('') no-repeat center center fixed;
  42. background-color: #f8f8f8; /* you can change the background color here! */
  43. -webkit-background-size: cover;
  44. -moz-background-size: cover;
  45. -o-background-size: cover;
  46. background-size: cover;
  47. }
  48.  
  49.  
  50. a:link, a:active, a:visited {
  51. color: #999; /* you can change the links color here! */
  52. text-decoration: none;
  53. -webkit-transition-duration: 0.5s;
  54. -moz-transition-duration: 0.5s;
  55. -o-transition-duration: 0.5s;
  56. -ms-transition-duration: 0.5s;
  57. }
  58.  
  59.  
  60. a:hover {
  61. color: #bbb; /* you can change the links color on hover here! */
  62. text-decoration: none;
  63. -webkit-transition-duration: 0.5s;
  64. -moz-transition-duration: 0.5s;
  65. -o-transition-duration: 0.5s;
  66. -ms-transition-duration: 0.5s;
  67. }
  68.  
  69.  
  70. p {
  71. margin: 0px 0px 8px;
  72. }
  73.  
  74.  
  75. h1{
  76. margin:0px 0px 10px;
  77. font-family: 12px;
  78. font-style: italic;
  79. font-weight: bold;
  80. font-size: 20px;
  81. text-transform: lowercase;
  82. font-family: "times new roman";
  83. letter-spacing: -1px;
  84. color: #d0c2c2;
  85. float: center;
  86. }
  87.  
  88.  
  89. #container {
  90. width: 1080px;
  91. height: 500px;
  92. position: fixed;
  93. top: 65%;
  94. margin-top: -330px;
  95. left: 40%;
  96. margin-left: -555px;
  97. text-align: center;
  98. }
  99.  
  100.  
  101. #barreinfo1 {
  102. position: absolute;
  103. background-color: none;
  104. height: 85px;
  105. top: 0px;
  106. left: 500px;
  107. width: 415px;
  108. }
  109.  
  110.  
  111. .photoprofil {
  112. position: absolute;
  113. height: 80px;
  114. width: 80px;
  115. left: 10px;
  116. top: 2px;
  117. }
  118.  
  119.  
  120. .photoprofil img {
  121. border-radius: 3px;
  122. height: 80px;
  123. width: 80px;
  124. }
  125.  
  126.  
  127. .titre {
  128. position: absolute;
  129. font-style: italic;
  130. font-weight: bold;
  131. font-size: 30px;
  132. text-transform: lowercase;
  133. font-family: "times new roman";
  134. letter-spacing: -2px;
  135. color: #d0c2c2;
  136. top: 10px;
  137. left: 110px;
  138. }
  139.  
  140.  
  141. .petiteligne {
  142. position: absolute;
  143. width: 150px;
  144. height: 20px;
  145. left: 110px;
  146. top: 50px;
  147. text-align: justify;
  148. border-top: 1px solid #dcd0d0;
  149.  
  150. }
  151.  
  152.  
  153. .littlenav {
  154. position: absolute;
  155. width: 165px;
  156. height: 140px;
  157. left: 110px;
  158. top: 65px;
  159. font-size: 11px;
  160. color: #d0c2c2 ;
  161. text-align: left;
  162. line-height: 130%;
  163. word-spacing: 8px;
  164. }
  165.  
  166.  
  167. #barreinfo2 {
  168. position: absolute;
  169. background-color: white;
  170. height: 180px;
  171. top: 100px;
  172. left: 500px;
  173. width: 415px;
  174. border: 1px solid #ededed;
  175. box-shadow: 2px 2px 2px #e4e4e4;
  176. }
  177.  
  178.  
  179. .information2 {
  180. position: absolute;
  181. top: 15px;
  182. height: 155px;
  183. left: 15px;
  184. width: 385px;
  185. overflow: auto;
  186. font-family: Helvetica;
  187. font-size: 10px;
  188. text-align: justify;
  189. font-style: italic;
  190. color: #cfcfcf;
  191. line-height: 14px;
  192. }
  193.  
  194.  
  195. #barreinfo3 {
  196. position: absolute;
  197. background-color: white;
  198. height: 130px;
  199. top: 300px;
  200. left: 500px;
  201. width: 415px;
  202. border: 1px solid #ededed;
  203. box-shadow: 2px 2px 2px #e4e4e4;
  204. }
  205.  
  206.  
  207. .liens1 {
  208. position: absolute;
  209. left: 10px;
  210. top: 10px;
  211. width: 190px;
  212. height: 115px;
  213. text-align: center;
  214. font-family: Helvetica;
  215. font-size: 11px;
  216. font-style: italic;
  217. color: #cfcfcf;
  218. overflow: auto;
  219. }
  220.  
  221.  
  222. .autrepetiteligne {
  223. position: absolute;
  224. width: 1px;
  225. height: 90px;
  226. left: 210px;
  227. top: 20px;
  228. text-align: justify;
  229. border-left: 1px solid #dcd0d0;
  230.  
  231. }
  232.  
  233.  
  234. .liens2 {
  235. position: absolute;
  236. left: 215px;
  237. top: 10px;
  238. width: 190px;
  239. height: 115px;
  240. text-align: center;
  241. font-family: Helvetica;
  242. font-size: 11px;
  243. font-style: italic;
  244. color: #cfcfcf;
  245. overflow: auto;
  246. }
  247.  
  248.  
  249. #musicbox {
  250. position: absolute;
  251. left: 500px;
  252. top: 455px;
  253. }
  254.  
  255.  
  256. #credit a {
  257. position: absolute;
  258. text-align: center;
  259. padding:2px;
  260. right:20px;
  261. font-size: 13px;
  262. bottom:20px;
  263. color: #d9d2d2;
  264. font-family: Helvetica;
  265. -moz-transition-duration:0.5s;
  266. -webkit-transition-duration:0.5s;
  267. -o-transition-duration:0.5s;
  268. }
  269.  
  270.  
  271.  
  272. #credit a:hover{
  273. position: absolute;
  274. text-align: center;
  275. right:20px;
  276. bottom:20px;
  277. font-style: italic;
  278. color: #cec3c3;
  279. -moz-transition-duration:0.5s;
  280. -webkit-transition-duration:0.5s;
  281. -o-transition-duration:0.5s;
  282. }
  283.  
  284.  
  285.  
  286. </style>
  287. </head>
  288.  
  289. <body>
  290.  
  291.  
  292.  
  293. <div id="container">
  294.  
  295.  
  296. <div id="barreinfo1">
  297.  
  298.  
  299. <div class="photoprofil">
  300.  
  301.  
  302. <img src="https://i.imgur.com/Ki6MboU.png"></img> <!--- change image here --->
  303.  
  304.  
  305.  
  306. </div>
  307.  
  308.  
  309.  
  310.  
  311. <div class="titre">About me</div> <!--- change title here --->
  312. <div class="petiteligne"></div>
  313. <div class="littlenav">
  314.  
  315.  
  316. <!--- This part is to edit the tiny navigation next to the picture. To add a link, paste it where the "/" behind the href is. To change the title of the link when you hover on it, simply change what's between "" behind title= --->
  317. <a href="/"><i class="fa fa-home" aria-hidden="true" title="home">&nbsp;</i></a>
  318. <a href="/"><i class="fa fa-envelope-o" aria-hidden="true" title="message">&nbsp;</i></a>
  319. <a href="/"><i class="fa fa-bars" aria-hidden="true" title="link">&nbsp;</i></a>
  320. <a href="/"><i class="fa fa-folder-open" aria-hidden="true" title="link">&nbsp;</i></a>
  321. <!--- end of tiny navigation --->
  322.  
  323.  
  324. </div>
  325. </div>
  326.  
  327.  
  328. <div id="barreinfo2">
  329. <div class="information2">
  330. <!--- Description goes here ! Make it as long as you wish. --->
  331.  
  332. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus. Nulla tempor blandit purus, ut condimentum dolor suscipit eu. Suspendisse potenti. Ut nec volutpat arcu. Proin condimentum arcu ut lacus rutrum aliquam. Praesent aliquam ipsum elit, vitae tristique ipsum rhoncus tincidunt. Integer dignissim cursus porttitor. Nunc cursus ante turpis, at cursus sem lobortis vitae. Nulla ultrices massa quis quam semper venenatis. Donec viverra facilisis justo, ut tempor quam imperdiet sit amet. Curabitur interdum auctor turpis imperdiet pretium. Sed augue magna, viverra in tempor eu, consequat sit amet tortor. Aliquam erat volutpat. Pellentesque mattis egestas sodales. Ut tristique erat sit amet nunc bibendum, vel congue lectus molestie. Nulla facilisi. Aliquam a gravida sapien, id faucibus libero. Cras diam odio, mattis vitae mollis in, elementum sed lorem.</p>
  333.  
  334.  
  335. </div>
  336. </div>
  337. <div id="barreinfo3">
  338. <div class="liens1">
  339.  
  340. <!--- First part of the links section --->
  341. <h1>Links</h1>
  342. <p><a href="/">Link</a></p>
  343. <p><a href="/">Link</a></p>
  344. <p><a href="/">Link</a></p>
  345. <p><a href="/">Link</a></p>
  346.  
  347. </div>
  348.  
  349.  
  350. <div class="autrepetiteligne"></div>
  351. <div class="liens2">
  352.  
  353.  
  354. <!--- Second part of the links section --->
  355. <h1>Social</h1>
  356. <p><a href="/">Link</a></p>
  357. <p><a href="/">Link</a></p>
  358. <p><a href="/">Link</a></p>
  359. <p><a href="/">Link</a></p>
  360.  
  361. </div>
  362. </div>
  363.  
  364.  
  365. <div id="musicbox">
  366.  
  367. <!--- Here is the music box, you can paste a code from https://www.sheepproductions.com/billy/ here to make a song play on your page. If you don't want music, then just leave it as it is--->
  368.  
  369. </div>
  370. </div>
  371.  
  372.  
  373.  
  374.  
  375.  
  376.  
  377. <!--- The is the credit. Don't. Touch. This. Part. If you delete or edit it so that it isn't visible anymore, I swear I will find you and destroy you. Enjoy the theme otherwise ♡ --->
  378. <div id="credit">
  379. <p><a href="http://cassiopeis.tumblr.com">S.</a></p>
  380. </a></div>
  381.  
  382.  
  383. </body>
  384. </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!