Scribd
Upload
9 views4 pages

Code2pdf 67583e8a25b7e

Uploaded by

kaushaldeveloper449
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views4 pages

Code2pdf 67583e8a25b7e

Uploaded by

kaushaldeveloper449
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

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>

You might also like