-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
236 lines (193 loc) · 9.23 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ritesh kumar - Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="media/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
<header>
<div class="container">
<nav>
<a href="index.html"><img src="media/logo.jpg" class="logo"></a>
<ul id="sidemenu">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contact">Contact me</a></li>
<i class="fas fa-times" onclick="closemenu()"></i>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p> < Developer ></p>
<h1>Hi! This is <span>Ritesh</span>
<br>from IITB</h1>
</div>
</div>
</header>
<!-- -----------------------------introduction---------------------------------- -->
<div id="introduction">
<div class="container">
<div class="heading-block">
<div class="background-shape"></div>
<h2>Welcome to Ritesh's Digital Showcase!</h2>
</div>
<div class="left-block">
<img src="media/first.gif" alt="Image">
<div class="content">
<p>Hello there! I'm Ritesh, a passionate and innovative developer on a mission to turn lines of code into captivating digital experiences. As you navigate through these virtual corridors, you'll discover the fusion of my creativity, technical prowess, and a genuine love for turning ideas into reality.</p>
</div>
</div>
<div class="right-block">
<div class="content">
<h3>Who am I?</h3>
<p>I'm not your typical developer—I'm a digital artist, sculpting pixel-perfect interfaces and crafting delightful user experiences. My expertise lies in front-end development, where I specialize in bringing designs to life and ensuring that every click feels like a small adventure.</p>
</div>
<img src="media/second.gif" alt="Image">
</div>
<div class="left-block">
<img src="media/third.gif" alt="Image">
<div class="content">
<h3>What Drives Me?</h3>
<p>I'm fueled by the desire to blend aesthetics with functionality, turning visions into interactive realities. While my journey may not delve deep into back-end complexities (yet!), my commitment to delivering visually appealing and intuitive designs is unwavering.
</p>
</div>
</div>
<div class="right-block">
<div class="content">
<h3>What Awaits You?</h3>
<p>I'm an enthusiastic, creative and adapting guy. I'm always eager to learn more and more. My hunger to tend to perfectness will definitely turn any organisation into a hub of excellence and innovation.</p>
</div>
<img src="media/fourth.gif" alt="Image">
</div>
</div>
</div>
<!-- ------------------------------skills-------------------------------------- -->
<div id="skills">
<div class="container">
<div class="heading-block">
<div class="background-shape"></div>
<h2>Technical Skills: Precision in Codecraft</h2>
</div>
<div class="skill-container">
<div class="skill-logo">
<img class="skill-front" src="media/python1.png" alt="python">
</div>
<div class="skill-logo">
<img class="skill-front" src="media/html1.png" alt="html">
</div>
<div class="skill-logo">
<img class="skill-front" src="media/css.png" alt="css">
</div>
<div class="skill-logo">
<img class="skill-front" src="media/cpp.png" alt="cpp">
</div>
<div class="skill-logo">
<img class="skill-front" src="media/django.png" alt="django">
</div>
</div>
<div class="skill-name">
<div>
<h3>Python</h3>
</div>
<div>
<h3>HTML</h3>
</div>
<div>
<h3>CSS</h3>
</div>
<div>
<h3>C++</h3>
</div>
<div>
<h3>Django</h3>
</div>
</div>
</div>
</div>
<!-- --------------------------hobbies----------------------------- -->
<div id="hobbies">
<div class="container">
<div class="heading-block">
<div class="background-shape"></div>
<h2>Hobbies: Beyond the Keyboard</h2>
</div>
<a href="swimming.html">
<div class="left-block" >
<img src="media/swim3.jpg" alt="Image">
<div class="content">
<h3>Swimming</h3>
<p>Swimming is the thing that I loves to do everyday. Whenever, I goes deep in water, I feels myself. I feels relaxed and calm while doint it. After getting out from the pool, the relaxation I get is enough to get a boost. <b>Read more...</b> </p>
</div>
</div>
</a>
<a href="exploring.html">
<div class="right-block">
<div class="content">
<h3>Exploring new things</h3>
<p>I'm very enthusiastic guy to learn more and explore new things. I want to get taste of every new thing that I hear of and it keeps me always energetic and gives me different ways to think for a solution. <b>Read more...</b></p>
</div>
<img src="media/new2.jpg" alt="Image">
</div>
</a>
<a href="filming.html">
<div class="left-block">
<img src="media/film2.jpg" alt="Image">
<div class="content">
<h3>Filming</h3>
<p>Since my school days, I have started making short films, documentaries etc and got appreciated for them many times. Film making gives me creative ways to express myself and spread my thinking and views to the world. <b>Read more...</b>
</p>
</div>
</div>
</a>
</div>
</div>
<!-- --------------------------------------------contact me---------------------------------------- -->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<div class="heading-block">
<div class="background-shape"></div>
<h2>Connect With Me</h2>
</div>
<p><i class="fa-solid fa-envelope"></i>[email protected]</p>
<p><i class="fa-solid fa-phone"></i>09479XXXX41</p>
<div class="social-icons">
<a href="https://www.instagram.com/imrittt/"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/ritesh-kumar-171559285/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://www.youtube.com/channel/UCbmMKsnII5W1UmC4gghuQxw"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div class="contact-right">
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="76fce9c5-858e-4f58-871a-021285f85345"> <!--here access key is the unique key link to an id by web3forms -->
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="6" placeholder="Your message" ></textarea>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- -----------------javascript for mobile menu------------- -->
<script>
var sidemeu=document.getElementById("sidemenu");
function openmenu(){
sidemeu.style.right="0";
}
function closemenu(){
sidemeu.style.right="-200px";
}
</script>
<!-- ----------------------------------footer------------------------ -->
<footer>
<p>Copyright © Ritesh</p>
<p>Made with <i class="fas fa-heart"></i> by < Developer Ritesh ></p>
</footer>
</body>
</html>