64 |
103 |
65 |
67 | Contact Me
66 |
68 |
72 | 70 | Get in touch with me
71 |
73 |
81 | 75 | The technological revolution is changing aspects of our lives and the fabric of society itself. It's 76 | also changing the way we learn and what we learn. Factual knowledge is less prized when everything 77 | you ever need to know can be found on your phone. There's no imperative to be an expert when 78 | everything can be found at your fingertips. 79 |
80 |
82 |
83 |
102 |
84 |
92 |
85 |
86 |
87 |
88 | email
89 |
91 | moeezrajput10@gmail.com
90 |
93 |
101 |
94 |
95 |
96 |
97 | phone 98 |
99 |+923123128400
100 |
104 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
--------------------------------------------------------------------------------
/contact.css:
--------------------------------------------------------------------------------
1 |
2 | /* ///// inputs /////*/
3 | body {
4 | background: linear-gradient(135deg , black , orange);
5 | color: white;
6 | }
7 | input::placeholder,textarea::placeholder {
8 | /* Chrome, Firefox, Opera, Safari 10.1+ */
9 | color: white;
10 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11 | opacity: 1;
12 | font-size: 20ox;
13 | padding-left: 10px;
14 | /* Firefox */
15 | }
16 | .styled-input {
17 | float: left;
18 | width: 293px;
19 | margin: 1rem 0;
20 | position: relative;
21 | border-radius: 4px;
22 | }
23 |
24 | @media only screen and (max-width: 768px) {
25 | .styled-input {
26 | width: 100%;
27 | }
28 | }
29 |
30 | .styled-input label {
31 | color: #999;
32 | padding: 1.3rem 30px 1rem 30px;
33 | position: absolute;
34 | top: 10px;
35 | left: 0;
36 | -webkit-transition: all 0.25s ease;
37 | transition: all 0.25s ease;
38 | pointer-events: none;
39 | }
40 |
41 | .styled-input.wide {
42 | width: 650px;
43 | max-width: 100%;
44 | }
45 |
46 | input {
47 | background-color: #25262A;
48 | border: 2px;
49 | border-color: #64FAAB;
50 | border-radius: 14px;
51 | padding: 0 10px 0 25px;
52 | height: 55px;
53 | }
54 |
55 | input,
56 | textarea {
57 | padding: 30px;
58 | border: 2px solid #64f4ab;
59 | width: 100%;
60 | font-size: 1rem;
61 | background-color: #25262A;
62 | color: white;
63 | border-radius: 14px;
64 | }
65 |
66 |
67 | textarea {
68 | width: 100%;
69 | min-height: 15em;
70 | }
71 |
72 | .input-container {
73 | width: 650px;
74 | max-width: 100%;
75 | margin: 20px auto 25px auto;
76 | }
77 |
78 | .submit-btn {
79 | float: right;
80 | padding: 7px 35px;
81 | border-radius: 60px;
82 | display: inline-block;
83 | background-color: #4b8cfb;
84 | color: white;
85 | font-size: 18px;
86 | cursor: pointer;
87 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06),
88 | 0 2px 10px 0 rgba(0, 0, 0, 0.07);
89 | -webkit-transition: all 300ms ease;
90 | transition: all 300ms ease;
91 | }
92 |
93 |
94 |
95 | @media (max-width: 768px) {
96 | .submit-btn {
97 | width: 100%;
98 | float: none;
99 | text-align: center;
100 | }
101 | }
102 |
103 |
104 |
105 | /* Custom CSS styles here */
106 | .container {
107 | display: flex;
108 | }
109 |
110 | .left-section {
111 | flex: 1;
112 | padding: 20px;
113 | }
114 |
115 | .right-section {
116 | flex: 1;
117 | padding: 20px;
118 | }
119 |
120 | .contact-heading h3 {
121 | font-size: 18px;
122 | }
123 |
124 | .touch-heading h1 {
125 | font-size: 24px;
126 | }
127 |
128 | .description p {
129 | margin-bottom: 20px;
130 | }
131 |
132 | .contact-info {
133 | display: flex;
134 | }
135 |
136 |
137 |
138 | .svg-div {
139 | flex: 1;
140 | }
141 |
142 | .email-div,
143 | .phone-div {
144 | flex: 1;
145 | }
146 |
147 | .email-div p,
148 | .phone-div p {
149 | margin-bottom: 10px;
150 | }
151 |
152 | .form {
153 | width: 100%;
154 | max-width: 400px;
155 | }
156 |
157 | .input-div {
158 | margin-bottom: 10px;
159 | }
160 |
161 |
162 | nav {
163 | position: relative;
164 | padding: 47px 14px;
165 | top: 0;
166 | left: 0;
167 | height: 70px;
168 | width: 100%;
169 | background-color: var(--nav-color);
170 | z-index: 100;
171 | }
172 |
173 | body.dark nav {
174 | border: 1px solid #393838;
175 |
176 | }
177 |
178 | nav .nav-bar {
179 | position: relative;
180 | height: 100%;
181 | max-width: 100%;
182 | width: 100%;
183 | background-color: var(--nav-color);
184 | margin: 0 auto;
185 | padding: 0 30px;
186 | display: flex;
187 | align-items: center;
188 | justify-content: space-between;
189 | }
190 |
191 | nav .nav-bar .sidebarOpen {
192 | color: var(--text-color);
193 | font-size: 25px;
194 | padding: 5px;
195 | cursor: pointer;
196 | display: none;
197 | }
198 |
199 | nav .nav-bar .logo a {
200 | font-size: 25px;
201 | font-weight: 500;
202 | color: var(--text-color);
203 | text-decoration: none;
204 | }
205 |
206 | .menu .logo-toggle {
207 | display: none;
208 | }
209 |
210 | .nav-bar .nav-links {
211 | display: flex;
212 | align-items: center;
213 | }
214 |
215 | .nav-bar .nav-links li {
216 | margin: 0 5px;
217 | list-style: none;
218 | }
219 |
220 | .nav-links li a {
221 | position: relative;
222 | font-size: 17px;
223 | font-weight: 400;
224 | color: var(--text-color);
225 | text-decoration: none;
226 | padding: 10px;
227 | }
228 |
229 | .nav-links li a::before {
230 | content: '';
231 | position: absolute;
232 | left: 50%;
233 | bottom: 0;
234 | transform: translateX(-50%);
235 | height: 6px;
236 | width: 6px;
237 | border-radius: 50%;
238 | background-color: var(--text-color);
239 | opacity: 0;
240 | transition: all 0.3s ease;
241 | }
242 |
243 | .nav-links li:hover a::before {
244 | opacity: 1;
245 | }
246 |
247 | .conbtn {
248 | font-size: 18px;
249 | font-weight: 500;
250 | color: #25262a;
251 | font-family: "Montserrat", Sans-serif;
252 | background-color: #ffaf29;
253 | /* background-image: (91deg,var(#ffaf29) 0%,var(#fecd1a) 100%); */
254 | color: #25262a;
255 | border-radius: 1em;
256 | font-size: 17px;
257 | font-weight: 600;
258 | padding: 1em 2em;
259 | cursor: pointer;
260 | /* transition: all 0.3s ease-in-out; */
261 | /* border: 1px solid black; */
262 | box-shadow: 0 0 0 0 black;
263 | text-decoration: none;
264 |
265 | }
266 |
267 |
268 |
269 | .conbtn:active {
270 | transform: translateY(2px) translateX(1px);
271 | box-shadow: 0 0 0 0 black;
272 | }
273 |
274 | ;
275 |
276 | @media (max-width: 990px) {
277 | .contact-us-btn {
278 | display: none;
279 | }
280 |
281 | .sidebarOpen {
282 | display: block;
283 | }
284 | }
285 |
286 |
287 | @media (max-width: 790px) {
288 | nav .nav-bar .sidebarOpen {
289 | display: block;
290 | color: #e2e3e6;
291 | }
292 |
293 | .menu {
294 | position: fixed;
295 | height: 100%;
296 | width: 320px;
297 | left: -100%;
298 | top: 0;
299 | padding: 20px;
300 | background-color: var(--side-nav);
301 | z-index: 100;
302 | transition: all 0.4s ease;
303 | }
304 |
305 | .conbtn {
306 | display: none;
307 | }
308 |
309 | nav.active .menu {
310 | left: -0%;
311 | }
312 |
313 | nav.active .nav-bar .navLogo a {
314 | opacity: 0;
315 | transition: all 0.3s ease;
316 | }
317 |
318 | .menu .logo-toggle {
319 | display: block;
320 | width: 100%;
321 | display: flex;
322 | align-items: center;
323 | justify-content: space-between;
324 | }
325 |
326 | .logo-toggle .siderbarClose {
327 | color: var(--text-color);
328 | font-size: 24px;
329 | cursor: pointer;
330 | }
331 |
332 | .nav-bar .nav-links {
333 | flex-direction: column;
334 | padding-top: 30px;
335 | }
336 |
337 | .nav-links li a {
338 | display: block;
339 | margin-top: 20px;
340 | }
341 | }
342 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'Poppins', sans-serif;
8 | /* transition: all 0.4s ease; */
9 |
10 |
11 | }
12 |
13 |
14 |
15 | body{
16 |
17 | background: linear-gradient(black , orange);
18 | }
19 |
20 | nav {
21 | position: relative;
22 | padding: 47px 14px;
23 | top: 0;
24 | left: 0;
25 | height: 70px;
26 | width: 100%;
27 | background-color: var(--nav-color);
28 | z-index: 100;
29 | }
30 |
31 |
32 | body.dark nav {
33 | border: 1px solid #393838;
34 |
35 | }
36 |
37 | nav .nav-bar {
38 | position: relative;
39 | height: 100%;
40 | max-width: 100%;
41 | width: 100%;
42 | background-color: var(--nav-color);
43 | margin: 0 auto;
44 | padding: 0 30px;
45 | display: flex;
46 | align-items: center;
47 | justify-content: space-between;
48 | }
49 |
50 | nav .nav-bar .sidebarOpen {
51 | color: var(--text-color);
52 | font-size: 25px;
53 | padding: 5px;
54 | cursor: pointer;
55 | display: none;
56 | }
57 |
58 | nav .nav-bar .logo a {
59 | font-size: 25px;
60 | font-weight: 500;
61 | color: var(--text-color);
62 | text-decoration: none;
63 | }
64 |
65 | .menu .logo-toggle {
66 | display: none;
67 | }
68 |
69 | .nav-bar .nav-links {
70 | display: flex;
71 | align-items: center;
72 | }
73 |
74 | .nav-bar .nav-links li {
75 | margin: 0 5px;
76 | list-style: none;
77 | }
78 |
79 | .nav-links li a {
80 | position: relative;
81 | font-size: 17px;
82 | font-weight: 400;
83 | color: var(--text-color);
84 | text-decoration: none;
85 | padding: 10px;
86 | }
87 |
88 | .nav-links li a::before {
89 | content: '';
90 | position: absolute;
91 | left: 50%;
92 | bottom: 0;
93 | transform: translateX(-50%);
94 | height: 6px;
95 | width: 6px;
96 | border-radius: 50%;
97 | background-color: var(--text-color);
98 | opacity: 0;
99 | transition: all 0.3s ease;
100 | }
101 |
102 | .nav-links li:hover a::before {
103 | opacity: 1;
104 | }
105 |
106 | #conbtn {
107 | font-size: 18px;
108 | font-weight: 500;
109 | color: #25262a;
110 | font-family: "Montserrat", Sans-serif;
111 | background-color: #ffaf29;
112 | /* background-image: (91deg,var(#ffaf29) 0%,var(#fecd1a) 100%); */
113 | color: #25262a;
114 | border-radius: 1em;
115 | font-size: 17px;
116 | font-weight: 600;
117 | padding: 1em 2em;
118 | cursor: pointer;
119 | /* transition: all 0.3s ease-in-out; */
120 | /* border: 1px solid black; */
121 | box-shadow: 0 0 0 0 black;
122 | text-decoration: none;
123 |
124 | }
125 |
126 |
127 |
128 | #conbtn:active {
129 | transform: translateY(2px) translateX(1px);
130 | box-shadow: 0 0 0 0 black;
131 | }
132 |
133 | ;
134 |
135 | @media (max-width: 990px) {
136 | .contact-us-btn {
137 | display: none;
138 | }
139 |
140 | .sidebarOpen {
141 | display: block;
142 | }
143 | }
144 |
145 |
146 | @media (max-width: 790px) {
147 | nav .nav-bar .sidebarOpen {
148 | display: block;
149 | color: #e2e3e6;
150 | }
151 |
152 | .menu {
153 | position: fixed;
154 | height: 100%;
155 | width: 320px;
156 | left: -100%;
157 | top: 0;
158 | padding: 20px;
159 | background-color: var(--side-nav);
160 | z-index: 100;
161 | transition: all 0.4s ease;
162 | }
163 |
164 | #conbtn {
165 | display: none;
166 | }
167 |
168 | nav.active .menu {
169 | left: -0%;
170 | }
171 |
172 | nav.active .nav-bar .navLogo a {
173 | opacity: 0;
174 | transition: all 0.3s ease;
175 | }
176 |
177 | .menu .logo-toggle {
178 | display: block;
179 | width: 100%;
180 | display: flex;
181 | align-items: center;
182 | justify-content: space-between;
183 | }
184 |
185 | .logo-toggle .siderbarClose {
186 | color: var(--text-color);
187 | font-size: 24px;
188 | cursor: pointer;
189 | }
190 |
191 | .nav-bar .nav-links {
192 | flex-direction: column;
193 | padding-top: 30px;
194 | }
195 |
196 | .nav-links li a {
197 | display: block;
198 | margin-top: 20px;
199 | }
200 | }
201 |
202 | /* header-section */
203 |
204 | /* Your existing CSS code for the navbar goes here */
205 |
206 | .header-section {
207 | display: flex;
208 | /* margin-top: 100px; */
209 | align-items: center;
210 | justify-content: space-between;
211 | padding: 20px;
212 | }
213 |
214 | .left-section img {
215 | max-width: 100%;
216 | height: auto;
217 | }
218 |
219 | .right-section {
220 | width: 70%;
221 | height: auto;
222 | padding-left: 20px;
223 | }
224 |
225 | .left-section {
226 | width: 50%;
227 | padding: 20px;
228 | display: flex;
229 | align-items: center;
230 | justify-content: center;
231 | overflow: hidden;
232 | /* Add this line */
233 | }
234 |
235 | .left-section img {
236 | max-width: 100%;
237 | height: auto;
238 | }
239 |
240 |
241 | .intro h2 {
242 | font-size: 20px;
243 | margin-bottom: 20px;
244 | }
245 |
246 | .main-text h1 {
247 | font-size: 86px;
248 | line-height: 1.2;
249 | color: #fff;
250 | margin-bottom: 20px;
251 | font-family: monospace;
252 | }
253 |
254 | .paragraph p {
255 | font-size: 16px;
256 | color: #fff;
257 | margin-bottom: 30px;
258 | }
259 |
260 | .contact-button a {
261 | display: inline-block;
262 | padding: 10px 20px;
263 | font-size: 18px;
264 | font-weight: bold;
265 | text-decoration: none;
266 | background-color: #ffaf29;
267 | color: #25262a;
268 | border-radius: 5px;
269 | }
270 |
271 | @media (max-width: 768px) {
272 | .header-section {
273 | flex-direction: column;
274 | }
275 |
276 | .left-section,
277 | .right-section {
278 | width: 100%;
279 | }
280 |
281 | .right-section {
282 | padding: 0;
283 | text-align: center;
284 | }
285 | }
286 |
287 |
288 |
289 |
290 | .card {
291 | width: 45%;
292 | padding: 0px;
293 | background-color: transparent;
294 | margin-bottom: 20px;
295 | }
296 |
297 | .card h3 {
298 | font-size: 18px;
299 | margin-bottom: 10px;
300 | }
301 |
302 | .card p {
303 | font-size: 14px;
304 | line-height: 1.5;
305 | }
306 |
307 |
308 |
309 | .container {
310 | display: flex;
311 | flex-wrap: wrap;
312 | }
313 |
314 | .content-section {
315 | flex: 1 1 50%;
316 | }
317 |
318 | .cards-section {
319 | flex: 1 1 50%;
320 | display: flex;
321 | flex-wrap: wrap;
322 | justify-content: space-between;
323 | }
324 |
325 | .card {
326 | width: 45%;
327 | /* Card styling */
328 | display: flex;
329 | height: 300px;
330 | }
331 |
332 | .card1 {
333 | align-self: flex-end;
334 | padding-top: 0px;
335 | }
336 |
337 | .card2 {
338 | padding-bottom: 29px;
339 | padding-top: 0px;
340 | align-self: flex-end;
341 | height: 329px;
342 | }
343 |
344 | .card3 {
345 | padding-top: 34px;
346 | height: 334px;
347 | }
348 |
349 | .card4 {
350 | padding-top: 0px;
351 | }
352 |
353 | .content-section {
354 | color: #ffffff;
355 | }
356 |
357 | .cv-button a {
358 | display: inline-block;
359 | padding: 10px 20px;
360 | font-size: 18px;
361 | font-weight: bold;
362 | text-decoration: none;
363 | background-color: #ffaf29;
364 | color: #25262a;
365 | border-radius: 5px;
366 | }
367 |
368 | /* Media Query for smaller screen sizes */
369 | @media (max-width: 768px) {
370 | .container {
371 | flex-direction: column;
372 | }
373 |
374 | .content-section,
375 | .cards-section {
376 | flex: 1 1 100%;
377 | }
378 | }
379 |
380 | /* skills deatila section*/
381 |
382 | .arrow-icon {
383 | color: yellow;
384 | transform: rotate(-45deg);
385 | }
386 |
387 | .skillsdelt {
388 | background-color: var(--body-color);
389 | }
390 |
391 |
392 | .center-button {
393 | display: flex;
394 | justify-content: center;
395 | align-items: center;
396 | height: 300px;
397 | }
398 |
399 | /* button in next to skills details */
400 | button {
401 | height: 61px;
402 | width: 141px;
403 | position: relative;
404 | padding: 12px 35px;
405 | background: #FEC195;
406 | font-size: 17px;
407 | font-weight: 500;
408 | color: #181818;
409 | border: 3px solid #ffaf29;
410 | border-radius: 8px;
411 | box-shadow: 0 0 0 #fec1958c;
412 | transition: all .3s ease-in-out;
413 | }
414 |
415 | .fil0 {
416 | fill: #FFFDEF
417 | }
418 | /* counter of rewards bla bla dashbord */
419 | .wrapperx {
420 |
421 | gap: 4px;
422 | align-items: center;
423 | justify-content: center;
424 | display: flex;
425 | width: 100%;
426 | height: 400px;
427 | }
428 | .containerx {
429 | width: 41vmin;
430 | height: 43vmin;
431 | display: flex;
432 | flex-direction: column;
433 | justify-content: space-around;
434 | padding: 1em 0;
435 | position: relative;
436 | font-size: 16px;
437 | /* border-radius: 0.5em; */
438 | background-color: #21242b;
439 |
440 | }
441 | .num1{
442 | border-radius: 40px 0 0 40px;
443 | }
444 | .num2{
445 | border-radius: 0 40px 40px 0;
446 | }
447 |
448 | i {
449 | color: #18f98f;
450 | font-size: 2.5em;
451 | text-align: center;
452 | }
453 |
454 | span.num {
455 | color: #64f4ab;
456 | display: grid;
457 | place-items: center;
458 | font-weight: 600;
459 | font-size: 87px;
460 | }
461 |
462 | span.text {
463 | color: #e0e0e0;
464 | font-size: 24px;
465 | text-align: center;
466 | pad: 0.7em 0;
467 | font-weight: 400;
468 | line-height: 0;
469 | }
470 |
471 | @media screen and (max-width: 1024px) {
472 |
473 | .containerx {
474 |
475 | font-size: 12px;
476 | }
477 | }
478 |
479 | @media screen and (max-width: 768px) {
480 |
481 |
482 | .containerx {
483 |
484 | font-size: 14px;
485 | }
486 | }
487 |
488 | .containerx {
489 |
490 | font-size: 8px;
491 | }
492 |
493 |
494 | /* footer */
495 | .footer1{
496 | margin-top: 34px;
497 | background-color: #25262a;
498 | display: flex;
499 | height: 132px;
500 | width: 100%;
501 | align-items: center;
502 | justify-content: space-between;
503 |
504 | }
505 | .otheracc{
506 | display: flex;
507 | justify-content: space-between;
508 | width: 24%;
509 | }
--------------------------------------------------------------------------------
/index1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
25 |
28 |
29 |
105 |
129 |
130 |
106 |
128 |
107 |
112 |
108 |
109 |
110 |
111 |
113 |
118 |
114 |
115 |
116 |
117 |
119 |
124 |
120 |
121 |
122 |
123 |
125 |
127 | Send
126 |
50 |
72 |
51 | 
52 |
53 |
52 |
54 |
71 |
55 |
57 | Introduction
56 |
58 |
65 | 59 | 60 | Hello
64 |
66 |
70 | Since beginning my journey as a Blockchain Developer 1 year
67 | ago, I've done many research on this technology
68 | and collaborated with talented people to create different Projects.
74 |
286 |
75 |
88 | My Skills
76 |Why Hire Me For the Next Project?
77 |The technological revolution is changing aspects of 78 | our lives, and the fabric of society itself. It's also changing the way we learn and what we learn. 79 | Factual knowledge is less prized when everything you ever need to know can be found on your phone. 80 | There's no imperative to be an expert at doing everything when you can collaborate with specialists. 81 |
82 | 83 | 84 | 87 |
89 |
285 |
90 |
91 |
136 |
92 |
135 |
93 |
131 |
132 | BlockChain
133 |TRevolution of Technology
134 |
137 |
138 |
186 |
139 |
183 |
184 |
185 |
140 |
178 |
179 | Metaverse
180 |The technological 181 | revolution of VR
182 |
187 |
188 |
236 |
189 |
233 |
234 |
235 |
190 |
229 |
230 | NFTs
231 |Tokenizing The Assets
232 |
237 |
284 |
238 |
281 |
282 |
283 |
239 |
277 |
278 | Defi
279 |Revolution of Finance
280 |
289 |
336 |
337 |
290 |
335 |
291 |
324 |
325 |
292 |
323 |
293 |
296 | Projects 294 |
295 |
297 |
300 | Decentralized Application 298 |
299 |
301 |
307 | The Technology is Becaming more Decentralized,
302 | and the fabric of society itself. it's also changing the way we learn
303 | and what we learn. Factual knowledge is less prized when everything
304 | you ever need to know can be found on your phone. There's no imperative to
305 | be an expert at doing everything when you can.
308 |
309 |
310 |
319 | Read more
320 |
321 |
322 |
326 |
334 |
327 |
333 |
328 | 
331 |
332 |
331 |