-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (169 loc) · 9.38 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
<!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>Lokesh kumar</title>
<link rel="stylesheet" href="lokesh.css">
<!-- <link rel="stylesheet" href="lokesh_p.css"> -->
</head>
<body>
<!-- top nav bar of lokesh website -->
<div class="imgmain"><img src="lokesh2 (2).jpg" alt="error"></div>
<div id="menu">
<div id="menu-bar" onclick="menuOnClick()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav">
<ul>
<li id="link1" onclick="scrollWin(0, 900)"><a><b>01.</b>ABOUT</a></li>
<li onclick="scrollWin(0, 1350)"><a><b>02.</b>WORK</a></li>
<li onclick="scrollWin(0, 3400)"><a><b>03.</b>STUDIES</a></li>
<li onclick="scrollWin(0, 5000)"><a><b>04.</b>CONTACT</a></li>
<button class="button"><span><a href="Lcv.pdf">Resume</a></span></button>
</ul>
</nav>
</div>
<div class="menu-bg" id="menu-bg"></div>
<!-- all main section of the page -->
<div class="main">
<!-- SECTION-1 -->
<section class="section-1">
<pre class="center">
Hi,
i'm Lokesh,
Web Developer
</pre>
<img class="imglokesh" src="lokesh.jpg" alt="">
</section>
<div class="port"> My Portfolio</div>
<!-- SECTION-2 -->
<section class="section-2">
<h1><b>01.</b> ABOUT</h1>
<p>Hey! I’m <u>lokesh kumar</u> , a web developer.</p>
<p>
I’m a software engineer who loves creating websites and apps. I believe that you have to be able to see
the big picture when you’re building something, and that’s why I like to work with a team. It’s also why
I love working in groups where everyone has a voice, but we all work together toward the same goal—to
make your site better than you could ever do on your own.
</p>
<p>You can find me playing video games or watching TV shows when I’m not working on my projects or building
excellent new tools for my clients.</p>
</section>
<!-- SECTION-3 -->
<section class="section-3">
<h1><b>02.</b> WORK</h1>
<div class="pjimg">
<h2>1 traveling blog website</h2>
<p>Before diving into the world of travel blogging, it's essential to define your niche and target audience. Consider your own travel experiences and interests. Do you focus on luxury travel, budget backpacking, family-friendly destinations, or sustainable tourism? Identifying your niche will help you tailor your content and attract the right audience.
</p>
<div class="borderpj" id="borderpj1"><img class="pj1" src="pj1.png" alt="error"></div>
</div>
<div class="pjimg">
<h2>2 website on yacht trip</h2>
<p>If you're passionate about the open sea, luxurious yachts, and unforgettable journeys, it's time to embark on an exciting voyage into the world of website creation. With the power of modern technology, you can showcase your love for yacht trips and inspire others to experience the wonders of sailing. So, hoist the sails and let's dive into the process of creating your ultimate yacht trip website!
</p>
<div class="borderpj" id="borderpj2"><img class="pj2" src="pj2.png" alt="error"></div>
</div>
<div class="pjimg">
<h2>3 web of a restaurant</h2>
<p>The website's design is visually appealing and well-crafted, creating an immediate impression of elegance and sophistication. The color scheme harmoniously complements the restaurant's branding, while the layout is intuitive and easy to navigate. The use of high-quality images of dishes, along with enticing descriptions, creates a truly appetizing experience. The site is responsive and adapts seamlessly to different devices, ensuring a consistent and enjoyable browsing experience for users on desktops, tablets, and mobile phones.
</p>
<div class="borderpj" id="borderpj3"><img class="pj3" src="pj3.png" alt="error"></div>
</div>
</section>
<!-- SECTION-4 -->
<section class="section-4">
<h1><b>03.</b> STUDIES</h1>
<div class="mapip">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3623.1013373103206!2d92.78752929678953!3d24.757714399999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x374e49dcb63bae9b%3A0x81efa836714a289b!2sNational%20Institute%20Of%20Technology%2C%20Silchar!5e0!3m2!1sen!2sus!4v1684661652867!5m2!1sen!2sus"
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="mapbt">
<h2>National institute of technology silchar </h2>
<p>B.tech / Electrical engineering</p>
<p>2022-2026</p>
<p>scholar-id 2213025</p>
<div class="card">
<div class="header">My Skills</div>
<div class="body">
<div class="skill">
<div class="skill-name">HTML</div>
<div class="skill-level">
<div class="skill-percent" style="width: 90%"></div>
</div>
<div class="skill-percent-number">90%</div>
</div>
<div class="skill">
<div class="skill-name">CSS</div>
<div class="skill-level">
<div class="skill-percent" style="width: 80%"></div>
</div>
<div class="skill-percent-number">80%</div>
</div>
<div class="skill">
<div class="skill-name">JavaScript</div>
<div class="skill-level">
<div class="skill-percent" style="width: 75%"></div>
</div>
<div class="skill-percent-number">75%</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION-5 -->
<section class="section-5">
</section>
<!-- SECTION-6 -->
<section class="section-6">
<div class="container">
<form class="form">
<div class="descr">Contact us</div>
<div class="input">
<input required="" autocomplete="off" type="text">
<label for="name">Name</label>
</div>
<div class="input">
<input required="" autocomplete="off" name="email" type="text">
<label for="email">E-mail</label>
</div>
<div class="input">
<textarea required="" cols="30" rows="1" id="message"></textarea>
<label for="message">Message</label>
</div>
<button id="formbt">Send message →</button>
</form>
</div>
</section>
<!-- left bar of lokesh website -->
<div class="leftbar">
<li><a href="https://instagram.com/lokesh_jangir_05?igshid=MzRlODBiNWFlZA=="><img class="icon-img" src="https://cdn-icons-png.flaticon.com/512/3955/3955024.png"
alt=""></a>
</li>
<li><a href="https://www.facebook.com/lokesh"><img class="icon-img" src="https://cdn-icons-png.flaticon.com/512/3670/3670032.png"
alt=""></a>
</li>
<li><a href="https://www.linkedin.com/in/lokesh-k-64a825257"><img class="icon-img" src="https://cdn-icons-png.flaticon.com/512/145/145807.png" alt=""></a>
</li>
<li><a href="https://github.com/deadshot002"><img class="icon-img" src="https://cdn-icons-png.flaticon.com/512/10090/10090288.png"
alt=""></a>
</li>
<li><a href="https://twitter.com/Lokesh12477175?t=Gmk2gnhUNAkup1ZpJJVV-w&s=09"><img class="icon-img" src="https://cdn-icons-png.flaticon.com/512/3670/3670151.png"
alt=""></a>
</li>
<div class="line1"></div>
</div>
<!-- right bar of lokesh website -->
<div class="rightbar">
<div><a href="mailto:lokeshkumar991100@gmail.com">lokeshkumar991100@gmail.com</a>
</div>
<div class="line2"></div>
</div>
<script src="lokesh.js"></script>
</body>
</html>