Please Open in Desktop Mode:-
.png)
Resume CV design in HTML CSS
style.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Popins',sans-serif;
}
body{
background:lightcoral;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container{
position: relative;
width: 100%;
max-width: 1000px;
min-height: 1000px;
background: #fff;
margin: 50px;
display: grid;
grid-template-columns: 1fr 2fr;
}
.container .left_side{
position: relative;
background: #003147;
padding: 40px;
}
.profile_text{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
}
.profile_text img{
width: 200px;
height: 200px;
}
.profile_text h2 {
color: #fff;
margin-top: 20px;
font-weight: 600;
}
.profile_text span{
color: #fff;
font-weight: 300;
}
.social_icon span{
/* display: flex; */
display: inline;
text-align: center;
justify-content: center;
padding: 20px;
color: #fff;
}
.social_icon i{
padding: 5px;
font-weight: 100;
}
.title{
border-bottom: 2px solid rgba(255,255,255,0.2);
font: larger;
color: #fff;
}
.contact_info span{
margin-top: 40px;
color: #fff;
padding-left: 20px;
justify-content: center;
}
/* skills section */
.skills{
text-decoration: none;
margin-top: 20px;
color: #fff;
}
.skills li{
margin-bottom: 15px;
list-style: none;
}
.skills .percent{
position: relative;
width: 100%;
height: 6px;
background:#081921;
display: block;
margin-top: 5px;
border-radius: 5px;
}
.range{
position:absolute;
border-radius: 5px;
height: 5px;
background-color: #03a9f4;
margin-top: -5px;
}
/* certificate section */
.certificates h5{
color: #fff;
margin-top: 20px;
font-weight: 900;
}
.container .right_side{
position: relative;
background: #003147;
padding: 40px;
position: relative;
background: #fff;
}
/* objection section */
.objective h2{
padding-top: 20px;
color: #03a9f4;
border-bottom:3px solid red;
}
.objective p{
padding-top: 10px;
font-family: sans-serif;
justify-content: center;
}
/* work experience section */
.work_experience .box{
display: flex;
flex-direction: row;
margin: 20px 0;
}
.work_experience h2{
color: #03a9f4;
border-bottom: 3px solid red;
margin-top: 20px;
}
.work_experience .box .year_company{
min-width: 150px;
}
.work_experience .text{
font-family: sans-serif;
}
.work_experience .year_company{
color:blue;
}
/* project section */
.projects i{
padding: 15px 15px;
}
.projects h2{
color: #03a9f4;
margin-top: 20px;
border-bottom: 3px solid red;
}
.projects h4 {
font-weight: 900;
}
.projects p{
font-family: sans-serif;
justify-content: center;
/* padding: 20px; */
}
/* education section start */
.right_education h5{
margin: 5px;
font-weight: 800;
}
.education i{
padding: 10px;
/* background: #003147;
border-radius: 50%;
color: #fff; */
}
.education h2{
color: #03a9f4;
margin-top: 20px;
border-bottom: 3px solid red;
}
.education h3{
font-weight: 700;
justify-content: center;
}
.right_education p{
font-family: sans-serif;
justify-content: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume Project</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/c5a2a8c086.js" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="left_side">
<div class="profile_text">
<div class="profile_image">
<img src="./assests/Profile-Photo.jpeg">
</div>
<h2>Tausif Ahmad</h2><br><span>Web Developer</span>
<div class="social_icon">
<span><i class="fa-brands fa-github"></i>github</span>
<span><i class="fa-brands fa-linkedin"></i>linkdn</span>
</div>
</div>
<div class="contact_info">
<h3 class="title">Contact</h3>
<span>
<h3>Phone</h3>
<p>7761080462</p>
</span>
<span>
<h3>Email</h3>
<p>tausifahmad8473@gmail.com</p>
</span>
</div>
<!-- skills section -->
<div class="skills">
<h3 class="title">Skills</h3>
<ul>
<li>
<span class="text">Java</span>
<span class="percent"></span>
<div class="range" style="width: 50px;"></div>
</li>
<li>
<span class="text">HTML</span>
<span class="percent"></span>
<div class="range" style="width: 150px;"></div>
</li>
<li>
<span class="text">CSS</span>
<span class="percent"></span>
<div class="range" style="width:120px;"></div>
</li>
<li>
<span class="text">JavaScript</span>
<span class="percent"></span>
<div class="range" style="width:40px"></div>
</li>
</ul>
</div>
<!-- end skills section -->
<div class="certificates">
<h3 class="title">certificates <i class="fa-solid fa-certificate"></i></h3>
<h5>Young Professional - TCS iON Career Edge</h5>
<h5>English Spoken - Skilling You</h5>
<h5>Java Developer</h5>
</div>
</div>
<!-- <left-side end -->
<div class="right_side">
<div class="objective">
<h2 class="title">OBJECTIVE</h2>
<p>Highly motivated and detail-oriented Front End Developer with a
strong foundation in Node.js, Vue.js, AWS S3,
JavaScript, HTML5, and CSS3. Committed to delivering secure,
scalable, and optimized web solutions. Seeking a
challenging opportunity to contribute my technical skills and
collaborate effectively in a dynamic team environment.</p>
</div>
<!-- work experience section -->
<div class="work_experience">
<h2 class="title">WORK EXPERIENCE</h2>
<div class="box">
<div class="year_company">
<h5>2023 - present</h5>
<h5>Company Name </h5>
</div>
<div class="text">
<h4>Senior UX Designer</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quibusdam excepturi commodi vel, quasi amet voluptatum numquam,
voluptate in sit iusto eum. Voluptates tenetur eum accusantium,
tempora fuga velit quae iure!</p>
</div>
</div>
<div class="box">
<div class="year_company">
<h5>2022 - 2023</h5>
<h5>Company Name </h5>
</div>
<div class="text">
<h4> UX/UI Designer</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quibusdam excepturi commodi vel, quasi amet voluptatum numquam,
voluptate in sitiusto eum. Voluptates tenetur eum accusantium,
tempora fuga velit quae iure!</p>
</div>
</div>
<div class="box">
<div class="year_company">
<h5>2020 - 2022</h5>
<h5>Company Name </h5>
</div>
<div class="text">
<h4>Junior UX Designer</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quibusdam excepturi commodi vel, quasi amet voluptatum numquam,
voluptate in sit iusto eum. Voluptates tenetur eum accusantium,
tempora fuga velit quae iure!</p>
</div>
</div>
</div>
<!-- project section -->
<div class="projects">
<h2 class="title">PROJECTS</h2>
<span><h4><i class="fa-solid fa-arrow-right"></i>Portfolio</h4></span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatem provident dolores ab modi excepturi ut. Similique
impedit ad incidunt earum velodio sunt sapiente ea ipsum consectetur!
Commodi, suscipit numquam.</p>
<span><h4> <i class="fa-solid fa-arrow-right"></i>Conference Scheduling</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Deserunt rerumharum sequi doloribus, minus explicabo, voluptatibus
culpa tempora natus velit exercitationem aspernatur quaerat tenetur
veniam nesciunt voluptatum quis
rem voluptatem.</p></span>
</div>
<!-- education section -->
<div class="education">
<h2 class="title">EDUCATION</h2>
<div class="right_education">
<h5><i class="fa-solid fa-arrow-right"></i>2020 - 2024</h5></span>
<h3> B.Tech In Computer Science</h3>
<p>Maulana Azad National Urdu University Hyderabad</p>
</div>
<div class="right_education">
<h5><i class="fa-solid fa-arrow-right"></i>2017 - 2020</h5>
<h3> Diploma In Computer Science</h3>
<p>Maulana Azad National Urdu University Hyderabad</p>
</div>
<div class="right_education">
<h5><i class="fa-solid fa-arrow-right"></i>2016 - 2017</h5>
<h3> Matriculation(10th)</h3>
<p>Bihar State Education Board Patna </p>
</div>
</div>
</div>
</div>
</body>
</html>
superb tausif
ReplyDeletejabardast bro