API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 11. About Page {Through the Window}

Noir-Et-Blanc
Jul 16th, 2017
1,966
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.48 KB | None | 0 0
raw download clone embed print report
  1. <!-- Page 11
  2.  
  3. {. Through the Window .}
  4.  
  5. Page #11. (Through the Window)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this theme as a base or claim it as your own.
  9. You are free to edit this page as much as you want, please just don't erase the credits.
  10.  
  11. CREDITS TO:
  12. Profile picture used in the preview:
  13. https://www.pixiv.net/member.php?id=1257457
  14.  
  15. -->
  16.  
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <html xmlns="http://www.w3.org/1999/xhtml">
  19. <head>
  20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link href="https://fonts.googleapis.com/css?family=Princess+Sofia|Text+Me+One" rel="stylesheet">
  23.  
  24.  
  25. <title>{Title}</title>
  26.  
  27. <style>
  28.  
  29. ::-webkit-scrollbar-track{
  30. background-color: #fcf8cf;
  31. }
  32.  
  33. ::-webkit-scrollbar{
  34. width: 3px;
  35.  
  36. }
  37.  
  38. ::-webkit-scrollbar-thumb{
  39. background-color: #ba7733;
  40. }
  41.  
  42. *{
  43. margin:0;
  44. padding:0;
  45. }
  46.  
  47. a{
  48. text-decoration: none;
  49. color:#48220b; /* Description links color */
  50. }
  51.  
  52. body{
  53. background: url("https://i.imgur.com/9KFpKfi.png"); /*Main background*/
  54. font-family: 'Text Me One', sans-serif;
  55. color: #171514; /* Main color of the fonts*/
  56. font-size: 14px;
  57. overflow: hidden;
  58. }
  59.  
  60. #container{
  61. position: absolute;
  62. top: 50%;
  63. margin-top: -270px;
  64. left: 50%;
  65. margin-left: -270px;
  66. width: 540px;
  67. height: 540px;
  68. }
  69.  
  70. /*Image Box*/
  71.  
  72. #AA{
  73. position: absolute;
  74. height: 250px;
  75. width: 250px;
  76. border: 10px solid #4B3D32; /* Image border color */
  77. overflow: hidden;
  78. border-radius: 30px 0 0 0;
  79. }
  80.  
  81. #AA img{
  82. max-height: 250px;
  83. }
  84.  
  85.  
  86. /*Info Box*/
  87.  
  88. #AB{
  89. position: absolute;
  90. height: 250px;
  91. width: 250px;
  92. right: 0;
  93. border: 10px solid #EC8173; /* Info border color color */
  94. right: 0;
  95. background: rgba(244, 245, 223, 0.96); /* Info bg color */
  96. border-radius: 0 30px 0 0;
  97. overflow: hidden;
  98. }
  99.  
  100. p.info{
  101. position: relative;
  102. top: 50%;
  103. transform: translateY(-50%);
  104. }
  105.  
  106. span.ss{
  107. position: relative;
  108. display: block;
  109. margin: 10px;
  110. left: 30px;
  111. top:-5px;
  112. max-width: 205px;
  113. }
  114.  
  115. span.ss b{
  116. display: inline-block;
  117. background: #EC8173; /* Background color of Name/Age/DOB/Etc */
  118. padding: 5px 0;
  119. width: 80px;
  120. border-bottom: 3px solid #af5757; /* Border color bottom */
  121. border-left: 3px solid #ffce95; /* Border color left */
  122. font-size: 12px;
  123. color: white; /* Color of fonts */
  124. text-align: center;
  125. }
  126.  
  127. /*Description Box*/
  128.  
  129. #BA{
  130. position: absolute;
  131. height: 250px;
  132. width: 250px;
  133. border: 10px solid #EFBD78; /* Description border color */
  134. bottom: 0;
  135. background: rgba(244, 245, 223, 0.96); /* Description bg color */
  136. border-radius: 0 0 0 30px;
  137. overflow: auto;
  138. }
  139.  
  140. .desc{
  141. padding: 50px 20px;
  142. padding-bottom: 10px;
  143. text-align: justify;
  144. }
  145.  
  146. .desc h1{
  147. font-family: 'Princess Sofia', cursive;
  148. text-align: center;
  149. border-bottom: 1px dashed #EFBD78; /* Title border */
  150. margin-bottom: 10px;
  151. font-size: 25px;
  152. }
  153.  
  154. .desc a{
  155. -moz-transition:all .5s ease-in-out;
  156. -webkit-transition:all .5s ease-in-out;
  157. -o-transition:all .5s ease-in-out;
  158. transition:all .5s ease-in-out;
  159. }
  160.  
  161. .desc a:hover{
  162. letter-spacing: 1px;
  163. }
  164.  
  165. /*Link box*/
  166.  
  167. #BB{
  168. position: absolute;
  169. height: 250px;
  170. width: 250px;
  171. border: 10px solid #C4CEB1; /* Links Border color */
  172. bottom: 0;
  173. right: 0;
  174. text-align: center;
  175. background: rgba(244, 245, 223, 0.96); /*Links bg color */
  176. border-radius: 0 0 30px 0;
  177. }
  178.  
  179. #BB a{
  180. display: inline-block;
  181. background: #C4CEB1; /* Links bg color */
  182. color: #ffffff; /* Links font color */
  183. width: 100px;
  184. padding: 5px 0;
  185. text-align: center;
  186. margin: 10px 5px;
  187. border-bottom: 3px solid #8bafa0; /* Links border colors */
  188. border-left: 3px solid #a9dbc4; /* Links border colors */
  189. }
  190.  
  191. #BB a:hover{
  192. border-bottom: 3px solid #6b9383; /* Links border colors on hover */
  193. border-left: 3px solid #8ec7ad; /* Links border colors on hover */
  194. }
  195.  
  196. .links{
  197. position: relative;
  198. top: 50%;
  199. transform: translateY(-50%);
  200. }
  201.  
  202. /*Credits. PLEASE DO NOT ERASE. You are free to change the colors to fit your page edition */
  203.  
  204. #credit{
  205. position: absolute;
  206. right: 0;
  207. bottom: 0;
  208. }
  209.  
  210. #credit a{
  211. display: block;
  212. background: #4B3D32; /* Credit bg color */
  213. color: white; /* Credit font color */
  214. padding: 5px 10px;
  215. }
  216.  
  217. #credit a:hover> span.credit{
  218. opacity: 1;
  219. top: -25px;
  220. }
  221.  
  222. span.credit{
  223. position: absolute;
  224. left: -40px;
  225. top: -20px;
  226. padding: 5px 10px;
  227. background: #070707; /* Hover credit bg color */
  228. border-radius: 5px;
  229. opacity: 0;
  230. -moz-transition:all .5s ease-in-out;
  231. -webkit-transition:all .5s ease-in-out;
  232. -o-transition:all .5s ease-in-out;
  233. transition:all .5s ease-in-out;
  234. font-size: 10px;
  235. }
  236.  
  237. </style>
  238. </head>
  239.  
  240. <body>
  241.  
  242. <div id="container">
  243.  
  244. <div id="AA">
  245. <!-- Recommended size for the picture 250x250 -->
  246. <img src="url">
  247. </div>
  248.  
  249. <div id="AB">
  250. <p class="info">
  251. <!-- To create a new detail you just have to copy the next span:
  252. <span class="ss"><b>Detail:</b> Info</span>
  253. -->
  254. <span class="ss"><b>Name:</b> ???</span>
  255. <span class="ss"><b>Age:</b> ??</span>
  256. <span class="ss"><b>DOB:</b> ???</span>
  257. <span class="ss"><b>Gender:</b> ♂ ♀ ⚤</span>
  258. </p>
  259. </div>
  260.  
  261.  
  262. <div id="BA">
  263. <div class="desc">
  264. <h1>About Me</h1>
  265.  
  266. <b>Bold</b> <i>Italic</i> <s>Striked</s> <a href="">Links</a><br><br>
  267. You can write some basic info of yourself here.
  268.  
  269. </div>
  270. </div>
  271.  
  272. <div id="BB">
  273. <div class="links">
  274. <a href="">A link</a>
  275. <a href="">A link</a>
  276. <a href="">A link</a>
  277. <a href="">A link</a>
  278. <a href="">A link</a>
  279. <a href="">A link</a>
  280. <a href="">A link</a>
  281. <a href="">A link</a>
  282. <a href="">A link</a>
  283. <a href="">A link</a>
  284. </div>
  285. </div>
  286.  
  287. </div>
  288.  
  289. <div id="credit"><a href="http://noiretblanc-themes.tumblr.com/">Theme <span class="credit">By: Noir et Blanc</span></a></div>
  290.  
  291. </body>
  292.  
  293. </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!