mik98

love hangover - css

Jul 27th, 2026
12
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.21 KB | None | 0 0
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');
  2.  
  3. body {
  4. background:#f3f1f1!important;
  5. }
  6.  
  7. #xg_layout_column_2 {
  8. background:transparent;
  9. font-family:poppins;
  10. font-size:10px;
  11. margin-left:-50px;
  12. margin-top:65px;
  13. width:1100px;
  14. height:520px;
  15. }
  16.  
  17. ::-webkit-scrollbar {
  18. display:none;
  19. }
  20.  
  21. #code {
  22. position:relative;
  23. width:560px;
  24. height:460px;
  25. margin:0 auto;
  26. font-family:poppins;
  27. }
  28.  
  29. #lovebox {
  30. position:absolute;
  31. left:115px;
  32. top:20px;
  33. width:0px;
  34. height:560px;
  35. background:#ededed;
  36. border:1px solid #ddd;
  37. transform:scale(.7);
  38. transform-origin:top left;
  39. }
  40.  
  41. #pinkarea {
  42. position:absolute;
  43. z-index:1;
  44. left:0;
  45. top:0;
  46. width:405px;
  47. height:400px;
  48. background:#f5a9cf;
  49. }
  50.  
  51. #mainphoto {
  52. position:absolute;
  53. z-index:14;
  54. left:-35px;
  55. top:5px;
  56. width:440px;
  57. height:395px;
  58. background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204398901?profile=original);
  59. background-size:contain;
  60. background-repeat:no-repeat;
  61. background-position:center bottom;
  62. filter:saturate(90%) brightness(105%);
  63. pointer-events:none;
  64. }
  65.  
  66. #descriptionbox {
  67. position:absolute;
  68. z-index:7;
  69. left:-18px;
  70. top:70px;
  71. width:190px;
  72. height:105px;
  73. background:#fafafa;
  74. border-radius:18px;
  75. box-shadow:0 1px 5px rgba(0,0,0,.15);
  76. transform:rotate(-2deg);
  77. }
  78.  
  79. #descriptioninner {
  80. position:absolute;
  81. left:5px;
  82. top:5px;
  83. width:178px;
  84. height:93px;
  85. border:1px solid #ddd;
  86. border-radius:15px;
  87. }
  88.  
  89. #calltitle {
  90. position:absolute;
  91. left:50px;
  92. top:23px;
  93. width:125px;
  94. height:20px;
  95. color:#ee7dba;
  96. font-family: AshleyMarie;
  97. font-size:13px;
  98. font-weight:bold;
  99. letter-spacing:1px;
  100. }
  101.  
  102. @font-face{font-family:AshleyMarie;src:url(https://static.tumblr.com/9wzbixa/qKtmj2fnf/ashleymarie.ttf);}
  103.  
  104.  
  105. #descriptiontext{
  106. position:absolute;
  107. left:25px;
  108. top:53px;
  109. width:140px;
  110. height:38px;
  111. overflow-y:scroll;
  112. overflow-x:hidden;
  113. color:#555;
  114. font-family:'Courier New';
  115. font-size:8px;
  116. font-weight:bold;
  117. line-height:15px;
  118. letter-spacing:1px;
  119. text-align:justify;
  120. padding-right:3px;
  121.  
  122. scrollbar-width:none; /* Firefox */
  123. -ms-overflow-style:none; /* IE/Edge */
  124. }
  125.  
  126. #descriptiontext::-webkit-scrollbar{
  127. width:0;
  128. height:0;
  129. display:none;
  130. }
  131.  
  132. #bow1,
  133. #bow2,
  134. #bow3,
  135. #bow4 {
  136. position:absolute;
  137. z-index:20;
  138. width:55px;
  139. height:55px;
  140. background-size:contain;
  141. background-repeat:no-repeat;
  142. background-position:center;
  143. font-size:0;
  144. color:transparent;
  145. pointer-events:none;
  146. }
  147.  
  148. #bow1{
  149. left:-18px;
  150. top:60px;
  151. background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204401087?profile=original);
  152. transform:rotate(-14deg);
  153. }
  154.  
  155. #bow2{
  156. left:322px;
  157. top:35px;
  158. background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204401460?profile=original);
  159. transform:rotate(14deg);
  160. }
  161.  
  162. #bow3{
  163. left:360px;
  164. top:180px;
  165. background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204401087?profile=original);
  166. transform:rotate(-5deg);
  167. }
  168.  
  169. #bow4{
  170. left:2px;
  171. top:350px;
  172. width:45px;
  173. height:45px;
  174. background-image:url(https://storage.ning.com/topology/rest/1.0/file/get/31204401460?profile=original);
  175. transform:rotate(15deg);
  176. }
  177.  
  178.  
  179. #stamp1,
  180. #stamp2 {
  181. position:absolute;
  182. z-index:15;
  183. width:92px;
  184. height:112px;
  185. background-size:cover;
  186. background-position:center;
  187. border:8px solid #fff;
  188. box-shadow:0 1px 4px rgba(0,0,0,.18);
  189. filter:sepia(20%) hue-rotate(285deg) saturate(170%);
  190. }
  191.  
  192. #stamp1 {
  193. left:15px;
  194. top:215px;
  195. background-image:url(https://i.pinimg.com/736x/10/17/5e/10175e1de82a189dde1e46737af05564.jpg);
  196. transform:rotate(5deg);
  197. }
  198.  
  199. #stamp2 {
  200. left:40px;
  201. top:305px;
  202. background-image:url(https://64.media.tumblr.com/c881873cbb2ee2ba7602746cc945281f/b6eaaa0ed109cef0-1c/s400x600/7ae03a349f7763878cb2f17b1abfc3c817541bee.gifv);
  203. transform:rotate(-4deg);
  204. }
  205.  
  206. #calendar {
  207. position:absolute;
  208. z-index:6;
  209. left:280px;
  210. top:185px;
  211. width:120px;
  212. height:115px;
  213. background:#f5f5f5;
  214. box-shadow:0 1px 4px rgba(0,0,0,.15);
  215. }
  216.  
  217. #calendartitle {
  218. position:absolute;
  219. left:0;
  220. top:0;
  221. width:120px;
  222. height:24px;
  223. background:#d7ed99;
  224. color:#8ca55a;
  225. font-size:9px;
  226. font-weight:bold;
  227. line-height:24px;
  228. text-align:center;
  229. }
  230.  
  231. #days {
  232. position:absolute;
  233. left:8px;
  234. top:35px;
  235. width:105px;
  236. height:70px;
  237. color:#555;
  238. font-family:'Courier New';
  239. font-size:7px;
  240. font-weight:bold;
  241. line-height:17px;
  242. text-align:center;
  243. }
  244.  
  245. #tag1,
  246. #tag2 {
  247. position:absolute;
  248. z-index:18;
  249. height:28px;
  250. font-family:Arial;
  251. font-size:11px;
  252. font-weight:bold;
  253. line-height:28px;
  254. text-align:center;
  255. box-shadow:0 1px 4px rgba(0,0,0,.12);
  256. }
  257.  
  258. #tag1 {
  259. left:265px;
  260. top:315px;
  261. width:130px;
  262. background:#ef7fbc;
  263. color:#dc5da4;
  264. transform:rotate(4deg);
  265. }
  266.  
  267. #tag2 {
  268. left:240px;
  269. top:345px;
  270. width:155px;
  271. background:#d5eb91;
  272. color:#a8c35f;
  273. transform:rotate(-3deg);
  274. }
  275.  
  276. #bottomarea {
  277. position:absolute;
  278. z-index:5;
  279. left:0;
  280. bottom:20px;
  281. width:405px;
  282. height:140px;
  283. background:#fafafa;
  284. border-top:1px solid #ddd;
  285. }
  286.  
  287. #maintitle {
  288. position:absolute;
  289. left:40px;
  290. top:35px;
  291. width:330px;
  292. height:45px;
  293. color:#ee83bd;
  294. font-family:bebas_neue;
  295. font-size:39px;
  296. font-weight:bold;
  297. line-height:45px;
  298. letter-spacing:2px;
  299. text-transform: uppercase;
  300. z-index: 100000;
  301. }
  302.  
  303. @font-face { font-family: "bebas_neue"; src: url('https://dl.dropboxusercontent.com/s/scbj3da4dz3dfmf/BebasNeue.otf?dl=1'); format(“truetype”);}
  304.  
  305.  
  306. #bottomsubtitle {
  307. position:absolute;
  308. left:42px;
  309. top:82px;
  310. width:300px;
  311. height:14px;
  312. color:#cadf84;
  313. font-size:9px;
  314. font-weight:bold;
  315. letter-spacing:.5px;
  316. }
  317.  
  318. #year {
  319. position:absolute;
  320. left:40px;
  321. bottom:20px;
  322. width:100px;
  323. height:15px;
  324. color:#cadf84;
  325. font-size:9px;
  326. font-weight:bold;
  327. letter-spacing:2px;
  328. }
  329.  
  330. #credittext {
  331. position:absolute;
  332. right:35px;
  333. bottom:20px;
  334. width:145px;
  335. height:15px;
  336. color:#cadf84;
  337. font-size:8px;
  338. font-weight:bold;
  339. letter-spacing:1px;
  340. text-align:right;
  341. }
  342.  
  343. #bottomnav {
  344. position:absolute;
  345. z-index:20;
  346. left:0;
  347. bottom:0;
  348. width:405px;
  349. height:20px;
  350. background:#d8ed99;
  351. line-height:20px;
  352. text-align:center;
  353. }
  354.  
  355. #bottomnav a {
  356. display:inline-block;
  357. width:85px;
  358. height:20px;
  359. margin:0 4px;
  360. color:#e37bb5!important;
  361. font-size:9px;
  362. font-weight:bold;
  363. text-align:center;
  364. }
  365.  
  366. #bottomnav a:hover {
  367. color:#fff!important;
  368. }
  369.  
  370. #rightbar {
  371. position:absolute;
  372. z-index:8;
  373. left:405px;
  374. top:0;
  375. width:45px;
  376. height:560px;
  377. background:#fafafa;
  378. border-left:1px solid #f3f1f1;
  379. border-right:45px solid #f3f1f1;
  380. }
  381.  
  382. #verticaltext {
  383. position:absolute;
  384. left:-128px;
  385. top:180px;
  386. width:290px;
  387. height:15px;
  388. color:#ed7ab7;
  389. font-size:8px;
  390. font-weight:bold;
  391. letter-spacing:1px;
  392. text-align:center;
  393. transform:rotate(90deg);
  394. }
  395.  
  396. #heartbutton {
  397. position:absolute;
  398. left:0;
  399. top:380px;
  400. width:45px;
  401. height:28px;
  402. background:#d8ed99;
  403. color:#b9d376;
  404. font-size:15px;
  405. line-height:28px;
  406. text-align:center;
  407. }
  408.  
  409. #sidedots {
  410. position:absolute;
  411. left:17px;
  412. top:415px;
  413. width:10px;
  414. height:110px;
  415. color: #ddd;
  416. font-size: 17px;
  417.  
  418. }
  419.  
  420. #sidedots span {
  421. display:block;
  422. width:7px;
  423. height:7px;
  424. margin-bottom:17px;
  425. border:1px solid #aaa;
  426. border-radius:100%;
  427. background:#fafafa;
  428. }
  429.  
  430. h1,h2,h3,
  431. #xg_head,
  432. #xg_foot,
  433. #xg_layout_column_1,
  434. .xg_module.xg_module_comment_wall,
  435. .xg_span-5,
  436. ul.nobullets.last-child,
  437. .xg_chat.chatFooter,
  438. li.right,
  439. #xn_bar,
  440. #xn_bar_menu_tabs,
  441. #xn_bar_menu_more,
  442. p#xn_gyo_link,
  443. p#xn_brand {
  444. display:none!important;
  445. }
Advertisement
Add Comment
Please, Sign In to add comment