<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<!--Contains whole cv-->
<div class="container">
<!--Top 'banner' that has image and info-->
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-sm-5 col-lg-6">
<img src="Lenna.png" class="rounded-circle" alt="person-portrait" style="width:198px;height:198px;">
<h5>Hi, I am</h5>
<h3 style="color:pink;margin:5px;padding:2px;"><strong>John Doe!</strong></h3>
</div>
<div class="col-sm-7 col-lg-6" style="padding:15px;">
<p>
<i class="fa fa_banner fa-briefcase"></i>
Electrical and Computer Engineer
</p>
<p>
<i class="fa fa_banner fa-calendar"></i>
Date of Birth: 13/03/1999
</p>
<p>
<i class="fa fa_banner fa-home"></i>
Address: P. Sherman 42 Wallaby Way
</p>
<p>
<i class="fa fa_banner fa-envelope"></i>
Email: [email protected]
</p>
<p>
<i class="fa fa_banner fa-phone"></i>
Phone number: (+30)6999999999
</p>
<p>
<i class="fa fa_banner fa-globe"></i>
LinkedIn:
<a href="https://www.linkedin.com/">
https://www.linkedin.com/
</a>
</p>
</div>
</div>
</div>
</div>
<hr>
<!--Second line- contains skills, education and working experience-->
<div class="row">
<!--1st column->>Skills,languages and hobbies container-->
<div class="left-col animated bounceInDown">
<!--SKILLS-->
<div>
<h3><p>Skills:</p></h3>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
HTML 80%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
Python 60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width:75%">
WordPress 75%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
Java 80%
</div>
</div>
<!--languages-->
<h3><p>Languages:</p></h3>
<p>English</p>
<div class="language_bar" style="width:85%;"></div>
<p>German</p>
<div class="language_bar" style="width:70%;"></div>
<p>Greek</p>
<div class="language_bar" style="width:90%;"></div>
<!--Hobbies-Other skills-->
<h3><p>Personality Traits:</p></h3>
<ul>
<li>Reliable</li>
<li>Organised</li>
<li>Loyal</li>
<li>Hard-Working</li>
<li>Communicative</li>
</ul>
</div>
</div>
<!--2rd column->>working experience and education-->
<!--Middle col: Work experience-->
<div class="middle-col animated slideInUp slow">
<h3><i class="fa fa_banner fa-star"></i>Work Experience:</h3>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid magent; border-radius:16px;background-color:pink;opacity: 0.6;">
<em class="date">
15/03/2018-<br>
Now
</em>
</div>
<div class="col4" >
<h4>StackOverflow
<span class="badge badge-secondary" style="color:#ffa8b6">Current</span>
</h4>
<h6><em>Lead Web Designer</em></h6>
</div>
</div><br>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
26/07/2015-<br>
30/01/2017
</em>
</div>
<div class="col4" >
<h4>Ubisoft</h4>
<h6><em>Graphics Designer</em></h6>
</div>
</div>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
26/11/2013-<br>
03/01/2015
</em>
</div>
<div class="col4" >
<h4>W3 School</h4>
<h6><em>Front-end Developer</em></h6>
</div>
</div>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
22/02/2007-<br>
12/11/2013
</em>
</div>
<div class="col4" >
<h5>Freelance Web Designer</h5>
</div>
</div>
</div>
<!--Right col: Education-->
<div class="right-col animated slideInDown delay-1s slow">
<h3><i class="fa fa_banner fa-graduation-cap"></i> Education and Certifications:</h3>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
28/09/2006-<br>
26/07/2011
</em>
</div>
<div class="col4" >
<h5><strong>University of Thessaly,</strong><br> Certificate in Electrical and Computer Engineering
</h5>
</div>
</div><br>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
26/07/2015-<br>
30/01/2017
</em>
</div>
<div class="col4" >
<h5><strong>University of Harvard,</strong><br> Master Degree</h5>
</div>
</div>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
26/11/2013
</em>
</div>
<div class="col4" >
<h5><strong>IEEExtreme 2nd place</strong></h5>
</div>
</div>
<div style="display: block;">
<div class="col3" style ="border-right:2px solid #d0bdf4;">
<em class="date">
22/02/2017
</em>
</div>
<div class="col4" >
<h5><strong>Award of Inovation and Web Design</strong></h5>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
Follow me on social media:
</p>
<!--nav aria-label="breadcrumb"-->
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item"><a href="https://www.twitter.com">Twitter</a></li>
<li class="breadcrumb-item"><a href="https://www.facebook.com">Facebook</a></li>
<li class="breadcrumb-item"><a href="https://www.instagram.com">Instagram</a></li>
</ol>
<!--/nav-->
</footer>
</body>