API tools faq
paste
Advertisement
oliviacodes

anagram

oliviacodes
Nov 6th, 2018
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.44 KB | None | 0 0
raw download clone embed print report
  1. [dohtml]<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
  2. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
  3. <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  4.  
  5.  
  6. <div id="oscar">
  7. <bg style="background-image: url(IMG HERE WILL RESIZE TO FIT)"></bg>
  8. <sc1></sc1>
  9. <div id="oscar-name">
  10. <nm>first<br>last</nm>
  11. <info>age - occupation</info>
  12. </div>
  13. <li1>
  14. <li2></li2>
  15. </li1>
  16.  
  17. <div id="oscar-descs">
  18. <des>character bullet point here</des>
  19. <des>write as many as you need, it'll overflow <3</des>
  20.  
  21. </div>
  22. <div id="oscar-main">
  23. <input type="radio" name="oscartabs" id="oscar-tab1" checked>
  24. <label for="oscar-tab1"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  25. <input type="radio" name="oscartabs" id="oscar-tab2">
  26. <label for="oscar-tab2"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  27. <input type="radio" name="oscartabs" id="oscar-tab3">
  28. <label for="oscar-tab3"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  29. <input type="radio" name="oscartabs" id="oscar-tab4">
  30. <label for="oscar-tab4"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  31. <input type="radio" name="oscartabs" id="oscar-tab5">
  32. <label for="oscar-tab5"><img src="GIF HERE WILL RESIZE TO FIT"></label>
  33.  
  34. <div id="oscar-cont1"><h1>about</h1>
  35.  
  36. TEXT HERE
  37.  
  38. </div>
  39.  
  40. <div id="oscar-cont2"><h1>friends</h1>
  41.  
  42. TEXT HERE
  43.  
  44. </div>
  45.  
  46. <div id="oscar-cont3"><h1>enemies</h1>
  47.  
  48. TEXT HERE
  49.  
  50. </div>
  51.  
  52. <div id="oscar-cont4"><h1>lovers</h1>
  53.  
  54. TEXT HERE
  55.  
  56. </div>
  57.  
  58. <div id="oscar-cont5"><h1>others</h1>
  59.  
  60. TEXT HERE
  61.  
  62. </div>
  63.  
  64. <li1></li1>
  65. <div id="oscar-ttl">
  66. <abt>about</abt><frie>friends</frie><enem>enemies</enem><lov>lovers</lov><oth>others</oth>
  67. </div>
  68.  
  69.  
  70. </div>
  71. </div>
  72. <a href="oliviacodes.tumblr.com"><div style="width: 550px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>
  73.  
  74.  
  75. <style>
  76. #oscar {height: 440px; width: 550px; background: none; position: relative; margin: auto; overflow: hidden}
  77. #oscar bg {height: 440px; width: 550px; position: absolute; background-size: cover; filter: grayscale(100%) contrast(60%)}
  78. #oscar sc1 {height: 440px; width: 550px; position: absolute; mix-blend-mode: multiply; background: #672B33}
  79. #oscar-name {height: 105px; width: 300px; overflow: hidden; background: none; position: absolute; left: 200px; top: 240px;}
  80. #oscar-name nm {position: absolute; height: 75px; width: 300px; display: block; font-family: playfair display; font-weight: 900; text-transform: uppercase; font-size: 45px; line-height: 35px; color: #fff; left: 0; transition: 1.2s ease-in-out 0.1s}
  81. #oscar:hover #oscar-name nm {left: -300px; transition-delay: 0s}
  82. #oscar li1 {height: 150px; width: 1px; background: none; position: absolute; overflow: hidden; left: 185px; bottom: 46px}
  83. #oscar li2 {height: 150px; width: 1px; background: #fff; position: absolute; transition: 0.7s ease-in-out; top: 0}
  84. #oscar:hover li2 {top: -150px; transition-delay: 0.7s;}
  85. #oscar info {height: 25px; width: 300px; background: none; position: absolute;top: 80px; display: block; line-height: 25px; font-size: 11px; font-family: roboto condensed; text-transform: uppercase; letter-spacing: 1px; font-style: italic; color: #fff; left: 0; transition: 1.2s ease-in-out 0.1s}
  86. #oscar:hover #oscar-name info {left: -300px; transition-delay: 0s}
  87. #oscar-main {height: 440px; width: 350px; background: rgba(0,0,0,0.6); position: absolute; right: -350px; transition: 1s ease}
  88. #oscar:hover #oscar-main {transition-delay: 1.1s; right: 0}
  89. #oscar-tab1+label, #oscar-tab2+label, #oscar-tab3+label, #oscar-tab4+label, #oscar-tab5+label {height: 45px; width: 45px; border: 3px double #fff; position: relative; float: left; margin-right: 11px; top: 70px; left: 40px; box-sizing: border-box; cursor: crosshair; }
  90. #oscar-main input {display: none}
  91. #oscar-main img {height: 39px; width: 39px; object-fit: cover; filter: grayscale(100%) brightness(90%); transition: 0.5s}
  92. #oscar-tab1:checked+label > img, #oscar-tab2:checked+label > img, #oscar-tab3:checked+label > img, #oscar-tab4:checked+label > img, #oscar-tab5:checked+label > img {filter: grayscale(0%)}
  93. #oscar-main li1 {width: 215px; height: 1px; position: absolute; background: #672B33; top: 140px; left: 65px}
  94. #oscar-ttl {height: 20px; width: 100px; background: none; position: absolute; right: 40px; top: 40px; font-family: roboto condensed; text-transform: uppercase; font-style: italic; color: #fff; text-align: right; font-size: 11px; line-height: 25px; letter-spacing: 2px}
  95. #oscar-ttl > frie, #oscar-ttl > enem, #oscar-ttl > abt, #oscar-ttl > lov, #oscar-ttl > oth {opacity: 0; z-index: 1; position: absolute; left: 0; width: 100px; height: 25px; top: 0; line-height: 20px; transition: 0.5s}
  96. #oscar-tab1:checked+label ~ #oscar-ttl > abt {opacity: 1}
  97. #oscar-tab2:checked+label ~ #oscar-ttl > frie {opacity: 1}
  98. #oscar-tab3:checked+label ~ #oscar-ttl > enem {opacity: 1}
  99. #oscar-tab4:checked+label ~ #oscar-ttl > lov {opacity: 1}
  100. #oscar-tab5:checked+label ~ #oscar-ttl > oth {opacity: 1}
  101. #oscar-cont1, #oscar-cont2, #oscar-cont3, #oscar-cont4, #oscar-cont5 {height: 240px; width: 270px; box-sizing: border-box; z-index: 1; background: #111; position: absolute; left: 40px; top: 165px; border: 20px solid transparent; border-right: 12px solid transparent; padding-right: 8px; overflow: auto; font-family: roboto; color: #eee; font-size: 10px; line-height: 15px; text-align: justify; opacity: 0;}
  102. #oscar-main h1 {font-family: playfair display; color: #672B33; margin-top: 0; margin-bottom: 15px; text-transform: uppercase; font-weight: 900; font-size: 20px; line-height: 20px}
  103. #oscar-tab1:checked+label ~ #oscar-cont1 {opacity: 1; z-index: 2}
  104. #oscar-tab2:checked+label ~ #oscar-cont2 {opacity: 1; z-index: 2}
  105. #oscar-tab3:checked+label ~ #oscar-cont3 {opacity: 1; z-index: 2}
  106. #oscar-tab4:checked+label ~ #oscar-cont4 {opacity: 1; z-index: 2}
  107. #oscar-tab5:checked+label ~ #oscar-cont5 {opacity: 1; z-index: 2}
  108. #oscar-descs {height: 380px; width: 140px; background: none; position: absolute; left: 30px; top: 30px; overflow: auto; box-sizing: border-box; border: 10px solid transparent; opacity: 0; transition: 0.7s ease}
  109. #oscar:hover #oscar-descs {opacity: 1; transition-delay: 1.1s}
  110. #oscar-descs des {border-bottom: 1px solid #fff; display: block; text-align: right; padding: 10px 0px 10px 0px; line-height: 14px; font-size: 10px; font-family: roboto condensed; text-transform: uppercase; font-weight: 700; font-style: italic; color: #fff; letter-spacing: 2px}
  111. #oscar-descs des:nth-child(1) {padding: 0px 0px 10px 0px}
  112. #oscar-descs::-webkit-scrollbar {width: 0}
  113. #oscar-cont1::-webkit-scrollbar, #oscar-cont2::-webkit-scrollbar, #oscar-cont3::-webkit-scrollbar, #oscar-cont4::-webkit-scrollbar, #oscar-cont5::-webkit-scrollbar {width: 7px}
  114. #oscar-cont1::-webkit-scrollbar-thumb, #oscar-cont2::-webkit-scrollbar-thumb, #oscar-cont3::-webkit-scrollbar-thumb, #oscar-cont4::-webkit-scrollbar-thumb, #oscar-cont5::-webkit-scrollbar-thumb {background: #672B33; border: 1px solid #111; }
  115. #oscar-cont1::-webkit-scrollbar-track, #oscar-cont2::-webkit-scrollbar-track, #oscar-cont3::-webkit-scrollbar-track, #oscar-cont4::-webkit-scrollbar-track, #oscar-cont5::-webkit-scrollbar-track {background: #111!important; border: 1px solid #672B33!important}
  116.  
  117. </style>
  118. [/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!