Skip to content

Commit 30b7543

Browse files
krishxtckrishxtc
authored
Add files via upload
1 parent 74e6533 commit 30b7543

7 files changed

+230
-0
lines changed

‎Images/Python Resize.png

14.1 KB
Loading

‎Images/cloud.png

3.81 KB
Loading

‎Images/jsimg.png

3.75 KB
Loading

‎Images/mountain.png

64.3 KB
Loading

‎Images/personal-photo.png

60 KB
Loading

‎index.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Krish's Webpage</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap"
12+
rel="stylesheet"
13+
/>
14+
</head>
15+
<body>
16+
<div class="top-container">
17+
<img src="Images/cloud.png" alt="Cloud Image" class="top-cloud" />
18+
<h1>I'm Krish</h1>
19+
<h2><span class="pro"> a programmer.</span></h2>
20+
<img
21+
src="Images/cloud.png"
22+
alt="cloud image"
23+
class="bottom-cloud"
24+
/>
25+
<img src="Images/mountain.png" alt="mountain" />
26+
</div>
27+
28+
<div class="middle-container">
29+
<div class="profile">
30+
<img src="Images/personal-photo.png" alt="Profile Photo" />
31+
<h2>Hello,</h2>
32+
<p class="intro">
33+
I'm Krish , I Recently learned Python. And now, I also learning
34+
JavaScript With React. I like Proggraming langauge.
35+
</p>
36+
</div>
37+
<hr />
38+
<div class="skills">
39+
<h2>My skills</h2>
40+
<div class="skill-row">
41+
<img
42+
class="python-img"
43+
src="Images/Python Resize.png"
44+
alt=""
45+
class="python-img"
46+
/>
47+
<h3>Python</h3>
48+
<p>
49+
Python is a popular high-level programming language known for its
50+
simplicity, readability, and versatility. Python is widely used in
51+
various domains such as web development, data science, artificial
52+
intelligence, automation, scientific computing, and more.
53+
</p>
54+
</div>
55+
<div class="skill-row">
56+
<img
57+
class="java-script-img"
58+
src="Images/jsimg.png"
59+
alt="JavaScript"
60+
/>
61+
<h3>JavaScript</h3>
62+
<p>
63+
JavaScript is a versatile and widely-used programming language
64+
primarily used for developing interactive and dynamic
65+
websites.JavaScript allows developers to add functionality,
66+
interactivity, and behavior to web pages, making it an essential
67+
part of modern web development.
68+
</p>
69+
</div>
70+
</div>
71+
<hr />
72+
<div class="contact-me">
73+
<h2>Get In Touch</h2>
74+
<h3>Feel free to reach out to me anytime; I'm here to help.</h3>
75+
<p class="contact-message">
76+
If you have any questions to contact me.
77+
</p>
78+
<a href="mailto: [email protected]" class="btn">Contact Me</a>
79+
</div>
80+
</div>
81+
82+
<div class="social-container">
83+
<a
84+
href="https://www.linkedin.com/in/krish-agaja-54862b247/"
85+
class="footer-link"
86+
>LinkedIn</a
87+
>
88+
<a href="https://github.com/krishxtc" class="footer-link">GitHub</a>
89+
<a href="https://twitter.com/KrishAgaja2" class="footer-line">Twitter</a>
90+
<p class="copy-right">© Krish Aagja @krishx12</p>
91+
</div>
92+
</body>
93+
</html>

‎style.css

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
body{
2+
margin: 0;
3+
font-family: "Merriweather".,serif;
4+
color: #40514e;
5+
}
6+
7+
h1{
8+
margin: 3.125rem auto 0 auto;
9+
font-family: "Sacramento",cursive;
10+
font-size: 5.630rem;
11+
color: #66bfbf;
12+
line-height: 2;
13+
}
14+
15+
h2{
16+
font-family: "Montserrat", sans-serif;
17+
font-size: 2.8rem;
18+
font-weight: normal;
19+
color: #66bfbf;
20+
padding-bottom: 12px;
21+
}
22+
23+
h3{
24+
font-family: "Montserrat",sans-serif;
25+
color: #11999e;
26+
}
27+
p{
28+
line-height: 1;
29+
}
30+
hr{
31+
border: dotted #eaf6f6 8px;
32+
border-bottom: none;
33+
width: 5%;
34+
margin: 65px auto;
35+
}
36+
37+
a{
38+
color: #11999e;
39+
font-family: "Montserrat",sans-serif;
40+
margin: 10px 20px 10px;
41+
text-decoration: none;
42+
}
43+
a:hover{
44+
color: #eaf6f6;
45+
}
46+
.top-container{
47+
background-color: #e4f9f5;
48+
text-align: center;
49+
position: relative;
50+
padding-top: 100px;
51+
}
52+
.middle-container{
53+
margin: 100px auto 100px auto;
54+
text-align: center;
55+
}
56+
.social-container{
57+
background-color: #66bfbf;
58+
text-align: center;
59+
padding: 50px 0 20px;
60+
}
61+
.top-cloud{
62+
position: absolute;
63+
right: 300px;
64+
top: 40px;
65+
}
66+
.bottom-cloud{
67+
position: absolute;
68+
bottom: 300px;
69+
left: 250px;
70+
}
71+
72+
.pro{
73+
text-decoration: underline;
74+
}
75+
.intro{
76+
width: 30%;
77+
margin: auto;
78+
}
79+
.skill-row{
80+
margin: 100px auto 100px auto;
81+
width: 50%;
82+
position: relative;
83+
text-align: left;
84+
}
85+
.python-img{
86+
width: 25%;
87+
float: left;
88+
margin-right: 32px;
89+
}
90+
.java-script-img{
91+
width: 25%;
92+
float: right;
93+
margin-left: 32px;
94+
}
95+
.contact-me{
96+
border: #66bfbf;
97+
width: 40%;
98+
margin: 40px auto 60px;
99+
}
100+
.contact-message{
101+
border: #66bfbf;
102+
width: 40%;
103+
margin: 0px auto 60px;
104+
}
105+
.btn{
106+
font-family: "Montserrat", sans-serif;
107+
background: #11cdd4;
108+
background-image: -webkit-gradient(top, #11cdd4, #11999e);
109+
background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
110+
background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
111+
background-image: -o-linear-gradient(top, #11cdd4, #11999e);
112+
background-image: linear-gradient(to bottom, #11cdd4, #11999e);
113+
-webkit-border-radius: 8;
114+
-moz-border-radius: 8;
115+
border-radius: 8px;
116+
font-family: Arial;
117+
color: #b7e46d;
118+
font-size: 20px;
119+
padding: 10px 20px 10px 20px;
120+
text-decoration: none;
121+
}
122+
.btn:hover{
123+
background: #30e3cb;
124+
background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
125+
background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
126+
background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
127+
background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
128+
background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
129+
text-decoration: none;
130+
131+
}
132+
133+
.copy-right{
134+
color: #000000;
135+
font-size: 0.75rem;
136+
padding: 50px 0;
137+
}

0 commit comments

Comments
 (0)