oWJrKo

index.html

<div id="photo">
  <div class="pic">
  </div>
</div>

<div id="top">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-5">
        <h1>Robin Cussol</h1>
        <h4><small>Curiosité, Rigueur, Qualité</small></h4>
      </div>
      <div class="col-md-2">
      
      </div>
      <div class="col-md-5">
        <h2>Web Développeur</h2>
        <h4>Full-Stack</h4>
      </div>
    </div>
  </div>
</div>

<div id="main">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
      <h2>Compétences</h2>
        <h3><i class="fa fa-rss" aria-hidden="true"></i>
Web</h3>
        <ul>
        <li>
          <div class="progress">
  <div id="pb-html" class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">HTML</div>
</div>
          </li>
          <li><div class="progress">
  <div id="pb-css" class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">CSS</div>
</div></li>
          <li><div class="progress">
  <div id="pb-javascript" class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Javascript</div>
</div></li>
          <li><div class="progress">
  <div id="pb-php" class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">PHP</div>
</div></li>
          <li><div class="progress">
  <div id="pb-bootstrap" class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Bootstrap</div>
</div></li>
          <li><div class="progress">
  <div id="pb-jquery" class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">jQuery</div>
</div></li>
          <li><div class="progress">
  <div id="pb-laravel" class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Laravel</div>
</div></li>
          <li><div class="progress">
  <div id="pb-nodejs" class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Node.js</div>
</div></li>
          <li><div class="progress">
  <div id="pb-vuejs" class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Vue.js</div>
</div></li>
        </ul>
        <h3 style="margin-top: 2cm;"><i class="fa fa-volume-up" aria-hidden="true"></i>
Linguistiques</h3>
        <ul>
        <li>
          Français : Langue maternelle</li>
        <li>
          Anglais : Bilingue</li>
        <li>Allemand : Niveau scolaire</li>
          <li>Slovaque : Notions</li></ul>
      </div>
      
      <div class="col-md-8">
        <div class="card card-outline-secondary mb-3 text-center">
  <div class="card-block">
    <h3><i class="fa fa-graduation-cap" aria-hidden="true"></i> Éducation</h3>
    <table>
        <tr>
        <td><em>PhD de Mathématiques</em> <br> University of East Anglia, Norwich, Angleterre
        </td>
        <td>2017</td>
        </tr>
        <tr>
        <td><em>Master de Mathématiques, Mention Bien</em> <br> Université de Caen, France
        </td>
        <td>2013</td>
        </tr>
        
        <tr>
        <td><em>Licence de Mathématiques, Mention Très Bien</em> <br> <em>Licence LLCE Anglais, Mention Bien</em> <br> Université de Caen, France
        </td>
        <td>2011</td>
        </tr>
        <tr>
        <td><em>Baccalauréat Général, Série Scientifique, <br>Classe Européenne Anglais, Mention Très Bien</em> <br> Lycée Dumont D'Urville, Caen
        </td>
        <td>2008</td>
        </tr>

      </table>
      
    
  </div>
</div>
        
        <div class="card card-outline-secondary mb-3 text-center">
  <div class="card-block">
    <h3><i class="fa fa-briefcase" aria-hidden="true"></i> Expériences Pro</h3>
    <div class="card-deck">
      <div class="card">
        <div class="card-block">
          <h5 class="card-title">Assistant d'éducation</h5>
          <p class="card-text">
          2011-2013 <br>
            <em>Lycée Laplace, Caen</em><br>
          <small class="text-muted">Cours de soutien, surveillant d'internat</small></p> 
          
        </div>
      </div>
      
      <div class="card">
        <div class="card-block">
          <h5 class="card-title">Chargé d'enseignement</h5>
          <p class="card-text">
          2013-2016 <br>
            <em>University of East Anglia, Norwich, Angleterre</em><br>
          <small class="text-muted">TDs d'Algèbre, d'Analyse et de Topologie</small></p> 
          
        </div>
      </div>
    </div>
    <div class="card-deck">
      
      <div class="card">
        <div class="card-block">
          <h5 class="card-title">Marketool <small class="text-muted">en création</small></h5>
          <p class="card-text">
          2017 <br>
            <em>Prague, Rép. Tchèque</em><br>
          <small class="text-muted">Solution de marketing par email</small></p> 
          
        </div>
      </div>
      
      <div class="card">
        <div class="card-block">
          <h5 class="card-title">E-commerce <small class="text-muted">à venir</small></h5>
          <p class="card-text">
          2017 <br>
            <em>Caen</em><br>
          <small class="text-muted">Vitrine pour nouveau produit Personnalisation du produit Commande et paiement</small></p> 
          
        </div>
      </div>
        
    </div>
  </div>
</div>
      </div>
    </div>
  </div>
</div>

<div id="bottom">
<div class="container-fluid">
  <div class="row">
  <div class="col-md">
    <address>
    <b>Robin Cussol</b> <br>
      Stavitelská 6 <br>
      160 00 Prague <br>
      République Tchèque
    </address>
    
    </div>
  <div class="col-md">
    <p><i class="fa fa-phone" aria-hidden="true"></i> 06 74 05 36 68</p>
    <p><i class="fa fa-envelope-o" aria-hidden="true"></i> robin@robincussol.com</p>
  
    </div>
  <div class="col-md">
    <p>
    <i class="fa fa-twitter" aria-hidden="true"></i> @RobinCsl</p>
    <p><i class="fa fa-bookmark" aria-hidden="true"></i> robincussol.com</p>
    <p><i class="fa fa-github" aria-hidden="true"></i> @RobinCsl</p>
    </div>
    
  </div>
  </div>
</div>

owjrko.markdown

oWJrKo

A Pen by Robin Cussol on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=PT+Serif|Source+Sans+Pro');

/* body, #top, #main, #bottom {
  border: 1px solid black;
}
*/

body {
  width:210mm;
  height: 297mm;
  margin-left:auto;
  margin-right:auto;
  margin-top:-4cm;
}

.container, .row {
  height: 100%;
}

.col-md-5, .col-md-2, .col-md-4, .col-md-8 {
  /*border: 1px dashed blue;*/
  height: 100%;
}

body {
  width: 21cm;
  height: 29.7cm;
}

#photo {
  position: relative;
  top: 4.5cm;
  left: 8.5cm;
  width: 4cm;
  height: 4cm;
  border-radius: 50%;
  border: 0.1cm solid rgba(39, 124, 28,0.9)/*#F23628*/;
  z-index: 3;
  background-color: #F7ECD8;
}

.pic {
  background: url(https://rcussol.files.wordpress.com/2014/01/1000049100.jpg) no-repeat center;
  background-size: contain;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /*border: 0.3cm solid #F45145;*/
}

#top {
  height: 4cm;
  background-color: rgba(60,60,60,0.9);
  border-bottom: 0.2cm solid rgba(100,100,100,1);
  color: rgb(240, 241, 243);
}

#top .row .col-md-5:first-child {
  padding-top: 0.5cm;
  padding-left: 0.5cm;
}

#top .row .col-md-5:last-child {
  text-align: right;
  padding-top: 0.75cm;
  padding-right: 0.5cm;
}

#main {
  height: 21.7cm;
  background-color: #F0F1F3;
}

#main .row .col-md-4 {
  padding: 0.5cm 0.5cm;
  background-color: /*#F45145*/ rgb(39, 124, 28,0.5);
  border-right: solid 0.2cm /*#F23628*/ rgba(39, 124, 28,0.6); 
  height:217mm;
  /*border-bottom: solid 0.3cm #F23628; */
}

#main .row .col-md-4 h3 {
  margin: 0.3cm 0.2cm;
  font-size: 160%;
}

#main .col-md-4 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#main .col-md-4 ul li {
  padding: 5px;
  font-family: "Source Sans Pro", sans-serif;
  color: #F0F1F3;
}


#main .col-md-8 {
  margin-top: 7mm;
  height:210mm;
}

#main .col-md-8 .card {
  height: auto;
}

#main .col-md-8 .card-block h3 {
  color: /*#F23628*/ rgba(39, 124, 28,0.8);
  text-align: left;
  border-bottom: 1px solid /*#F23628*/ rgba(39, 124, 28, 1);
}

#bottom {
  height: 4cm;
  padding-top: 0.3cm;
  background-color: rgba(60,60,60,0.9);
  border-top: 0.2cm solid rgba(100,100,100,1);
  color: rgb(240, 241, 243);
  font-family: "Source Sans Code", sans-serif;
  font-size: 85%;
}

#bottom .col-md-4:first-child {
  margin-left: 0.3cm;
}

#bottom .row {
  padding-left: 1.5cm;
}

h1, h2 {
  font-family: "PT Serif",Georgia,Times,serif;
}

h4 {
  color: rgba(240, 241, 243, 0.6);
  font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
}


.progress {
  background-color: rgba(0,0,0,0.05);
}

.progress-bar {
  height: 0.65cm;
  padding: 3px 0;
}

#pb-html {
  background-color: rgba(157, 214, 0,1);
}

#pb-css {
  background-color: rgba(157, 214, 0,1);
}

#pb-javascript {
  background-color: rgba(157, 214, 0,1);
}

#pb-php {
background-color: rgba(157, 214, 0,1);
}

#pb-bootstrap {
  background-color: rgba(157, 214, 0,1);
}

#pb-jquery {
  background-color: rgba(157, 214, 0,1);
}

#pb-laravel {
  background-color: rgba(157, 214, 0,1);
}

#pb-nodejs {
  background-color: rgba(157, 214, 0,1);
}

#pb-vuejs {
  background-color: rgba(157, 214, 0,1);
}

h2, h3 {
  font-family: "PT Serif", serif;
  color: #F0F1F3;
}

table {
  width: 90%;
  padding: 2cm;
  margin-left: 0.3cm
}

table tr {
  width: 100%;
}

table tr td {
  font-size: 80%;
  padding-top: 0.2cm;
  vertical-align: top;
}

table tr td:first-child {
  text-align: left;
  margin-right: 10px;
}

table tr td:last-child {
  text-align: right;
  margin-left: 10px;
}

.card-deck {
  font-size: 80%;
}

.card-title {
  font-size: 113%;
}

.card-deck .card {
  background-color: rgba(255,255,255,0.4);
  margin: 0;
  
}

@page {
    size: A4;
    margin: 0;
}

@media print {
  html, body {
    width: 21cm;
    height: 29.7cm;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />