Source Code Of My personal Website

DIY Education December 02, 2022

Source Code Of My Personal Website

Note - If you are opening this website to your smart phone. I recommend you to use your phone on desktop mode for better experience.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="men.jpg" type="image/x-icon">
<link rel="stylesheet" href="stylesheet.css">
<title>My Personal Website</title>

</head>
<body>
<a href="contactme.html">☎️contactme</a>
<h1>Welcome</h1>
<img src="men.jpg" alt="my image" width="200px" height="200px">
<p>John Smith <br>
I'm a full stack developer at google
</p> <br><br><br>
<h2>Educational Qualification</h2>
<ul>
<li>Done MBA in university of pennsylvenia</li>
<li>Done MCA from Birla institute of technology</li>
</ul>
<h2>Work Experience</h2>
<ul>
<li>2 years working in infosys as a data analyst</li>
<li>3 years working as a software enginner in TCS</li>
</ul>
<h3>Hobbies</h3>
<ul>
<li>Playing chess</li>
<li>coding and programming</li>
<li>book reading</li>
</ul>
</body>
<footer>
©All rights reserved 2022
</footer>
</html>

CSS Code

body{
background: linear-gradient(rgb(247, 231, 7), rgb(238, 103, 94));
}
img{
border-radius: 100px;
border: 2px solid black;
}
a{
text-decoration: none;
color: black;
float: right;
margin-top: 50px;
font-size: 25px;
margin-right: 20px;
text-shadow: 1px 1px 5px red;
}
a:hover{
color: red;
}
h1{
text-align: center;
text-shadow: 1px 1px 5px red;
font-size: 45px;
}
h1:hover{
color: red;
cursor: none;
}
p{
font-size: 25px;
font-weight: bold;
margin-left: 250px;
margin-top: -130px;
}
footer{
text-align: center;
font-size: 25px;
}
ul li{
font-size: 20px;
}
h2{
font-size: 28px;
}
h3{
font-size: 25px;
}

Contact Page Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact me</title>
<style>
pre{
font-size: 25px;
}
</style>
</head>
<body>
<pre>
Name - john smith
mobile no. - 98765*****
email - johnsmith@gmail.com
</pre>
<hr>
</body>
</html>

Website look

Conclusion - Share this blog post to your friends and try to add more effects of CSS properties to get your output more awesome.

Post a Comment

0 Comments