Jithender5913/index.html

## index.html
<!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;
}
	<!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;
	}