API tools faq
paste
Advertisement
oliviacodes

get better

oliviacodes
Nov 6th, 2018
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.36 KB | None | 0 0
raw download clone embed print report
  1.  
  2. [dohtml]
  3. <link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
  4. <link href="https://fonts.googleapis.com/css?family=Ramabhadra" rel="stylesheet">
  5.  
  6. <div id="omm">
  7. <div id="omm-img" style="background-image: url(ANY SIZE IMAGE HERE, LARGE/PORTRAIT WILL WORK BEST)"></div>
  8. <div id="omm-scr"></div>
  9. <div id="omm-1">
  10. <h1>Am I gonna get better, better? this might last forever</h1>
  11. <h2>first last</h2>
  12. </div>
  13. <div id="omm-2">
  14. <div id="main">
  15. <div id="gif" style="background-image: url(GIF HERE, WILL RESIZE)"></div>
  16. <h3>about</h3>
  17. <div id="info">
  18. <field>field 1</field>
  19. <field>field 2</field>
  20. <field>field 3</field>
  21. <field>field 4</field>
  22. <field>field 5</field>
  23. <field>field 6</field>
  24. <field>field 7</field>
  25. <field>field 8</field>
  26. <field>field 9</field>
  27. </div>
  28. </div>
  29. </div>
  30. <div id="omm-text">
  31. <input type="checkbox" id="toggle-1">
  32.  
  33. <label for="toggle-1">x</label>
  34. <div id="omm-histh">history</div>
  35. <div id="omm-relh">relations</div>
  36.  
  37. <div id="omm-texth">HISTORY HERE</div>
  38.  
  39.  
  40. <div id="omm-textr"><h4>friends</h4>
  41.  
  42. here
  43.  
  44. <h4>enemies</h4>
  45.  
  46. here
  47.  
  48. <h4>lovers</h4>
  49.  
  50. here
  51.  
  52. </div>
  53. </div>
  54. </div>
  55. <a href="oliviacodes.tumblr.com"><div style="width: 500px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>
  56.  
  57. <style>
  58. #omm {height: 550px; width: 500px; background: red; position: relative; margin: auto; overflow: hidden}
  59. #omm-img {height: 550px; width: 250px; position: absolute; background-size: cover; background-position: center; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
  60. #omm-scr {height: 550px; width: 250px; position: absolute; mix-blend-mode: multiply; background-color: #1B3B2E}
  61. #omm-1 {height: 550px; width: 250px; position: absolute; top: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -ms-transition: 1s ease-in-out; -o-transition: 1s ease-in-out;}
  62. #omm h1 {font-family: kumar one; text-transform: uppercase; width: 220px; text-align: right; background: none; height: 400px; font-size: 41px; color: #E09F26; left: 15px; position: absolute; line-height: 43px; letter-spacing: -2px; text-shadow: 1px 1px 0 #444, -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444; border-bottom: 1px solid #444;}
  63. #omm h2 {font-family: kumar one; color: #aaa; width: 250px; font-size: 12px; text-transform: uppercase; font-style: italic; letter-spacing: 1px; text-align: right; position: absolute; text-align: center; top: 465px;}
  64. #omm:hover #omm-1 {top: 550px}
  65. #omm:hover #omm-2 {top: 0px}
  66. #omm-2 {height: 550px; width: 250px; position: absolute; top: -550px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -ms-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; }
  67. #omm-2 #main {height: 250px; width: 200px; background: none; position: absolute; left: 25px; top: 150px; overflow: hidden}
  68. #omm-2 #gif {height: 50px; width: 50px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; position: absolute; -o-border-radius: 100%; border: 1px solid #E09F26; background-size: cover; background-position: center; }
  69. #omm h3 {position: absolute; right: 0; background: none; height: 50px; width: 140px; font-family: kumar one; text-transform: uppercase; text-align: center; line-height: 60px; font-size: 25px; top: -25px; border-bottom: 1px solid #E09F26; color: #E09F26; font-style: italic; }
  70. #omm-2 #info {width: 200px; height: 185px; background: none; position: absolute; bottom: 0; overflow: auto}
  71. #omm-2 field {min-height: 20px; width: 200px; display: block; font-family: ramabhadra; text-transform: uppercase; font-style: italic; font-size: 10px; letter-spacing: 1px; line-height: 20px; color: #E09F26; background: none; text-align: left}
  72. #omm-2 #info::-webkit-scrollbar {width: 0}
  73. #omm-text {height: 550px; width: 250px; background: #052225; position: absolute; right: 0; overflow: hidden;}
  74. #omm input[type=checkbox] {
  75. position: absolute;
  76. top: -9999px;
  77. left: -9999px;
  78. display: none;
  79. }
  80. #omm label { cursor: pointer; height: 60px; width: 60px; text-align: center; position: absolute; line-height:60px; color: #E09F26; font-family: kumar one; background: none; top: 15px; right: 15px; border-bottom: 1px solid #1B3B2E; border-right: 1px solid #1B3B2E}
  81. #omm-histh, #omm-relh {position: absolute; font-family: kumar one; text-transform: uppercase; width: 160px; height: 60px; color: #E09F26;line-height: 60px; font-size: 23px; font-style: italic; top: 0px; text-align: right; background: none; top: 15px; left: 15px; border-bottom: 1px solid #1B3B2E}
  82. #omm-histh {opacity: 1; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease;}
  83. #omm-relh {opacity: 0; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease;}
  84. #omm input[type=checkbox]:checked ~ #omm-histh{
  85. opacity: 0
  86. }
  87. #omm input[type=checkbox]:checked ~ #omm-relh {
  88. opacity: 1
  89. }
  90.  
  91. #omm-texth, #omm-textr {background: none; border-style: solid; position: absolute; bottom: 0; border-width: 10px 15px 20px 20px; padding-right: 5px; border-color: #052225; width: 210px; height: 435px; overflow: auto; color: #aaa; text-align: justify; font-family: ramabhadra; font-size: 10px; line-height: 13px; -webkit-transition: 0.4s ease; -moz-transition: 0.4s ease; -ms-transition: 0.4s ease; -o-transition: 0.4s ease;}
  92.  
  93. #omm-texth {z-index: 2; opacity: 1}
  94. #omm-textr {z-index: 1; opacity: 0}
  95.  
  96. #omm input[type=checkbox]:checked ~ #omm-texth {
  97. z-index: 1; opacity: 0;
  98. }
  99. #omm input[type=checkbox]:checked ~ #omm-textr {
  100. z-index: 2; opacity: 1
  101. }
  102. #omm h4 {font-family: kumar one;text-align: left; text-transform: uppercase; color: #E09F26; font-style: italic; font-size: 25px; height: 0; line-height: 0}
  103. #omm-texth b, #omm-textr b {font-family: Ramabhadra; color: #E09F26; text-transform: uppercase; font-style: italic}
  104. #omm-texth::-webkit-scrollbar, #omm-textr::-webkit-scrollbar {width: 9px}
  105. #omm-texth::-webkit-scrollbar-thumb, #omm-textr::-webkit-scrollbar-thumb {background: #E09F26!important; border: 4px solid #052225!important}
  106. #omm-texth::-webkit-scrollbar-track, #omm-textr::-webkit-scrollbar-track {background: #052225!important; border: none!important}
  107.  
  108.  
  109. </style>
  110. [/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!