API tools faq
paste
Advertisement
Demi-monde

HaweStyle

Demi-monde
Aug 27th, 2019
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.12 KB | None | 0 0
raw download clone embed print report
  1. /*----------------------------- FONTS ------------------------------- */
  2.  
  3. @font-face { font-family: "frontage outline"; src: url('https://dl.dropboxusercontent.com/s/452n0o323kateo7/Frontage-Outline.otf?dl=0'); format("opentype");}
  4. @font-face { font-family: "jenna sue"; src: url('https://dl.dropboxusercontent.com/s/bsju94guldr45k8/JennaSue.ttf?dl=0'); format("truetype");}
  5.  
  6.  
  7. /* ---------------------------- GENERAL ----------------------------- */
  8.  
  9. /* -------- SELECTION TOOL ------- */
  10.  
  11. ::-moz-selection {
  12. background: #000000;
  13. color: #ffffff;
  14. }
  15.  
  16. ::selection {
  17. background: #000000;
  18. color: #ffffff;
  19. }
  20.  
  21. /* -------- SCROLLBAR ------- */
  22.  
  23. ::-webkit-scrollbar {
  24. width: 0px;
  25. }
  26.  
  27. /* Track */
  28. ::-webkit-scrollbar-track {
  29. background:#ffffff;
  30. }
  31.  
  32. /* Handle */
  33. ::-webkit-scrollbar-thumb {
  34. background:#000000;
  35. }
  36. ::-webkit-scrollbar-thumb:window-inactive {
  37. background: transparent;
  38. }
  39.  
  40.  
  41. /* -------- BASICS ------- */
  42.  
  43. body {
  44. background:#121212 url();
  45. color: #eee;
  46. font-family:'work sans';
  47. font-size: 11px;
  48. margin: 0;
  49. padding: 0;
  50. word-wrap: break-word;
  51. line-height:150%;
  52. }
  53.  
  54. a {
  55. color:#5C89BC;
  56. text-decoration: none;
  57. -webkit-transition: all .3s;
  58. -moz-transition: all .3s;
  59. -o-transition: all .3s;
  60. -ms-transition: all .3s;
  61. transition: all .3s;
  62. }
  63.  
  64. a:hover{
  65. color:#a0a0a0;
  66. -webkit-transition: all .3s;
  67. -moz-transition: all .3s;
  68. -o-transition: all .3s;
  69. -ms-transition: all .3s;
  70. transition: all .3s;
  71. }
  72.  
  73. b, strong {
  74. color:#5C89BC;
  75. }
  76.  
  77.  
  78.  
  79. p{
  80. margin-bottom:10px;
  81. }
  82.  
  83. small, sub, sup {
  84. font-size:10px;
  85. }
  86.  
  87. ul{
  88. list-style-type:square;
  89. }
  90.  
  91. ol{
  92. list-style-type:;
  93. }
  94.  
  95. h1, h1 a {
  96. font-family:'frontage outline';
  97. text-align:center;
  98. font-size:32px;
  99. letter-spacing:5px;
  100. text-transform:uppercase;
  101. color:#5C89BC;
  102. line-height:120%;
  103. }
  104.  
  105. h2 {
  106. font-family:'frontage outline';
  107. color:#5C89BC;
  108. text-align:center;
  109. font-size:22px;
  110. letter-spacing:5px;
  111. text-transform:uppercase;
  112. line-height:120%;
  113. }
  114.  
  115. h5 {
  116. font-family:'frontage outline';
  117. text-transform:uppercase;
  118. font-weight:bold;
  119. padding:5px;
  120. font-size:40px;
  121. color:#5C89BC;
  122. text-align:center;
  123. width:220px;
  124. line-height:35px;
  125. margin-top:0px;
  126. letter-spacing:2px;
  127. border-bottom:solid 2px #5C89BC;
  128. max-height:50px;
  129. margin-left: -5px;
  130. overflow:hidden;
  131. }
  132.  
  133. h6 {
  134. float:right;
  135. margin-top:-350px;
  136. margin-right:10px;
  137. text-transform:uppercase;
  138. font-size:20px;
  139. font-family:'frontage outline';
  140. line-height:150%;
  141. background: -webkit-linear-gradient(20deg, , );
  142. -webkit-background-clip: text;
  143. -webkit-text-fill-color: transparent;
  144. width:190px;
  145. }
  146.  
  147. #bigcon{
  148. width:420px;
  149. margin-left:auto;
  150. margin-right:auto;
  151. }
  152.  
  153. .tabcontent {
  154. position:absolute;
  155. margin-left:auto;
  156. margin-right:auto;
  157. width: 460px;
  158. text-align:center;
  159. margin-bottom:0px;
  160. height:430px;
  161. overflow-y:hidden;
  162. left:50%;
  163. margin-left:-180px;
  164. top:50%;
  165. margin-top:-210px;
  166. padding:10px;
  167. border:solid 2px #5C89BC;
  168. }
  169.  
  170. /* ----------------------------- HEADER STUFF ---------------------------*/
  171.  
  172. #sidebar {
  173. background-color:#171717;
  174. position:fixed;
  175. width:200px;
  176. height:435px;
  177. margin-bottom:50px;
  178. text-align:center;
  179. margin-left:0px;
  180. top:50%;
  181. margin-top:-210px;
  182. left:50%;
  183. margin-left:-400px;
  184. padding:10px;
  185. border-radius:0px;
  186. z-index: -1px;
  187. }
  188.  
  189.  
  190. /* ----------------------------- SIDEBAR IMAGE ---------------------------*/
  191.  
  192. #sidebarimg {
  193. width:190px;
  194. height:90px;
  195. border-radius:0px;
  196. border:solid 2px #5C89BC;
  197. padding:5px;
  198. margin-top: -10px;
  199.  
  200. background-image: url('https://media0.giphy.com/media/mwFSaDJN7cO6k/giphy.gif');/* ----------------------------- change image here ---------------------------*/
  201.  
  202. background-size:cover;
  203. opacity: 0.5;}
  204.  
  205.  
  206. .blogtitle {
  207. margin-bottom:0px;
  208. margin-top:-20px;
  209. margin-left: -160px;
  210. width: 500px;
  211. position: relative;
  212. height:35px;
  213. font-family:'jenna sue';
  214. padding:5px;
  215. font-size:70px;
  216. line-height: 25px;
  217. letter-spacing: 2px;
  218. color:#5C89BC;
  219. text-transform:uppercase;
  220. }
  221.  
  222. .subtitle {
  223. position: absolute;
  224. margin-top:-75px;
  225. background-color:#171717;
  226. border-radius:0px;
  227. padding: 15px;
  228. width:185px;
  229. left:50%;
  230. top:50%;
  231. margin-left:-400px;
  232. z-index: ;}
  233.  
  234.  
  235.  
  236. .description{
  237. margin-top:40px;
  238. height:225px;
  239. width: 190px;
  240. overflow-y:scroll;
  241. font-size:11px;
  242. background-color:#121212;
  243. padding:8px;
  244. border-radius:0px;
  245. color:#a6a6a6;
  246. line-height:1.6;
  247. text-align: justify;
  248. letter-spacing:1px;
  249. margin-left: -5px;
  250. border:solid 1px #5C89BC;}
  251.  
  252.  
  253. /* ------------------------------ TABS ------------------------------ */
  254.  
  255. .tabs {
  256. width:100%;
  257. margin-left:0px;
  258. display:inline-block;
  259. }
  260.  
  261. /*----- Tab Links -----*/
  262.  
  263. /* Clearfix */
  264. .tab-links:after {
  265. display:block;
  266. clear:both;
  267. content:'';
  268. }
  269.  
  270. .tab-links {
  271. z-index:9999999999;
  272. margin-top:5px;
  273. }
  274. .tab-links li {
  275. margin-right:3px;
  276. display:inline-block;
  277. list-style:none;
  278. text-transform:uppercase;
  279. margin-bottom:0px;
  280. }
  281.  
  282. .tab-links a {
  283. padding:5px;
  284. display:inline-block;
  285. color:#5C89BC;
  286. border:1px solid #5C89BC;
  287. font-weight:bold;
  288. font-size:15px;
  289. font-family:'frontage outline';
  290. border-radius:0px;
  291. margin-top:5px;}
  292.  
  293. .tab-links a:hover {
  294. color: #fff;
  295. text-decoration:uppercase;
  296. -webkit-transition: all 1s;
  297. -moz-transition: all 1s;
  298. -o-transition: all 1s;
  299. -ms-transition: all 1s;
  300. transition: all 1s;
  301. }
  302.  
  303. li.active a, li.active a:hover {
  304. color:#fff;
  305. -webkit-transition: all 1s;
  306. -moz-transition: all 1s;
  307. -o-transition: all 1s;
  308. -ms-transition: all 1s;
  309. transition: all 1s;
  310. }
  311.  
  312. /*----- Content of Tabs -----*/
  313. .tab-content {
  314. }
  315.  
  316. .tab {
  317. display:none;
  318. }
  319.  
  320. .tab.active {
  321. display:block;
  322. }
  323.  
  324.  
  325. .aboutme {
  326. width:200px;
  327. height:240px;
  328. overflow-y:scroll;
  329. background-color:#121212;
  330. padding:10px;
  331. border-radius:0px;
  332. font-size:11px;
  333. z-index:999;
  334. top:50%;
  335. margin-top:-5px;
  336. font-size:10px;
  337. line-height:1.5;
  338. letter-spacing:1px;
  339. margin-left: -2px;
  340. text-align: justify;
  341. border:solid 2px #5C89BC;}
  342.  
  343. .aboutpic {
  344. width:220px;
  345. float:right;
  346. }
  347.  
  348. /* ----------------------------- RIGHT SIDE IMAGE ---------------------------*/
  349. .aboutpicimg {
  350. width:220px;
  351. height:425px;
  352. border-radius:0px;
  353.  
  354. top:50%;
  355. margin-top:-5px;
  356. margin-left:-10px;
  357. border:solid 2px #5C89BC;
  358. padding:5px;
  359. /* ----------------------------- CHANGEURL BELOW ---------------------------*/
  360. background-image: url('https://data.whicdn.com/images/320299887/large.jpg');
  361.  
  362. background-size:cover;
  363. background-attachment:absolute;
  364. opacity: 0.5;}
  365.  
  366. /* ----------------------------- WOLF IMAGE---------------------------*/
  367. .aboutme2 {
  368. width:210px;
  369. height:105px;
  370. border-radius:0px;
  371. margin-left: -2px;
  372. border:solid 2px #5C89BC;
  373. padding:5px;
  374. background-color:#222;
  375. z-index:999;
  376. top:50%;
  377. margin-top:100px;
  378. position: absolute;
  379. /* ----------------------------- CHANGE IMAGE BELOW ---------------------------*/
  380. background-image: url('https://i.pinimg.com/736x/64/a4/3b/64a43bf0d2aeb0905250cceba0dd8b35--grey-wolves-photos-of.jpg');
  381. background-size:cover;
  382. opacity: 0.5;}
  383.  
  384. /* ---------------------------- MUSES ------------------------- */
  385.  
  386. .muse {
  387. width:90px;
  388. height:90px;
  389. display:inline-block;
  390. padding:5px;
  391. margin:5px;
  392. background:#ffffff;
  393. border-radius:5px;
  394. }
  395.  
  396. .muse img {
  397. width:80px;
  398. height:80px;
  399. border-radius:100px;
  400. border:solid 2px #5C89BC;
  401. padding:5px;
  402. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  403. filter: grayscale(0%);
  404. -webkit-transition: all 0.5s ease-in-out;
  405. -moz-transition: all 0.5s ease-in-out;
  406. -o-transition: all 0.5s ease-in-out;
  407. -ms-transition: all 0.5s ease-in-out;
  408. transition: all 0.5s ease-in-out;
  409. }
  410.  
  411. .muse img:hover {
  412. -ms-transform: rotate(-7deg); /* IE 9 */
  413. -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  414. transform: rotate(-7deg);
  415. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  416. filter: grayscale(0%);
  417. -webkit-transition: all 0.5s ease-in-out;
  418. -moz-transition: all 0.5s ease-in-out;
  419. -o-transition: all 0.5s ease-in-out;
  420. -ms-transition: all 0.5s ease-in-out;
  421. transition: all 0.5s ease-in-out;
  422. }
  423.  
  424. h4 {
  425. font-family:'frontage outline';
  426. padding:5px;
  427. font-size:18px;
  428. margin-top:-10px;
  429. margin-bottom: -5px;
  430. z-index:99999999999999999;
  431. color:#5C89BC;
  432. text-transform:uppercase;
  433. }
  434.  
  435.  
  436.  
  437.  
  438. /* QUOTES */
  439.  
  440. .quote{
  441. font-family:'work sans';
  442. text-align:center;
  443. font-size:20px;
  444. line-height:110%;
  445. }
  446.  
  447. .quotesource{
  448. text-align:center;
  449. margin-bottom:15px;
  450. margin-top:15px;
  451. }
  452.  
  453.  
  454. #glenplayer02 {
  455. position:absolute;
  456. top:0;margin-top:5px;
  457. left:20px;margin-right:10px;
  458. display:flex;
  459. z-index:99; }
  460.  
  461.  
  462. #glenplayer02 a {text-decoration:none;}
  463.  
  464. #glenplayer02 > div {
  465. align-self:center;
  466. -webkit-align-self:center;
  467. }
  468.  
  469. .music-controls {
  470. user-select:none;
  471. -webkit-user-select:none;
  472. cursor:pointer;
  473. }
  474.  
  475. .playy, .pausee {color:#888;} /* color of play & pause buttons */
  476.  
  477. .playy {font-size:13px;}
  478.  
  479. .pausee {
  480. display:none;
  481. margin-right:1.5px;
  482. }
  483.  
  484. .sonata {
  485. margin-left:10px;
  486. color:#fff; /* color of music note symbol */
  487. }
  488.  
  489. .labeltext {
  490. margin-left:25px;
  491. padding: 2px;
  492. border: 0px solid #222;
  493. font-family:'Work Sans';
  494. font-size:12px;
  495. color:#eee; /* color of song title */
  496. }
  497.  
  498. .labeltext:hover {
  499. margin-left:25px;
  500. background:#888;
  501. padding: 2px;
  502. border: 1px solid #888;
  503. font-family:'Work Sans';
  504. font-size:12px;
  505. color:#fff; /* color of song title */}
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!