<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web Template">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="kybo15">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV-RESUME | Simply Template</title>
<!-- ext -->
<link rel="stylesheet" href="ext/styles.css">
<link rel="stylesheet" href="ext/css/all.css">
<link rel="icon" href="img/favicon.ico" sizes="16x16 32x32" type="image/ico">
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
/* Set A4 page size */
@page {
size: A4;
margin: 20mm;
}
body {
font-size: 14px;
line-height: 22px;
color: #363a59;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
height: 842px;
width: 595px;
}
.skill_name, .language_name {
color: white;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: "Rubik", sans-serif;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.padding {
padding: 25px 0;
}
.user-center {
position: relative;
text-align: center;
padding: 7px 0;
border-radius: 10px;
border-bottom: 2px solid #363a59;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.main {
height: auto;
display: flex;
flex-wrap: wrap;
margin: 50px auto;
justify-content: space-between;
}
.main .left,
.main .right {
padding: 25px;
box-sizing: border-box;
flex: 1;
}
.main .left {
background: #1e1d40;
}
.main .left .profile {
width: 100%;
height: 280px;
}
.main .left .profile img {
width: 100%;
height: 100%;
}
.main .left .content {
padding: 0 25px;
}
.main .title {
margin-bottom: 20px;
}
.main .left .bold {
color: #f6e001;
}
.main .left .regular {
color: white;
}
.main .item {
padding: 25px 0;
border-bottom: 2px solid #363a59;
}
.main .left .item:last-child,
.main .right .item:last-child {
border-bottom: 0px;
}
.main .left ul li {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.main .left ul li:last-child {
margin-bottom: 0;
}
.main .left ul li .icon {
width: 35px;
height: 35px;
background: #363a59;
color: white;
border-radius: 30%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.main .icon i,
.main .right .hobby ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main .left ul li .data {
color: white;
}
.main .left .skills ul li {
display: flex;
margin-bottom: 10px;
color: white;
justify-content: space-between;
align-items: center;
}
.main .left .skills ul li .skill-name {
font-weight: 500;
width: 25%;
}
.main .left .skills ul li .progress {
width: 60%;
margin: 0 5px;
height: 7px;
border-radius: 20px;
background: #363a59;
position: relative;
}
.main .left .skills ul li .percent {
font-weight: 500;
width: 15%;
}
.main .left .skills ul li .progress span {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 20px;
background: #d6d6d6;
}
.main .left .social .semi-bold {
color: white;
margin-bottom: 2px;
}
.main .right {
background: #f2f2fc;
}
.main .right .bold {
color: #1e1d40;
}
.main .right .work ul,
.main .right .education ul {
padding-left: 40px;
overflow: hidden;
}
.main .right ul li {
position: relative;
}
.main .right ul li .date {
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
.main .right ul li .info {
margin-bottom: 20px;
}
.main .right ul li:last-child .info {
margin-bottom: 0;
}
.main .right .work ul li:before,
.main .right .education ul li:before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #1e1d40;
}
.main .right .work ul li:after,
.main .right .education ul li:after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 115px;
background: #1e1d40;
}
.main .right .hobby ul {
display: flex;
justify-content: space-between;
}
.main .right .hobby ul li {
width: 57px;
height: 57px;
border: 3px solid #1e1d40;
border-radius: 15px;
position: relative;
color: #1e1d40;
}
.main .right .hobby ul li i {
font-size: 30px;
}
.main .right .hobby ul li:before {
content: "";
position: absolute;
top: 25px;
right: -85px;
width: 85px;
height: 3px;
background: #1e1d40;
}
.main .right .hobby ul li:last-child:before {
display: none;
}
/* Button */
.btn a {
display: block;
background: #1e1d40;
color: white;
padding: 13px;
cursor: pointer;
text-decoration: none;
width: 215px;
text-align: center;
border-radius: 50px;
font-weight: 400;
font-size: 16px;
}
.padd-btn {
text-align: center;
padding: 15px 100px 18px 125px;
}
.btn a:hover {
background: #363a59;
}
</style>
</head>
<body>
<!-- Start Left Section -->
<div class="main">
<div class="left">
<div class="profile">
<img src="// PROFILE_IMAGE //" alt="profile">
</div>
<!-- Content section -->
<div class="content">
<div class="item info">
<div class="title user-center">
<p class="bold">// USER_NAME //</p>
<p class="regular">// CAREER_FIELD //</p>
</div>
<ul>
<li>
<i class="fas fa-map-marked-alt"></i>
<div class="data">Address : // ADDRESS //</div>
</li>
<li>
<i class="fas fas fa-phone-alt"></i>
<div class="data">Phone : // PHONE_NUMBER //</div>
</li>
<li>
<i class="fas fa-inbox"></i>
<div class="data">Email : // EMAIL //</div>
</li>
<li>
<i class="fab fa-linkedin"></i>
<div class="data">Linkedin :// LINKEDIN //</div>
</li>
</ul>
</div>
<!-- Skill section -->
<div class="item skills">
<div class="title">
<p class="bold">Skill's</p>
</div>
<div class="skill_name">
// SKILLS //
</div>
</div>
<!-- The end of the Skill section -->
<!-- Language section -->
<div class="item skills">
<div class="title">
<p class="bold">Language's</p>
</div>
<div class="language_name">
// LANGUAGES //
</div>
</div>
</div>
</div>
<!-- End Left Section -->
<!-- Start Right Section -->
<div class="right">
<div class="item about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>Experienced software developer with strong expertise in designing, coding, andmaintaining software applications. Skilled in multiple programming
</div>
<!--Start Education Section-->
<div class="item education">
<div class="title">
<p class="bold">Education</p>
</div>
// EDUCATION //
</div>
</div>
<!-- End Right Section -->
</div>
</body>
</html>
