Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [dohtml]
- <style>
- body{
- background: #ddd;
- }
- #jodi-sig{
- position: relative;
- margin: 10px auto;
- overflow: hidden;
- width: 500px;
- height: 200px;
- border: 3px solid #fff;
- }
- #jodi-sig .sig{
- position: relative;
- width: 500px;
- height: 200px;
- top: 0px;
- left: 0px;
- transform: scale(1);
- transition: 0.3s ease-in 0.5s;
- background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/fab468e6-2d26-4590-ad14-2403b0f2c0e3/ddd1dqx-42be126b-3dfc-4983-a512-58cc6bd2418c.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZmFiNDY4ZTYtMmQyNi00NTkwLWFkMTQtMjQwM2IwZjJjMGUzXC9kZGQxZHF4LTQyYmUxMjZiLTNkZmMtNDk4My1hNTEyLTU4Y2M2YmQyNDE4Yy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.hYp-iko7ilY2D5zYYbgyLKnNVTst0KDfy7x2OlUiiWw);
- }
- #jodi-sig:hover .sig{
- transition: 0.3s ease-in 0s;
- transform: scale(1.2);
- }
- #jodi-sig .base{
- position: absolute;
- width: 500px;
- height: 200px;
- background: #000;
- top: 0px;
- left: 0px;
- opacity: 0;
- transition: 0.3s ease-in 0.5s;
- }
- #jodi-sig:hover .base{
- transition: 0.3s ease-in 0s;
- opacity: 0.9;
- }
- #jodi-sig .left{
- position: absolute;
- width: 200px;
- height: 200px;
- background: transparent;
- top: -200px;
- left: 0px;
- transition: 0.5s ease-in 0s;
- }
- #jodi-sig:hover .left{
- transition: 0.5s ease-in 0.3s;
- top: 0px;
- }
- #jodi-sig .right{
- position: absolute;
- width: 300px;
- height: 200px;
- background: transparent;
- bottom: -200px;
- right: 0px;
- transition: 0.5s ease-in 0s;
- }
- #jodi-sig:hover .right{
- transition: 0.5s ease-in 0.3s;
- bottom: 0px;
- }
- #jodi-sig .deco{
- position: absolute;
- top: -10px;
- left: -10px;
- opacity: 0;
- transition: 0.3s ease-in 0s;
- }
- #jodi-sig:hover .deco{
- transition: 0.3s ease-in 0.5s;
- opacity: 0.12;
- }
- #jodi-sig .df{
- font-size: 230px;
- color: #fff;
- }
- #jodi-sig .icon{
- position: absolute;
- width: 100px;
- height: 100px;
- background: transparent;
- border: 2px solid #ea9b41;
- top: 22px;
- left: 50px;
- border-radius: 20px;
- }
- #jodi-sig .icon img{
- width: 92px;
- height: 92px;
- border-radius: 15px;
- margin: 4px;
- }
- #jodi-sig .title{
- position: absolute;
- width: 100px;
- top: 139px;
- left: 50px;
- text-align: left;
- font-family: 'Poppins', sans-serif;
- font-weight: 700;
- font-size: 17.5px;
- line-height: 22px;
- color: #eee;
- }
- #jodi-sig .bullet{
- position: absolute;
- width: 10px;
- height: 10px;
- top: 31px;
- left: 10px;
- border-radius: 100px;
- background: rgb(217,163,64);
- background: linear-gradient(90deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(224,100,53,1) 0%, rgba(244,214,79,1) 100%);
- }
- #jodi-sig .statusbox{
- position: absolute;
- width: 225px;
- height: 55px;
- top: 25px;
- left: 35px;
- text-align: left;
- font-family: Poppins;
- font-weight: 700;
- font-size: 11px;
- line-height: 22px;
- text-transform: uppercase;
- color: #eee;
- }
- #jodi-sig .textbox{
- position: absolute;
- width: 225px;
- height: 55px;
- background: transparent;
- top: 63px;
- left: 10px;
- text-align: justify;
- font-family: Poppins;
- font-weight: 400;
- font-size: 9px;
- line-height: 14px;
- letter-spacing: 0.1px;
- color: #ccc;
- overflow: auto;
- padding-right: 12px;
- }
- #jodi-sig .links{
- position: absolute;
- width: 290px;
- height: 36px;
- bottom: 0px;
- right: 0px;
- border-radius: 20px 0px 0px 0px;
- padding-top: 18px;
- background: rgb(217,163,64);
- background: linear-gradient(90deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(224,100,53,1) 0%, rgba(244,214,79,1) 100%);
- }
- #jodi-sig a{
- text-decoration: none;
- }
- #jodi-sig .sf{
- display: inline-block;
- color: #fff;
- font-size: 17px;
- margin-left: 17px;
- -webkit-transform: scale(1);
- transform: scale(1);
- transition: 0.2s;
- }
- #jodi-sig .sf:hover{
- transition: 0.2s;
- color: #000;
- -webkit-transform: scale(1.4);
- transform: scale(1.3);
- }
- #jodi-sig ::-webkit-scrollbar {
- width: 7px;
- }
- #jodi-sig ::-webkit-scrollbar-track {
- background: transparent;
- border: 1px solid #ea9b41;
- border-radius: 50px;
- }
- #jodi-sig ::-webkit-scrollbar-thumb {
- border-radius: 50px;
- background: rgb(217,163,64);
- background: linear-gradient(180deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(224,100,53,1) 0%, rgba(244,214,79,1) 100%);
- }
- </style>
- <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
- <center>
- <div id="jodi-sig">
- <div class="sig"></div>
- <div class="base"></div>
- <div class="left">
- <div class="deco">
- <span class="df sf-leaf-1-o">
- </div>
- <div class="icon">
- <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="Hanie ©"><img src="https://via.placeholder.com/100x100"></a>
- </div>
- <div class="title">Short title here</div>
- </div>
- <div class="right">
- <div class="bullet"></div>
- <div class="statusbox">open for request</div>
- <div class="textbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a lectus tempus, aliquet nulla eget, pellentesque tellus. Maecenas lobortis in lectus quis sodales. Aenean pulvinar urna rhoncus, luctus diam in, venenatis massa.
- </div>
- <div class="links">
- <a href="#" title="Link 1"><span class="sf sf-seashell-o"></span></a>
- <a href="#" title="Link 2"><span class="sf sf-ice-cream-o"></span></a>
- <a href="#" title="Link 3"><span class="sf sf-anchor-o"></span></a>
- <a href="#" title="Link 4"><span class="sf sf-pineapple-o"></span></a>
- <a href="#" title="Link 5"><span class="sf sf-watermelon-o"></span></a>
- <a href="#" title="Link 6"><span class="sf sf-ladybug-o"></span></a>
- </div>
- </div>
- </div>
- </center>
- [/dohtml]
Add Comment
Please, Sign In to add comment