Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

page 02. iNSTA-iNSPIRED by @flormzel

flormzel Aug 10th, 2018 (edited) 95 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. <html>
  2. <!--
  3.  
  4.     PAGE
  5.     by @flormzel
  6.  
  7. — don't steal this
  8.  
  9. credits:
  10.    images - google, tumblr, unsplash, kendall jenner instagram
  11.    image buttons - instagram
  12.    gifs - @kendalljbrasil
  13.    color palette - @honeylcve
  14.  
  15. image dimensions:
  16.  
  17.         — left side —
  18.     first feed:
  19.         icon - 400x400
  20.         feed images - 400x400
  21.         lil icon - 400x400
  22.     second feed aka comments:
  23.         every icon: 400x400
  24.     third feed aka post:
  25.         icon - 400x400
  26.         post image - (image used is) 600x709
  27.  
  28.         — right side —
  29.     first 6 images - 400x400
  30.     insta stories - (i have no idea, first image is) 230x454
  31.    
  32. -->
  33.  
  34. <head>
  35.    <meta charset="UTF-8">
  36.    <title>iNSTA iNSPIRED</title> <!-- change tittle -->
  37.    <link rel="shortcut icon" href="https://i.imgur.com/9EUHFar.png"> <!-- change image -->
  38.    <!-- FONT -->
  39.    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  40.    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  41.    <!--FONT AWESOME-->
  42.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  43.    <link href='https://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>
  44.    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  45.    <!-- list
  46.    https://www.3nions.com/font-awesome-icon-codes-css-content-values-list/
  47.    https://raw.githubusercontent.com/antonps/outicons/master/complete/css/outicons.css
  48.    https://linearicons.com/free#cheat-sheet
  49.    -->
  50.  
  51.    <style type="text/css">
  52.  
  53.    body {color: #52736D; font-family: 'Roboto', sans-serif; /* text color */
  54.    background: #445f5a; /* background color */
  55.    /*background: url("https://image.ibb.co/ix3XZd/hl13.png");
  56.    -webkit-background-size: cover;
  57.    -moz-background-size: cover;
  58.    -o-background-size: cover;
  59.    background-size:cover;*/
  60.    }
  61.  
  62.    a {color: #A32915;text-decoration: none;} /* link color */
  63.    a:hover {color:#BD5E4B;text-decoration: none;} /* link hover color */
  64.  
  65.    /* scrollbar */
  66.    ::-webkit-scrollbar {width:0px;height:0px;/* change to 12px */background-color:transparent;}
  67.    ::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:transparent; /* scrollbar color */border:1px solid transparent;}
  68.    .square::-webkit-scrollbar {width:0px;}
  69.  
  70.    /* image size */
  71.    img {max-width: 100%;height: auto;}
  72.    .icon {display: inline-block;vertical-align: middle;}
  73.  
  74.    /* icon moving */
  75.    .pump {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility:
  76.    hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;}
  77.    .pump:hover, .pump:focus, .pump:active {-webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
  78.  
  79.    /* fonts */
  80.    @font-face { font-family: "lauren"; src: url('https://dl.dropboxusercontent.com/s/bkxamo3ao6yrkcb/Lauren-Regular.ttf'); ;}
  81.    @font-face { font-family: "dalmais"; src: url('https://static.tumblr.com/eytkop6/N5rpb03cg/dalmais.otf');}
  82.    @font-face { font-family: "markella"; src: url('https://dl.dropboxusercontent.com/s/pzeetxopmrvjc6i/markella.otf'); ;}
  83.    @font-face { font-family: "mixyonder"; src: url('mixyonder.woff2') format('woff2'),url('mixyonder.woff') format('woff');font-weight: normal;font-style: normal;}
  84.    @font-face { font-family: "thick"; src: url('https://dl.dropboxusercontent.com/s/2a6xw41hcmak3gq/Thick%20Brush.otf') ; }
  85.    @font-face { font-family: "cocogoose"; src: url('cocogoose.woff2') format('woff2'),url('cocogoose.woff') format('woff');font-weight: normal;font-style: normal;}
  86.  
  87.    /* credit - DO NOT NOT NOT NOT NOT DELETE - CHANGE COLORS ONLY */
  88.    .credit {bottom:20px;right:20px;position:fixed;}
  89.    .credit a {font-size:9px;letter-spacing: 1px;font-family:"cocogoose";font-weight:bold;border-radius:3px;background:#BD5E4B;color:#f1efef;/* CHANGE COLORS ONLY */margin-right:5px;margin-bottom:5px;padding-bottom:3px;padding-top:3px;padding-right:5px;padding-left:5px;z-index:99999;text-decoration:none;display:inline-block;width:auto;}
  90.    .credit a:hover {color:#BD5E4B;background:#f1efef;} /* CHANGE COLORS ONLY */
  91.    /* credit */
  92.    
  93.    #container{position:absolute;width:700px;height:550px;left:50%;top:50%;border-radius: 5px;background: #ffffff; /* background color */
  94.    z-index:9;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  95.  
  96.    /* ----------- esquerda ----------- */
  97.    #esquerda {position:absolute;overflow: auto;margin-top:0px;margin-left:0px;height: 550px;width: 50%;background: url("https://i.imgur.com/n24uJ7x.png");-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;}
  98.    
  99.    /* -- first feed -- */
  100.    .esq {position:absolute;width:220px;height:400px;left:50%;top:45%;border-radius: 3px;background: #ffffff; /* background color */
  101.    z-index:9;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  102.    /* top */
  103.    .feti {margin-top:10px;width:220px;position:relative;font-size: 10px;color:#000;text-transform: lowercase;text-align: center;font-weight: bold;}
  104.    .feti hr {border: 0;border-top: 1px solid #899E9A;/* line color */width: 220px;margin-top: 10px;}
  105.    /* scroll */
  106.    .scroll {position: relative; overflow: auto;margin-top: -5px;width: 220px; height:340px;}
  107.    /* img */
  108.    .feic img {margin-top:10px;margin-left:20px;height:50px;width:50px;border-radius:50%;position:relative;}
  109.    /* numbers - CHANGE MARGIN-LEFT IF YOU CHANGE PROFILE NUMBERS */
  110.    .nums {margin-top:-50px;margin-left:72px; color: #000/* text color */;font-size:10px;}
  111.    .nums b {font-weight: bold; margin-left: 15px;}
  112.    .num {font-size:8px;margin-top:-2px;margin-left: 79px;color: #474747;/* text color */}
  113.    .num t {margin-left: 8px;}
  114.    /* follow button */
  115.    .fol, .foa {display:inline-block;position:relative;margin-top:4px;margin-left: 82px;border-radius:2px;color:#ffffff;/* text color */font-size:9px;background:#52736D;/* background color */}
  116.    .fol {padding-right:25px;padding-left:25px;padding-top:2px;padding-bottom:2px;}
  117.    .foa {margin-top:-14px;margin-left: 175px;padding-right:8px;padding-left:8px;padding-top:4px;padding-bottom:4px;}
  118.    /* name */
  119.    .nabox {position:absolute;width:200px;height:20px;padding-top: 10px;padding-left: 10px;padding-right: 10px;padding-bottom: 111px;margin-top: 10px;margin-left: 0px;overflow: hidden;}
  120.    .name {margin-left: 10px;font-size: 9px;position: relative;color:#000;/* text color */text-transform: capitalize;font-weight: bold;}
  121.    .name img {margin-top:-2px;margin-left:0px;height:15px;width:15px;border-radius:50%;position:relative;}
  122.    .ds {font-size: 8px;margin-top: 0px;margin-left: 10px;position: relative;color:#000;}
  123.    .fe hr {border: 0;border-top: 1px solid #899E9A;/* line color */width: 220px;margin-top: 60px;}
  124.    /* divisória */
  125.    .divi {margin-top:-12px;width:220px;height:20px;position:relative;}
  126.    .divi img {margin-top:6px;margin-left:43px;height:14px;width:14px;position:relative;}
  127.    .divi hr {border: 0;border-top: 1px solid #899E9A;/* line color */width: 220px;padding-bottom: 10px;margin-top: 4px; }
  128.    /* posts */
  129.    .feed {position:absolute;width:220px;height:auto;left:0px;top:129px;}
  130.    .sf {position: relative;width: 73px;height:73px;}
  131.    .sf i {margin-left: 5px; margin-right: 1px;}
  132.    .sf .contt-layer_bottom {display: block;}
  133.    .sf .contt-layer_top {opacity: 0;position: absolute;margin-top: -73px;margin-left: 0px;width: 73px;height: 73px;background: #00000091;/* background hover color */color: #fff;/* text color */}
  134.    .sf:hover .contt-layer_top, .sf.active .contt-layer_top {opacity: 1;}
  135.    .sf .contt-text {text-align: center;font-size: 5px;display: inline-block;position: absolute;top: 50%;left: 50%;-moz-transform: translate(-50%, -50%);
  136.    -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
  137.    .sf img:hover {background: #525252;/* backgroung hover color */}
  138.    /* em baixo */
  139.    .bai {margin-top:-16px;width:220px;height:25px;position:relative;}
  140.    .bai img {margin-top:22px;margin-left:22px;height:16px;width:16px;position:relative;border-radius:50%;}
  141.    /* -- end of first feed -- */
  142.  
  143.    /* -- second feed -- */
  144.    .esque {position:absolute;width:220px;height:400px;left:50%;top:45%;margin-bottom:20%;border-radius: 3px;background: #ffffff; /* background color */
  145.    z-index:9;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  146.    /* top */
  147.    .coti {margin-top:10px;width:220px;position:relative;font-size: 10px;color:#000;/* text color */text-transform: capitalize;text-align: center;font-weight: bold;}
  148.    .coti hr {border: 0;border-top: 1px solid #BD5E4B;/* line color */width: 220px;margin-top: 10px;}
  149.    .ns img {position:relative;margin-top:-28px;margin-left: 195px;font-size:5px;padding-right:13px;height:14px;width:14px;}
  150.    /* comments */
  151.    .rect {position:absolute;width:220px;height:330px;left:0px;top:32px;overflow: auto;}
  152.    /* heart */
  153.    .heart img {position:relative;margin-top:-32px;margin-left: 192px;font-size:5px;padding-right:13px;height:14px;width:14px;}
  154.    /* icon1 */
  155.    .ask1 {margin-top:5px;width:190px;height:40px;position:relative;}
  156.    .ask1 img {margin-top:5px;margin-left:15px;height:25px;width:25px;position:relative;border-radius:50%;}
  157.    /* icon1 name1 */
  158.    .anon1 {margin-top:-25px;margin-left:45px;font-size: 9px;position: relative;color:#000;/* text color */}
  159.    .anon1 b {font-size: 9.5px;font-weight: 900;text-transform: lowercase;}
  160.    /* hours likes etc 1 */
  161.    .ho1 {margin-top:5px;margin-left:-5px;font-size: 8px;position: relative;color:#585858;/* text color */}
  162.    .ho1 t {margin-left: 5px;}
  163.    /* icon2 */  
  164.    .ans1 {margin-top:0px;margin-left:30px;width:160px;height:40px;position:relative;}
  165.    .ans1 img {margin-top:5px;margin-left:10px;height:20px;width:20px;position:relative;border-radius:50%;}
  166.    /* icon2 name2 */
  167.    .you1 {margin-top:-20px;margin-left:35px;font-size: 9px;position: relative;color:#000;/* text color */}
  168.    .you1 b {font-size: 9.5px;font-weight: 900;text-transform: lowercase;}
  169.    .you1 img {margin-top:-2px;margin-left:1px;height:15px;width:15px;border-radius:50%;position:relative;}
  170.    /* end of comments */
  171.    /* em baixo */
  172.    .ns hr {border: 0;border-top: 1px solid #BD5E4B;/* line color */width: 220px;margin-top: 325px;}
  173.    .emb {margin-top:-8px;width:220px;height:38px;position:relative;}
  174.    .emb img {margin-top:3px;margin-left:12px;height:30px;width:30px;position:relative;border-radius:50%;}
  175.    .rcorners {margin-top:-30px;margin-left:50px;position:relative;border-radius: 25px; color: #BD5E4B;/* text color */font-size: 9px;
  176.    border: 1px solid #BD5E4B;/* border color */padding: 5px; width: 140px;height: 10px;}
  177.    /* -- end of second feed -- */
  178.  
  179.    /* -- third feed -- */
  180.    .esquerd {position:absolute;width:220px;height:400px;left:50%;top:45%;margin-bottom:20%;border-radius: 3px;background: #ffffff; /* background color */
  181.    z-index:9;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  182.    /* top */
  183.    .cim {margin-top:10px;width:220px;position:relative;font-size: 10px;color:#000;/* text color */text-transform: capitalize;text-align: center;font-weight: bold;}
  184.    .cim hr {border: 0;border-top: 1px solid #DCDDD3;/* line color */width: 220px;margin-top: 10px;}
  185.    /* all */
  186.    .all {position:absolute;overflow:auto;width:220px;height:365px;left:0px;top:35px;}
  187.    /* img */
  188.    .pos img {margin-top:3px;margin-left:13px;height:25px;width:25px;border-radius:50%;position:relative;}
  189.    /* numbers */
  190.    .posna {margin-top:-20px;margin-left:25px; color: #000;/* text color */font-size:9px;}
  191.    .posna b {font-weight: bold; margin-left: 24px;}
  192.    /* post img */
  193.    .post {position:absolute; width:220px;height:260px;left:0px;top:33px;}
  194.    /* extras img */
  195.    .ext1 img {margin-top:280px;margin-left:8px;height:15px;width:auto;position:relative;}
  196.    .ext2 img {margin-top:-16px;margin-left:195px;height:15px;width:auto;position:relative;}
  197.    /* likes */
  198.    .lik {margin-top:5px;margin-left:10px;font-size: 9px;position: relative;color:#000;/* text color */
  199.    width:180px;font-size: 9px;color:#000;/* text color */text-align: left;}
  200.    .lik b {font-weight: bold;}
  201.    /* description */
  202.    .ya {position: relative;margin-top:5px;margin-left:10px; color: #000;/* text color */font-size:9px;width:190px;height: auto;}
  203.    .ya b {font-weight: bold;}
  204.    /* description */
  205.    .comm {position: relative;margin-top:5px;margin-left:10px; color: #585858;/* text color */font-size:9px;width:190px;height: auto;}
  206.    /* user comments */
  207.    .usco {position: relative;margin-top:5px;margin-left:10px; color: #000;/* text color */font-size:9px;width:190px;height: auto;}
  208.    .usco b {font-weight: bold;}
  209.    /* date */
  210.    .dat {position: relative;text-transform:uppercase;margin-top:5px;margin-left:10px; padding-bottom:10px;color: #585858;/* text color */font-size:6px;width:190px;height: auto;}
  211.    /* -- end of third feed -- */
  212.  
  213.    /* ----------- end of esquerda ----------- */
  214.  
  215.    
  216.    /* ----------- direita ----------- */
  217.    #direita {position:absolute;margin-top:0px;margin-left:50%;height: 550px;width: 50%;}
  218.  
  219.    /* -- top : name, message button, follow, description -- */
  220.    /* icon n name */
  221.    .icon img {margin-top:30px;margin-left:35px;height:60px;width:60px;border-radius:50%;position:relative;padding: 5px;border:1px solid #899E9A;/* border color */}
  222.    .user {margin-left: 115px;margin-top:-65px;font-size: 12px;position: relative;color:#000;/* text color */text-transform: lowercase;font-weight: bold;}
  223.    .user img {margin-top:-2px;margin-left:3px;height:15px;width:15px;border-radius:50%;position:relative;}
  224.    /* follow */
  225.    .etc {font-size:9px;margin-top:5px;margin-left: 110px;color: #000;/* text color */}
  226.    .etc b {font-size:10px;font-weight: bold;;margin-left: 5px;}
  227.    /* description */
  228.    .brief {position: relative;margin-top:10px;margin-left:115px; color: #000;/* text color */font-size:9px;width:190px;height: 40px;}
  229.    .brief b {font-weight: bold;font-size: 9px;text-transform: uppercase;}
  230.    /* message */
  231.    .men {display:inline-block;position:relative;margin-top:-15px;margin-left: 220px;border-radius:2px;
  232.    color:#ffffff;/* text color */font-size:9px;background:#BD5E4B;/* background color */border: 1px solid #BD5E4B;/* border color */
  233.    padding-right:25px;padding-left:25px;padding-top:2px;padding-bottom:2px;}
  234.    .men a{color:#ffffff;/* link color */}
  235.    .men:hover {background:#fff;border: 1px solid #BD5E4B; /* border color */color:#BD5E4B;/* text color */}
  236.    /* -- end of top : name, message button, follow, description -- */
  237.  
  238.    /* -- icons : stories as links -- */
  239.    /* stories */
  240.    .stories {position:absolute;width:280px;height:80px;left:40px;top:120px;}
  241.    .sto img {position: relative;width: 30px;height:30px;padding: 3px;border-radius:50%;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
  242.    .sto img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  243.    .stoo {position:absolute;width:47px;height:auto;left:38px;top:160px;font-size: 9px;text-align: center;overflow: hidden;}
  244.    .is hr {border: 0;border-top: 1px solid #DCDDD3;/* line color */width: 280px;margin-top:80px;}
  245.    /* -- end of icons : stories as links -- */
  246.  
  247.    /* -- last part -- */
  248.    /* box */
  249.    .every {position:absolute;width:300px;height:340px;left:30px;top:190px;overflow: hidden;}
  250.    /* mini about or comment */
  251.    .ay {position:absolute;width:280px;height:300px;left:10px;top:20px;}
  252.    /* name n icon 2 */
  253.    .ic1 {margin-top:5px;width:260px;height:auto;position:relative;}
  254.    .ic1 img {margin-top:5px;margin-left:0px;height:30px;width:30px;position:relative;border-radius:50%;padding: 3px;/* border color*/}
  255.    .icn1 {padding:2px;margin-top:-35px;margin-left:40px;font-size: 10px;position: relative;color:#000;/* text color*/ text-align: justify;overflow: hidden;height: 80px;}
  256.    .icn1 b {font-size: 10px;font-weight: bold;text-transform: lowercase;}
  257.    .icn1 i {color: #52736D;font-style: italic;} /*italic color*/
  258.    .icn1 b {color: #A32915;font-weight: bold;} /*bold color*/
  259.    .icn1 u {color:#BD5E4B;text-decoration: underline;}/*underline color*/
  260.    .icn1 s {color: #899E9A;text-decoration: line-through;}/*line hover text color*/
  261.    .icn1 mark {padding-left: 3px;padding-right: 3px;color: #52736D;/*text color*/ background: #DCDDD3;/*background color*/}
  262.    /* insta stories */
  263.    .instastories {position:absolute;padding: 20px;width:240px;height:130px;left:10px;top:140px;overflow-x: scroll;overflow-y: hidden;white-space: nowrap;
  264.    padding-right: 20px;}
  265.    .instasto {position:absolute;width:80px;height:150px;left:10px;top:10px;overflow: hidden;border-radius: 5px;}
  266.    .ai img {width: 100%;height: 100%;z-index: 99;}
  267.    /* about icon */
  268.    .top-left {position: absolute;top: 0px;left: 20px;}
  269.    .abic {margin-top:-5px;width:190px;height:40px;position:relative;z-index: 9999;}
  270.    .abic img {margin-top:10px;margin-left:-12px;height:10px;width:10px;position:relative;border-radius:50%;}
  271.    /* icon n user */
  272.    .abus {position:relative;margin-top:-13px;margin-left:0px;color:#fff;/* text color */}
  273.    .abus b {font-size: 4px;text-transform: lowercase;}
  274.    /* -- end of last part -- */
  275.    
  276.    </style>
  277. </head>
  278. <body>
  279.    <div id="container">
  280.  
  281.    <!-------------- esquerda -------------->
  282.    <div id="esquerda">
  283.  
  284.    <!-- -- first feed -- -->
  285.    <div class="esq">
  286.    <!-- top -->
  287.    <div class="feti">yourusername<hr></div> <!-- change this -->
  288.    <i class="fa fa-chevron-left" style="position:relative;margin-top:-28px;margin-left:10px;font-size:10px;padding-right:13px;"></i>
  289.    <t style="position:relative;margin-top:-40.5px;float:right;font-size:20px;padding-right:13px;">…</t>
  290.    <!-- scroll -->
  291.    <div class="scroll">
  292.    <!-- icon and numbers -->
  293.    <div class="feic"><img src="https://i.imgur.com/SRYefpV.png" class="pump"></div> <!-- change image -->
  294.    <div class="nums"><b>682</b> <b>89,8m</b> <b>192</b></div> <!-- change this if you want - CHANGE ABOVE MARGIN-LEFT IF YOU CHANGE THIS -->
  295.    <div class="num"><t>posts</t> <t>followers</t> <t>following</t></div>
  296.    <span class="fol">Following</span><span class="foa"><i class="fa fa-chevron-down" style="font-size:6px;"></i></span>
  297.    <!-- name and description -->
  298.    <div class="nabox">
  299.    <div class="name">your name goes here <img src="https://i.imgur.com/Zf6WpCr.png" class="pump"></div> <!-- change this -->
  300.    <div class="ds">Your description goes here. Your description goes here. Your description goes here. </div>  <!-- change this -->
  301.    </div>
  302.    <!-- don't touch -->
  303.     <div class="fe"><hr></div>
  304.     <div class="divi">
  305.         <img src="https://i.imgur.com/RtJGYXf.png" class="pump">
  306.         <img src="https://i.imgur.com/x9FN5vv.png" class="pump">
  307.         <img src="https://i.imgur.com/tPqz1IU.png" class="pump">
  308.     <hr></div>
  309.     <!-- end of don't touch -->
  310.    <!-- feed n images -->
  311.    <div class="feed">
  312.        <!-- 1 -->
  313.        <div class="sf" style="margin-left:0px; margin-top: 0px">
  314.        <img src="https://i.imgur.com/V5NQAdZ.png" class="contt-layer_bottom"> <!-- change url -->
  315.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  316.        <i class="fa fa-heart" style="font-size:5px;"></i>1,8m <i class="fa fa-comment" style="font-size:5px;"></i>11,4k
  317.        </div></div></div>
  318.        <div class="sf" style="margin-left:74px; margin-top: -73px">
  319.        <img src="https://i.imgur.com/9EUHFar.png" class="contt-layer_bottom"> <!-- change url -->
  320.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  321.        <i class="fa fa-heart" style="font-size:5px;"></i>1,3m <i class="fa fa-comment" style="font-size:5px;"></i>9,2k
  322.        </div></div></div>
  323.        <div class="sf" style="margin-left:148px; margin-top: -73px">
  324.        <img src="https://i.imgur.com/xkOaZ7t.png" class="contt-layer_bottom"> <!-- change url -->
  325.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  326.        <i class="fa fa-heart" style="font-size:5px;"></i>802k <i class="fa fa-comment" style="font-size:5px;"></i>3,8k
  327.        </div></div></div>
  328.        <!-- 2 -->
  329.        <div class="sf" style="margin-left:0px; margin-top: 1px">
  330.        <img src="https://i.imgur.com/aoCeizm.png" class="contt-layer_bottom"> <!-- change url -->
  331.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  332.        <i class="fa fa-heart" style="font-size:5px;"></i>934k <i class="fa fa-comment" style="font-size:5px;"></i>8,8k
  333.        </div></div></div>
  334.        <div class="sf" style="margin-left:74px; margin-top: -73px">
  335.        <img src="https://i.imgur.com/ie67qi3.png" class="contt-layer_bottom"> <!-- change url -->
  336.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  337.        <i class="fa fa-heart" style="font-size:5px;"></i>2,9m <i class="fa fa-comment" style="font-size:5px;"></i>9,9k
  338.        </div></div></div>
  339.        <div class="sf" style="margin-left:148px; margin-top: -73px">
  340.        <img src="https://i.imgur.com/W6qxfUQ.png" class="contt-layer_bottom"> <!-- change url -->
  341.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  342.        <i class="fa fa-heart" style="font-size:5px;"></i>1,2m <i class="fa fa-comment" style="font-size:5px;"></i>12,6k
  343.        </div></div></div>
  344.        <!-- 3 -->
  345.        <div class="sf" style="margin-left:0px; margin-top: 1px">
  346.        <img src="https://i.imgur.com/W6qxfUQ.png" class="contt-layer_bottom"> <!-- change url -->
  347.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  348.        <i class="fa fa-heart" style="font-size:5px;"></i>662k <i class="fa fa-comment" style="font-size:5px;"></i>2,8k
  349.        </div></div></div>
  350.        <div class="sf" style="margin-left:74px; margin-top: -73px">
  351.        <img src="https://i.imgur.com/xkOaZ7t.png" class="contt-layer_bottom"> <!-- change url -->
  352.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  353.        <i class="fa fa-heart" style="font-size:5px;"></i>349k <i class="fa fa-comment" style="font-size:5px;"></i>1,3k
  354.        </div></div></div>
  355.        <div class="sf" style="margin-left:148px; margin-top: -73px">
  356.        <img src="https://i.imgur.com/9EUHFar.png" class="contt-layer_bottom"> <!-- change url -->
  357.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  358.        <i class="fa fa-heart" style="font-size:5px;"></i>576k <i class="fa fa-comment" style="font-size:5px;"></i>3,4k
  359.        </div></div></div>
  360.        <!-- 4 -->
  361.        <div class="sf" style="margin-left:0px; margin-top: 1px">
  362.        <img src="https://i.imgur.com/ie67qi3.png" class="contt-layer_bottom"> <!-- change url -->
  363.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  364.        <i class="fa fa-heart" style="font-size:5px;"></i>238k <i class="fa fa-comment" style="font-size:5px;"></i>4,3k
  365.        </div></div></div>
  366.        <div class="sf" style="margin-left:74px; margin-top: -73px">
  367.        <img src="https://i.imgur.com/V5NQAdZ.png" class="contt-layer_bottom"> <!-- change url -->
  368.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  369.        <i class="fa fa-heart" style="font-size:5px;"></i>389k <i class="fa fa-comment" style="font-size:5px;"></i>9,8k
  370.        </div></div></div>
  371.        <div class="sf" style="margin-left:148px; margin-top: -73px">
  372.        <img src="https://i.imgur.com/aoCeizm.png" class="contt-layer_bottom"> <!-- change url -->
  373.        <div class="contt-layer_top"><div class="contt-text" style="position: relative;margin-left:-5px;">
  374.        <i class="fa fa-heart" style="font-size:5px;"></i>237k <i class="fa fa-comment" style="font-size:5px;"></i>1,2k
  375.        </div></div></div>
  376.        <!-- you can add more by copy and paste what's above -->
  377.     </div>
  378.     </div>
  379.     <!-- end of scroll -->
  380.     <!-- bottom -->
  381.     <div class="bai">
  382.         <img src="https://i.imgur.com/XSBwcvx.png" class="pump">
  383.         <img src="https://i.imgur.com/kHELazi.png" class="pump">
  384.         <img src="https://i.imgur.com/34Yb2ob.png" class="pump">
  385.         <img src="https://i.imgur.com/dmuEdlK.png" class="pump">
  386.         <img src="https://i.imgur.com/aoCeizm.png" class="pump"><!-- change image -->
  387.     </div></div>
  388.     <!-- -- end of first feed -- -->
  389.  
  390.     <!-- -- second feed -- -->
  391.     <div class="esque" style="margin-top:460px;">
  392.     <!-- top -->
  393.     <div class="coti">comments<hr></div>
  394.     <i class="fa fa-chevron-left" style="position:relative;margin-top:-26px;margin-left:10px;font-size:10px;padding-right:13px;color:#BD5E4B;"></i>
  395.     <div class="ns"><img src="https://i.imgur.com/eGxe0hK.png"></div>
  396.     <!-- comments -->
  397.     <div class="rect">
  398.     <!-- ask 1 -->
  399.     <div class="ask1"><img src="https://i.imgur.com/9EUHFar.png"> <!-- change this -->
  400.     <div class="anon1"><b>anonyms</b> Where are you from? <!-- change this -->
  401.     <div class="ho1"><t>15h</t> <t>120 likes</t> <t>Reply</t> <!-- change this -->
  402.     </div></div></div>
  403.     <div class="heart"><img src="https://i.imgur.com/c8qZ0R0.png" class="pump"></div>
  404.     <!-- ask 1 -->
  405.     <!-- answer 1 -->
  406.     <div class="ans1"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  407.     <div class="you1"><b>yourusername</b><img src="https://i.imgur.com/Zf6WpCr.png" class="pump"> I'm from this country. <!-- change this -->
  408.    <div class="ho1"><t>14h</t> <t>1302 likes</t> <t>Reply</t> <!-- change this -->
  409.    </div></div></div>
  410.    <div class="heart"><img src="https://i.imgur.com/DNT3NJE.png" class="pump"></div>
  411.    <!-- answer 1 -->
  412.    <!-- ask 2 -->
  413.    <div class="ask1"><img src="https://i.imgur.com/V5NQAdZ.png"> <!-- change this -->
  414.    <div class="anon1"><b>anonuser</b> How old are you? <!-- change this -->
  415.    <div class="ho1"><t>13h</t> <t>12 likes</t> <t>Reply</t> <!-- change this -->
  416.    </div></div></div>
  417.    <div class="heart"><img src="https://i.imgur.com/c8qZ0R0.png" class="pump"></div>
  418.    <!-- ask 2 -->
  419.    <!-- answer 2 -->
  420.    <div class="ans1"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  421.    <div class="you1"><b>yourusername</b><img src="https://i.imgur.com/Zf6WpCr.png" class="pump"> I'm young. <!-- change this -->
  422.     <div class="ho1"><t>12h</t> <t>1242 likes</t> <t>Reply</t> <!-- change this -->
  423.     </div></div></div>
  424.     <div class="heart"><img src="https://i.imgur.com/DNT3NJE.png" class="pump"></div>
  425.     <!-- answer 2 -->
  426.     <!-- answer 2.1 -->
  427.     <div class="ans1"><img src="https://i.imgur.com/ie67qi3.png"> <!-- change this -->
  428.     <div class="you1"><b>anotheruser</b> Old. <!-- change this -->
  429.     <div class="ho1"><t>10h</t> <t>132 likes</t> <t>Reply</t> <!-- change this -->
  430.     </div></div></div>
  431.     <div class="heart"><img src="https://i.imgur.com/DNT3NJE.png" class="pump"></div>
  432.     <!-- answer 2.1 -->
  433.     <!-- ask 3 -->
  434.     <div class="ask1"><img src="https://i.imgur.com/V5NQAdZ.png"> <!-- change this -->
  435.     <div class="anon1"><b>anonuser</b> What do you do? <!-- change this -->
  436.     <div class="ho1"><t>10h</t> <t>86 likes</t> <t>Reply</t> <!-- change this -->
  437.     </div></div></div>
  438.     <div class="heart"><img src="https://i.imgur.com/DNT3NJE.png" class="pump"></div>
  439.     <!-- ask 3 -->
  440.     <!-- answer 3 -->
  441.     <div class="ans1"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  442.     <div class="you1"><b>yourusername</b><img src="https://i.imgur.com/Zf6WpCr.png" class="pump"> I'm currently studying. <!-- change this -->
  443.    <div class="ho1"><t>10h</t> <t>1022 likes</t> <t>Reply</t> <!-- change this -->
  444.    </div></div></div>
  445.    <div class="heart"><img src="https://i.imgur.com/DNT3NJE.png" class="pump"></div>
  446.    <!-- answer 3 -->
  447.    <!-- ask 4 -->
  448.    <div class="ask1"><img src="https://i.imgur.com/xkOaZ7t.png"> <!-- change this -->
  449.    <div class="anon1"><b>userunko</b> Can you help me with X and Y? <!-- change this -->
  450.    <div class="ho1"><t>7h</t> <t>1298 likes</t> <t>Reply</t> <!-- change this -->
  451.    </div></div></div>
  452.    <div class="heart"><img src="https://i.imgur.com/c8qZ0R0.png" class="pump"></div>
  453.    <!-- ask 4 -->
  454.    <!-- answer 4 -->
  455.    <div class="ans1"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  456.    <div class="you1"><b>yourusername</b><img src="https://i.imgur.com/Zf6WpCr.png" class="pump"> For sure. <!-- change this -->
  457.    <div class="ho1"><t>5h</t> <t>10242 likes</t> <t>Reply</t> <!-- change this -->
  458.    </div></div></div>
  459.    <div class="heart"><img src="https://i.imgur.com/DNT3NJE.png" class="pump"></div>
  460.    <!-- answer 4 -->
  461.    <!-- answer 4.1 -->
  462.    <div class="ans1"><img src="https://i.imgur.com/xkOaZ7t.png" > <!-- change this -->
  463.    <div class="you1"><b>userunko</b> Thanks! <!-- change this -->
  464.    <div class="ho1"><t>5h</t> <t>242 likes</t> <t>Reply</t> <!-- change this -->
  465.    </div></div></div>
  466.    <div class="heart"><img src="https://i.imgur.com/c8qZ0R0.png" class="pump"></div>
  467.    <!-- answer 4.1 -->
  468.    <!-- you can add more by copy and paste what's above -->
  469.     </div>
  470.     <!-- end of comments -->
  471.     <!-- bottom -->
  472.     <div class="ns"><hr></div>
  473.     <div class="emb"><img src="https://i.imgur.com/aoCeizm.png" class="pump"></div><!-- change image -->
  474.     <div class="rcorners">Add comment...</div>
  475.     </div>
  476.     <!-- -- end of second feed -- -->
  477.  
  478.     <!-- -- third feed -- -->
  479.     <div class="esquerd" style="margin-top:920px;">
  480.     <!-- top -->
  481.     <div class="cim">post<hr></div>
  482.     <i class="fa fa-chevron-left" style="position:relative;margin-top:-26px;margin-left:10px;font-size:10px;padding-right:13px;color:#DCDDD3;"></i>
  483.     <div class="ns"><img src="https://i.imgur.com/MPHN0CX.png"></div>
  484.     <!-- all -->
  485.     <div class="all">
  486.     <!-- icon n user -->
  487.     <div class="pos"><img src="https://i.imgur.com/SRYefpV.png" class="pump"></div> <!-- change image -->
  488.     <div class="posna"><b>yourusername</b> </div> <!-- change this if you want -->
  489.     <t style="position:relative;margin-top:-24px;float:right;font-size:20px;padding-right:13px;">…</t>
  490.     <!-- post -->
  491.     <div class="post"><img src="https://i.imgur.com/PKEuCbD.png"></div>
  492.     <!-- extras -->
  493.     <div class="ext1"><img src="https://i.imgur.com/UeR3LUV.png"></div>
  494.     <div class="ext2"><img src="https://i.imgur.com/x3x4iIa.png"></div>
  495.     <!-- likes -->
  496.     <div class="lik">Liked by <b>bellahadid</b>, <b>krisjenner</b> and <b>2 265 788 other people</b></div>
  497.     <!-- description -->
  498.     <div class="ya"><b>yourusername</b> who is she <a>@kendalljenner</a></div>
  499.     <!-- comments -->
  500.     <div class="comm">View all 20 643 comments</div>
  501.     <!-- user comments -->
  502.     <div class="usco"><b>krisjenner</b> Love this!</div>
  503.     <div class="usco"><b>c.syresmith</b> Yes!</div>
  504.     <!-- user comments -->
  505.     <div class="dat">12 hours ago</div>
  506.     </div>
  507.     </div>
  508.     <!-- end of third tab -->
  509.     </div>
  510.     <!-------------- end of esquerda -------------->
  511.    
  512.     <!-------------- direita -------------->
  513.     <div id="direita">
  514.  
  515.     <!-- -- top : name, message button, follow, description -- -->
  516.     <div class="icon"><a href="/"><img src="https://i.imgur.com/SRYefpV.png" class="pump"></a></div> <!-- change image -->
  517.     <div class="user">yourusername<img src="https://i.imgur.com/Zf6WpCr.png" class="pump"></div> <!-- change this -->
  518.     <a href="/ask"><div class="men">message</div></a>
  519.     <!-- follow -->
  520.     <div class="etc"><b>682</b> posts <b>89,8m</b> followers <b>192</b> following</div>
  521.     <!-- name n description -->
  522.     <div class="brief"><b>your name</b> hello welcome to another space where you can write things.</div>
  523.     <!-- -- wnd of top : name, message button, follow, description -->
  524.     <!-- -- icons : stories as links -- -->
  525.     <!-- stories -->
  526.     <div class="stories">
  527.     <a href="/faq" title="faq" class="tip"><div class="sto"><img src=" https://i.imgur.com/bnpqk4f.gif" style="border:1px solid #52736D"> <!-- change url --></div></a>
  528.     <a href="/nav" title="navigation"class="tip"><div class="sto"><img src="https://i.imgur.com/dWemkGt.gif" style="border:1px solid #DCDDD3;margin-left:50px; margin-top: -38px"> <!-- change url --></div></a>
  529.     <a href="/muses" title="muses" class="tip"><div class="sto"><img src="https://i.imgur.com/n8m1xg6.gif" style="border:1px solid #BD5E4B;margin-left:100px; margin-top: -38px"> <!-- change url --></div></a>
  530.     <a href="/info" title="info" class="tip"><div class="sto"><img src="https://i.imgur.com/EM1lajv.gif" style="border:1px solid #899E9A;margin-left:150px; margin-top: -38px"> <!-- change url --></div></a>
  531.     </div>
  532.     <!-- stories title -->
  533.     <div class="stoo">🍰</div>
  534.     <div class="stoo" style="margin-left:50px; margin-top: 0px">🥂</div>
  535.     <div class="stoo" style="margin-left:100px; margin-top: 0px">🍒</div>
  536.     <div class="stoo" style="margin-left:150px; margin-top: 0px">🕊</div>
  537.     <div class="is"><hr></div>
  538.     <!-- -- end of icons : stories as links -- -->
  539.     <!-- -- last part -- -->
  540.     <div class="every">
  541.     <!-- mini about or comment -->
  542.     <div class="ay">
  543.     <div class="ic1"><img src="https://i.imgur.com/SRYefpV.png" class="pump"> <!--change this -->
  544.     <div class="icn1"><b><a>yourusername</a></b> <!-- change this -->
  545.         <!-- change this -->
  546.         Lorem ipsum <i>dolor sit amet</i>, saperet honestatis ne vis. Ut mea falli <u>salutandi inciderint</u>, cu per utinam petentium, omittam urbanitas eum in.
  547.         Laudem nusquam duo id, an ius fabulas ceteros, mea errem animal salutandi cu. Apeirian tacimates ex sit, <b>ex malis paulo nec.</b>
  548.     </div></div></div>
  549.     <!-- insta stories -->
  550.     <div class="instastories">
  551.     <!-- #1 -->
  552.     <div class="instasto" style="margin-top:0px;margin-left:0px;">
  553.     <div class="ai"><img src="https://static.tumblr.com/eytkop6/s4Tpd9ajo/kenny.gif"></div> <!-- change insta storie -->
  554.     <div class="top-left"><div class="abic"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  555.     <i class="lnr lnr-cross" style="margin-left:42px;color:#fff;font-size: 8px;"></i>
  556.     <div class="abus"><b>yourusername</b></div>
  557.     </div></div>
  558.     </div>
  559.     <!-- #1 -->
  560.     <!-- #2 -->
  561.     <div class="instasto" style="margin-top:0px;margin-left:90px;">
  562.     <div class="ai"><img src="https://i.imgur.com/tf0UZaw.gif"></div> <!-- change insta storie -->
  563.     <div class="top-left"><div class="abic"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  564.     <i class="lnr lnr-cross" style="margin-left:42px;color:#fff;font-size: 8px;"></i>
  565.     <div class="abus"><b>yourusername</b></div>
  566.     </div></div>
  567.     </div>
  568.     <!-- #2 -->
  569.     <!-- #3 -->
  570.     <div class="instasto" style="margin-top:0px;margin-left:180px;">
  571.     <div class="ai"><img src="https://i.imgur.com/vMgTzOy.png"></div> <!-- change insta storie -->
  572.     <div class="top-left"><div class="abic"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  573.     <i class="lnr lnr-cross" style="margin-left:42px;color:#fff;font-size: 8px;"></i>
  574.     <div class="abus"><b>yourusername</b></div>
  575.     </div></div>
  576.     </div>
  577.     <!-- #3 -->
  578.     <!-- #4 -->
  579.     <div class="instasto" style="margin-top:0px;margin-left:270px;">
  580.     <div class="ai"><img src="https://i.imgur.com/6fOEbv1.jpg"></div> <!-- change insta storie -->
  581.     <div class="top-left"><div class="abic"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  582.     <i class="lnr lnr-cross" style="margin-left:42px;color:#fff;font-size: 8px;"></i>
  583.     <div class="abus"><b>yourusername</b></div>
  584.     </div></div>
  585.     </div>
  586.     <!-- #4 -->
  587.     <!-- #5 -->
  588.     <div class="instasto" style="margin-top:0px;margin-left:360px;">
  589.     <div class="ai"><img src="https://i.imgur.com/VGJuCok.png"></div> <!-- change insta storie -->
  590.     <div class="top-left"><div class="abic"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  591.     <i class="lnr lnr-cross" style="margin-left:42px;color:#fff;font-size: 8px;"></i>
  592.     <div class="abus"><b>yourusername</b></div>
  593.     </div></div>
  594.     </div>
  595.     <!-- #5 -->
  596.     <!-- #6 -->
  597.     <div class="instasto" style="margin-top:0px;margin-left:450px;">
  598.     <div class="ai"><img src="https://i.imgur.com/epEQscp.gif"></div> <!-- change insta storie -->
  599.     <div class="top-left"><div class="abic"><img src="https://i.imgur.com/SRYefpV.png"> <!-- change this -->
  600.     <i class="lnr lnr-cross" style="margin-left:42px;color:#fff;font-size: 8px;"></i>
  601.     <div class="abus"><b>yourusername</b></div>
  602.     </div></div>
  603.     </div>
  604.     <!-- #6 -->
  605.     </div>
  606.     <!-- -- end of last part -- -->
  607.     </div>
  608.     </div></div>
  609.  
  610.  
  611.     <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  612.     <div class="credit"><a href="http://flormzel.tumblr.com"><i class="fa fa-power-off" style="font-size:8px;margin-right: 2px;"></i>flormzel</a></div>
  613.     <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  614.  
  615. </body>
  616. </html>
RAW Paste Data
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
 
Top