<html>
<head>
<title>CV | J.Sigal</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto+Mono:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.4.0/balloon.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="white" class="container">
<div id="intro" class="animated fadeInUp">
<h1 id="head">J.Sigal</h1>
<h4 id="h">Software engineer student</h4>
<hr>
</div>
<div class="row">
<div class="col-lg-6 col-md-4">
<div id="personal">
<h2>About me</h2>
<ul>
<li>Date of birth:</li>
<li>Place of birth:</li>
<li>Adress:</li>
<li>Hobbies: drawing | photography | running</li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-8 col-sm-8">
<div id="contact">
<ul>
<li><img src="https://images.pexels.com/photos/204686/pexels-photo-204686.jpeg?cs=srgb&dl=computer-food-fruit-204686.jpg&fm=jpg"></li>
<li>J. Sigal</li>
<li>123456789</li>
<li>abc@gmail.com</li>
<li>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="https://www.facebook.com"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href="https://github.com"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="https://codepen.io/j_sigal/"><i class="fa fa-codepen" aria-hidden="true"></i></a>
<a href="https://www.instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="Jenny Sigal.pdf" download data-balloon="Download CV" data-balloon-pos="down"><i class="fa fa-download" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div id="skills">
<h2>Technical skills</h2>
<ul>
<li>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">HTML5</div>
</div>
</li>
<li>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">CSS</div>
</div>
</li>
<li>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Javascript</div>
</div>
</li>
<li>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">C</div>
</div>
</li>
<li>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">Python</div>
</div>
</li>
<li>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Java</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-5">
<div id="education">
<h2>Education</h2>
<ul>
<li><strong>2000-2006:</strong></li>
<li><strong>2013-2014:</strong></li>
<li><strong>2014-2015:</strong></li>
<li><strong>2015-today:</strong></li>
<li><strong>Extracurricular activities:</strong></li>
</ul>
<h2>Previous experience</h2>
<ul>
<li><strong>2008-2010:</strong></li>
<li><strong>2011-2017:</strong></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>html {
height: 100%;
}
body {
height: 100%;
background-image: url("black-2398956_1920.jpg");
background-repeat: no-repeat;
background-size: cover;
margin: 0;
background-attachment: fixed;
color: #464849;
}
.white {
background-color: white;
opacity: 0.9;
margin: 5% 15%;
padding: 0 5% 5% 5%;
font-family: 'Roboto Mono', sans-serif;
font-weight: 300;
}
#intro {
font-family: 'Lato', sans-serif;
text-align: center;
margin-top: 0;
padding-top: 10%;
}
#personal {
margin-top: 20%;
}
#personal li{
border-left: 1px solid #ccc;
padding-left: 5%;
}
#contact {
border: 3px double #ccc;
height: 450px;
width: 300px;
padding: 5%;
margin: auto;
margin-top: 10%;
margin-bottom: 10%;
}
#contact img {
width: 80%;
margin-left: 10%;
margin-bottom: 10%;
border-radius: 50%;
}
#contact li:nth-of-type(5) {
padding-top: 15%;
}
#contact a:nth-of-type(6) {
margin-left: 30%;
}
#skills{
padding-right: 10%;
margin-top: 0;
}
#skills h2{
padding-top: 0;
margin-top: 0;
}
#skills li {
padding: 2% 0 2% 0;
color: black;
}
#skills li:nth-of-type(1) {
padding-top: 3%;
}
#education {
font-size: 0.8em;
margin-top: 10%;
}
i {
color: #37383a;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding:1.2% 0 1.2% 0;
font-size: 1.2em;
}
hr {
width: 40%;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
h2 {
font-weight: 700;
color: #77797c;
padding-top: 5%;
padding-bottom: 2%;
}
h1 {
font-weight: 900;
font-size: 5em;
color: #77797c;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.1),
0px 8px 13px rgba(0,0,0,0.1),
0px 15px 20px rgba(0,0,0,0.1);
}
#h {
color: #737477;
padding-top: 2%; text-transform: uppercase;
font-family: 'Roboto Mono', sans-serif;
}
.progress {
color: black;
}
.progress-bar {
background-color: grey !important;
-webkit-animation: progressBar 3s ease-in-out;
-webkit-animation-fill-mode:both;
-moz-animation: progressBar 3s ease-in-out;
-moz-animation-fill-mode:both;
}
@-webkit-keyframes progressBar {
0% { width: 0; }
70% { width: 100%; }
}
@-moz-keyframes progressBar {
0% { width: 0; }
10% { width: 100%; }
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.