API tools faq
paste
Advertisement
flormzel

page 02. iNSTA-iNSPIRED by @flormzel

flormzel
Aug 10th, 2018
1,192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 37.73 KB | None | 0 0
raw download clone embed print report
  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>
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!