daily pastebin goal
58%
SHARE
TWEET

About Me Template for Miou

a guest Apr 22nd, 2018 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  2.  
  3. <style>
  4.  
  5. ABOUT ME TEMPLATE | design & coding by Cai @ rper.me/1388872
  6.  
  7.    — DO NOT REMOVE MY CREDIT. DO NOT REMOVE MY CREDIT. DO NOT REMOVE MY CREDIT.
  8.    — DO NOT redistribute codes, use as a base to create a completely new layout, or claim as your own.  
  9.    — ABSOLUTELY DO NOT merge codes with anyone else's to completely make your own.
  10.    
  11.  
  12. </style>
  13.  
  14. <style>
  15.  
  16. ABOUT ME TEMPLATE | Instructions for Miou
  17.  
  18. - Just change all the colors & images in ':root'!
  19.  
  20. </style>
  21.  
  22. <style>@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,900|Roboto);
  23.  
  24.   @font-face {
  25.     font-family: 'brushgyo';
  26.     src: url('https://dl.dropbox.com/s/yh6ckmy195mnl10/Stay%20Wildy.ttf');
  27.     }
  28.  
  29.   :root {
  30.     --name-color: #d7e3ed;
  31.     --icon-bg-color: #dedede;
  32.     --icon-border-color: #e0e0e0;
  33.     --title-color: #d7e3ed;
  34.     --bold-color: #d7e3ed;
  35.     --text-color: #b1b1b1;
  36.     --icon-one-img: url('http://placehold.it/50');
  37.     --icon-two-img: url('http://placehold.it/50');
  38.     }
  39.  
  40.   #miou-abt {
  41.     width: 430px;
  42.     height: 350px;
  43.     position: relative;
  44.   }
  45.  
  46.   #miou-abt-name {
  47.     font: 100px 'brushgyo';
  48.     color: var(--name-color);
  49.     text-shadow: 2px 1px 10px #f1f1f1;
  50.     text-transform: lowercase;
  51.     text-align: center;
  52.     left: 10%; top: 5%;
  53.     position: absolute;
  54.   }
  55.  
  56.   #miou-abt-icon-bg {
  57.     width: 50px;
  58.     height: 50px;
  59.     background-size:cover;
  60.     padding: 10px;
  61.     background-color: var(--icon-bg-color);
  62.     border: var(--icon-border-color);
  63.     border-radius: 100%;
  64.     display: block;
  65.     margin: 15px 0px;
  66.   }
  67.  
  68.   .miou-abt-icon {
  69.     width: 50px;
  70.     height: 50px;
  71.     background-image: var(--icon-one-img);
  72.     background-size:cover;
  73.     border-radius: 100%;
  74.   }
  75.  
  76.   .miou-abt-icon-two {
  77.     width: 50px;
  78.     height: 50px;
  79.     background-image: var(--icon-two-img);
  80.     background-size:cover;
  81.     border-radius: 100%;
  82.   }
  83.  
  84.   #miou-abt-left {
  85.     width: 150px;
  86.     height: auto;
  87.     position: absolute;
  88.     left: 25%;
  89.     top: 35%;
  90.   }
  91.  
  92.   #miou-abt-right {
  93.     width: 150px;
  94.     height: auto;
  95.     position: absolute;
  96.     right: 2%;
  97.     top: 35%;
  98.   }
  99.  
  100.   h1 {
  101.     width: 150px;
  102.     font: 10px 'noto sans';
  103.     font-weight: 700;
  104.     color: var(--title-color);
  105.     text-transform: lowercase;
  106.     border-bottom: 1px dotted #eee;
  107.     padding-top: 5px;
  108.     padding-bottom: 5px;
  109.   }
  110.  
  111.   b1 {
  112.     font: 10px 'noto sans';
  113.     font-weight: 700;
  114.     color: var(--bold-color);
  115.     display: inline-block;
  116.   }
  117.  
  118.   words {
  119.     width: 150px;
  120.     font: 8.5px 'noto sans';
  121.     color: var(--text-color);
  122.     text-transform: lowercase;
  123.     text-align: justify;
  124.     margin-top: 3px;
  125.     display: inline-block;
  126.   }
  127.  
  128.   words a {
  129.     font: 8px 'noto sans';
  130.     color: #b1b1b1;
  131.   }
  132.   border {
  133.     width: 150px;
  134.     border-top: 1px dotted #eee;
  135.     margin-top: 10px;
  136.     padding-bottom: 5px;
  137.     display: block;
  138.   }
  139.  
  140.   span.x {
  141.     font-size: 8px;
  142.     margin-left: 3px;
  143.     margin-right: 3px;
  144.     color: #d7e3ed;
  145.   }
  146.  
  147. </style>
  148.  
  149. <div id="miou-abt">
  150. <div id="miou-abt-name">miou lovehart</div>
  151. <div style="left: 5%; top: 38%; position: absolute;">
  152. <div id="miou-abt-icon-bg"><div class="miou-abt-icon"></div></div>
  153. <div id="miou-abt-icon-bg"><div class="miou-abt-icon-two"></div></div>
  154. </div>    
  155.  
  156. <div id="miou-abt-left">
  157. <h1>about me</h1>
  158. <words>Chocolate bar marzipan fruitcake cotton candy gummies soufflé sugar plum muffin wafer.</words>
  159. <border></border>
  160. <b1>skills:</b1> <words>hello keep this two lines maximum please </words>
  161. <border></border>
  162. <b1>lifelines (+)</b1> <words>hello keep this two lines maximum please</words>
  163. </div>
  164.  
  165. <div id="miou-abt-right">
  166. <h1>intro</h1>
  167. <words>Chocolate bar marzipan fruitcake cotton candy gummies soufflé sugar plum muffin wafer.</words>
  168. <border></border>
  169. <b1>in a relationship</b1> <words>with alan minoru <i class="sf sf-heart-2-o"></i></words>
  170. <border></border>
  171. <b1>links</b1> <words><a href="#">discord</a> <span class="x"><i class="sf sf-cross-2-o"></i></span> <a href="#">line: username</a></words>
  172. </div>
  173. </div>
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