-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (151 loc) · 7.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!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>Portfolio</title>
<!-- google fonts -->
<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=Montserrat:wght@300;400;700&family=Poppins:wght@300;400&family=Ubuntu:wght@300;500&display=swap"
rel="stylesheet">
<!-- style sheet link -->
<link rel="stylesheet" href="style.css">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/fafa116bc2.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="home-section" id="home">
<div class="container">
<div class="navbar-container">
<nav>
<div class="logo">
<h1 class="name"><span>port</span>folio</h1>
</div>
<div class="menu">
<ul>
<li class="menu-list"> <a href="#home">Home</a> </li>
<li class="menu-list"> <a href="#about">About</a> </li>
<li class="menu-list"> <a href="#skill">Skills</a> </li>
<li class="menu-list"> <a href="#works">Works</a> </li>
<li class="menu-list"> <a href="#contact">Contact</a> </li>
<i class="fa-solid fa-xmark"></i>
</ul>
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</div>
<div class="header-container">
<div class="header-text">
<h1>Hi, I'm <br><span>Mohan</span> Kumar HR</h1>
<p>a web designer</p>
</div>
</div>
</div>
</div>
<!-- ----------------about section------------------------ -->
<div class="about-section" id="about">
<div class="container">
<div class="rows">
<div class="col1">
<img src="images/profile1.png" alt="">
</div>
<div class="col2">
<h2 class="sub-title">About Me</h2>
<p>Hello there! I'm MohanKumar HR, a passionate Frontend Web Developer and tech enthusiast. currently pursuing BE degree in Computer Science in Bangalore, I have always been fascinated by the power of technology to transform our lives and create meaningful experiences from a young age.</p>
</div>
</div>
</div>
</div>
<!-- -------------------skill section------------------------ -->
<div class="skill-section" id="skill">
<div class="container">
<h2 class="sub-title">My Skills</h2>
<div class="skills-container">
<div class="skill-list">
<i class="fa-solid fa-code"></i>
<h4>Web Designe</h4>
<p>Capable of designing a Frontend fully function and responsive websites using HTML,CSS, and JS</p>
<a href="#">Learn more</a>
</div>
<div class="skill-list">
<i class="fa-brands fa-java"></i>
<h4>JAVA</h4>
<p>Basic Java , Object Oriented programing , java GUI</p>
<a href="#">Learn more</a>
</div>
<div class="skill-list">
<i class="fa-sharp fa-solid fa-c"></i>
<h4>C++</h4>
<p>c++ programer , basic to advanced and data structure and algorithm concepts</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<!-- ---------------------works section-------------------------- -->
<div class="works-section" id="works">
<div class="container">
<h2 class="sub-title">My Works</h2>
<div class="works-container">
<div class="work-list">
<h4>Weather<br>Web Application</h4>
<p>A website for weather report using HTML, CSS, JS and API. The Weather data is featched from the API and displayed in the UI designed using HTML and CSS. A rapid API extention is used in the project </p>
<div class="layer">
<a href="https://mohankumarhr.github.io/weather-website/" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
</div>
</div>
<div class="work-list">
<h4>tindog<br>Website for Dogs</h4>
<p>Tingog is a fully responsive tinder clone website for dogs to find their love ones built using the HTML, CSS and Bootstrap. bootstrap is a css framework to know more visit the website through the link given
</p>
<div class="layer">
<a href="https://mohankumarhr.github.io/website-tindog/" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
</div>
</div>
<div class="work-list">
<h4>Simon<br>Fun game</h4>
<p>Simon is a fun game which increases the short-term memory skill. the buttons in webpage creates a series of tones and lights and equires a user to reoeat the sequence. to know more visit the website through the link </p>
<div class="layer">
<a href="https://mohankumarhr.github.io/simogame/" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
</div>
</div>
</div>
<a href="#" class="see-more-btn">See more</a>
</div>
</div>
<!-- --------------------------contact section------------------------ -->
<div class="contact-section" id="contact">
<div class="container">
<div class="rows">
<div class="col-left">
<h2 class="sub-title">Contact Me</h2>
<p><i class="fa-solid fa-paper-plane"></i><a href="mailto:[email protected]">[email protected]</a></p>
<p><i class="fa-solid fa-phone"></i>123456789</p>
<div class="socialmedia-icons">
<a href="https://www.linkedin.com/in/mohan-kumar-hr-a3008a24a"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://www.facebook.com/mohan.kumarhr.564?mibextid=ZbWKwL"><i class="fa-brands fa-facebook"></i></a>
<a href="https://twitter.com/MOHANKU35432148"><i class="fa-brands fa-twitter"></i></a>
<a href="https://instagram.com/mohan_kumar.hr?igshid=ZGUzMzM3NWJiOQ=="><i class="fa-brands fa-instagram"></i></a>
</div>
<a href="cv.pdf" download class="btn btn-cv">Download CV</a>
</div>
<div class="col-right">
<form>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your mail id" required>
<textarea name="message" rows="5" placeholder="Your message"></textarea>
<button type="submit" class="btn btn-submit">Submit</button>
</form>
</div>
</div>
</div>
<div class="copywrite">
<p>Copywrite © MohanKumarHR.</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>