API tools faq
paste
crimsonxthemes

About Page 01. - Mademoiselle

crimsonxthemes
Feb 10th, 2017
569
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.89 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. About Page 01. by CrimsonxThemes
  3. Mademoiselle
  4. ˌmad(ə)m(w)əˈzel
  5.  
  6. Please don't steal this, I worked really hard on it
  7. And theives are ugly butts ^u^
  8. (●´ω｀●)
  9. -->
  10.  
  11. <html>
  12. <head>
  13.  
  14. <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Open+Sans:300|Work+Sans:300" rel="stylesheet">
  15.  
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  19. <meta name="description" content="" />
  20. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  21.  
  22. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  23.  
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  25. <script>
  26. $(document).ready(function(){
  27. $('.search').submit(function(event){
  28. var value = $('input:first').val();
  29. location.replace('http://{Name}.tumblr.com/tagged/' + value);
  30. });
  31. });
  32. </script>
  33.  
  34. <style type="text/css">
  35.  
  36. body {
  37. background-color:#f8f8f8; /**CHANGE BACKGROUND COLOR**/
  38. color: #bbb; /**CHANGE TEXT COLOR**/
  39. font-family: work sans;}
  40.  
  41. a {
  42. color:#bbb; /**CHANGE LINK COLOR**/
  43. border-bottom:1px solid #eee; /**CHANGE LINK BORDER COLOR**/
  44. text-decoration:none;
  45. margin:0 3px 0 3px;
  46. padding:0 3px 1px 3px;
  47. font-family:open sans;
  48. text-transform:uppercase;
  49. font-size:7px;}
  50.  
  51. blockquote {
  52. border-left:1px solid #eee;/**CHANGE BLOCKQUOTE COLOR**/
  53. padding-left: 10px; margin: 5px 10px 5px;
  54. }
  55.  
  56.  
  57. ::-webkit-scrollbar {width: 11px;height: 11px;background: #f8f8f8; /**CHANGE SCROLLBAR BACKGROUND COLOR**/}
  58. ::-webkit-scrollbar-thumb {background: #eee; /**CHANGE SCROLLBAR COLOR**/}
  59. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {border: 5px solid #fff;/**CHANGE SCROLLBAR BORDER COLOR**/}
  60.  
  61. .box {
  62. position:fixed;
  63. width:556px;
  64. height:auto;
  65. left:50%;
  66. margin-left: -278px;
  67. top: calc(50% - 278px);}
  68.  
  69. .bar, .sidebar {
  70. background-color:#fff; /**CHANGE TOPBAR BACKGROUND COLOR**/
  71. position:absolute;
  72. width:556px;
  73. height:50px;}
  74. .bar {
  75. border-bottom:1px solid #eee; /**CHANGE TOPBAR BORDER COLOR**/
  76. width:556px;height:50px;}
  77. .sidebar {
  78. border-right:1px solid #eee; /**CHANGE SIDEBAR BORDER COLOR**/
  79. width:75px;height:407px;margin-top:50px;}
  80.  
  81. .title {
  82. color: #bbb; /**CHANGE TITLE COLOR**/
  83. position:absolute;
  84. font-family:open sans;
  85. font-size:12px;
  86. font-weight: 300;
  87. text-transform:lowercase;
  88. padding:10px;
  89. margin-top:7px;
  90. margin-left:10px;}
  91.  
  92. .photo, .photo2 {
  93. border-left:1px solid #eee; /**CHANGE PHOTO BORDER COLOR**/
  94. border-right:1px solid #eee; /**CHANGE PHOTO BORDER COLOR**/
  95. position:absolute;
  96. margin-top:60px;
  97. width:140px;
  98. height:140px;}
  99. .photo {margin-left:85px;border-bottom-left-radius:50%;border-top-right-radius:50%;}
  100. .photo2 {margin-left:415px;border-bottom-right-radius:50%;border-top-left-radius:50%;}
  101. .photo img {border-bottom-left-radius:50%;border-top-right-radius:50%;}
  102. .photo2 img {border-bottom-right-radius:50%;border-top-left-radius:50%;}
  103. .photo img, .photo2 img{
  104. background-color:#fff; /**CHANGE PHOTO BACKGROUND COLOR**/
  105. width:100px;
  106. height:100px;
  107. padding:20px;}
  108.  
  109. .homelinks {
  110. position:absolute;
  111. margin-left:196px;
  112. width:330px;
  113. text-align:right;
  114. font-size:9px;
  115. padding:10px;
  116. margin-top:12px;}
  117.  
  118. .quote {
  119. color:#bbb; /**CHANGE QUOTE COLOR**/
  120. font-family:open sans;
  121. font-weight:300;
  122. font-size:9px;
  123. padding: 10px 0 10px 0;
  124. width:407px;
  125. margin-top:186px;
  126. margin-left:-165px;
  127. text-align:center;
  128. text-transform:uppercase;
  129. -ms-transform: rotate(-90deg);
  130. -webkit-transform: rotate(-90deg);
  131. transform: rotate(-90deg);}
  132.  
  133. .titles, .info {
  134. background-color:#fff; /**CHANGE INFO BOXES BACKGROUND COLOR**/
  135. border-bottom:1px solid #eee; /**CHANGE BOTTOM BORDER COLOR**/
  136. position:absolute;
  137. top:60px;
  138. padding:15px;
  139. height:110px;
  140. font-family:Lato;
  141. font-size:10px;
  142. font-weight:300;
  143. text-align:center;
  144. line-height:8px;
  145. z-index:-2;}
  146. .titles {
  147. border-right:1px solid #eee; /**CHANGE LEFT BOX RIGHT BORDER COLOR**/
  148. width:50px;
  149. left:235px;
  150. text-transform:uppercase;}
  151. .info {
  152. border-left:1px solid #eee; /**CHANGE RIGHT BOX LEFT BORDER COLOR**/
  153. width:50px;
  154. left:325px;
  155. text-transform:lowercase;
  156. font-weight:300;}
  157. .titles span:before, .info span:before {
  158. background:#eee; /**CHANGE INFO LINES COLOR**/
  159. content:'';
  160. height:1px;
  161. position:absolute;
  162. width:15px; /**full lines - 100%; short lines - 15px;**/
  163. margin-top:4px;
  164. z-index:-1;}
  165. .titles span:before {right:0;}
  166. .info span:before {left:0;}
  167. .titles span, .info span {
  168. background-color:#fff; /**CHANGE INFO BACKGROUND PADDING COLOR (for 100% span lines)**/
  169. z-index:111;
  170. padding:7px;
  171. display:inline-block;}
  172.  
  173. .about, .links {
  174. background-color:#fff; /**CHANGE BACKGROUND COLOR**/
  175. border-left:1px solid #eee; /**CHANGE BORDER COLOR**/
  176. border-right:1px solid #eee; /**CHANGE BORDER COLOR**/
  177. width:450px;
  178. height:146px;
  179. padding:10px;
  180. font-size:9px;
  181. margin-top:210px;
  182. margin-left:85px;
  183. text-align: justify;
  184. overflow:auto;}
  185. .about {border-bottom:1px solid #eee; /**CHANGE BOTTOM BORDER COLOR**/}
  186. .links {border-top:1px solid #eee; /**CHANGE TOP BORDER COLOR**/
  187. height:49px;margin-top:10px;overflow:hidden;line-height:15px;}
  188.  
  189. .titleone,.titletwo {
  190. border-bottom:1px solid #eee; /**CHANGE BORDER COLOR**/
  191. text-transform:uppercase;
  192. font-weight:bold;
  193. font-size:15px;
  194. font-family:open sans;}
  195. .titleone {margin-bottom:10px;}
  196. .titletwo {margin-bottom:5px;text-align:right;}
  197.  
  198. /**SEARCHBAR**/
  199. .searchbox {
  200. width:calc(100% - 11px);
  201. padding:15px 5px 0px 5px;
  202. background-color:#fff;
  203. margin-top:10px;
  204. border-left:1px solid #eee; /**CHANGE BORDER COLOR**/
  205. border-bottom:1px solid #eee; /**CHANGE BORDER COLOR**/
  206. border-right:1px solid #eee; /**CHANGE BORDER COLOR**/
  207. }
  208. .search .query {
  209. border: 0;
  210. outline: 0;
  211. padding-left:5px;
  212. font-family: inherit;
  213. font-size: inherit;
  214. color: inherit;
  215. width:calc(100% - 11px);
  216. background-color: transparent;
  217. font-size:7px;
  218. font-family:open sans;
  219. text-transform:lowercase;
  220. letter-spacing:1px;}
  221. ::-webkit-input-placeholder {color: inherit;text-transform:uppercase;font-weight:bold;font-style:italic;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  222. :-moz-placeholder {color: inherit; opacity:1;text-transform:uppercase;font-weight:bold;font-style:italic;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  223. ::-moz-placeholder {color: inherit; opacity:1;text-transform:uppercase;font-weight:bold;font-style:italic;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  224. :-ms-input-placeholder {color: inherit;text-transform:uppercase;font-weight:bold;font-style:italic;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  225. input:focus::-webkit-input-placeholder {color: transparent;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  226. input:focus:-moz-placeholder {color: transparent;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  227. input:focus::-moz-placeholder {color: transparent;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  228. input:focus:-ms-input-placeholder { color: transparent;-moz-transition-duration: 0.7s;-o-transition-duration: 0.7s;-webkit-transition-duration: 0.7s;transition-duration: 0.7s;}
  229. .credit {position:fixed;bottom:10px;right:5px;font-size:15px;}
  230. </style>
  231. </head>
  232.  
  233. <body>
  234.  
  235. <div class="box">
  236. <div class="bar">
  237.  
  238. <!--------TITLE------->
  239. <div class="title"><span class="lnr lnr-diamond" style="font-size:9px;"></span> ⋄ title here ⋄ <i><b>!!</b></i></div>
  240. <!--------END TITLE------->
  241.  
  242. <!--
  243. To edit diamond icon in title, go to https://linearicons.com/free & replace with whatever icon you like!!
  244. -->
  245.  
  246. <!--------TOP LINKS------->
  247. <div class="homelinks">
  248. <a href="/">home</a>
  249. <a href="/ask">message</a>
  250. <a href="/">one</a>
  251. <a href="/">two</a>
  252. <a href="/">three</a>
  253. </div>
  254. <!--------END TOP LINKS------->
  255.  
  256.  
  257. </div>
  258.  
  259.  
  260. <div class="sidebar">
  261.  
  262.  
  263. <!--------SIDE QUOTE BOX------->
  264. <div class="quote">
  265. <sup>❝</sup> QUOTE HERE <sub>❞</sub>
  266. </div>
  267. <!--------END SIDE QUOTE BOX------->
  268.  
  269.  
  270.  
  271. </div>
  272.  
  273.  
  274. <!--------IMAGE - 100x100------->
  275. <div class="photo">
  276. <img src="http://i.imgur.com/OeAKH1Z.png" />
  277. </div>
  278. <!--------END IMAGE------->
  279. <!--------IMAGE 2 - 100x100------->
  280. <div class="photo2">
  281. <img src="http://i.imgur.com/hrbSuCS.png" />
  282. </div>
  283. <!--------END IMAGE 2------->
  284.  
  285.  
  286. <!--------INFO BOXES------->
  287. <div class="titles">
  288. <!--Change info - KEEP SPANS - <!-> is used just to more easily find where to edit-->
  289. <span><!---->name<!----></span>
  290. <span><!---->age<!----></span>
  291. <span><!---->home<!----></span>
  292. <span><!---->sign<!----></span>
  293. <span><!---->mbti<!----></span>
  294. <!---->
  295. </div>
  296. <div class="info">
  297. <!--Change info - KEEP SPANS - <!-> is used just to more easily find where to edit-->
  298. <span><!----><i>name <b>!!</b></i><!----></span><br>
  299. <span><!----><i>age <b>!!</b></i><!----></span><br>
  300. <span><!----><i>home <b>!!</b></i><!----></span><br>
  301. <span><!----><i>sign <b>!!</b></i><!----></span><br>
  302. <span><!----><i>mbti <b>!!</b></i><!----></span>
  303. </div>
  304. <!--------END INFO BOXES------->
  305.  
  306.  
  307. <!--------ABOUT BOX------->
  308. <div class="about">
  309. <div class="titleone">about</div>
  310.  
  311. <!--------START ABOUT------->
  312. put your description here!<p>
  313. <b>bold</b><br>
  314. <i>italic</i><br>
  315. <blockquote>blockquote</blockquote>
  316. <a>link</a>
  317. <!--------END ABOUT------->
  318. </div>
  319. <!--------END ABOUT BOX------->
  320.  
  321.  
  322. <!--------LINKS BOX------->
  323. <div class="links">
  324. <div class="titletwo">links / tags</div>
  325. <center>
  326. <!--------EDIT LINKS------->
  327. <a href="/">link</a>
  328. <!--------------->
  329. </center>
  330. </div>
  331. <!--------END LINKS BOX------->
  332.  
  333. <div class="searchbox">
  334.  
  335. <form class="search" action="javascript:return false">
  336. <input type="text" class="query" placeholder="click here to search {Name}'s tags...">
  337. </form>
  338.  
  339. </div>
  340.  
  341.  
  342. </div>
  343.  
  344. <div class="credit"><a href="http://crimsonxthemes.tumblr.com"><span class="lnr lnr-diamond"></span></a></div>
  345. </body>
  346. </html>
Advertisement
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!