API tools faq
paste
Advertisement
Demi-monde

<style> Section - Kalix

Demi-monde
Oct 27th, 2019
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.87 KB | None | 0 0
raw download clone embed print report
  1. @import url(https://fonts.googleapis.com/css?family=Questrial|Roboto:300,400,400i,700,700i);
  2.  
  3.  
  4. @font-face { font-family: "dalmatins"; src: url('https://dl.dropboxusercontent.com/s/vt2bux883emjhf3/Dalmatins.otf') ;}
  5.  
  6.  
  7. @font-face { font-family: "ahattom"; src: url('https://dl.dropboxusercontent.com/s/c8o0nru9ah0j9mk/Ahattom%20Demo.otf?dl=0'); format("truetype");}
  8.  
  9.  
  10.  
  11. /*----------scrollbar---------*/
  12.  
  13. ::-webkit-scrollbar-thumb {
  14. height:auto;
  15. background-color:transparent;
  16. border-radius:0px;
  17. }
  18. ::-webkit-scrollbar {
  19. height:0px;
  20. width:0px;
  21. background-color: transparent;
  22. border-radius:0px;
  23. }
  24.  
  25. /*----------basics---------*/
  26.  
  27. body {
  28. background:#282727;
  29. color:#d4d4d4;
  30. font-family:'Roboto';
  31. line-height:15px;
  32. font-size:12px;
  33. margin:0;
  34. text-align:left;
  35. width:100%;
  36. height: 100%;
  37. overflow:hidden;}
  38.  
  39.  
  40. a {
  41. color:#f3f3f3;
  42. text-decoration:none;
  43. }
  44.  
  45. a:hover {
  46. text-decoration:none;
  47. color: #dfdfdf;
  48. -webkit-transition:all 0.5s;
  49. -moz-transition:all 0.5s;
  50. -ms-transition:all 0.5s;
  51. -o-transition:all 0.5s;
  52. transition:all 0.5s;
  53. }
  54.  
  55. b, strong {
  56. color:#f3f3f3;
  57. }
  58.  
  59. i, em {
  60. color:beige;
  61. }
  62.  
  63. img {
  64. opacity:1;
  65. text-decoration:none;
  66. }
  67.  
  68. h1 {
  69. font-family: 'otella'
  70. text-align:center;
  71. text-transform:lowercase;
  72. letter-spacing:2px;
  73. font-size:20px;
  74. color:#dfdfdf;
  75. line-height:100%;
  76. margin-top: 3px;}
  77.  
  78. h2 {
  79. font-family:'dalmatins';
  80. text-align:center;
  81. text-transform:lowercase;
  82. letter-spacing:2px;
  83. font-size:22px;
  84. color:#f3f3f3;
  85. line-height:120%;
  86. }
  87.  
  88. small, sub {
  89. font-size:12px;
  90. }
  91.  
  92.  
  93. /*----------posts---------*/
  94.  
  95. .content {
  96. left:50%;
  97. width:800px;
  98. position:absolute;
  99. }
  100.  
  101. .container {
  102. background-color:#151515;
  103. background-position:center;
  104. left:50%;
  105. margin-left:-350px;
  106. width:700px;
  107. top:50%;
  108. margin-top:-275px;
  109. height:550px;
  110. position:fixed;
  111. border-radius:6px;
  112. z-index:99;
  113. }
  114.  
  115.  
  116. /*----------sidebar---------*/
  117.  
  118. .sidebar {
  119. background-color:#1d1d1d;
  120. position:fixed;
  121. width:200px;
  122. height:550px;
  123. z-index:999;
  124. border-radius:0px;
  125. }
  126.  
  127. .sidebarimg {
  128. height:400px;
  129. width:200px;
  130. background-image:url(https://vignette.wikia.nocookie.net/spartacus/images/2/2b/Gannicus-dustin-clare-29285855-1200-1800.jpg/revision/latest?cb=20130717162623);
  131. opacity: 0.6;
  132. background-position: center center;
  133. background-size:cover;
  134. position:fixed;
  135. z-index:99;
  136. border-radius:0px;
  137. filter: grayscale(60%);
  138. -webkit-transition: background 1s;
  139. -moz-transition: background 1s;
  140. -o-transition: background 1s;
  141. transition: background 1s;}
  142.  
  143. .sidebarimg:hover {
  144. height:400px;
  145. width:200px;
  146. background-image:url(https://m.media-amazon.com/images/M/MV5BMTMzNjA0NDk2N15BMl5BanBnXkFtZTcwNTQ3MjU0Nw@@._V1_UY1200_CR85,0,630,1200_AL_.jpg);
  147. opacity: 0.6;
  148. background-position: center center;
  149. background-size:cover;
  150. position:fixed;
  151. z-index:99;
  152. border-radius:0px;
  153. -webkit-transition: background 1s;
  154. -moz-transition: background 1s;
  155. -o-transition: background 1s;
  156. transition: background 1s;}
  157.  
  158.  
  159. .title {
  160. font-family: "ahattom";
  161. font-size:70px;
  162. text-transform:lowercase;
  163. font-weight:bold;
  164. margin-top:350px;
  165. margin-left:0px;
  166. text-align:center;
  167. color:#1fefefe;
  168. z-index:999999999999999999999999999999999999999999;
  169. line-height:80%;
  170. position:fixed;
  171. width:200px;
  172. transform: rotate(0deg);
  173. }
  174.  
  175.  
  176.  
  177. .links {
  178. width:175px;
  179. font-family:'Questrial';
  180. display:inline-block;
  181. height:120px;
  182. margin-left:15px;
  183. letter-spacing: 0.5px;
  184. margin-top:410px;
  185. position:absolute;
  186. text-align: left;
  187. z-index:99999999999999999999999999;
  188. font-size:11px;
  189. text-transform:lowercase;
  190. font-weight:bold;
  191. line-height:100%;
  192. color:#867b69;
  193. overflow: auto;}
  194.  
  195. .block {
  196. top:50%;left:50%;
  197. transform: translate(-50%, -50%);
  198. background:#151515;
  199. position:absolute;
  200. z-index:99;
  201. margin-left:0px;
  202. height:550px;
  203. }
  204.  
  205.  
  206. .desc {
  207. width:230px;
  208. height:320px;
  209. border-radius:0px;
  210. background-color:rgba(134, 123, 105, 0.4);
  211. overflow-y:scroll;
  212. margin-top:25px;
  213. margin-left:0px;
  214. padding:10px;
  215. z-index:99;
  216. line-height:200%;
  217. letter-spacing:1px;
  218. font-size:11px;
  219. text-align:justify;
  220. position: relative;}
  221.  
  222. h3
  223. {
  224. font-family: "dalmatins";
  225. text-align:center;
  226. text-transform:lowercase;
  227. letter-spacing:2px;
  228. font-size:40px;
  229. color:#f3f3f3;
  230. margin-top:0px;
  231. width:320px;
  232. position: fixed;
  233. transform: rotate(-5deg);
  234. margin-left: -20px;}
  235.  
  236. .navcolorbg {
  237. background-color:#151515;
  238. height:150px;
  239. width:305px;
  240. margin-left:-30px;
  241. margin-top:35px;
  242. border-radius:0px;
  243. background-image: url('https://66.media.tumblr.com/20c1ebd480743193ef14c303feef08a0/tumblr_opusl4Dvly1r1yvlro3_400.gif');
  244. background-size: cover;
  245. z-index:9999;
  246. position: fixed;
  247. opacity: .4;
  248. -webkit-transition: background 1s;
  249. -moz-transition: background 1s;
  250. -o-transition: background 1s;
  251. transition: background 1s;}
  252.  
  253.  
  254. .navcolorbg:hover {
  255. background-color:#151515;
  256. height:150px;
  257. width:305px;
  258. margin-left:-30px;
  259. margin-top:35px;
  260. border-radius:0px;
  261. background-image: url('https://66.media.tumblr.com/tumblr_lh82j2M8vV1qdnmgfo1_500.gif');
  262. background-size: cover;
  263. z-index:9999;
  264. position: fixed;
  265. opacity: .4;
  266. -webkit-transition: background 1s;
  267. -moz-transition: background 1s;
  268. -o-transition: background 1s;
  269. transition: background 1s;}
  270.  
  271.  
  272. .navlinks {
  273. height:150px;
  274. width:300px;
  275. margin-left:150px;
  276. background-color:#151515;}
  277.  
  278. .linksnav {
  279. width:180px;
  280. font-family:'Questrial';
  281. display:inline-block;
  282. height:130px;
  283. margin-left:285px;
  284. letter-spacing: 0.5px;
  285. margin-top:45px;
  286. position:absolute;
  287. text-align: justify;
  288. z-index:99999999999999999999;
  289. font-size:11px;
  290. text-transform:lowercase;
  291. font-weight:bold;
  292. line-height:100%;
  293. color:#867b69;
  294. overflow:auto;}
  295.  
  296. .navtitle {
  297. font-family: "ahattom";
  298. font-size:90px;
  299. line-height:34px;
  300. text-align:center;
  301. text-shadow:0px 0px 5px #000;
  302. opacity:.8;
  303. font-weight:600;
  304. font-style:normal;
  305. margin-top:130px;
  306. margin-left:80px;
  307. text-align:center;
  308. color: #867b69;
  309. z-index:9999999999999999999999999999999999999999999999999999999;
  310. line-height:80%;
  311. position:fixed;
  312. width:250px;
  313. transform: rotate(-10deg);
  314. }
  315.  
  316. .navsubtitle {
  317. font-family:'Questrial';
  318. text-align:center;
  319. color:#867b69;
  320. font-size:12px;
  321. text-transform:uppercase;
  322. font-weight:bold;
  323. width:180px;
  324. position:fixed;
  325. margin-top:-10px;
  326. z-index:9999999999999999;
  327. letter-spacing:2px;
  328. }
  329.  
  330. .navimg {
  331. width:200px;
  332. height:400px;
  333. background-image:url(http://images4.fanpop.com/image/photos/23300000/Gannicus-gannicus-23370017-600-900.jpg);
  334. opacity: 0.4;
  335. background-size:cover;
  336. background-position:center center;
  337. position:absolute;
  338. z-index:99;
  339. border-radius:0px;
  340. margin-left:275px;
  341. -webkit-transition: background 1s;
  342. -moz-transition: background 1s;
  343. -o-transition: background 1s;
  344. transition: background 1s;}
  345.  
  346.  
  347. .navimg:hover {
  348. width:200px;
  349. height:400px;
  350. background-image:url(https://i.pinimg.com/originals/c7/89/cd/c789cd2c9caa12b92b7950cf457e4f57.jpg);
  351. opacity: 0.4;
  352. background-size:cover;
  353. background-position:center center;
  354. position:absolute;
  355. z-index:99;
  356. border-radius:0px;
  357. margin-left:275px;
  358. -webkit-transition: background 1s;
  359. -moz-transition: background 1s;
  360. -o-transition: background 1s;
  361. transition: background 1s;}
  362.  
  363. #glenplayer02 {
  364. position:absolute;
  365. TOP:320;margin-left:5px;
  366. left:40;margin-TOP:50px;
  367. display:flex;
  368. z-index:99;
  369. background: #151515 ;
  370. z-index:999999999999999999999;}
  371.  
  372. #glenplayer02 a {text-decoration:none;}
  373.  
  374. #glenplayer02 > div {
  375. align-self:center;
  376. -webkit-align-self:center;
  377. }
  378.  
  379. .music-controls {
  380. user-select:none;
  381. -webkit-user-select:none;
  382. cursor:pointer;
  383. }
  384.  
  385. .playy, .pausee {color:#d0afa8;} /* color of play & pause buttons */
  386.  
  387. .playy {font-size:12px;}
  388.  
  389. .pausee {
  390. display:none;
  391. margin-right:1.5px;
  392. }
  393.  
  394. .sonata {
  395. margin-left:10px;
  396. color:#b82f41; /* color of music note symbol */
  397. }
  398.  
  399. .labeltext {
  400. margin-left:8px;
  401. padding: 5px;
  402. border: 1px solid #000;
  403. font-family:'Roboto';
  404. font-size:10px;
  405. color:#d0afa8; /* color of song title */
  406. }
  407.  
  408. .labeltext:hover {
  409. margin-left:8px;
  410. background:;
  411. padding: 5px;
  412. border: 1px solid #000;
  413. font-family:'Roboto';
  414. font-size:10px;
  415. color:#fff; /* color of song title */}
  416.  
  417. .friend {
  418. margin:8px;
  419. width:100%;
  420. height:50px;
  421. border-radius:0%;
  422. border:2px solid #ffe0e3;
  423. display:inline-block;
  424. cursor:pointer;
  425. -webkit-transition: all 0.15s ease-in-out;
  426. -moz-transition: all 0.15s ease-in-out;
  427. -o-transition: all 0.15s ease-in-out;
  428. -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  429. filter: grayscale(100%);}
  430.  
  431. .friend:hover {transform:scale(1.1,1.1);
  432. -webkit-transition: all 0.15s ease-in-out;
  433. -moz-transition: all 0.15s ease-in-out;
  434. -o-transition: all 0.15s ease-in-out;
  435. border:1px solid #fff;
  436. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  437. filter: grayscale(0%);}
  438.  
  439.  
  440.  
  441. #profile{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}
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!