API tools faq
paste
Advertisement
cornetespoir

sammyapetals // about page

cornetespoir
Nov 23rd, 2016
441
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.85 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. </head>
  6.  
  7. <style type="text/css">
  8. /*this is the custom script font used for the labels */
  9. @font-face { font-family: "oliver"; src: url('https://dl.dropboxusercontent.com/s/y74b19hkp9def0k/olivier_demo.ttf'); }
  10.  
  11.  
  12. body {
  13. font-size:1em; /*general font size */
  14. font-family:Helvetica; /*general font */
  15. line-height:130%;
  16. background:#f8f8f8; /*background colo */
  17. color:#222; /*font color */
  18. }
  19.  
  20. a {
  21. color:#222; /*link color */
  22. text-decoration:none; /*removes underline from links */
  23. }
  24.  
  25. #container {
  26. margin:100px auto; /*position of container (centers it) */
  27. position:relative;
  28. width:600px; /*width of container */
  29. }
  30.  
  31. #sidebar {
  32. width:200px; /*width of sidebar */
  33. position:relative;
  34. margin-left:-240px;
  35. margin-top:-200px;
  36. transform:translate(0px, 50px);
  37.  
  38. }
  39.  
  40. #linksbar {
  41. width:200px; /*width of navigation links, best if kept same as sidebar */
  42. position:absolute;
  43. right:-240px;
  44. top:-10px;
  45. }
  46.  
  47. #linksbar ul {
  48. border:1px solid #ddd; /*boder of navigation links section */
  49. padding:0px;
  50. }
  51.  
  52. #linksbar li {
  53. background:white; /*background of nav links */
  54. padding:10px;
  55. transition:.6s; /*transition speed */
  56. list-style:none;
  57. border-bottom:1px solid #ddd; /* border under links */
  58. }
  59.  
  60. #linksbar li:hover {
  61. background:#eee; /*background of links on hover */
  62. transition:.6s; /*hover transition speed */
  63. }
  64.  
  65. #linksbar img {
  66. width:200px; /*automatic widh of image */
  67. background:#E687B6; /*the background of the image. isn't visible when there's an actual image */
  68. margin-top:20px;
  69. }
  70. #sidebar img {
  71. width:200px; /*automatic width of image */
  72. background:#E687B6;
  73. }
  74.  
  75. /*this is the text under the sidebar image */
  76. .cont {
  77. background:white;
  78. border:1px solid #ddd;
  79. position:absolute;
  80. margin-top:20px;
  81. width:200px; /*keep this the same width as sidebar */
  82. }
  83.  
  84. #about {
  85. position:relative;
  86. margin:20px auto;
  87. width:600px; /*width of about */
  88. border:1px solid #ddd; /*boder of about */
  89. background:white; /*background of about */
  90. border-radius:4px;
  91. }
  92.  
  93. .text {
  94. padding:20px; /*amount of space around text */
  95. }
  96.  
  97. #header {
  98. width:600px; /*best if kept the same as the container and about widths */
  99. margin:0px;
  100. position:relative;
  101. border:1px solid #ddd;
  102. border-bottom:none;
  103. border-radius:4px;
  104. text-shadow:1px 1px rgba(0,0,0,.2);
  105.  
  106. }
  107. #header img {
  108. width:600px; /*keep this the same as the header width, othewise the banner won't fit */
  109. }
  110.  
  111. /*lables */
  112. .abt {
  113. padding:20px;
  114. font-size:1.6em;
  115. font-family:oliver; /*font of labels (default is a script-like font )*/
  116. color:#444; /*color of labels */
  117. border-bottom:1px dotted #ddd; /*border under labels */
  118.  
  119. }
  120.  
  121. .abt:first-letter {
  122. color:#DB419C; /*first letter of lables (default is pink) */
  123. opacity:.6;
  124. }
  125. #egg { opacity:.8;right:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  126. font-family: "bitxmap";
  127. border:1px solid #444; z-index:4;
  128.  
  129. }
  130. #egg:hover { animation-name: egg;
  131. animation-duration: 1s;
  132. animation-iteration-count: infinite;}
  133. @keyframes egg{
  134. 0%{}
  135. 10%{transform:rotate(20deg)}
  136. 80%{transform:rotate(-20deg)}
  137. 100%{}
  138. }
  139. </style>
  140.  
  141.  
  142. <body>
  143. <a href="http://espoirthemes.tumblr.com" title="theme credit"><div id="egg"></div></a>
  144. <div id="container">
  145.  
  146. <!-- header and banner image -->
  147. <div id="header">
  148. <img src="https://secure.static.tumblr.com/209266612ec31641145fb465082861a0/svdghan/0ubognjcn/tumblr_static_8hhlgrbj3wcgc4kkc0400cc48.png">
  149.  
  150. </div>
  151.  
  152. <div id="sidebar">
  153. <img src=""> <!-- sidebar image -->
  154. <div class="cont">
  155.  
  156. <div class="abt">
  157. <!--name --> Name
  158. </div>
  159. <div class="text">
  160. <!-- this is where the quick about/info goes -->
  161. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  162. <!--end quick info -->
  163. </div>
  164. </div>
  165. </div>
  166.  
  167. <div id="linksbar">
  168. <div class="abt">
  169. <!--navigation label --> Navigation
  170. </div>
  171. <ul>
  172. <!-- navigation links -->
  173. <li> <a href="/">Home</a> </li>
  174. <li> <a href="/ask">Ask</a> </li>
  175. <li> <a href="/archive">Archive</a> </li>
  176. <li> <a href="/tags">Tags</a> </li>
  177. <li> <a href="/projects">Projects</a> </li>
  178. <li><a href="http://tumblr.com/dashboard"></a> Dashboard </li>
  179. <!-- end navigation links -->
  180. </ul>
  181.  
  182. <!--image under navigation links -->
  183. <img src="">
  184.  
  185. </div>
  186.  
  187. <div id="about">
  188.  
  189. <div class="abt">
  190. <!--about label -->About</div>
  191. <div class="text">
  192. <!--about goes here. paragraphs are separated by <p> and </p> -->
  193. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia sagittis est, at tincidunt augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  194. </p>
  195.  
  196. <p>
  197. Aenean erat est, congue eget purus quis, consectetur varius leo. Aenean hendrerit nulla vel nisl euismod congue. Nulla facilisi. Nunc aliquam, tellus eget malesuada fringilla, metus est iaculis libero, in ornare tortor tortor vel erat. Cras est nisi, ultrices in facilisis in, dapibus eu risus. Integer ornare eros non enim venenatis rutrum.
  198. </p>
  199.  
  200. <p>
  201. Nullam enim tortor, aliquam id tortor vel, ullamcorper congue orci. Donec sed lorem ut nulla feugiat feugiat. Integer aliquam mi quis sodales ultricies. Nam hendrerit at tortor ac hendrerit. Etiam at nibh in metus consequat euismod id ultrices quam.
  202. </p>
  203.  
  204. <!--end about -->
  205. </div>
  206.  
  207. </div>
  208. </body>
  209. </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!