Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [dohtml]<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
- <div id="vi">
- <bg style="background-image: url(IMAGE HERE)"></bg>
- <sc1></sc1>
- <l1>A FEW WORDS/LYRICS</l1>
- <b1>tag: FIRST LAST<br>words: ###<br>notes: HERE.</b1>
- <div id="vi-cont">
- <div id="vi-bg1">
- <div id="vi-main">
- text here
- </div>
- </div>
- </div>
- <img src="GIF HERE WILL RESIZE TO FIT"><sc2></sc2>
- </div>
- <a href="oliviacodes.tumblr.com"><div style="width: 400px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>
- <style>
- #vi {height: 550px; width: 400px; background: #eee; position: relative; margin: auto}
- #vi bg {height: 550px; width: 310px; background-size: cover; position: absolute; right: 0; filter: grayscale(100%);}
- #vi sc1 {background: #F1D4F1; mix-blend-mode: screen; opacity: 0.7; position: absolute; height: 550px; width: 310px; right: 0}
- #vi l1 {height: 40px; width: 300px; background: none; position: absolute; font-family: poppins; text-transform: uppercase; font-weight: 900; font-size: 25px; line-height: 40px; transform: rotate(90deg); top: 170px; left: -60px; color: #222; z-index: 3; color: #222}
- #vi b1 {height: 60px; width: 330px; right: 0; bottom: 30px; background: none; position: absolute; font-family: poppins; text-transform: uppercase; font-weight: 800; font-size: 13px; line-height: 1.2; color: #222; letter-spacing: 1px; z-index: 3;}
- #vi-cont {height: 550px; width: 310px; right: 0; position: absolute; overflow: hidden}
- #vi-bg1 {height: 550px; width: 310px; left: -310px; position: absolute; background: #eee; transition: 0.7s ease-in-out}
- #vi:hover #vi-bg1 {left: 0}
- #vi img {height: 40px; width: 40px; position: absolute; object-fit: cover; border-radius: 100%; filter: grayscale(100%); left: 20px; top: 120px; opacity: 0; transition: 0.6s}
- #vi sc2 {left: 20px; top: 120px; height: 40px; width: 40px; position: absolute; opacity: 0.7; background: #F1D4F1; border-radius: 100%; mix-blend-mode: multiply; opacity: 0; transition: 0.6s}
- #vi-main {height: 390px; width: 230px; background: none; position: absolute; top: 40px; right: 40px; overflow: auto; box-sizing: border-box; padding-right: 10px; text-align: justify; font-family: roboto; font-size: 11px; line-height: 1.4; color: #333; opacity: 0; -webkit-transition: 0.7s ease; font-weight: 400}
- #vi-main:first-letter {font-family: poppins; text-transform: uppercase; font-weight: 900; color: #836C86; float: left; font-size: 30px; margin: 0 20px 0 0;}
- #vi:hover #vi-main {opacity: 1; transition-delay: 0.4s}
- #vi:hover img, #vi:hover sc2 {opacity: 1}
- #vi-main::-webkit-scrollbar {width: 7px;}
- #vi-main::-webkit-scrollbar-thumb {background: #ddd; border: none!important}
- #vi-main::-webkit-scrollbar-track {background: #eee; border: none!important}
- </style>[/dohtml]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement