Resume 1: 
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Professional Resume</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root{
--dark:#264653;
--blue:#00b4d8;
--light:#f7f9fb;
}
body{
margin:0;
background:#e6edf3;
font-family:Arial, Helvetica, sans-serif;
}
.resume{
max-width:900px;
margin:30px auto;
background:#fff;
box-shadow:0 12px 35px rgba(0,0,0,0.2);
overflow:hidden;
}
/* HEADER */
.header{
background:var(--dark);
padding:30px;
display:flex;
flex-direction:row-reverse;
align-items:center;
gap:30px;
color:#fff;
}
.photo{
flex:0 0 140px;
text-align:center;
}
.photo img{
width:120px;
height:120px;
border-radius:50%;
border:5px solid #fff;
object-fit:cover;
}
.details{
flex:1;
}
.details h1{
margin:0;
font-size:34px;
}
.details h1 span{
color:var(--blue);
}
.details p{
margin-top:6px;
font-size:18px;
opacity:0.9;
}
/* BODY */
.body{
display:flex;
flex-direction:row-reverse;
}
/* RIGHT PANEL (SIDEBAR) */
.left{
width:32%;
background:var(--light);
padding:30px 25px;
}
.left h3{
color:var(--dark);
margin-bottom:15px;
font-size:18px;
}
.info p{
font-size:14px;
margin:10px 0;
}
.skill{
margin-bottom:12px;
font-size:14px;
}
.bar{
background:#ddd;
height:6px;
border-radius:5px;
margin-top:5px;
}
.bar span{
display:block;
height:100%;
background:var(--blue);
border-radius:5px;
}
.icons{
display:flex;
gap:12px;
margin-top:15px;
}
.icons div{
width:36px;
height:36px;
border-radius:50%;
background:var(--blue);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}
/* LEFT MAIN CONTENT */
.right{
width:68%;
padding:35px;
}
.section{
margin-bottom:25px;
}
.section h2{
background:var(--dark);
color:#fff;
display:inline-block;
padding:8px 18px;
border-radius:25px;
font-size:18px;
}
.section p{
font-size:14px;
color:#333;
line-height:1.6;
}
.timeline{
margin-top:10px;
}
.timeline-item{
margin-bottom:15px;
}
.timeline-item span{
color:var(--blue);
font-weight:bold;
font-size:13px;
}
/* FOOTER */
.footer{
background:var(--dark);
color:#fff;
text-align:center;
padding:12px;
font-size:13px;
}
/* MOBILE */
@media(max-width:768px){
.body{
flex-direction:column;
}
.left,.right{
width:100%;
}
.header{
flex-direction:column;
text-align:center;
}
}
</style>
</head>
<body>
<div class="resume">
<!-- HEADER -->
<div class="header">
<div class="photo">
<img src="profile.png" alt="Profile Photo">
</div>
<div class="details">
<h1><span>YOUR</span> NAME</h1>
<p>Software Engineer</p>
</div>
</div>
<!-- BODY -->
<div class="body">
<!-- SIDEBAR (RIGHT) -->
<div class="left">
<h3>CONTACT</h3>
<div class="info">
<p>📧 yourname@gmail.com</p>
<p>📞 +91 123-456-7890</p>
<p>📍 India 689928</p>
<p>🌐 www.xyz.com</p>
</div>
<h3>SKILLS</h3>
<div class="skill">Programming
<div class="bar"><span style="width:90%"></span></div>
</div>
<div class="skill">Communication
<div class="bar"><span style="width:80%"></span></div>
</div>
<div class="skill">Collaboration
<div class="bar"><span style="width:75%"></span></div>
</div>
<div class="skill">Problem Solving
<div class="bar"><span style="width:85%"></span></div>
</div>
<h3>LANGUAGES</h3>
<div class="skill">English
<div class="bar"><span style="width:90%"></span></div>
</div>
<div class="skill">Chinese
<div class="bar"><span style="width:70%"></span></div>
</div>
<div class="skill">French
<div class="bar"><span style="width:60%"></span></div>
</div>
<h3>HOBBIES</h3>
<div class="icons">
<div>✈</div>
<div>⚽</div>
<div>🎵</div>
<div>🎮</div>
</div>
</div>
<!-- MAIN CONTENT (LEFT) -->
<div class="right">
<div class="section">
<h2>SUMMARY</h2>
<p>
Motivated Software Engineer with a strong background in computer science and
technology. Proficient in full-stack development and network architecture.
</p>
</div>
<div class="section">
<h2>EDUCATION</h2>
<div class="timeline">
<div class="timeline-item">
<span>2012-2014</span><br>
<strong>Franklin University</strong><br>
Bachelor of Science in Computer Science (GPA 4.3)
</div>
<div class="timeline-item">
<span>2014-2017</span><br>
<strong>Certifications</strong><br>
Python (PCAP), C++ (CPA)
</div>
</div>
</div>
<div class="section">
<h2>WORK EXPERIENCE</h2>
<div class="timeline">
<div class="timeline-item">
<span>2016-2018</span><br>
<strong>ONE XYZ INC</strong><br>
Project Manager – software migration projects
</div>
<div class="timeline-item">
<span>2018-2020</span><br>
<strong>XYZ DEVELOPMENT CORP</strong><br>
Programmer – HTML, C++ & Python
</div>
</div>
</div>
</div>
</div>
<div class="footer">
www.xyz.com
</div>
</div>
</body>
</html>
No comments:
Post a Comment