API tools faq
paste
Advertisement
themesbyces

Page — (Your) Sweetheart

themesbyces
Apr 14th, 2019 (edited)
4,173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <title>{Title}</title>
  8.  
  9. <link rel="shortcut icon" href="{Favicon}">
  10.  
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.  
  13. <!-- (Your) Sweetheart by Franchesca (extasisthemes) -->
  14.  
  15. <!-- Google Fonts Script -->
  16.  
  17. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  18.  
  19. <!-- Styled Tooltips Script -->
  20.  
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22.  
  23. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  24.  
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:90,
  31. tip_fade_speed:600,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!-- Font Awesome Script -->
  39.  
  40. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  41.  
  42. <style type="text/css">
  43.  
  44. .tmblr-iframe--app-cta-button {
  45. display: none!important;
  46. }
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {
  49. background: #000000;
  50. }
  51.  
  52. ::-webkit-scrollbar {
  53. width: 1px;
  54. }
  55.  
  56. ::selection {
  57. background: #ddaabb;
  58. color: white;
  59. }
  60.  
  61. ::-moz-selection {
  62. background: #ddaabb;
  63. color: white;
  64. }
  65.  
  66. #s-m-t-tooltip {
  67. background: #000000;
  68. border-radius: 5px;
  69. color: #ffffff;
  70. font-size: 0.9rem;
  71. margin-top: 30px;
  72. padding: 5px;
  73. text-align: center;
  74. text-transform: uppercase;
  75. z-index: 999999999999999999999999999999999999;
  76. }
  77.  
  78. body {
  79. background: #ffffff;
  80. color: #555555;
  81. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  82. font-family: 'Karla', sans-serif;
  83. font-size: 1rem;
  84. font-style: normal;
  85. font-weight: 400;
  86. hyphens: auto;
  87. letter-spacing: 1px;
  88. margin: 0px;
  89. text-align: left;
  90. text-transform: none;
  91. word-wrap: break-word;
  92. }
  93.  
  94. a {
  95. color: #000000;
  96. text-decoration: none;
  97. -webkit-transition: all 0.5s ease;
  98. -moz-transition: all 0.5s ease;
  99. -o-transition: all 0.5s ease;
  100. }
  101.  
  102. a:hover {
  103. color: #cfcfcf;
  104. }
  105.  
  106. b {
  107. font-weight: 700;
  108. }
  109.  
  110. h1 {
  111. font-size: 1.2rem;
  112. font-weight: bold;
  113. margin-block-start: 0em;
  114. text-transform: lowercase;
  115. }
  116.  
  117. h2 {
  118. font-size: 1rem;
  119. font-weight: bold;
  120. margin-block-start: 0em;
  121. }
  122.  
  123. blockquote {
  124. border-left: 1px solid #eeeeee;
  125. margin: 5px;
  126. padding-left: 5px;
  127. }
  128.  
  129. #container {
  130. margin-bottom: 100px;
  131. margin-left: auto;
  132. margin-right: auto;
  133. margin-top: 100px;
  134. width: 800px;
  135. }
  136.  
  137. .main-wrapper {
  138. align-items: flex-start;
  139. display: flex;
  140. flex-direction: row;
  141. justify-content: flex-start;
  142. width: 800px;
  143. }
  144.  
  145. #line {
  146. background: #eeeeee;
  147. height: 1px;
  148. margin-top: 50px;
  149. position: absolute;
  150. width: 800px;
  151. }
  152.  
  153. #image-info-wrapper {
  154. margin-bottom: 95px;
  155. margin-left: 100px;
  156. position: absolute;
  157. width: 170px;
  158. }
  159.  
  160. .image {
  161. background: #ffffff;
  162. border: 1px solid #eeeeee;
  163. height: 230px;
  164. padding: 15px;
  165. position: relative;
  166. width: 170px;
  167. }
  168.  
  169. .image img {
  170. height: 230px;
  171. width: 170px;
  172. }
  173.  
  174. .info-wrapper {
  175. margin-top: 20px;
  176. width: 170px;
  177. }
  178.  
  179. .info li {
  180. align-items: center;
  181. display: flex;
  182. list-style: none;
  183. margin-bottom: 10px;
  184. }
  185.  
  186. #about-wrapper {
  187. margin-left: 354px;
  188. margin-top: 101px;
  189. width: 346px;
  190. }
  191.  
  192. .title-links-wrapper {
  193. margin-bottom: 30px;
  194. width: 346px;
  195. }
  196.  
  197. .title {
  198. color: #aaccdd;
  199. font-family: 'Playfair Display', serif;
  200. font-weight: bold;
  201. font-size: 30px;
  202. }
  203.  
  204. .links {
  205. font-size: 0.9rem;
  206. text-transform: uppercase;
  207. }
  208.  
  209. .links a {
  210. display: inline-block;
  211. margin-right: 10px;
  212. }
  213.  
  214. #navigation-wrapper {
  215. border-top: 1px solid #eeeeee;
  216. margin-top: 30px;
  217. padding-top: 30px;
  218. }
  219.  
  220. .navigation-links {
  221. font-size: 0.9rem;
  222. margin: -5px;
  223. margin-top: 10px;
  224. text-transform: uppercase;
  225. }
  226.  
  227. .navigation-links a {
  228. display: inline-block;
  229. margin-left: 5px;
  230. margin-right: 5px;
  231. }
  232.  
  233. #credit {
  234. bottom: 15px;
  235. font-size: 0.9rem;
  236. position: fixed;
  237. right: 15px;
  238. text-transform: uppercase;
  239. }
  240.  
  241. #credit a {
  242. color: #000000;
  243. }
  244.  
  245. #credit a:hover {
  246. color: #cfcfcf;
  247. }
  248.  
  249. {CustomCSS}
  250.    
  251. </style>
  252.    
  253. </head>
  254.  
  255. <body>
  256.  
  257. <div id="container">
  258.  
  259. <div id="line"></div>
  260.  
  261. <div class="main-wrapper">
  262.  
  263. <div id="image-info-wrapper">
  264.  
  265. <div class="image"><img src="https://i.imgur.com/IaoA8c3.png"/></div>
  266.  
  267. <div class="info-wrapper">
  268.  
  269. <div class="info">
  270. <li><i class="far fa-user" style="background: #ddaabb;border-radius: 5px;color: #ffffff;font-size: 0.9rem;margin-right: 10px;padding: 10px;width: 0.8rem;"></i>Franchesca</li>
  271. <li><i class="fas fa-question" style="background: #ddaabb;border-radius: 5px;color: #ffffff;font-size: 0.8rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>22 y/o</li>
  272. <li><i class="fas fa-map-marker-alt" style="background: #ddaabb;border-radius: 5px;color: #ffffff;font-size: 0.8rem;margin-right: 10px;padding: 10px;width: 0.9rem;"></i>Philippines</li>
  273. </div>
  274.  
  275. </div>
  276.  
  277. </div>
  278.  
  279. <div id="about-wrapper">
  280.  
  281. <div class="title-links-wrapper">
  282.  
  283. <div class="title">(Your) Sweetheart<font style="color: #000000;">.</font></div>
  284.  
  285. <div class="links">
  286. <a href="/">Home</a>
  287. <a href="/ask">Ask</a>
  288. <a href="/archive">Archive</a>
  289. </div>
  290.  
  291. </div>
  292.  
  293. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  294.  
  295. <div id="navigation-wrapper">
  296.  
  297. <div class="title" style="font-size: 1rem;">Elsewhere</div>
  298.  
  299. <div class="navigation-links">
  300. <a href="/">Link One</a>
  301. <font style="color: #ddaabb;">•</font>
  302. <a href="/">Link Two</a>
  303. <font style="color: #ddaabb;">•</font>
  304. <a href="/">Link Three</a>
  305. <font style="color: #ddaabb;">•</font>
  306. <a href="/">Link Four</a>
  307. <font style="color: #ddaabb;">•</font>
  308. <a href="/">Link Five</a>
  309. <font style="color: #ddaabb;">•</font>
  310. <a href="/">Link Six</a>
  311. <font style="color: #ddaabb;">•</font>
  312. <a href="/">Link Seven</a>
  313. <font style="color: #ddaabb;">•</font>
  314. <a href="/">Link Eight</a>
  315. <font style="color: #ddaabb;">•</font>
  316. <a href="/">Link Nine</a>
  317. </div>
  318.  
  319. </div>
  320.  
  321. </div>
  322.  
  323. </div>
  324.  
  325. </div>
  326.  
  327. <div id="credit"><a href="http://extasisthemes.tumblr.com/" title="extasisthemes" target="_blank">EXT</a></div>
  328.  
  329. </body>
  330.  
  331. </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!