Untitled

<!DOCTYPE html>
<html>
<head>
<style>

#content {
    background-color: #FDF4F4;
    width: 800px;
    height: 1030px;
    padding: 20px;
    border: 25px solid #480000;
    margin: 25px;
}
body{
font: 16px Arial, sans-serif;
background: url("http://i.imgur.com/QV8jdyd.png") center center fixed;
background-repeat: no-repeat;
}

h1{
font: 50px Verdana, sans-serif;
stroketext
}

h4{
font: 16px Verdana, sans-serif;
}

ul {
  margin: 0px;
  padding: 10px 20px;
  border: 1px solid #999;
  box-shadow: 0px 0px 5px #999;
  border-radius: 6px;
  width: 220px;
  list-style-type: none;
}
ul li h3 {
  font-size: 15px;
  font-family: Verdana;
}
ul li .graph {
  background-color: #dbdbdb;
  margin-bottom: 15px;
}
ul li .graph .bar {
  height: 12px;
  width: 0;
  background-color: #F3EEE4;
}

</style>


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bar').each(function(element) {
  console.log($(this).data('value') / 100);
  $(this).css('background-color', colorLuminance("#7f0000", $(this).data('value') / 100));
  $(this).width($(this).data('value') + "%");
});

// http://www.sitepoint.com/javascript-generate-lighter-darker-color/
function colorLuminance(hex, lum) {
  // validate hex string
  hex = String(hex).replace(/[^0-9a-f]/gi, '');
  if (hex.length < 6) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  lum = lum || 0;

  // convert to decimal and change luminosity
  var rgb = "#",
    c, i;
  for (i = 0; i < 3; i++) {
    c = parseInt(hex.substr(i * 2, 2), 16);
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
    rgb += ("00" + c).substr(c.length);
  }

  return rgb;
}
});
</script>


<title>CV-Joseph Stalin</title>
</head>
<body>
<center>
<div align="justify" id="content">

<div style="width="100%;">
<h1><center><b>CV-Joseph Stalin</b></center></h1>
</div>

<div align="justify" class="col" style="float: left; width: 45%; padding:5%;">
<h2>Work Experiences</h2>
<p>Glouroius uncontested leader of the Sovjet Union from 1922-1953.</p>
<p>Moderator of /r/communism.</p>
<p>Official representative of the Russian Moustache Grooming Foundation.</p>


<h2>Education</h2>

<p>Bachelors degree in how web development.</p>
<p>Masters degree in country border extraction.</p>
<p>Doctorate in advanced communism studies.</p>

<h2>Language Knowledges</h2>
<p>I only commmunicate in russian, the language of spoken by the true nation.</p>

<h2>Personal interests</h2>
<p>My only freetime activity is listening to the Sovjet National anthem. <a href="https://www.youtube.com/watch?v=U06jlgpMtQs">Here you can listen to it.</a></p>

<h2>Other Work</h2>
<a href="http://moveeme.weebly.com/">
<img src="http://i.imgur.com/IJN86D7.png" width="65%"></img>
</a>
<p>A website where you get movies reccomended for you, by me!</p>
<a href="https://moveeman.wordpress.com/">
<img src="http://i.imgur.com/kMbRp7F.png"></img>
</a>
<p>Here you can follow my movie blog, where I will post reviews about recent movies that I want to talk about.</p>
</div>


<div align="justify" class="col" style="float: left; width: 35%; padding:5%;">
<h2>Personality traits</h2>
<ul>
  <li>
    <h3>Discipline</h3>
    <div class="graph">
      <div class="bar" data-value="85"></div>
    </div>
  </li>
  <li>
    <h3>Communism</h3>
    <div class="graph">
      <div class="bar" data-value="100"></div>
    </div>
  </li>
  <li>
    <h3>Patience</h3>
    <div class="graph">
      <div class="bar" data-value="30"></div>
    </div>
  </li>
  <li>
    <h3>Loyalty</h3>
    <div class="graph">
      <div class="bar" data-value="100"></div>
    </div>
  </li>
   <li>
    <h3>Mercy</h3>
    <div class="graph">
      <div class="bar" data-value="0"></div>
    </div>
  </li>
</ul>
<p>As you can see, I'm the perfect leader.</p>

<h2>Contact information</h2>

<div style="width:250px; height:188px; margin:5px">
<img src="https://libcom.org/files/images/history/uncle-Joe.jpg" border="1px" height="188px" width="250px"></img>
</div>
<span style="padding:20px"></span>
<table style="width:100%">
  <tr>
    <td>Telephone:</td>
    <td>574L1N</td>
  </tr>
  <tr>
    <td>Email adress:</td>
    <td>stalin.sovjet@ussr.ru</td>
  </tr>
</table>


<div style="width: 230px; padding:10px;">
<a href="https://twitter.com/">
<img src="http://i.imgur.com/vWK9pZs.png"></img>
</a>
<a href="https://www.facebook.com/">
<img align="right" src="http://i.imgur.com/XdcmtO3.png"></img>
</a>
</div>
</div>
</div>
</center>
<div align="right" width=100px height=30px margin-right="10px">
<h4>Created by Angus Lothian N2A</h4>
</div>
</body>
</html>