API tools faq
paste
Advertisement
AndreazziMatheus

BleachNumberOneTemplate

AndreazziMatheus
Jan 5th, 2025
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.25 KB | Source Code | 0 0
raw download clone embed print report
  1. @font-face {
  2.   font-family: 'Inter';
  3.   font-style: normal;
  4.   font-weight: 300;
  5.   src: url(https://fonts.gstatic.com/s/inter/v8/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  6.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  7. }
  8. @font-face {
  9.   font-family: 'Inter';
  10.   font-style: normal;
  11.   font-weight: 800;
  12.   src: url(https://fonts.gstatic.com/s/inter/v8/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  13.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  14. }
  15. @font-face {
  16.   font-family: 'Roboto Mono';
  17.   font-style: normal;
  18.   font-weight: 200;
  19.   font-display: swap;
  20.   src: url(https://fonts.gstatic.com/s/robotomono/v13/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_Xvq_ROW4.woff2) format('woff2');
  21.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  22. }
  23. @font-face {
  24.   font-family: 'Hind';
  25.   font-style: normal;
  26.   font-weight: 300;
  27.   font-display: swap;
  28.   src: url(https://fonts.gstatic.com/s/hind/v15/5aU19_a8oxmIfMJaERySjQ.woff2) format('woff2');
  29.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  30. }
  31. @font-face {
  32.   font-family: 'Hind';
  33.   font-style: normal;
  34.   font-weight: 600;
  35.   font-display: swap;
  36.   src: url(https://fonts.gstatic.com/s/hind/v15/5aU19_a8oxmIfLZcERySjQ.woff2) format('woff2');
  37.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  38. }
  39.  
  40. #magnus {width: 700px; background-color: #1e1e1e; border: solid 1px rgba(130,130,130,.1); margin: 35px auto; position: relative;padding: 40px; box-sizing: border-box; color: #ddd;display: grid; grid-template-rows: auto auto auto;}
  41. #magnus br {display:none;}
  42.  
  43. #magnus .cont {text-align: justify; padding: 50px; font: 200 14px Hind; line-height: 25px;border: solid 1px rgba(130,130,130,.1); border-top: 0px; border-bottom: 0px;}
  44. #magnus .cont b {color:var(--accent1);}
  45. #magnus .cont br, #magnus .histórico label div br {display:block;}
  46.  
  47. #magnus .barra {display: flex; align-items: center; text-transform: uppercase; position: relative; overflow: hidden; grid-row: 1; background: rgba(35,35,35,.4); padding: 10px; box-sizing: border-box;gap:10px;border: solid 1px rgba(130,130,130,.1);border-bottom:0px;justify-content: space-between;}
  48. #magnus .barra i {display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; padding: 5px; background: var(--accent1); border-radius: 10px; font-size: 1rem; border: solid 1px rgba(130,130,130,.15); color: #fff;}
  49. #magnus .barra h1 { font: 600 10px Roboto Mono; text-transform: uppercase; margin: 0px;display: flex; align-items: center; gap: 10px;}
  50. #magnus .barra numeropost { font: 600 10px Roboto Mono; text-transform: uppercase; }
  51.  
  52. #magnus .topo { width: 100%; height: 220px; border: solid 1px rgba(130,130,130,.1); display: flex; align-items: center; justify-content: center; }
  53. #magnus .topo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.4) brightness(1.2); mix-blend-mode: multiply; opacity: 0.6; }
  54. #magnus .topo i {position: absolute; font-size: 2rem; width: 50px; height: 50px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 100%;}
  55.  
  56. #magnus .histórico { width: 100%; height: 220px; border: solid 1px rgba(130,130,130,.1); display: flex; align-items: flex-start; justify-content: center; flex-direction: column;position:relative;}
  57.  
  58. #magnus .histórico label { height: 100%; }
  59. #magnus .histórico input {display:none;}
  60.  
  61. #magnus .histórico label i { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-transform: uppercase; width: 200px; border-right: solid 1px rgba(130,130,130,.1); border-bottom: solid 1px rgba(130,130,130,.1); position: relative; height: 100%; background: rgba(35,35,35,.4);cursor: pointer;padding-left: 20px; box-sizing: border-box;}
  62. #magnus .histórico label input:checked ~ i {background: linear-gradient(45deg, var(--accent1) -800%, transparent);}
  63. #magnus .histórico label i:after {content:attr(data-title);   font: 900 10px Inter;}
  64.  
  65. #magnus .histórico label div {position: absolute; right: 0; top: 0; height: 100%; background: rgba(35,35,35,.4); padding: 20px; box-sizing: border-box; width: calc(100% - 200px); opacity: 0; z-index: 1;overflow:auto;font:200 13px Hind;}
  66. #magnus .histórico label input:checked ~ div {opacity:1;z-index:2}
  67.  
  68. -------
  69.  
  70. #magnus .histórico2 { width: 100%; height: 220px; border: solid 1px rgba(130,130,130,.1); display: flex; align-items: flex-start; justify-content: center; flex-direction: column;position:relative;}
  71.  
  72. #magnus .histórico2 label { height: 100%; }
  73. #magnus .histórico2 input {display:none;}
  74.  
  75. #magnus .histórico2 label i { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-transform: uppercase; width: 200px; border-right: solid 1px rgba(130,130,130,.1); border-bottom: solid 1px rgba(130,130,130,.1); position: relative; height: 100%; background: rgba(35,35,35,.4);cursor: pointer;padding-left: 20px; box-sizing: border-box;}
  76. #magnus .histórico2 label input:checked ~ i {background: linear-gradient(45deg, var(--accent1) -800%, transparent);}
  77. #magnus .histórico2 label i:after {content:attr(data-title);   font: 900 10px Inter;}
  78.  
  79. #magnus .histórico2 label div {position: absolute; right: 0; top: 0; height: 100%; background: rgba(35,35,35,.4); padding: 20px; box-sizing: border-box; width: calc(100% - 200px); opacity: 0; z-index: 1;overflow:hiden;font:200 13px Hind;}
  80. #magnus .histórico2 label input:checked ~ div {opacity:1;z-index:2}
  81.  
  82. div[data-title="Dados"]:after { content: "\f577"; font-family: "Font Awesome 5 Pro"; font-size: 5rem; position: absolute; bottom: -17px; transform: rotate(-29deg); right: -13px; color: var(--accent2); }
  83. div[data-title="Status"]:after { content: "\f5d4"; font-family: "Font Awesome 5 Pro"; font-size: 5rem; position: absolute; bottom: -7px; transform: rotate(-30deg); right: -5px; color: var(--accent2); }
  84. div[data-title="Relacionamentos"]:after { content: "\f0c0"; font-family: "Font Awesome 5 Pro"; font-size: 5rem; position: absolute; bottom: -15px; transform: rotate(-10deg); right: -5px; color: var(--accent2); }
  85. #magnus .histórico label div:before {content:attr(data-title);display:block;font:800 15px inter;Text-transform:uppercase;margin-bottom:10px;}
  86.  
  87. #magnus video { width: 100%; height: 50px;background: rgba(35,35,35,.4);border: solid 1px rgba(130,130,130,.1); }
  88. #magnus video::-webkit-media-controls-timeline, #magnus video::-webkit-media-controls-fullscreen-button {display:none;}
  89. #magnus video::-webkit-media-controls-panel {background: rgb(35 35 35 / 100%);}
  90. #magnus:after{
  91.     content: "AURUM IS THE WAY";
  92.     color: #fff;
  93.     font: 600 8px Hind;
  94.     text-transform: uppercase;
  95.     position: absolute;
  96.     bottom: -15px;
  97.     width: -webkit-fill-available;
  98.     text-align: center;
  99. }
  100.  
Tags: CSS
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!