Last active
March 19, 2022 18:18
-
-
Save Jithender5913/29600e4f8a9c7710b145720b630774da to your computer and use it in GitHub Desktop.
My Sample Resume created using HTML and CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" dir="ltr"> | |
<head> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="CSS-My Site/styles.css"> | |
<link rel="icon" href="CSS-My Site/favicon.ico"> | |
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Hurricane&family=Montserrat&family=JetBrains+Mono&family=Mukta&family=Sacramento&display=swap" rel="stylesheet"> | |
<title>SAYIE REDDY</title> | |
</head> | |
<body> | |
<div class="top-container"> | |
<img class="top-cloud" src="CSS-My Site/images/cloud.png" alt="cloud-image"> | |
<h1>I am JITHENDHARR</h1> | |
<h3 class="learner">I am <span class="learner">a learner</span> </h3> | |
<img class="bottom-cloud" src="CSS-My Site/images/cloud.png" alt="cloud-image"> | |
<img src="CSS-My Site/images/mountain.png" alt="mountain-image"> | |
</div> | |
<div class="middle-container"> | |
<div class="profile"> | |
<h2>Hello.</h2> | |
<p>I completed my Master of Business Administration(M.B.A) and I have a passion to learn new things in life.</p> | |
<img src="CSS-My Site/images/mba.png" alt="MBA-PIC"> | |
</div> | |
<hr> | |
<div class="skills"> | |
<h2>My Work experience and Skills.</h2> | |
<div class="skill-row"> | |
<img class="work-experience" src="CSS-My Site/images/work.png" alt="work-picture"> | |
<h3>work experience</h3> | |
<p>I have 1 year and 9 months of work experience in global shareholder services USA department</p> | |
</div> | |
<div class="skill-row"> | |
<img class="programming-pic" src="CSS-My Site/images/prgmm.png" alt="programming-picture"> | |
<h3>Programming skills</h3> | |
<p>Recently, I started my journey in programming and so far, I have learnt Python🐍, HTML5 and CSS3</p> | |
</div> | |
<div class="skill-row"> | |
<img class="music" src="CSS-My Site/images/music.png" alt="music png"> | |
<h3>Hobbies</h3> | |
<p>My hobbies are playing video games, cooking and listening to music.</p> | |
</div> | |
</div> | |
<hr class="dot"> | |
<div class="contact-me"> | |
<h2>Get In Touch</h2> | |
<h3>Here are my contact details.</h3> | |
<p>Please feel free to contact me.</p> | |
<a class="btn" href="mailto:name@email.com">CONTACT ME</a> | |
</div> | |
</div><br> | |
<div class="bottom-container"> | |
<a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a> | |
<a class="footer-link" href="https://twitter.com/">Twitter</a> | |
<a class="footer-link" href="https://github.com/Jithender5913">GitHub</a> | |
<p class="name">© 2022 SAYIE JITHENDHARR REDDY.</p> | |
</div> | |
</body> | |
</html> | |
<!-- CSS--> | |
div { | |
background-color: #E4F9F5; | |
} | |
body { | |
margin: 0; | |
bottom: 20px; | |
text-align: center; | |
font-family: hurricane, san-serif; | |
font-size: 170%; | |
} | |
h1 { | |
margin: 0 auto 0 auto; | |
font-family: hurricane, san-serif; | |
color: #66BFBF; | |
line-height: 2; | |
} | |
h2 { | |
font-family: montserrat, san-serif; | |
color: #11999E; | |
font-weight: normal; | |
} | |
h3 { | |
font-family: sacramento, san-serif; | |
color: #66BFBF; | |
font-weight: normal; | |
} | |
.learner { | |
font-size: 2.5rem; | |
font-family: jetbrains mono; | |
} | |
.top-container { | |
background-color: #E4F9F5; | |
position: relative; | |
padding-top: 100px; | |
} | |
.bottom-cloud { | |
position: absolute; | |
left: 170px; | |
} | |
.top-cloud { | |
position: absolute; | |
right: 150px; | |
} | |
.learner { | |
text-decoration: underline; | |
} | |
.middle-container { | |
background-color: white; | |
position: relative; | |
bottom: 35px; | |
} | |
.skills { | |
background-color: white; | |
position: relative; | |
bottom: 50px; | |
} | |
.work-experience { | |
width: 25%; | |
float: right; | |
} | |
.programming-pic { | |
width: 25%; | |
float: left; | |
} | |
.music { | |
width: 25%; | |
float: right; | |
} | |
.skill-row { | |
width: 50%; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.profile { | |
background-color: #97DBAE; | |
} | |
.contact-me { | |
background-color: #F3E9DD; | |
position: relative; | |
top: 72px; | |
} | |
.bottom-container { | |
background-color: #66BFBF; | |
position: relative; | |
padding: 20px; | |
} | |
.dot { | |
border-style: none; | |
border-top-style: dotted; | |
color: violet; | |
width: 30%; | |
border-width: 4px; | |
} | |
a { | |
font-family: montserrat, san-serif; | |
text-decoration: none; | |
color: #11999E; | |
} | |
a:hover { | |
color: #EAF6F6; | |
} | |
.btn { | |
background: #3498db; | |
background-image: -webkit-linear-gradient(top, #3498db, #2980b9); | |
background-image: -moz-linear-gradient(top, #3498db, #2980b9); | |
background-image: -ms-linear-gradient(top, #3498db, #2980b9); | |
background-image: -o-linear-gradient(top, #3498db, #2980b9); | |
background-image: linear-gradient(to bottom, #3498db, #2980b9); | |
-webkit-border-radius: 28; | |
-moz-border-radius: 28; | |
border-radius: 8px; | |
font-family: Arial; | |
color: #ffffff; | |
font-size: 20px; | |
padding: 10px 20px 10px 20px; | |
text-decoration: none; | |
} | |
.btn:hover { | |
background: #3cb0fd; | |
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); | |
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); | |
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); | |
background-image: -o-linear-gradient(top, #3cb0fd, #3498db); | |
background-image: linear-gradient(to bottom, #3cb0fd, #3498db); | |
text-decoration: none; | |
} | |
.name { | |
color: #EAF6F6; | |
font-size: 0.9rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment