API tools faq
paste
Advertisement
Guest User

template

a guest
May 21st, 2019
101
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.75 KB | None | 0 0
raw download clone embed print report
  1. [dohtml]
  2. <link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" rel="stylesheet">
  3. <style>
  4. #liv-rules {width: 250px; background: background: #ea2e4e;
  5. background: -moz-linear-gradient(-45deg, #ea2e4e 0%, #ea3a63 50%, #dd77a0 100%);
  6. background: -webkit-linear-gradient(-45deg, #ea2e4e 0%,#ea3a63 50%,#dd77a0 100%);
  7. background: linear-gradient(135deg, #ea2e4e 0%,#ea3a63 50%,#dd77a0 100%);
  8. margin: auto; padding: 25px
  9. }
  10. #liv-rules-h {background: #444; height: 40px; width: 230px; padding-left: 20px; line-height: 40px; font-family: cousine; text-align: lowercase; font-size: 9px; color: #fafafa; letter-spacing: 2px;}
  11. #liv-rules-m {background: #f0f0f0; padding: 20px; width: 210px; text-align: justify; font-family: cousine;margin-top: 10px; font-size: 9px; line-height: 11px; color: #888}
  12. </style>
  13. </div>
  14. [/dohtml]
  15. [dohtml]<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  16.  
  17. <style>
  18. #hold {height: 600px; width: 450px; margin: auto; background: #000; position: relative}
  19. #hold .imgb {height: 350px; width: 350px; left: 50px; top: 75px; position: absolute}
  20. #hold .imgb img {height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); position: absolute; }
  21. #hold .imgb scr {background: #778e70; height: 100%; width: 100%; position: absolute; mix-blend-mode: multiply}
  22. #hold .fn, #hold .ln {height: 30px; width: 350px; display: flex; align-items: center; font-family: libre franklin; text-transform: uppercase; position: absolute; left: 50px; color: #778e70; font-weight: 800; top: 30px; text-align: right; justify-content: flex-end; font-style: italic; letter-spacing: 2px; font-size: 15px;}
  23. #hold .ln {top: 445px}
  24. #hold .quo {height: 100px; width: 100%; position: absolute; bottom: 0; border-top: 1px solid #778e70; font-family: libre franklin; text-transform: uppercase; font-weight: 800; display: flex; align-items: center; box-sizing: border-box; padding: 0 30px; color: #778e70; font-size: 10px; letter-spacing: 1px}
  25. #hold .quo span {letter-spacing: 4px; margin-left: 15px; color: #ccc}
  26. #hold .mbit {height: 500px; width: 450px; background: #000; z-index: 5; position: absolute; opacity: 0; transition: .8s ease; -webkit-transition: .8s ease; -moz-transition: .8s ease;}
  27. #hold input {display: none;}
  28. #hold label {height: 30px; width: 60px; transform: rotate(90deg); position: relative; display: block; top: 25px; left: 10px; margin: 30px 0; display: flex; align-items: center; font-family: libre franklin; font-weight: 800; font-size: 12px; letter-spacing: 2px; color: #778e70}
  29. #hold input:checked+label {color: #ccc}
  30. #hold .mbit li1 {height: 100%; width: 1px; background: #778e70; position: absolute; left: 75px}
  31. #hold .mbit .contb {width: 300px; height: 290px; position: absolute; top: 37.5px; right: 37.5px; overflow: hidden}
  32. #hold .mbit .imgb1 {height: 100px; width: 300px; position: absolute; bottom: 37.5px; right: 37.5px; }
  33. #hold .mbit .imgb1 img {height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); position: absolute; }
  34. #hold .mbit .imgb1 scr {background: #778e70; height: 100%; width: 100%; position: absolute; mix-blend-mode: multiply}
  35. #hold .mbit .contb .cont1, #hold .mbit .contb .cont2, #hold .mbit .contb .cont3, #hold .mbit .contb .cont4 {font-family: libre franklin; text-align: justify; color: #aaa; font-size: 11px; overflow: auto;width: 300px; height: 290px; padding-right: 10px; box-sizing: border-box; line-height: 1.6; opacity: 0; position: absolute; transition: 0.5s ease; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease}
  36. #hold .mbit .he1 {font-style: italic; color: #778e70; text-transform: uppercase; font-weight: 800; font-size: 10px; padding: 20px 0; letter-spacing: 2px; line-height: 1.3}
  37. #hold .mbit .he1:nth-child(1) {padding-top: 0px}
  38. #hold ::-webkit-scrollbar {width: 9px; }
  39. #hold ::-webkit-scrollbar-track {background: #000; border: 1px solid #778e70}
  40. #hold ::-webkit-scrollbar-thumb {background: #000; border: 1px solid #778e70}
  41. #hold .mbit .contb .cont1, #hold .mbit .contb .cont4 {display: flex; flex-direction: column}
  42. #hold .mbit .contb .cont1 span {font-style: italic; color: #778e70; text-transform: uppercase; font-weight: 800; font-size: 10px; padding: 3px 0; letter-spacing: 2px; line-height: 1.3; margin-top: 10px}
  43. #hold .mbit .contb .cont1 span:nth-child(1) {padding-top: 0px; margin-top: 0px;}
  44. #hold .mbit .contb .cont4 a {font-style: italic; color: #778e70!important; text-transform: uppercase; font-weight: 800; font-size: 10px; padding: 3px 0; letter-spacing: 2px; line-height: 1.3; margin-top: 10px; text-decoration: none}
  45. #hold .mbit .contb .cont4 a:nth-child(1) {padding-top: 0px; margin-top: 0px;}
  46. #hold #drmtab1:checked+label ~ .contb .cont1 {opacity: 1; z-index: 5}
  47. #hold #drmtab2:checked+label ~ .contb .cont2 {opacity: 1; z-index: 5}
  48. #hold #drmtab3:checked+label ~ .contb .cont3 {opacity: 1; z-index: 5}
  49. #hold #drmtab4:checked+label ~ .contb .cont4 {opacity: 1; z-index: 5}
  50. #hold:hover .mbit {opacity: 1}
  51.  
  52. </style>
  53.  
  54. <div id="hold">
  55. <div class="imgb">
  56. <img src="https://placehold.it/500x500.jp">
  57. <scr></scr>
  58. </div>
  59. <div class="fn">FORNAME</div>
  60. <div class="ln">SURNAME</div>
  61. <div class="quo">"QUOTE"</div>
  62. <div class="mbit">
  63. <li1></li1>
  64. <input type="radio" id="drmtab1" name="drmtabs"checked>
  65. <label for="drmtab1">001</label>
  66. <input type="radio" id="drmtab2" name="drmtabs">
  67. <label for="drmtab2">002</label>
  68. <input type="radio" id="drmtab3" name="drmtabs">
  69. <label for="drmtab3">003</label>
  70. <input type="radio" id="drmtab4" name="drmtabs">
  71. <label for="drmtab4">004</label>
  72.  
  73. <div class="contb">
  74. <div class="cont1">
  75. <span>Age</span>
  76. Enter age
  77. <span>House</span>
  78. Enter Hogwarts House<span>Year</span>
  79. Enter School Year<span>wand</span>
  80. Enter Wand type<span>Patronus</span>
  81. Enter Patronus<span>Erised</span>
  82. Enter Erised<span>Ammortentia</span>
  83. Enter Ammortentia<span>Boggart</span>
  84. Enter Boggart
  85. </div>
  86.  
  87.  
  88. <div class="cont2">
  89. <div class="he1">History</div>
  90. Enter history
  91. </div>
  92. <div class="cont3">
  93. <div class="he1">Personality</div>
  94. Enter personality
  95. <div class="he1">Appearance</div>
  96.  
  97. Enter appearance
  98. <div class="he1">antagonistic</div>
  99.  
  100. Enter antagonistic perception
  101.  
  102. </div>
  103.  
  104. <div class="cont4">
  105.  
  106. <a href="">thread title</a>
  107. thread info
  108. <a href="">thread title</a>
  109. thread info
  110. <a href="">thread title</a>
  111. thread info
  112. <a href="">thread title</a>
  113. thread info
  114.  
  115. </div>
  116.  
  117. </div>
  118. <div class="imgb1">
  119. <img src="https://placehold.it/320x180.jpg">
  120. <scr></scr>
  121. </div>
  122. </div>
  123. </div> <div style="width: 530px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">
  124. [/dohtml]
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!