-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
288 lines (273 loc) · 14.3 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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>devDiv!</title>
<link rel="icon" type="image/x-icon" href="./logo_3.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<script src="https://kit.fontawesome.com/a57304f68d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo">
<a href="#"><img src="./dD! logo.jpg" height="70px"></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">Features</a></li>
<li><a href="#services" class="menu-btn">Faq's</a></li>
<li><a href="#contact" class="menu-btn">Feedback</a></li>
<li><a href="https://github.com/Shreyans2004/devDiv" class="menu-btn">View github</a></li>
<li><a href="https://www.instagram.com/shreyans2004/" target="_blank" class="menu-btn"><i class="bi bi-instagram"></i></a></li>
<li><a href="https://github.com/Shreyans2004" target="_blank" class="menu-btn"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/shreyans-katariya-501489260/" target="_blank" class="menu-btn"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://shreyans-myportfolio.netlify.app/" target="_blank" class="menu-btn"><i class="bi bi-star-fill" id="resume_star"></i></a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content" style="margin: auto;" >
<div class="text-2" style="margin: auto;">devDiv!</div>
<div class="text-1" style="margin: auto;">A <span class="color_1">Browser extension</span> that can</div>
<div class="text-1"style="margin: auto;">enhance your web devlopment and clone skills</div>
<!-- <div class="text-3">And I'm a <span class="typing"></span></div> -->
<a href="https://github.com/Shreyans2004/devDiv" >Github link</a>
</div>
</div>
</section>
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About devDiv!</h2>
<div class="about-content">
<div id="div_12">
<div id="div_12_1">
<div id="div_13">
<p><i class="bi bi-1-circle"></i><b>Click to judge</b></p><br>
<p>Easily judge the website's whole structure with just by one click on the devDiv extension icon in the toolbar. </p><br>
<p><i class="bi bi-search"></i><b>Search different tags with amazing colors</b></p><br>
<p>No need to hover on different parts of the page to find the h1, div tags, etc.</p>
<p><i class="bi bi-lock-fill"></i><b>Lock your Privacy</b></p><br>
<p>devDiv never stores any history, URLs or private data. It is 100% safe and secure.</p>
</div>
<div id="div_14">
<p><i class="bi bi-palette-fill"></i><b>Easy to obtain interpret color combinations</b> </p><br>
<p>Get the rgba colors of different tags easily.</p>
<p><i class="bi bi-aspect-ratio"></i><b>One touch height and width</b> </p><br>
<p>You can get the precise height and width with devDiv fill.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<div class="about-content">
<div class="column left">
<img src="./image2_1.jpg" alt="">
</div>
<div class="column right">
<div class="text" style="color:#9400D3;">devDiv border property</div>
<ulli>
<li>Genearally it is difficult to understand the structure of website .Normally we use inspect method then hover on every element of page and see the structure.This is very tiredsome.Here come the devDiv border.</li>
<li>Devdiv border provides you the structure of website within a fraction of second.It gives you the clear-cut idea of how the website is planned.So if you want to make a clone of it or make your own website ,devdiv border is with you any time.</li>
<li>While devloping any component you can use this feature to judge the path of next component easily.</li>
</ulli
</div>
</div>
</div>
</section>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<div class="about-content">
<div class="column right" style="width:600px">
<div class="text" style="color:#9400D3;">devDiv fill property</div>
<ul>
<li>Once you have seen the actual structure of website,how different components are placed now a developer will judge different elements and it is generally difficult to find which is component is styled by div and which is styled by span.</li>
<li>Devdiv fill magically displays different tags with different colors.The colors for different tag will be shown in a table which will suddenly appear as soon as you click this option in the extension.</li>
<li>This feature enables a developer (especially beginners) to find out different tags just by interpreting different colors. Much better than hovering the elements and finding its type.</li>
</ul>
</div>
<div class="column left">
<img src="./image2_2_2.png" alt="">
</div>
</div>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<div class="about-content">
<div class="column left">
<img src="./image2_3.jpg" alt="">
</div>
<div class="column right">
<div class="text"style="color:#9400D3;">devDiv height and width property</div>
<ul>
<li>After knowing the type, a developer will crave for its properties like height and width.</li>
<li>Devdiv height and width fulfill his/her cravings by inserting the height and width of each tag at the end.</li>
<li>The perfect dimensions are just displayed within some time, improving the developer's experience.</li>
</ul>
</div>
</div>
</div>
</section>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<div class="about-content">
<div class="column right" style="width:600px">
<div class="text" style="color:#9400D3;">devDiv Color property</div>
<ul>
<li>Jugding the rgba of any color is out of the scpe of any developer (except some mugged up colors like white and white)</li>
<li>Devdiv colors enable the user to see the color of nearly all elements on page.It appends the rgba color code at the end of each of the tag</li>
<li>The most difficult part of making a clone of a website is now solved by this feature.</li>
</ul>
</div>
<div class="column left">
<img src="./Screenshot 2023-10-01 160644.png" alt="">
</div>
</div>
</div>
</section>
<!-- services section start -->
<section class="services" id="services">
<div class="max-width">
<h2 class="title">Frequently asked Questions</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="bi bi-browser-chrome"></i>
<div> Which browsers is devDiv compatible with?
</div><br>
<p> devDiv is currently compatible with Google Chrome </p>
</div>
</div>
<div class="card">
<div class="box">
<i class="bi bi-database-fill-lock"></i>
<div >Is my data secure with devDiv?
</div><br>
<p>Yes, all the borders and colors are only applied on the current page.It neither saves anything nor changes the user's private informations.Kairy also does not use any tracking code or cookies.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="bi bi-bullseye"></i>
<div > What is the purpose of devDiv?</div><br>
<p>The purpose of devDiv is to enable the beginner to provide all the basic needs to make a clone of the website or to make their own website.By devDiv one can easily make organized components without clicking the inspect button as it gives the color,height, etc of the components. </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact me</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Get in Touch</div>
<p>Hi Shreyans here , A Hungry Learner.</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">Shreyans Katriya</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">Nagpur ,Maharashtra</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">shreyanskatariya4622@gmail.com</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Phone</div>
<div class="sub-title">7709456937</div>
</div>
</div>
<div class="row">
<i class="fa-brands fa-linkedin"></i>
<div class="info">
<a href="https://www.linkedin.com/in/shreyans-katariya-501489260/" target="_blank" text-decoration="none" >
<div class="head"> Linkedin </div>
</a>
</div>
</div>
<div class="row">
<i class="fa-brands fa-github"></i>
<div class="info">
<a href="https://github.com/Shreyans2004" target="_blank" text-decoration="none" >
<div class="head"> Github </div>
</a>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message me</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Name" required>
</div>
<div class="field email">
<input type="email" placeholder="Email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Subject" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer section start -->
<footer>
<span>Created with ❤️ by <a href="">Shreyans Katariya</a>
</footer>
<script src="script.js"></script>
</body>
</html>
</body>
</html>