API tools faq
paste
Advertisement
flormzel

page 03. Twitter Class by @flormzel

flormzel
Aug 13th, 2018
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 42.09 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 - tumblr, unsplash
  11.   image buttons - twitter
  12.   color palette - canva.com/color-palette/
  13.  
  14. image dimensions:
  15.    they are displayed inside the code
  16.  
  17. -->
  18.  
  19. <head>
  20.    <meta charset="UTF-8">
  21.    <title>page 03. Twitter Class by @flormzel</title> <!-- change tittle -->
  22.    <link rel="shortcut icon" href="https://i.imgur.com/jAtLbB8.png"> <!-- change image -->
  23.    <!-- FONT -->
  24.    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  25.    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  26.    <!--FONT AWESOME-->
  27.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  28.    <link href='https://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>
  29.    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  30.    <!-- list
  31.    https://www.3nions.com/font-awesome-icon-codes-css-content-values-list/
  32.    https://raw.githubusercontent.com/antonps/outicons/master/complete/css/outicons.css
  33.    https://linearicons.com/free#cheat-sheet
  34.    -->
  35.  
  36.    <style type="text/css">
  37.  
  38.    body {color: #2A1E17; font-family: 'Roboto', sans-serif; /* text color */
  39.    background: #2A1E17; /* background color */
  40.    /*background: url("https://image.ibb.co/ix3XZd/hl13.png");
  41.    -webkit-background-size: cover;
  42.    -moz-background-size: cover;
  43.    -o-background-size: cover;
  44.    background-size:cover;*/
  45.    }
  46.  
  47.    a {color: #883023;text-decoration: none;} /* link color */
  48.    a:hover {color:#E6B6A0;text-decoration: none;} /* link hover color */
  49.  
  50.    /* scrollbar */
  51.    ::-webkit-scrollbar {width:0px;height:0px;/* change to 12px */background-color:transparent;}
  52.    ::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:transparent; /* scrollbar color */border:1px solid transparent;}
  53.    .square::-webkit-scrollbar {width:0px;}
  54.  
  55.    /* image size */
  56.    img {max-width: 100%;height: auto;}
  57.    .icon {display: inline-block;vertical-align: middle;}
  58.  
  59.    /* icon moving */
  60.    .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:
  61.    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;}
  62.    .pump:hover, .pump:focus, .pump:active {-webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
  63.  
  64.    /* credit - DO NOT NOT NOT NOT NOT DELETE - CHANGE COLORS ONLY */
  65.    .credit {bottom:20px;right:20px;position:fixed;}
  66.    .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;}
  67.    .credit a:hover {color:#E6B6A0;background:#f1efef;} /* CHANGE COLORS ONLY */
  68.    /* credit */
  69.  
  70.    #container{position:absolute;width:700px;height:550px;left:50%;top:50%;border-radius: 5px;background: transparent; /* background color */
  71.    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%);}
  72.  
  73.    /* ----------- esquerda ----------- */
  74.    #esquerda {position:absolute;overflow: hidden;margin-top:0px;margin-left:0px;height: 550px;width: 50%;background: transparent}
  75.  
  76.    /* - phone - */
  77.    .esquerda {position:absolute;overflow: hidden;width:240px;height:440px;padding-bottom: 60px;
  78.    left:50%;top:50%;margin-bottom:20%;border-radius: 20px;background: transparent; /* background color */border: 1px solid #fff;
  79.    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%);}
  80.    .bol1 {position: relative;width: 6px;height: 6px;padding: 1px;border-radius: 50%;border: 1px solid #fff;margin-top: 20px;margin-left: 80px;}
  81.    .re1 {position:relative;border-radius: 25px;margin-top:-8px;margin-left:100px;
  82.    border: 1px solid #fff;/* border color */padding: 1px; width: 50px;height: 1px;text-align: center;}
  83.    .bol2 {position: relative;width: 20px;height: 20px;padding: 8px;border-radius: 50%;border: 1px solid #fff;margin-top: 430px;margin-left: 100px;}
  84.    /* -- PROFILE -- */
  85.    .esquerd {position:absolute;overflow: hidden;width:220px;height:400px;left:50%;top:50%;margin-bottom:20%;border-radius: 10px;background: #fff; /* background color */border: 1px solid #AAA89D;
  86.    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%);}
  87.    /* header */
  88.    .header {position:absolute;overflow:hidden;width:220px;height:90px;left:0px;top:0px;background:url("https://i.imgur.com/tY1NJcZ.png");} /* CHANGE BACKGROUND HERE */
  89.    .bola1 {margin-top:10px;margin-left:10px;position:relative; background: #00000081;/* text color */font-size: 8px;
  90.    padding: 2px; width: 20px;height: 20px;text-align: center;border-radius: 50%;color:#fff;/* color */}
  91.    .bola2 {margin-top:-24px;margin-left:185px;position:relative; background: #00000081;/* text color */font-size: 8px;
  92.    padding: 2px; width: 20px;height: 20px;text-align: center;border-radius: 50%;color:#fff;/* color */}
  93.    /* all e */
  94.    .alle {position:absolute;overflow:auto;width:220px;height:312px;left:0px;top:60px;background:transparent;}
  95.    /* icon */
  96.    .sto img {z-index:999;position: relative;width: 50px;height:50px;padding: 3px;border-radius:50%; background: #fff;/* background color */margin-top:0px;margin-left:10px;
  97.    -moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
  98.    .sto img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  99.    /* follow button and etc */
  100.    .rectt {margin-top:-26px;position:relative;background:#fff;z-index:99;padding-top:10px; padding-bottom: 0px;}
  101.    .na i {position: relative;font-size: 10px; color: #883023;/* text color */text-align: center;margin-left: 130px;
  102.    height: 10px;width: 10px;border-radius: 50%;padding: 3px;border: 1px solid #883023;/* border color */}
  103.    .foll {margin-top:-14px;margin-left:155px;border-radius: 25px; color: #fff;/* text color */font-size: 8px;background: #883023;width: 40px;height: 10px;
  104.    border: 1px solid #883023;/* border color */padding-top: 3px;padding-bottom: 3px;padding-left: 5px;padding-right: 5px; text-align: center;}
  105.    
  106.    /* name, user and description */
  107.    .nabox {position:absolute;width:195px;height:30px;padding-top: 5px;padding-left: 5px;padding-right: 20px;padding-bottom: 20px;
  108.    margin-top: 0px;margin-left: 0px;overflow: hidden;background:#fff;}
  109.    .name {margin-left: 10px;font-size: 12px;position: relative;color:#000;/* text color */text-transform: capitalize;font-weight: bold;}
  110.    .name img {margin-top:-2px;margin-left:0px;height:15px;width:auto;border-radius:50%;position:relative;}
  111.    .user {font-size: 8px;margin-top: 0px;margin-left: 10px;position: relative;color:#E6B6A0;/* text color */}
  112.    .user:hover {text-decoration: underline;}
  113.    .ds {font-size: 8px;margin-top: 5px;margin-left: 10px;position: relative;color:#000;}
  114.    /* local, site and date */
  115.    .lobox {position:absolute;width:205px;height:10px;padding-top: 5px;padding-left: 5px;padding-right: 10px;padding-bottom: 20px;
  116.    margin-top: 55px;margin-left: 0px;overflow: hidden;background:#fff;}
  117.    .lonsi{font-size: 8px;margin-top: -4px;margin-left: 10px;position: relative;color:#585858;/* text color */}
  118.    .lonsi img {margin-top:-3px;margin-left:2px;height:15px;width:auto;border-radius:50%;position:relative;}
  119.    .lonsi a {color:#883023;text-decoration: none;/* link color */}
  120.    .lonsi a:hover {color:#AAA89D;text-decoration: none;/* link hover color */}
  121.    /* numbers */
  122.    .numbers {position:absolute;width:205px;height:20px;padding-top: 5px;padding-left: 5px;padding-right: 10px;padding-bottom: 0px;
  123.    margin-top: 86px;margin-left: 0px;overflow: hidden;background: #fff;}
  124.    .num {font-size: 8px;margin-top: -3px;margin-left: 10px;position: relative;color:#585858;}
  125.    .num b {color:#2A1E17; /* text color */font-weight: bold; margin-right: 2px;}
  126.    .num t {margin-right: 10px;}
  127.    /* tittle */
  128.    .tittle {position:absolute;width:205px;height:10px;padding-top: 5px;padding-left: 5px;padding-right: 10px;padding-bottom: 0px;
  129.    margin-top: 105px;margin-left: 0px;overflow: hidden; border-bottom: 1px solid #AAA89D;background: #fff;}
  130.    .tt {font-size: 10px;margin-top: -3px;margin-left: 10px;position: relative;color:#585858;}
  131.    .tt b {color:#AAA89D;/* text color */font-weight: bold; margin-right: 20px;}
  132.    /* icon 1 */
  133.    .ico {margin-top:121px;width:220px;height:auto;position:relative;border-bottom: 1px solid #AAA89D; background: #fff;padding-top: 0px;}
  134.    .ico img {margin-top:10px;margin-left:15px;height:40px;width:40;position:relative;border-radius:50%;}
  135.    /* user */
  136.    .icous {margin-top:-40px;margin-left:60px;font-size: 9px;position: relative;color:#585858;width: 150px;}
  137.    .icous b {font-size: 9.5px;font-weight: 900;text-transform: lowercase;color:#000; /* text color */}
  138.    .icous a {color:#883023; /* link color */text-decoration: none;}
  139.    .icous a:hover {color:#E6B6A0; /* link hover color */ text-decoration: underline;}
  140.    .icous img {margin-top:-2px;margin-left:0px;height:auto;width:10px;border-radius:50%;position:relative;}
  141.    /* tweet */
  142.    .esc {margin-top:2px;margin-left:0px;font-size: 8px;position: relative;color:#000;/* text color */width: 140px;height:auto;padding-bottom: 5px;}
  143.    /* images */
  144.    /* one image post */
  145.    .img1 {position:relative;width:140px;height:80px;border-radius: 10px; /* one image size */
  146.    margin-top: 0px;margin-left: 0px;background:url("https://i.imgur.com/V5boMdA.png");} /* CHANGE IMAGE HERE 140X80 */
  147.    /* two/three/four images post */
  148.    .img2, img3, .img4 {position:relative;width:140px;height:80px;border-radius: 10px; /* image size */
  149.    margin-top: 0px;margin-left: 0px;overflow: hidden;}
  150.    /* two images post */
  151.    .img22 img {margin-top: 0px;margin-left: 0px;width: 69px; height: 40;border-radius:0%;}
  152.    /* three images post */
  153.    .img33 img {margin-top: 0px;margin-left: 0px;width: 69px; height: 80;border-radius:0%;}
  154.    /* four images post */
  155.    .img44 img {margin-top: 0px;margin-left: 0px;width: 69px; height: 80;border-radius:0%;}
  156.    .img444 img {margin-top: 0px;margin-left: 0px;width: 69px; height: 40;border-radius:0%;}
  157.    /* extras */
  158.    .rt1 {margin-top:5px;margin-left:-5px;position: relative;font-size:6px; color:#E6B6A0; /* text color */padding-bottom: 5px;}
  159.    .rt1 img {margin-left: 5px;height:10px;width:auto;position:relative;}
  160.    .rt1 c:hover {text-decoration: none; color: #AAA89D} /* hover color */
  161.    .rt1 r:hover {text-decoration: none; color: #2A1E17} /* hover color */
  162.    .rt1 l:hover {text-decoration: none; color: #883023} /* hover color */
  163.    /* bottom */
  164.    .nsd hr {border: 0;border-top: 1px solid #F0EEE7;/* line color */width: 220px;margin-top: 370px;}
  165.    .bai {margin-top:-8px;width:220px;height:34px;position:relative;}
  166.    .bai img {margin-top:5px;margin-left:24px;height:18px;width:auto;position:relative;border-radius:50%;}
  167.    /* -- end of PROFILE -- */
  168.  
  169.    /* ----------- end of esquerda ----------- */
  170.  
  171.    
  172.    /* ----------- direita ----------- */
  173.    #direita {position:absolute; overflow: auto;margin-top:0px;margin-left:50%;height: 550px;width: 50%;background: url("https://i.imgur.com/nNippRA.jpg"); /* CHANGE BACKGROUND HERE */
  174.    -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size:cover;}
  175.  
  176.    /* -- FAQ -- */
  177.    .dir {position:absolute;width:220px;height:400px;left:50%;top:45%;border-radius: 10px;background: #ffffff; /* background color */
  178.    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%);}
  179.    /* TOP */
  180.    .usu {position: relative;margin-top: -15px;margin-left: 40px;width: 140px;font-size: 11px;color: #000;
  181.    text-align: center;font-weight: bold; }
  182.    .usu t {position: relative;font-size: 7px;color: #E6B6A0; /* hover color */text-align: center;}
  183.    .usu img {margin-top:-2px;margin-left:0px;height:15px;width:auto;border-radius:50%;position:relative;}
  184.    .yas i {position: relative;font-size: 10px;color: #E6B6A0; /* hover color */text-align: center;margin-top: -22px;margin-left: 190px;
  185.    height:10px;width:10px;border-radius:50%;padding: 3px;border: 1px solid #E6B6A0; /* line color */}
  186.    /* all d1 */
  187.    .alld1 {position:absolute;overflow:auto;width:220px;height:315px;left:0px;top:32px;}
  188.    /* DMS */
  189.    /* you */
  190.    /* icon1 */
  191.    .answer1 {margin-top:0px;width:135px;height:auto;position:relative;}
  192.    .a1 img {height:20px;width:20px;position:relative;border-radius:50%;}
  193.    /* comment */
  194.    .you1, .you2 {position: relative; padding: 7px;border-radius: 10px;width: auto;font-size: 9px;color:#fff;/* hover color */text-align: justify;background: #AAA89D;/* background color */}
  195.    .you1 {border-bottom-left-radius: 0px;}
  196.    .you2 {border-radius: 10px;border-bottom-left-radius: 0px;border-top-left-radius: 0px;}
  197.    /* hours */
  198.    .ho1 {margin-top:2px;margin-left:35px;font-size: 8px;position: relative;color:#585858;/* text color */}
  199.    /* other */
  200.    /* icon2 */
  201.    .question1 {width:135px;height:auto;position:relative;}
  202.    /* comment */
  203.    .other1 {position: relative; padding: 7px;border-radius: 10px;border-bottom-right-radius: 0px;width: auto;
  204.    font-size: 9px;color:#fff;/* hover color */text-align: justify; background: #883023;/* background color */}
  205.    /* hours */
  206.    .ho2 {margin-top:2px;margin-left:105px;font-size: 8px;padding-bottom: 5px;position: relative;color:#585858;/* text color */}
  207.    /* bottom */
  208.    /* pics */
  209.    .botall {position:absolute;overflow:hidden;width:220px;height:53px;left:0px;top:347px;}
  210.    .pics {top:0px;width:220px;height:26px;position:relative;border-top: 1px solid #E6B6A0;/* border top color */}
  211.    .pics img {height:18px;width:auto;position:relative;border-radius:50%;}
  212.    .picsr {margin-top:-17px;margin-left:60px;position:relative;border-radius: 25px; color: #AAA89C;/* text color */font-size: 6px;
  213.    padding: 4px; width: 120px;height: 6px;text-align: left;background: #F1EEE6; /* background color */}
  214.    .bad {margin-top:-2px;width:220px;height:34px;position:relative;}
  215.    .bad img {margin-top:5px;margin-left:24px;height:18px;width:auto;position:relative;border-radius:50%;}
  216.    /* -- end of FAQ -- */
  217.  
  218.  
  219.    /* -- LINKS -- */
  220.    .dire {position:absolute;width:220px;height:400px;left:50%;top:45%;margin-bottom:20%;border-radius: 10px;background: #ffffff; /* background color */
  221.    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%);}
  222.    /* top */
  223.    .top {margin-top:5px;width:220px;height:38px;position:relative;}
  224.    .top img {margin-top:0px;margin-left:12px;height:22px;width:22px;position:relative;border-radius:50%;}
  225.    .rcorners {margin-top:-37px;margin-left:40px;position:relative;border-radius: 25px; color: #E6B6A0;/* text color */font-size: 8px;
  226.    border: 1px solid #E6B6A0;/* border color */padding: 3px; width: 135px;height: 10px;text-align: center;}
  227.    .lnr {position:absolute;color:#E6B6A0; /* hover color */margin-top: 7px;margin-left:190px;font-size:16px;padding-right:12px;color:#E6B6A0; /* hover color */}
  228.    .feti hr {border: 0;border-top: 1px solid #E6B6A0;/* line color */width: 220px;margin-top: 7px;}
  229.    /* all d2 */
  230.    .alld2 {position:absolute;overflow:auto;width:220px;height:335px;left:0px;top:32px;}
  231.    /* box */
  232.    .boxlink {margin-top:0px;margin-left:0px;width:220px;height:auto;position:relative;overflow: hidden;}
  233.    /* country */
  234.    .co {margin-top:0px;margin-left:0px;font-size: 12px;position: relative;color:#000;/* text color */
  235.    border-bottom: 1px solid #E6B6A0;/* border color */padding: 5px;padding-top: 5px;padding-right: 10px;padding-left: 10px;font-weight: 900;}
  236.    /* link */
  237.    .lin {margin-top:0px;margin-left:0px;font-size: 12px;position: relative;color:#000;/* text color */
  238.    border-bottom: 1px solid #E6B6A0;/* border color */padding: 10px;padding-top: 10px;padding-right: 10px;padding-left: 10px;font-weight: 900;}
  239.    .lin t {color:#585858;/* text color */margin-right: 8px;font-size: 10px;}
  240.    .lin a {color: #000;} /* link color */
  241.    .lin a:hover{color: #E6B6A0;} /* link hover color */
  242.    /* tweet number */
  243.    .ttn {margin-top:2px;margin-left:15px;font-size: 8.5px;position: relative;color:#585858;/* text color */}
  244.    /* tweet news */
  245.    .ttnew {position:relative;width:170px;height:45px;border-radius: 5px; /* one image size */
  246.    margin-top: 3px;margin-left: 15px;border: 1px solid #5858589a;overflow: hidden;}
  247.    /* tweet news img */
  248.    .ttneww {position:relative;width:45px;height:45px; margin-left:180px;}
  249.    .ttneww img {margin-top: 0px;margin-left: 0px;width: 45px; height: 45;}
  250.    /* tweet news text */
  251.    .ttnews {position:relative;width:110px;height:45px;padding-top:5px; padding-left: 8px;margin-top: 3px;}
  252.    .ttnews a {font-size: 8px;color:#883023;}/* link color */
  253.    .ttnews a:hover {color: #E6B6A0}/* link hover color */
  254.    .ttnews b {font-size: 8px;color: #000;}/* text color */
  255.    /* bottom */
  256.    .ns hr {border: 0;border-top: 1px solid #E6B6A0;/* line color */width: 220px;margin-top: 335px;}
  257.    .emb {margin-top:-8px;width:220px;height:34px;position:relative;}
  258.    .emb img {margin-top:5px;margin-left:24px;height:18px;width:auto;position:relative;border-radius:50%;}
  259.    /* -- end of LINKS -- */
  260.  
  261.    /* -- AFFILIATES -- */
  262.    .diret {position:absolute;width:220px;height:400px;left:50%;top:45%;margin-bottom:20%;border-radius: 10px;background: #ffffff; /* background color */
  263.    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%);}
  264.    /* top */
  265.    .topo img {margin-top:5px;margin-left:13px;height:auto;width:22px;border-radius:50%;position:relative;}
  266.    /* messages title */
  267.    .posna {width: 140px; height:auto;margin-top:-16px;margin-left:40px; color: #000;/* text color */font-size:10px;text-align: center;}
  268.    .posna b {font-weight: bold; margin-left: 0px;}
  269.    .cim hr {border: 0;border-top: 1px solid #AAA89D;/* line color */width: 220px;margin-top: 6px;}
  270.    /* all d3 */
  271.    .alld3 {position:absolute;overflow:auto;width:220px;height:335px;left:0px;top:33px;}
  272.    /* icon 1 */
  273.    .ms {width:220px;height:46;position:relative;border-bottom: 1px solid #AAA89D; background: #fff;padding-top: 0px;}
  274.    .ms img {margin-top:5px;margin-left:12px;height:35px;width:auto;position:relative;border-radius:50%;}
  275.    /* user */
  276.    .md {margin-top:-32px;margin-left:52px;font-size: 8px;position: relative;color:#585858;width: 160px; }
  277.    .md b {font-size: 9px;font-weight: 900;color:#000; /* text color */}
  278.    .md t {color:#585858; /* text color */ margin-left: 50px;}
  279.    .md a {color:#E6B6A0; /* link color */ text-decoration: none;}
  280.    .md a:hover {color:#883023; /* link hover color */text-decoration: underline;}
  281.    /* tweet */
  282.    .mds {margin-top:2px;margin-left:0px;font-size: 8px;position: relative;color:#585858;/* text color */width: 140px;height:20;padding-bottom: 5px;}
  283.    /* bottom */
  284.    .ai hr {border: 0;border-top: 1px solid #AAA89D;/* line color */width: 220px;margin-top: 335px;}
  285.    .aiai {margin-top:-8px;width:220px;height:34px;position:relative;}
  286.    .aiai img {margin-top:5px;margin-left:24px;height:18px;width:auto;position:relative;border-radius:50%;}
  287.    /* -- end of AFFILIATES -- */
  288.    
  289.    </style>
  290. </head>
  291. <body>
  292.    <div id="container">
  293.  
  294.    <!-------------- esquerda -------------->
  295.    <div id="esquerda">
  296.  
  297.    <!-- -- phone -- -->
  298.    <div class="esquerda">
  299.    <div class="bol1"></div>
  300.    <div class="re1"></div>
  301.    <div class="bol2"></div>
  302.    <!-- -- profile -- -->
  303.    <div class="esquerd">
  304.    <!-- header -->
  305.    <div class="header">
  306.    <div class="bola1"><i class="fa fa-chevron-left" style="margin-top:6px"></i></div>
  307.    <div class="bola2"><i class="fa fa-plus" style="margin-top:6px;margin-left: 0px;"></i></div>
  308.    </div>
  309.    <!-- all -->
  310.    <div class="alle">
  311.    <!-- icon -->
  312.    <div class="sto"><img src="https://i.imgur.com/jAtLbB8.png" ></div>
  313.    <!-- follow button and etc -->
  314.    <div class="rectt">
  315.    <div class="na"><i class="lnr lnr-cog"></i>
  316.    <div class="foll">Following</div></div></div>
  317.    <!-- name, user and description -->
  318.    <div class="nabox">
  319.    <div class="name">your name goes here <img src="https://i.imgur.com/TgP5sRD.png" class="pump"></div> <!-- change this -->
  320.    <div class="user">@youruser</div><!-- change this -->
  321.    <div class="ds">Your description goes here. Your description goes here. Your description goes here. </div>  <!-- change this -->
  322.    </div>
  323.    <!-- local, site and date -->
  324.    <div class="lobox">
  325.    <div class="lonsi">
  326.    <img src="https://i.imgur.com/k03YUYE.png" style="margin-left:-4px" class="pump">moon <!-- change this -->
  327.    <img src="https://i.imgur.com/K3bEq1b.png" class="pump"><a href="/">yourwebsite.com</a></div> <!-- change this -->
  328.    <div class="lonsi" style="margin-top: 2px;"><img src="https://i.imgur.com/00iEUYg.png" style="margin-left:-3px;" class="pump">Joined July 2017</div> <!-- change this -->
  329.    </div>
  330.    <!-- numbers -->
  331.    <div class="numbers">
  332.    <div class="num"><b>123</b><t>Following</t> <b>26 823 834</b>Followers</div><!-- change this -->
  333.    </div>
  334.  
  335.    <!-- TWEETS -->
  336.    <!-- name -->
  337.    <div class="tittle">
  338.    <div class="tt"><b>Tweets</b> <b>Tweets & replies</b> <b>Media</b></div>
  339.    </div>
  340.    <!-- tweets -->
  341.    <div class="tweets">
  342.    <!-- tweet 1 -->
  343.    <div class="ico"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  344.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 4h<!-- change this -->
  345.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-10px;margin-left:16px;" class="pump">
  346.    <div class="esc">This is a tweet you can write whatever you want. This is a tweet you can write whatever you want.
  347.        This is a tweet you can write whatever you want. This is a tweet you can write whatever you want. </div> <!-- change this -->
  348.    <!-- tweet 1 image -->
  349.    <div class="img1"><!-- CHANGE IMAGE ON CSS 140X80 --></div>
  350.    <!-- end of tweet 1 image -->
  351.    <!-- extras -->
  352.    <div class="rt1">
  353.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>58</c> <!-- change numbers -->
  354.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>20K</r> <!-- change numbers -->
  355.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>3.8K</l> <!-- change numbers -->
  356.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  357.    </div></div></div>
  358.    <!-- end of tweet 1 -->
  359.  
  360.    <!-- tweet 2 -->
  361.    <div class="ico" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  362.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 12h<!-- change this -->
  363.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-16px;margin-left:138px;" class="pump">
  364.    <div class="esc">This is a tweet you can write whatever you want. This is a tweet you can write whatever you want.
  365.        This is a tweet you can write whatever you want. This is a tweet you can write whatever you want. </div><!-- change this -->
  366.    <div class="rt1">
  367.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>25</c> <!-- change numbers -->
  368.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>14K</r> <!-- change numbers -->
  369.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>8.4K</l> <!-- change numbers -->
  370.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  371.    </div></div></div>
  372.    <!-- end of tweet 2 -->
  373.  
  374.    <!-- tweet 3 -->
  375.    <div class="ico" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  376.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 1d<!-- change this -->
  377.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-10px;margin-left:16px;" class="pump">
  378.    <div class="esc">This is a tweet you can write whatever you want.  This is a tweet you can </div><!-- change this -->
  379.    <div class="rt1">
  380.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>102</c> <!-- change numbers -->
  381.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>54K</r> <!-- change numbers -->
  382.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>18K</l> <!-- change numbers -->
  383.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  384.    </div></div></div>
  385.    <!-- end of tweet 3 -->
  386.  
  387.    <!-- tweet 4 -->
  388.    <div class="ico" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  389.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 2d<!-- change this -->
  390.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-10px;margin-left:16px;" class="pump">
  391.    <div class="esc">This is a tweet </div><!-- change this -->
  392.    <!-- tweet 4 image -->
  393.    <div class="img2">
  394.    <div class="img22">
  395.        <img src="https://i.imgur.com/c1bDyZ6.png" style="margin-left:0px;margin-top:0px" > <!-- image size: 140X80 -->
  396.        <img src="https://i.imgur.com/w7NXupv.png" style="margin-left:71px;margin-top:-42px"> <!-- image size: 140X80 -->
  397.        <img src="https://i.imgur.com/VvuwqGA.png" style="margin-left:0px;margin-top:0px"> <!-- image size: 140X80 -->
  398.        <img src="https://i.imgur.com/OeavRap.png" style="margin-left:71px;margin-top:-42px"> <!-- image size: 140X80 -->
  399.    </div>
  400.    </div>
  401.    <!-- end of tweet 4 image -->
  402.    <div class="rt1">
  403.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>10</c> <!-- change numbers -->
  404.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>30K</r> <!-- change numbers -->
  405.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>20K</l> <!-- change numbers -->
  406.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  407.    </div></div></div>
  408.    <!-- end of tweet 4 -->
  409.  
  410.    <!-- tweet 5 -->
  411.    <div class="ico" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  412.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 2d<!-- change this -->
  413.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-10px;margin-left:16px;" class="pump">
  414.    <div class="esc">This is a tweet you can write whatever you want. </div><!-- change this -->
  415.    <!-- tweet 5 image -->
  416.    <div class="img3">
  417.    <div class="img33">
  418.        <img src="https://i.imgur.com/R619yjf.png" style="margin-left:0px;margin-top:0px"> <!-- image size: 70X80 -->
  419.        <img src="https://i.imgur.com/bS0lytf.png" style="margin-left:71px;margin-top:-82px"> <!-- image size: 70X80 -->
  420.    </div>
  421.    </div>
  422.    <!-- end of tweet 5 image -->
  423.    <div class="rt1">
  424.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>10</c> <!-- change numbers -->
  425.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>30K</r> <!-- change numbers -->
  426.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>20K</l> <!-- change numbers -->
  427.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  428.    </div></div></div>
  429.    <!-- end of tweet 5 -->
  430.  
  431.     <!-- tweet 6 -->
  432.    <div class="ico" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  433.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 2d<!-- change this -->
  434.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-10px;margin-left:16px;" class="pump">
  435.    <div class="esc">This is a tweet you can write whatever you want. </div><!-- change this -->
  436.    <!-- tweet 6 image -->
  437.    <div class="img4">
  438.    <div class="img44">
  439.        <img src="https://i.imgur.com/QPABBxl.png" style="margin-left:0px;margin-top:0px"> <!-- image size: 70X80 -->
  440.    </div>
  441.    <div class="img444">
  442.        <img src="https://i.imgur.com/2KPTcJQ.png" style="margin-left:71px;margin-top:-82px"> <!-- image size: 140X80 -->
  443.        <img src="https://i.imgur.com/TD8nrNn.png" style="margin-left:71px;margin-top:-40px"> <!-- image size: 140X80 -->
  444.    </div>
  445.    </div>
  446.    <!-- end of tweet 6 image -->
  447.    <div class="rt1">
  448.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>10</c> <!-- change numbers -->
  449.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>30K</r> <!-- change numbers -->
  450.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>20K</l> <!-- change numbers -->
  451.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  452.    </div></div></div>
  453.    <!-- end of tweet 6 -->
  454.  
  455.    <!-- tweet 7 -->
  456.    <div class="ico" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  457.    <div class="icous"><b>Your Name</b> <img src="https://i.imgur.com/TgP5sRD.png" class="pump"> <a>@youruser</a> · 12h<!-- change this -->
  458.        <img src="https://i.imgur.com/4HzlRky.png" style="margin-top:-16px;margin-left:138px;" class="pump">
  459.    <div class="esc">This is a tweet you can write whatever you want. This is a tweet you can write whatever you want.
  460.        This is a tweet </div> <!-- change this -->
  461.    <div class="rt1">
  462.        <img src="https://i.imgur.com/Jc1GhBK.png" style="margin-left:4px" class="pump"><c>25</c> <!-- change numbers -->
  463.        <img src="https://i.imgur.com/189zEl4.png" style="margin-left:10px" class="pump"><r>14K</r> <!-- change numbers -->
  464.        <img src="https://i.imgur.com/mljk90a.png" style="margin-left:10px" class="pump"><l>8.4K</l> <!-- change numbers -->
  465.        <img src="https://i.imgur.com/5NOxKOJ.png" style="margin-left:10px" class="pump">
  466.    </div></div></div>
  467.    <!-- end of tweet 7 -->
  468.    <!-- you can add more by copy and paste any tweet -->
  469.    </div></div>
  470.    <!-- end of TWEETS -->
  471.    <!-- bottom -->
  472.    <div class="nsd"><hr></div>
  473.    <div class="bai">
  474.        <img src="https://i.imgur.com/Jug4IQx.png" class="pump">
  475.        <img src="https://i.imgur.com/ogoYnQ3.png" class="pump">
  476.        <img src="https://i.imgur.com/I6TH1la.png" class="pump">
  477.        <img src="https://i.imgur.com/3xbK6M3.png" class="pump">
  478.    </div>
  479.    </div>
  480.    <!-- end of profile -->
  481.    </div>
  482.    <!-- end of phone -->
  483.  
  484.    </div>
  485.    <!-------------- end of esquerda -------------->
  486.    
  487.    <!-------------- direita -------------->
  488.    <div id="direita">
  489.    
  490.    <!-- -- FAQ -- -->
  491.    <div class="dir">
  492.    <!-- top -->
  493.    <i class="fa fa-chevron-left" style="position:relative;margin-top:10px;margin-left:10px;font-size:14px;color:#E6B6A0;"></i>
  494.    <div class="usu">Your Name <img src="https://i.imgur.com/TgP5sRD.png" class="pump"></div>
  495.    <div class="usu" style="margin-top: -2px;margin-left: 35px;"><t>@youruser</t></div> <!-- change this -->
  496.    <div class="yas"><i class="fa fa-info"></i></div>
  497.    <div class="feti" style="position:relative;margin-top:-4px;"><hr></div>
  498.    <!-- dms -->
  499.  
  500.    <!-- FIRST OF ALL:
  501.        YOU HAVE TO BE CAREFUL HERE OK? BC IF YOU WRITE A LONGER SENTENCE IN A SHORT 'BUBBLE' IT WILL BE AESTHETICALLY UNPLEASING
  502.        SO CHANGE THE NUMBERS (margin-left or margin-right) SO THE SIZE OF THE WORDS CAN FIT THE 'BUBBLE' !!!!
  503.    -->
  504.  
  505.    <div class="alld1">
  506.    <!-- you 1 -->
  507.    <div class="answer1">
  508.    <div class="a1" style="margin-top:23px;margin-left:10px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change image -->
  509.    <div class="you1" style="margin-top:-35px;margin-left:35px;margin-right: 10px">Hello! Welcome to my faq. <!-- change this --></div>
  510.    <div class="ho1"><t>8:20AM</t><!-- change this -->
  511.    </div></div>
  512.    <!-- other 1 -->
  513.    <div class="question1" style="margin-left:75px;margin-top:35px;"> <!-- change this -->
  514.    <div class="other1" style="margin-top:-30px;margin-left:45px;">Hi! Where are you from? <!-- change this --></div>
  515.    <div class="ho2"><t>8:21AM</t><!-- change this -->
  516.    </div></div>
  517.    <!-- you 2 -->
  518.    <div class="answer1">
  519.    <div class="a1" style="margin-top:18px;margin-left:10px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change image -->
  520.    <div class="you1" style="margin-top:-24px;margin-left:35px;">I'm from this country. <!-- change this --></div>
  521.     <div class="ho1"><t>8:22AM</t><!-- change this -->
  522.     </div></div>
  523.     <!-- other 2 -->
  524.     <div class="question1" style="margin-left:75px;margin-top:35px;"> <!-- change this -->
  525.     <div class="other1" style="margin-top:-30px;margin-left:50px;">How old are you? <!-- change this --></div>
  526.     <div class="ho2"><t>8:28AM</t><!-- change this -->
  527.     </div></div>
  528.     <!-- you 3 -->
  529.     <div class="answer1">
  530.     <div class="a1" style="margin-top:23px;margin-left:10px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change image -->
  531.     <div class="you1" style="margin-top:-24px;margin-left:35px;margin-right: 40px">I'm young. <!-- change this --></div>
  532.    <div class="ho1"><t>8:32AM</t><!-- change this -->
  533.    </div></div>
  534.    <!-- other 3 -->
  535.    <div class="question1" style="margin-left:75px;margin-top:35px;"> <!-- change this -->
  536.    <div class="other1" style="margin-top:-30px;margin-left:52px;">What do you do? <!-- change this --></div>
  537.    <div class="ho2"><t>8:46AM</t><!-- change this -->
  538.    </div></div>
  539.    <!-- you 4 -->
  540.    <div class="answer1">
  541.    <div class="a1" style="margin-top:23px;margin-left:10px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change image -->
  542.    <div class="you1" style="margin-top:-50px;margin-left:35px;margin-right: -5px">I'm currently studying. <!-- change this --></div>
  543.     <div class="you2" style="margin-top:2px;margin-left:35px;margin-right: 22px">Anything else? <!-- change this --></div>
  544.     <div class="ho1"><t>8:58AM</t><!-- change this -->
  545.     </div></div>
  546.     <!-- other 4 -->
  547.     <div class="question1" style="margin-left:75px;margin-top:35px;"> <!-- change this -->
  548.     <div class="other1" style="margin-top:-30px;margin-left:20px;">Can you help me with X and Y? <!-- change this --></div>
  549.     <div class="ho2"><t>9:15AM</t><!-- change this -->
  550.     </div></div>
  551.     <!-- you 5 -->
  552.     <div class="answer1">
  553.     <div class="a1" style="margin-top:23px;margin-left:10px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change image -->
  554.     <div class="you1" style="margin-top:-24px;margin-left:35px;margin-right: 48px">For sure. <!-- change this --></div>
  555.     <div class="ho1"><t>9:18AM</t><!-- change this -->
  556.     </div></div>
  557.     <!-- other 5 -->
  558.     <div class="question1" style="margin-left:75px;margin-top:35px;"> <!-- change this -->
  559.     <div class="other1" style="margin-top:-30px;margin-left:75px;">Thank you! <!-- change this --></div>
  560.     <div class="ho2"><t>9:38AM</t><!-- change this -->
  561.     </div></div>
  562.     <!-- you 6 -->
  563.     <div class="answer1">
  564.     <div class="a1" style="margin-top:23px;margin-left:10px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change image -->
  565.     <div class="you1" style="margin-top:-29px;margin-left:35px;margin-right: 62px">💖💖 <!-- change this --></div>
  566.     <div class="ho1" style="margin-bottom:10px;"><t>9:49AM</t><!-- change this -->
  567.     </div></div>
  568.     <!-- end of dms -->
  569.     </div>
  570.     <!-- bottom -->
  571.     <div class="botall">
  572.     <div class="pics">
  573.         <img src="https://i.imgur.com/PECINbd.png" style="margin-top:5px;margin-left:10px">
  574.         <div class="picsr">Start a message</div>
  575.         <img src="https://i.imgur.com/oTcXwQe.png" style="margin-top:-16px;margin-left:195px">
  576.     </div>
  577.     <div class="bad">
  578.         <img src="https://i.imgur.com/Jug4IQx.png" class="pump">
  579.         <img src="https://i.imgur.com/ogoYnQ3.png" class="pump">
  580.         <img src="https://i.imgur.com/I6TH1la.png" class="pump">
  581.         <img src="https://i.imgur.com/MTHIQgW.png" class="pump">
  582.     </div></div>
  583.    
  584.     </div>
  585.     <!-- -- end of FAQ -- -->
  586.  
  587.     <!-- -- LINKS -- -->
  588.     <div class="dire" style="margin-top:460px;">
  589.     <!-- top -->
  590.     <i class="lnr lnr-cog"></i>
  591.     <div class="top"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"></div><!-- change img -->
  592.     <div class="rcorners"><i class="fa fa-search"></i> Search Twitter</div>
  593.     <div class="feti"><hr></div>
  594.     <!-- all -->
  595.     <div class="alld2">
  596.     <!-- country trend -->
  597.     <div class="boxlink"> <div class="co">Country trend<!-- change this --></div></div>
  598.     <!-- link 1 -->
  599.     <div class="boxlink"> <div class="lin"><t>1</t><a href="/">Link</a><!-- change this -->
  600.     <div class="ttn">5,987 Tweets <!-- change this --></div></div></div>
  601.     <!-- link 2 -->
  602.     <div class="boxlink"> <div class="lin"><t>2</t><a href="/">Link</a><!-- change this -->
  603.     <div class="ttn">119K Tweets <!-- change this --></div>
  604.     <div class="ttnew">
  605.     <div class="ttnews"><a href="/">website.com</a><br><b>This is a new, you can write wtv but not much...</b></div> <!-- change this -->
  606.     <div class="ttneww" style="margin-top: -53px;margin-left: 125px;"><img src="https://i.imgur.com/jAtLbB8.png"></div> <!-- change this -->
  607.     </div></div></div>
  608.     <!-- link 3 -->
  609.     <div class="boxlink"> <div class="lin"><t>3</t><a href="/">#Link</a><!-- change this --></div></div>
  610.     <!-- link 4 -->
  611.     <div class="boxlink"> <div class="lin"><t>4</t><a href="/">Link</a><!-- change this -->
  612.     <div class="ttn">2,439K Tweets<br>@bellahadid, @kendalljenner, and 1 more are Tweeting about this  <!-- change this --></div></div></div>
  613.     <!-- link 5 -->
  614.     <div class="boxlink"> <div class="lin"><t>5</t><a href="/">Link</a><!-- change this -->
  615.     <div class="ttn">9,238 Tweets <!-- change this --></div></div></div>
  616.     <!-- link 6 -->
  617.     <div class="boxlink"> <div class="lin"><t>6</t><a href="/">Link</a><!-- change this -->
  618.     <div class="ttn">12K Tweets <!-- change this --></div></div></div>
  619.     <!-- link 7 -->
  620.     <div class="boxlink"> <div class="lin"><t>7</t><a href="/">Link</a><!-- change this -->
  621.     <div class="ttn">2,437 Tweets <!-- change this --></div></div></div>
  622.     <!-- end of all -->
  623.     </div>
  624.     <!-- bottom -->
  625.     <div class="ns"><hr></div>
  626.     <div class="emb">
  627.         <img src="https://i.imgur.com/Jug4IQx.png" class="pump">
  628.         <img src="https://i.imgur.com/Oqg5APb.png" class="pump">
  629.         <img src="https://i.imgur.com/I6TH1la.png" class="pump">
  630.         <img src="https://i.imgur.com/3xbK6M3.png" class="pump">
  631.     </div>
  632.     </div>
  633.     <!-- -- end of LINKS -- -->
  634.  
  635.     <!-- -- AFFILIATES -- -->
  636.     <div class="diret" style="margin-top:920px;">
  637.     <!-- top -->
  638.     <div class="topo"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"></div> <!-- change image -->
  639.     <div class="posna"><b>Messages</b> </div>
  640.     <div class="topo" style="margin-top:-20px;margin-left:172px;"><img src="https://i.imgur.com/2chE0gn.png" class="pump"></div>
  641.     <div class="cim"><hr></div>
  642.     <!-- all -->
  643.     <div class="alld3">
  644.     <!-- dm 1 -->
  645.     <div class="ms" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  646.     <div class="md"><b>Your Name</b> <a>@youruser</a> <t>15h</t> <!-- change this -->
  647.     <div class="mds">You: Affiliate </div>
  648.     </div></div>
  649.     <!-- dm 2 -->
  650.     <div class="ms" style="margin-top:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  651.     <div class="md"><b>Your Name</b> <a>@youruser</a> <t>15h</t><!-- change this -->
  652.     <div class="mds">You: Affiliate </div>
  653.     </div></div>
  654.     <!-- dm 3 -->
  655.     <div class="ms" style="margin-left:0px;"><img src="https://i.imgur.com/jAtLbB8.png" class="pump"> <!-- change this -->
  656.     <div class="md"><b>Your Name</b> <a>@youruser</a> <t>15h</t><!-- change this -->
  657.     <div class="mds">You: Affiliate </div>
  658.     </div></div>
  659.     </div>
  660.     <!-- bottom -->
  661.     <div class="ai"><hr></div>
  662.     <div class="aiai" style="margin-right: 20px;">
  663.         <img src="https://i.imgur.com/Jug4IQx.png" class="pump">
  664.         <img src="https://i.imgur.com/Oqg5APb.png" class="pump">
  665.         <img src="https://i.imgur.com/I6TH1la.png" class="pump">
  666.         <img src="https://i.imgur.com/3xbK6M3.png" class="pump">
  667.     </div>
  668.     </div>
  669.     <!-- -- end of AFFILIATES -- -->
  670.     </div>
  671.     <!-------------- end of direita -------------->
  672.     </div><!-- end of container-->
  673.  
  674.     <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  675.     <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>
  676.     <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  677.  
  678. </body>
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!