API tools faq
paste
tangycode

yulia page

tangycode
Jun 24th, 2019
195
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>yulia</title>
  6. <link rel="shortcut icon" href="favicon url"> <!--put favicon url here-->
  7. <link href="https://fonts.googleapis.com/css?family=Abel&display=swap" rel="stylesheet">
  8.  
  9. <style type="text/css">
  10.  
  11. body {
  12. background:#fff; /*background color for entire page*/
  13. background-image:url('url here'); /*add url for tiling background*/
  14. background-attachment:fixed;
  15. font-size:14px; /*font size for entire page*/
  16. font-family:times; /*font for entire page*/
  17. color:#000; /*font color for entire page*/
  18. }
  19.  
  20. a {
  21. color:#000; /*link color for entire page*/
  22. text-decoration:underline; /*change this to none if you dont want links to be underlined*/
  23. -moz-transition-duration: 0.5s;
  24. -o-transition-duration: 0.5s;
  25. -webkit-transition-duration: 0.5s;
  26. transition-duration: 0.5s;
  27. }
  28.  
  29. a:hover {
  30. color:#000 /*link hover color*/
  31. text-transform:uppercase; /*remove this if you dont want links to change to uppercase when hovered*/
  32. -moz-transition-duration: 0.5s;
  33. -o-transition-duration: 0.5s;
  34. -webkit-transition-duration: 0.5s;
  35. transition-duration: 0.5s;
  36. }
  37.  
  38. .container {
  39. width:1000px;
  40. margin-left:auto;
  41. margin-right:auto;
  42. margin-top:70px;
  43. overflow:hidden;
  44. text-align:center;
  45. }
  46.  
  47. .title {
  48. margin-left:auto;
  49. margin-right:auto;
  50. width:600px;
  51. font-size:30px; /*title font size*/
  52. font-family:Abel; /*title font*/
  53. color:#000; /*title color*/
  54. text-align:left; /*title alignment*/
  55. border-bottom:1px solid #000; /*underline width style color*/
  56. }
  57.  
  58. .about {
  59. width:500px;
  60. height:300px;
  61. display:inline-block;
  62. overflow:hidden;
  63. border-right:1px solid #000; /*line between sidebar and about*/
  64. margin:10px;
  65. }
  66.  
  67. .abouttext {
  68. width:500px;
  69. color:#000; /*about text color*/
  70. text-align:right; /*about text alignment*/
  71. margin-left:-20px;
  72. word-break:break-all;
  73. }
  74.  
  75. .sidebar {
  76. width:100px;
  77. height:300px;
  78. display:inline-block;
  79. overflow:hidden;
  80. margin:10px;
  81. }
  82.  
  83. .sidebarpic {
  84. position:absolute;
  85. width:100px;
  86. height:100px;
  87. }
  88.  
  89. .sidebarpic img {
  90. border:1px solid #000; /*sidebar image border*/
  91. border-radius:50%; /*take out this line if you want it to be square*/
  92. }
  93.  
  94. .sidebartext {
  95. color:#000; /*sidebar text color*/
  96. text-align:left; /*sidebar text alignment*/
  97. margin-top:115px;
  98. word-break:break-all;
  99. }
  100.  
  101. .links {
  102. margin-left:35px;
  103. width:100px;
  104. height:300px;
  105. display:inline-block;
  106. overflow:hidden;
  107. }
  108.  
  109. .boxes {
  110. height:50px;
  111. width:50px;
  112. display:inline-block;
  113. background-color:#fff; /*links background color*/
  114. border:1px solid #000; /*links border*/
  115. margin:0 auto;
  116. -moz-transition-duration: 0.5s;
  117. -o-transition-duration: 0.5s;
  118. -webkit-transition-duration: 0.5s;
  119. transition-duration: 0.5s;
  120. }
  121.  
  122. .boxes:hover {
  123. background-color:#000; /*links hover background*/
  124. -moz-transition-duration: 0.5s;
  125. -o-transition-duration: 0.5s;
  126. -webkit-transition-duration: 0.5s;
  127. transition-duration: 0.5s;
  128. }
  129.  
  130. .boxes p {
  131. position:relative;
  132. top:50%;
  133. transform:translateY(-50%);
  134. margin:0 auto;
  135. text-align:center;
  136. }
  137.  
  138. </style>
  139. </head>
  140. <body>
  141. <div class="container">
  142. <div class="title">yulia page</div> <!--title goes here-->
  143. <div class="about">
  144. <div class="abouttext">
  145. <!--about text starts here-->
  146. <p>hi im yulia im a big gay</p>
  147. <p>hee hee hoo hoo</p>
  148. <!--about text end here-->
  149. </div>
  150. </div>
  151. <div class="sidebar">
  152. <!--replace url here with the url of the pic you want-->
  153. <div class="sidebarpic"><img src="https://i.gyazo.com/1a0652a46f68e809c3daf952dd6bd60f.png" width="100px" height="100px"></div>
  154. <div class="sidebartext">
  155. <!--sidebar text starts here-->
  156. <p><strong>n:</strong> yulia</p>
  157. <p><strong>a:</strong> 21</p>
  158. <p><strong>p:</strong> ?</p>
  159. <p><strong>r:</strong> ?</p>
  160. <!--sidebar text ends here-->
  161. </div>
  162. </div>
  163. <div class="links">
  164. <table style="width:100%;height:100%">
  165. <tr><th><a href="url here"> <!--place url of link you want here, do same for the links below-->
  166. <div class="boxes">
  167. <!--change url for little pixel in link box, do same for the links below-->
  168. <p><img src="https://66.media.tumblr.com/2944b1e1a47383478c308823835c0406/tumblr_inline_mt9b2ny5QW1qcza22.gif"></p>
  169. </div>
  170. </a></th></tr>
  171. <tr><th><a href="url here">
  172. <div class="boxes">
  173. <p><img src="https://66.media.tumblr.com/c7ca3ec09e7de098c02e5bb6507b674a/tumblr_inline_mt9b40OgUs1qcza22.gif"></p>
  174. </div>
  175. </a></th></tr>
  176. <tr><th><a href="url here">
  177. <div class="boxes">
  178. <p><img src="https://66.media.tumblr.com/4d0b619fef982161c805ec282d7733be/tumblr_inline_mt9b3pqOjM1qcza22.gif"></p>
  179. </div>
  180. </a></th></tr>
  181. </table>
  182. </div>
  183. </div>
  184. </body>
  185. </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!