Advertisement
TheRocketGirl

Instagram stories template

May 27th, 2019
457
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.94 KB | None | 0 0
  1. <div class="stories">
  2. <div class="stor4"><img id="f3" src="http://via.placeholder.com/300x470"><img id="f2" src="http://via.placeholder.com/300x470"><img id="f1" src="http://via.placeholder.com/300x470"></div><div class="namesto"><hr class="line3"/><hr class="line3"/><hr class="line3"/><div class="userinf" style="background: url('http://via.placeholder.com/40')"></div> <div class="naminf">nombreusuario h <span><span class="th th-cross-3-o"></span></span></div></div> <div class="endsto"><span class="th th-camera"></span> <div class="message2">Send message <div class="punt2"><span class="th th-list-o"></span></div></div></div></div><div class="insta3"><a href="https://therocketgirl-codes.tumblr.com/"><span class="th th-planet-1-o"></span>Lilith</a> </div> <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
  3.  
  4. <style>.stories{width: 300px; height: 470px; background: #1E1E1E; border-radius: 5%; overflow: hidden;} .stor4{width: 300px; height: 470px; overflow: hidden; position: relative; top: -18px;} .namesto{width: 260px; background: -webkit-linear-gradient(top, rgba(25,25,25)0%,rgba(91,91,91,0.64) 2%,rgba(0,0,0,0) 100%);height: 40px; padding: 20px; overflow: hidden; position: relative; top: -490px}.naminf{color: #fff; font-size: 11px; display: inline-block; vertical-align: top; height: 40px; padding: 10px; word-spacing: 10px; width: 190px; font-family: AbeeZee} .naminf span{float: right; padding-top: 2px;}.userinf{width: 40px; height: 40px; border-radius: 50%; display: inline-block} .endsto{width: 280px; height: 80px; padding: 10px; overflow: hidden; position: relative; top: -178px} .endsto .th{font-size: 30px; color: #fff; border: 1px solid #fff; padding: 8px; border-radius: 50%;} .message2{width: 190px; border: 1px solid #fff; height: 25px; color: #fff; padding: 10px; border-radius: 60px; display: inline-block; vertical-align: top; font-family: AbeeZee;} .punt2{float: right; margin-right: 10px; margin-top: -5px;} .punt2 .th{font-size: 20px; color: #fff; width: 5px; border: none;} @-webkit-keyframes fade {0% {opacity: 0;}20% {opacity: 1;}33% {opacity: 1;}53{opacity: 0;}100% {opacity: 0;}}@keyframes fade {0% {opacity: 0;}20% {opacity: 1;}33% {opacity: 1;}53% {opacity: 0;}100%{opacity: 0;}}.stor4 img {width: 300px; height: 470px; -webkit-animation-name: fade;-webkit-animation-iteration-count: infinite; animation-name: fade; animation-iteration-count: infinite; -webkit-animation-duration: 9s; animation-duration: 9s;} #f2{-webkit-animation-delay: -6s; background-color: yellow;} #f3{-webkit-animation-delay: -3s; background-color: lightgreen;} #f2{position: relative; top: -470px;} #f1{position: relative; top: -940px;} .line3{width: 84px; display: inline-block; color: #fff; margin-right: 2px;}.insta3{font-size: 10px;text-align: right;width: 300px; text-transform: lowercase; letter-spacing: 3px;display: inline-block;}.insta3 a{color: #C9AFBA;}</style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement