API tools faq
paste
Advertisement
cornetespoir

About Page #2 // Love me

cornetespoir
Jan 27th, 2017
2,649
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.48 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // Love Me
  4.  
  5. about page by espoirthemes //
  6.  
  7. + instructions are throughout the code
  8. + please do not remove or edit the credit
  9. + do not redistribute or claim as your own
  10. + edit as much as you like, without removing credit
  11.  
  12. icons from font awesome
  13. -->
  14.  
  15. <html>
  16. <head>
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
  22. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  23. </head>
  24.  
  25.  
  26. <style type="text/css">
  27.  
  28.  
  29. /* scrollbar */
  30. ::-webkit-scrollbar {
  31. width: 10px;
  32. height:10px;
  33.  
  34. }
  35. ::-webkit-scrollbar-button {
  36. width: 0px;
  37. height: 0px;
  38. }
  39. ::-webkit-scrollbar-thumb {
  40. background: #dae3f1;
  41.  
  42. border-radius: 2px;
  43. }
  44. ::-webkit-scrollbar-track {
  45. background:#444;
  46. border: 4px solid #fff;
  47.  
  48.  
  49. }
  50.  
  51. /* Body styling */
  52. body{
  53. margin:0;
  54. background: #f4f4f4 url(image:background) no-repeat center center fixed;
  55. -webkit-background-size: cover;
  56. -moz-background-size: cover;
  57. -o-background-size: cover;
  58. background-size: cover;
  59. background-attachment:fixed;
  60. word-wrap:break-word;
  61. font-size:1em;
  62. font-family:roboto;
  63.  
  64. }
  65.  
  66. /* links */
  67.  
  68. a {
  69. text-decoration:none;
  70. color:#aba2b8;
  71.  
  72. }
  73. /* container */
  74. #container {
  75. position:relative;
  76. margin:70px auto;
  77. width:50%; /*width of container */
  78. min-width:540px;
  79. border-radius:10px;
  80. background: #ffc6c6; /* color of top section */
  81. box-shadow:0px 4px 20px 0px rgba(0,0,0,.12); /*box shadow*/
  82. }
  83.  
  84. .top {
  85. height:100px;
  86. }
  87.  
  88.  
  89. /* side image positioning */
  90. .im {
  91. transform:translate(-20px, 50px); position:absolute; top:0px; right:0px;
  92. }
  93.  
  94. /* side image */
  95.  
  96. .im img {
  97. height:250px;
  98. width:170px;
  99. border-radius:4px;
  100. }
  101.  
  102. /* social media icons */
  103.  
  104. .social {
  105. padding:0px 20px 10px 20px;
  106. }
  107. .social a {
  108. font-size:1.2em;
  109. margin:0px 10px;
  110. color:white;
  111.  
  112. }
  113.  
  114. /* title */
  115.  
  116. .title{
  117. font-size:1.4em;
  118. padding:0px 30px;
  119.  
  120. }
  121.  
  122. /* username */
  123.  
  124. .name {
  125. padding:0px 30px 10px 30px;
  126. font-size:1em;
  127. font-style:italic;
  128. font-weight:100;
  129. }
  130.  
  131. /* about */
  132.  
  133. .about {
  134. padding:10px;
  135. line-height:120%;
  136. background:#f8f8f8;
  137. border-radius:0px 0px 8px 8px;
  138. padding:20px;
  139.  
  140. }
  141.  
  142. /* info section under image */
  143.  
  144. .labelsection {
  145. margin-top:110px;
  146. width:170px;
  147. float:right;
  148. z-index:999999;
  149. }
  150.  
  151. .labelsection li {
  152. list-style:none;
  153. text-align:right;
  154. height:1.2em;
  155. position:relative;
  156. margin-top:2px;
  157. }
  158.  
  159. .labelsection li:after{
  160. content:'';
  161. width:100%;
  162. position:absolute;
  163. height:1px;
  164. left:0px;
  165. margin-top:10px;
  166. background:#ddd;
  167. }
  168.  
  169. .labelsection li:before{
  170. position:absolute;
  171. left:0px;
  172. padding:0px 6px 0px 0px;
  173. background:#f8f8f8;
  174. z-index:999;
  175. }
  176.  
  177. /* Label Names */
  178.  
  179. .labelsection li:first-child:before{
  180. content:'name';
  181. }
  182.  
  183. .labelsection li:nth-child(2):before{
  184. content:'age';
  185. }
  186.  
  187. .labelsection li:nth-child(3):before{
  188. content:'gender';
  189. }
  190.  
  191. /* info styling */
  192.  
  193. .word {
  194. z-index:999;
  195. position:absolute;
  196. right:0px;
  197. background:#f8f8f8;
  198. padding:0px 0px 0px 6px;
  199. }
  200.  
  201. #egg { opacity:.8;right:10px; bottom:10px; position:fixed;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%;
  202. font-family: "bitxmap";
  203. border:1px solid #888; z-index:9999;
  204.  
  205. }
  206. #egg:hover { animation-name: egg;
  207. animation-duration: 1s;
  208. animation-iteration-count: infinite;}
  209. @keyframes egg{
  210. 0%{}
  211. 10%{transform:rotate(20deg)}
  212. 80%{transform:rotate(-20deg)}
  213. 100%{}
  214. }
  215.  
  216.  
  217. </style>
  218. <body>
  219. <!-- container -->
  220. <div id="container">
  221.  
  222. <div class="top"></div>
  223. <div class="im">
  224. <!-- right image. replace url with your own image if need -->
  225. <img src="https://68.media.tumblr.com/562e2e59ce5149125f35dd4ab0739709/tumblr_oj2wa37QyW1tp0uyco4_400.jpg">
  226.  
  227. </div>
  228.  
  229. <div class="title">
  230. <!-- replace Lorem Ipsum with your title. If you do not want it to be bold, remove <b> and </b> -->
  231. <b>Lorem Ipsum</b>
  232.  
  233. </div>
  234.  
  235.  
  236. <div class="name">
  237. <!-- this will automatically display your username. If you want to put your actual name, replace it with that -->
  238. {name}
  239.  
  240. </div>
  241.  
  242. <div class="social">
  243. <!-- you can change the social media icons by changing twitter, pinterest, and instagram with the social media names of your choice.
  244.  
  245. For example, if you wanted to change pinterest to facebook, it would be fa fa-facebook instead
  246.  
  247. replace the "twitter", "pinterest" and "instagram" after href= with the urls to your accounts
  248. -->
  249. <a href="twitter" class="fa fa-twitter"></a>
  250. <a href="pinterest" class="fa fa-pinterest"></a>
  251. <a href="instagram" class="fa fa-instagram"></a>
  252.  
  253.  
  254. </div>
  255. <div class="about">
  256. <div class="labelsection">
  257. <!-- this is the info section below the right image. you can change the categories in the css under /* Label Names */
  258. -->
  259.  
  260. <li> <span class="word">
  261. <!-- name --> egg
  262. </span></li>
  263. <li> <span class="word">
  264. <!-- age --> 20
  265. </span></li>
  266. <li><span class="word">
  267. <!-- gender --> ???
  268. </span></li>
  269. </div>
  270. <div style="max-height:300px; min-height:100px; overflow:auto; padding:10px; width:calc(100% - 200px); ">
  271.  
  272. <!-- About starts here. Replace the text below with your about -->
  273. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium accumsan iaculis. Fusce consectetur magna a arcu volutpat consequat. Vestibulum in sagittis felis. </p> Sed ultrices, odio quis sodales euismod, nisl libero ultrices ipsum, fermentum lobortis urna nisl ac est. Maecenas tortor turpis, consectetur sit amet felis sed, rhoncus vulputate ante. </p>
  274. <a href="/">Get the code to this page</a>
  275. <!-- end about text -->
  276.  
  277. </div> <!--end about section-->
  278. </div><!-- end bottom portion -->
  279. </div><!-- end container -->
  280. <a href="http://espoirthemes.com"><div id="egg"></div></a>
  281. </body>
  282. </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!