API tools faq
paste
stella_rex

Coraline - About page 4

stella_rex
Mar 13th, 2020
1,295
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- about page iv/coraline BLOODYNOVAK / ARESANGLANT @ TUMBLR.COM '20
  6.  
  7. DON'T STEAL THE CODE OR PARTS OF THE CODE
  8. DON'T REMOVE OR MOVE THE CREDIT
  9.  
  10. send me a message if you have any questions & thanks for using my themes! -->
  11.  
  12. <title> About </title>
  13.  
  14. <link rel="shortcut icon" href="{favicon}">
  15.  
  16. <script type="text/javascript"
  17. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  18.  
  19. <!-- fonts -->
  20.  
  21. <link href="https://fonts.googleapis.com/css?family=Barlow:400,500,500i,700|Roboto&display=swap" rel="stylesheet">
  22. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap" rel="stylesheet">
  23.  
  24. <style type="text/css">
  25.  
  26.  
  27. ::-webkit-scrollbar {
  28. background-color:transparent;
  29. -moz-border-radius:11px;
  30. -webkit-border-radius:11px;
  31. border:none;
  32. height:0px;
  33. width:10px;}
  34.  
  35. ::-webkit-scrollbar-thumb:vertical {
  36. -moz-border-radius:11px;
  37. -webkit-border-radius:11px;
  38. background-color:#EEEEEE;
  39. height:0px;
  40. width:0px;}
  41.  
  42. ::-webkit-scrollbar-thumb:horizontal {
  43. -moz-border-radius:11px;
  44. -webkit-border-radius:11px;
  45. background-color:#EEEEEE;
  46. height:5px;
  47. width:5px; }
  48.  
  49.  
  50. body {
  51. background:#f3f3f3;
  52. color:#252525;
  53. font-family:'Barlow', sans-serif;
  54. font-size:13px;
  55. letter-spacing:0.3px;
  56. line-height:2;
  57. word-wrap:break-word;
  58. text-align:justify;}
  59.  
  60. a {
  61. color:#252525;
  62. border-bottom:1px solid #f6c094;
  63. text-decoration:none;
  64. margin-left:5px;
  65. -webkit-transition: all 0.3s ease-in-out;
  66. -moz-transition: all 0.3s ease-in-out;
  67. -ms-transition: all 0.3s ease-in-out;
  68. -o-transition: all 0.3s ease-in-out;
  69. transition: all 0.3s ease-in-out; }
  70.  
  71. a:hover {
  72. color:#f6c094;
  73. text-decoration:none; }
  74.  
  75. h1 {
  76. font-size:15px;
  77. margin-top:-0px;
  78. margin-left:-5px;
  79. font-weight:700;
  80. font-family:'Barlow', sans-serif;
  81. margin-bottom:0px;
  82. padding:5px;
  83. letter-spacing:0.5px;
  84. text-transform:uppercase; }
  85.  
  86. /* ---- */
  87.  
  88. .content1 {
  89. position:fixed;
  90. margin-top:60px;
  91. margin-left:33%;
  92. width:375px;
  93. text-align:justify;
  94. padding:10px;
  95. padding-right:15px;
  96. padding-left:25px;
  97. height:83%;
  98. overflow:scroll;
  99. background-color:#dae6e6;
  100. border-radius:10px;
  101. -webkit-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  102. -moz-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  103. box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36); }
  104.  
  105. .content2 {
  106. position:fixed;
  107. margin-top:60px;
  108. margin-left:65%;
  109. width:375px;
  110. text-align:justify;
  111. padding:10px;
  112. padding-right:15px;
  113. padding-left:25px;
  114. height:83%;
  115. overflow:scroll;
  116. background-color:#dae6e6;
  117. border-radius:10px;
  118. -webkit-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  119. -moz-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  120. box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36); }
  121.  
  122. .contenttext {
  123. margin-top:25px;
  124. margin-left:5px;
  125. padding:10px;
  126. font-size:14px;
  127. background-color:#fff;
  128. border-radius:10px;
  129. height:auto;
  130. width:92%;
  131. margin-bottom:25px;}
  132.  
  133.  
  134. #sidebar {
  135. width:24%;
  136. height:80%;
  137. margin-top:90px;
  138. margin-left:60px;
  139. background-color:#fff;
  140. position:fixed;
  141. border-radius:10px;
  142. overflow:scroll;
  143.  
  144. -webkit-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  145. -moz-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  146. box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  147. }
  148.  
  149. #sidetitle {
  150. font-family: 'Playfair Display', serif;
  151. font-weight:700;
  152. font-size:28px;
  153. letter-spacing:-0.5;
  154. padding:10px;
  155. text-transform:uppercase;
  156. margin-top:20px;
  157. margin-left:25px;
  158. text-align:left;
  159. }
  160.  
  161. #sidetitle a {
  162. border:none;
  163. overflow:hidden;}
  164.  
  165. #sidetitle a:hover{
  166. color:#f6c094;
  167. text-decoration:none; }
  168.  
  169. .add {
  170. margin-top:-10px;
  171. width:250px;
  172. padding:10px;
  173. margin-left:40px;
  174. font-size:12px;
  175. letter-spacing:1.2px;
  176. font-style:italic;
  177. text-align:left;}
  178.  
  179. .moredesc {
  180. margin-top:30px;
  181. text-align:justify;
  182. font-size:13px;
  183. width:75%;
  184. margin-left:40px;
  185. letter-spacing:0.5px;
  186. padding-bottom:25px; }
  187.  
  188. .links {
  189. font-size:15px;
  190. font-family:'Barlow', sans-serif;
  191. padding:5px;
  192. text-align:left;
  193. margin-top:10px;
  194. margin-left:20px;
  195. margin-right:20px;
  196. width:auto;
  197. padding-left:10px;
  198. border-left:2px solid #eee;
  199. border-right:2px solid #eee; }
  200.  
  201. .links a {
  202. font-weight:400;
  203. border:none;
  204. padding-bottom:10px;
  205. margin-left:5px;
  206. margin-right:10px; }
  207.  
  208. .links a:hover {
  209. text-decoration:none;
  210. color:#f6c094;}
  211.  
  212. .att {
  213. bottom:10px;
  214. right:20px;
  215. font-size:18px;
  216. font-style:bold;
  217. color:#b5ccbd;
  218. position:fixed;}
  219.  
  220. .att a {
  221. border:none;
  222. color:#b5ccbd;
  223. text-decoration:none; }
  224.  
  225. .att a:hover {
  226. color:#f3ded0; }
  227.  
  228. #sidebarim {
  229. border:none;
  230. width:75px;
  231. height:75px;
  232. padding:10px;
  233. margin-top:25px;
  234. margin-left:25px; }
  235.  
  236. #sidebarim img {
  237. padding:5px;
  238. border:1px solid #fff;
  239. width:75px;
  240. height:75px;
  241. border-radius:10px;
  242. -webkit-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  243. -moz-box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36);
  244. box-shadow: 1px 1px 15px 0px rgba(50, 50, 50, 0.36); }
  245.  
  246.  
  247. @media only screen and (height: 600px) and (width: 1024px) {
  248.  
  249. .content1 {
  250. margin-left:37%!important;
  251. width:190px!important;
  252. height:85%; }
  253.  
  254. .content2 {
  255. margin-top:40px;
  256. width:190px!important;
  257. height:85%;}
  258. }
  259.  
  260. @media only screen and (max-width: 1024px) {
  261.  
  262. .links {
  263. margin-top:10px;
  264. width:200px;
  265. font-size:13px;}
  266. .add {
  267. width:150px;
  268. margin-left:30px;
  269. font-size:11px;}
  270.  
  271.  
  272. .content1 {
  273. margin-top:40px;
  274. margin-left:33%;
  275. width:250px;
  276. height:85%; }
  277.  
  278. .content2 {
  279. margin-top:40px;
  280. width:250px;
  281. height:85%; }
  282.  
  283. .contenttext {
  284. width:88%; }
  285.  
  286. #sidebar {
  287. margin-top:80px;
  288. margin-left:25px;
  289. width:26%;
  290. height:80%; }
  291. }
  292.  
  293. @media only screen and (max-width: 1366px) and (max-height: 768px) {
  294. #sidebar {
  295. width:24%;
  296. height:72%;
  297. margin-top:110px;
  298. margin-left:60px; }
  299.  
  300. .moredesc {
  301. font-size:12px; }
  302.  
  303. .content1 {
  304. margin-top:90px;
  305. margin-left:33%;
  306. width:375px;
  307. height:76%;}
  308. .content2 {
  309. margin-top:90px;
  310. width:375px;
  311. height:76%; }
  312.  
  313. }
  314.  
  315. @media only screen and (max-width: 1440px) and (min-height:900px){
  316. #sidebar {
  317. width:24%;
  318. height:70%;
  319. margin-top:140px;
  320. margin-left:60px; }
  321. }
  322.  
  323. @media only screen and (max-width: 1680px) and (min-width:1600px) and (min-height:900px){
  324.  
  325. #sidebar {
  326. width:24%;
  327. height:65%;
  328. margin-top:170px;
  329. margin-left:60px; }
  330. }
  331.  
  332. @media only screen and (min-width: 1920px) and (min-height:1080px){
  333.  
  334. #sidebar {
  335. width:24%;
  336. height:60%;
  337. margin-top:200px;
  338. margin-left:60px; }
  339.  
  340. .content1 {
  341. margin-top:100px;
  342. margin-left:33%;
  343. width:450px;
  344. height:75%; }
  345.  
  346. .content2 {
  347. margin-top:100px;
  348. width:450px;
  349. height:75%;}
  350. }
  351.  
  352. </style>
  353. </head>
  354. <body>
  355.  
  356. <div id="sidebar">
  357. <div id="sidebarim">
  358.  
  359. <!-- place the url for your picture between the quotation marks after it says 'img src=' --> <img src="">
  360.  
  361. </div>
  362.  
  363. <div id="sidetitle">
  364. <a href="/">
  365.  
  366. <!-- place your sidebar title below -->
  367.  
  368. Title
  369.  
  370. <!-- end of title -->
  371.  
  372. </a></div>
  373. <div class="add">
  374.  
  375. <!-- you can add a little quote below the main title if you want; looks best when shorter -->
  376.  
  377. "A quote"
  378.  
  379. <!-- end of quote -->
  380. </div>
  381.  
  382. <div class="links">
  383.  
  384. <!-- place your links below -->
  385.  
  386. &plus; <a href=""> link one </a>
  387. &plus; <a href=""> link two </a>
  388. &plus; <a href=""> link three </a>
  389. &plus; <a href=""> link four </a>
  390. &plus; <a href=""> link five </a>
  391. &plus; <a href=""> link six </a>
  392.  
  393. </div>
  394.  
  395. <!-- end of links -->
  396.  
  397. <div class="moredesc">
  398.  
  399. <!-- write a short description below -->
  400.  
  401. A short description here...
  402.  
  403. <!-- end of description -->
  404.  
  405. </div></div></div>
  406.  
  407. <div class="content1"> <!-- this is the first container for text boxes -->
  408.  
  409.  
  410. <div class="contenttext"> <!-- the "contenttext" div is the smaller white boxes inside the blue ones that can be repeated as much as you'd like -->
  411.  
  412. <h1> About: </h1> <!-- this is a title for your text box -->
  413.  
  414. This is some text placed within the text box.
  415.  
  416.  
  417. </div> <!-- end of first box -->
  418.  
  419.  
  420.  
  421. <div class="contenttext"> <!-- a second text box -->
  422.  
  423. <a href="">a link</a> | <i>italic</i> | <b>bold</b> | <u>underlined</u>
  424.  
  425.  
  426. </div> <!-- end of second text box -->
  427.  
  428.  
  429. <div class="contenttext"> <!-- a third text box -->
  430.  
  431. Some interesting text.
  432.  
  433. </div> <!-- end of third text box -->
  434.  
  435.  
  436.  
  437. </div> <!-- this is the end of the first blue container div, don't touch -->
  438.  
  439.  
  440. <div class="content2"> <!-- this is the second container for text boxes -->
  441.  
  442.  
  443. <div class="contenttext"> <!-- a text box -->
  444.  
  445. <h1> Another title: </h1>
  446.  
  447. Text placed within the text box.
  448.  
  449. </div> <!-- end of text box -->
  450.  
  451.  
  452. <div class="contenttext"> <!-- a text box -->
  453.  
  454. Text placed within the text box.
  455.  
  456. </div> <!-- end of text box -->
  457.  
  458.  
  459. <div class="contenttext"> <!-- a text box -->
  460.  
  461. Text placed within the text box.
  462.  
  463. </div> <!-- end of text box -->
  464.  
  465. <div class="contenttext"> <!-- a text box -->
  466.  
  467. <h1> Another title: </h1>
  468.  
  469. Text placed within the text box.
  470.  
  471. </div> <!-- end of text box -->
  472.  
  473.  
  474.  
  475. </div> <!-- end of second blue container box, don't touch -->
  476.  
  477.  
  478. <div class="att">
  479. <a href="https://aresanglant.tumblr.com/" target="_blank">@</a></div>
  480.  
  481.  
  482.  
  483. </body>
  484. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!