About Me Template for Miou

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>

ABOUT ME TEMPLATE | design & coding by Cai @ rper.me/1388872

   — DO NOT REMOVE MY CREDIT. DO NOT REMOVE MY CREDIT. DO NOT REMOVE MY CREDIT.
   — DO NOT redistribute codes, use as a base to create a completely new layout, or claim as your own.
   — ABSOLUTELY DO NOT merge codes with anyone else's to completely make your own.


</style>

<style>

ABOUT ME TEMPLATE | Instructions for Miou

- Just change all the colors & images in ':root'!

</style>

<style>@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,900|Roboto);

  @font-face {
    font-family: 'brushgyo';
    src: url('https://dl.dropbox.com/s/yh6ckmy195mnl10/Stay%20Wildy.ttf');
    }

  :root {
    --name-color: #d7e3ed;
    --icon-bg-color: #dedede;
    --icon-border-color: #e0e0e0;
    --title-color: #d7e3ed;
    --bold-color: #d7e3ed;
    --text-color: #b1b1b1;
    --icon-one-img: url('http://placehold.it/50');
    --icon-two-img: url('http://placehold.it/50');
    }

  #miou-abt {
    width: 430px;
    height: 350px;
    position: relative;
  }

  #miou-abt-name {
    font: 100px 'brushgyo';
    color: var(--name-color);
    text-shadow: 2px 1px 10px #f1f1f1;
    text-transform: lowercase;
    text-align: center;
    left: 10%; top: 5%;
    position: absolute;
  }

  #miou-abt-icon-bg {
    width: 50px;
    height: 50px;
    background-size:cover;
    padding: 10px;
    background-color: var(--icon-bg-color);
    border: var(--icon-border-color);
    border-radius: 100%;
    display: block;
    margin: 15px 0px;
  }

  .miou-abt-icon {
    width: 50px;
    height: 50px;
    background-image: var(--icon-one-img);
    background-size:cover;
    border-radius: 100%;
  }

  .miou-abt-icon-two {
    width: 50px;
    height: 50px;
    background-image: var(--icon-two-img);
    background-size:cover;
    border-radius: 100%;
  }

  #miou-abt-left {
    width: 150px;
    height: auto;
    position: absolute;
    left: 25%;
    top: 35%;
  }

  #miou-abt-right {
    width: 150px;
    height: auto;
    position: absolute;
    right: 2%;
    top: 35%;
  }

  h1 {
    width: 150px;
    font: 10px 'noto sans';
    font-weight: 700;
    color: var(--title-color);
    text-transform: lowercase;
    border-bottom: 1px dotted #eee;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  b1 {
    font: 10px 'noto sans';
    font-weight: 700;
    color: var(--bold-color);
    display: inline-block;
  }

  words {
    width: 150px;
    font: 8.5px 'noto sans';
    color: var(--text-color);
    text-transform: lowercase;
    text-align: justify;
    margin-top: 3px;
    display: inline-block;
  }

  words a {
    font: 8px 'noto sans';
    color: #b1b1b1;
  }
  border {
    width: 150px;
    border-top: 1px dotted #eee;
    margin-top: 10px;
    padding-bottom: 5px;
    display: block;
  }

  span.x {
    font-size: 8px;
    margin-left: 3px;
    margin-right: 3px;
    color: #d7e3ed;
  }

</style>

<div id="miou-abt">
<div id="miou-abt-name">miou lovehart</div>
<div style="left: 5%; top: 38%; position: absolute;">
<div id="miou-abt-icon-bg"><div class="miou-abt-icon"></div></div>
<div id="miou-abt-icon-bg"><div class="miou-abt-icon-two"></div></div>
</div>

<div id="miou-abt-left">
<h1>about me</h1>
<words>Chocolate bar marzipan fruitcake cotton candy gummies soufflé sugar plum muffin wafer.</words>
<border></border>
<b1>skills:</b1> <words>hello keep this two lines maximum please </words>
<border></border>
<b1>lifelines (+)</b1> <words>hello keep this two lines maximum please</words>
</div>

<div id="miou-abt-right">
<h1>intro</h1>
<words>Chocolate bar marzipan fruitcake cotton candy gummies soufflé sugar plum muffin wafer.</words>
<border></border>
<b1>in a relationship</b1> <words>with alan minoru <i class="sf sf-heart-2-o"></i></words>
<border></border>
<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>
</div>
</div>