├── .github
    └── workflows
    │   ├── jekyll-gh-pages.yml
    │   └── static.yml
├── LICENSE
├── README.md
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   ├── about.jpg
    │   ├── perfil.png
    │   ├── work1.jpg
    │   ├── work2.jpg
    │   ├── work3.jpg
    │   ├── work4.jpg
    │   ├── work5.jpg
    │   └── work6.jpg
    ├── js
    │   └── main.js
    └── scss
    │   └── styles.scss
└── index.html


/.github/workflows/jekyll-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages
 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Build job
25 |   build:
26 |     runs-on: ubuntu-latest
27 |     steps:
28 |       - name: Checkout
29 |         uses: actions/checkout@v3
30 |       - name: Setup Pages
31 |         uses: actions/configure-pages@v2
32 |       - name: Build with Jekyll
33 |         uses: actions/jekyll-build-pages@v1
34 |         with:
35 |           source: ./
36 |           destination: ./_site
37 |       - name: Upload artifact
38 |         uses: actions/upload-pages-artifact@v1
39 | 
40 |   # Deployment job
41 |   deploy:
42 |     environment:
43 |       name: github-pages
44 |       url: ${{ steps.deployment.outputs.page_url }}
45 |     runs-on: ubuntu-latest
46 |     needs: build
47 |     steps:
48 |       - name: Deploy to GitHub Pages
49 |         id: deployment
50 |         uses: actions/deploy-pages@v1
51 | 


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Single deploy job since we're just deploying
25 |   deploy:
26 |     environment:
27 |       name: github-pages
28 |       url: ${{ steps.deployment.outputs.page_url }}
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |       - name: Checkout
32 |         uses: actions/checkout@v3
33 |       - name: Setup Pages
34 |         uses: actions/configure-pages@v2
35 |       - name: Upload artifact
36 |         uses: actions/upload-pages-artifact@v1
37 |         with:
38 |           # Upload entire repository
39 |           path: '.'
40 |       - name: Deploy to GitHub Pages
41 |         id: deployment
42 |         uses: actions/deploy-pages@v1
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Coding With Enjoy
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h2 align="center">Personal Portfolio | سایت شخصی</h2>
 2 | 
 3 | ###
 4 | 
 5 | <h4 align="center">دمو | Demo 😁<br><br>https://codingwithenjoy.github.io/Portfolio-HTML-CSS-JS</h4>
 6 | 
 7 | ###
 8 | 
 9 | <p align="left"></p>
10 | 
11 | ###
12 | 
13 | <p align="left"></p>
14 | 
15 | ###
16 | 
17 | <div align="center">
18 |   <img height="1000" src="https://user-images.githubusercontent.com/113675029/228473157-da9ac44f-c4de-4dce-8d20-210e4e010af0.png"  />
19 | </div>
20 | 
21 | ###
22 | 
23 | <p align="left"></p>
24 | 
25 | ###
26 | 
27 | <div align="center">
28 |   <img height="4000" src="https://user-images.githubusercontent.com/113675029/228473251-6aab853f-3a69-43f3-a54c-d51b40954c73.png"  />
29 | </div>
30 | 
31 | ###
32 | 
33 | <p align="left"></p>
34 | 
35 | ###
36 | 
37 | <p align="left"></p>
38 | 
39 | ###
40 | 
41 | <p align="left"></p>
42 | 
43 | ###
44 | 
45 | <div align="center">
46 |   <a href="https://www.instagram.com/codingwithenjoy/" target="_blank">
47 |     <img src="https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/instagram/default.svg" width="52" height="40" alt="instagram logo"  />
48 |   </a>
49 |   <a href="https://www.youtube.com/@codingwithenjoy" target="_blank">
50 |     <img src="https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/youtube/default.svg" width="52" height="40" alt="youtube logo"  />
51 |   </a>
52 |   <a href="mailto:codingwithenjoy@gmail.com" target="_blank">
53 |     <img src="https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/gmail/default.svg" width="52" height="40" alt="gmail logo"  />
54 |   </a>
55 |   <a href="https://twitter.com/codingwithenjoy" target="_blank">
56 |     <img src="https://raw.githubusercontent.com/maurodesouza/profile-readme-generator/master/src/assets/icons/social/twitter/default.svg" width="52" height="40" alt="twitter logo"  />
57 |   </a>
58 | </div>
59 | 
60 | ###
61 | 
62 | <p align="left"></p>
63 | 
64 | ###
65 | 
66 | <h4 align="center">توسعه داده شده توسط برنامه نویسی با لذت</h4>
67 | 
68 | ###
69 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
  2 | 
  3 | :root {
  4 |   --header-height: 3rem;
  5 |   --font-semi: 600;
  6 |   --hue-color: 224;
  7 |   --first-color: hsl(var(--hue-color), 89%, 60%);
  8 |   --second-color: hsl(var(--hue-color), 56%, 12%);
  9 |   --body-font: "Poppins", sans-serif;
 10 |   --big-font-size: 2rem;
 11 |   --h2-font-size: 1.25rem;
 12 |   --normal-font-size: 0.938rem;
 13 |   --smaller-font-size: 0.75rem;
 14 |   --mb-2: 1rem;
 15 |   --mb-4: 2rem;
 16 |   --mb-5: 2.5rem;
 17 |   --mb-6: 3rem;
 18 |   --z-back: -10;
 19 |   --z-fixed: 100;
 20 | }
 21 | 
 22 | @media screen and (min-width: 968px) {
 23 |   :root {
 24 |     --big-font-size: 3.5rem;
 25 |     --h2-font-size: 2rem;
 26 |     --normal-font-size: 1rem;
 27 |     --smaller-font-size: 0.875rem;
 28 |   }
 29 | }
 30 | 
 31 | *,
 32 | ::before,
 33 | ::after {
 34 |   box-sizing: border-box;
 35 | }
 36 | 
 37 | html {
 38 |   scroll-behavior: smooth;
 39 | }
 40 | 
 41 | body {
 42 |   margin: var(--header-height) 0 0 0;
 43 |   font-family: var(--body-font);
 44 |   font-size: var(--normal-font-size);
 45 |   color: var(--second-color);
 46 | }
 47 | 
 48 | h1,
 49 | h2,
 50 | p {
 51 |   margin: 0;
 52 | }
 53 | 
 54 | ul {
 55 |   margin: 0;
 56 |   padding: 0;
 57 |   list-style: none;
 58 | }
 59 | 
 60 | a {
 61 |   text-decoration: none;
 62 | }
 63 | 
 64 | img {
 65 |   max-width: 100%;
 66 |   height: auto;
 67 |   display: block;
 68 | }
 69 | 
 70 | .section-title {
 71 |   position: relative;
 72 |   font-size: var(--h2-font-size);
 73 |   color: var(--first-color);
 74 |   margin-top: var(--mb-2);
 75 |   margin-bottom: var(--mb-4);
 76 |   text-align: center;
 77 | }
 78 | 
 79 | .section-title::after {
 80 |   position: absolute;
 81 |   content: "";
 82 |   width: 64px;
 83 |   height: 0.18rem;
 84 |   left: 0;
 85 |   right: 0;
 86 |   margin: auto;
 87 |   top: 2rem;
 88 |   background-color: var(--first-color);
 89 | }
 90 | 
 91 | .section {
 92 |   padding-top: 3rem;
 93 |   padding-bottom: 2rem;
 94 | }
 95 | 
 96 | .bd-grid {
 97 |   max-width: 1024px;
 98 |   display: grid;
 99 |   margin-left: var(--mb-2);
100 |   margin-right: var(--mb-2);
101 | }
102 | 
103 | .l-header {
104 |   width: 100%;
105 |   position: fixed;
106 |   top: 0;
107 |   left: 0;
108 |   z-index: var(--z-fixed);
109 |   background-color: #fff;
110 |   box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
111 | }
112 | 
113 | .nav {
114 |   height: var(--header-height);
115 |   display: flex;
116 |   justify-content: space-between;
117 |   align-items: center;
118 |   font-weight: var(--font-semi);
119 | }
120 | 
121 | @media screen and (max-width: 767px) {
122 |   .nav__menu {
123 |     position: fixed;
124 |     top: var(--header-height);
125 |     right: -100%;
126 |     width: 80%;
127 |     height: 100%;
128 |     padding: 2rem;
129 |     background-color: rgba(0, 0, 0, 0.8);
130 |     backdrop-filter: blur(8px);
131 |     transition: 0.5s;
132 |   }
133 | }
134 | 
135 | .nav__item {
136 |   margin-bottom: var(--mb-4);
137 | }
138 | 
139 | .nav__link {
140 |   position: relative;
141 |   color: #fff;
142 | }
143 | 
144 | .nav__link:hover {
145 |   position: relative;
146 | }
147 | 
148 | .nav__link:hover::after {
149 |   position: absolute;
150 |   content: "";
151 |   width: 100%;
152 |   height: 0.18rem;
153 |   left: 0;
154 |   top: 2rem;
155 |   background-color: var(--first-color);
156 | }
157 | 
158 | .nav__logo {
159 |   color: var(--second-color);
160 | }
161 | 
162 | .nav__toggle {
163 |   color: var(--second-color);
164 |   font-size: 1.5rem;
165 |   cursor: pointer;
166 | }
167 | 
168 | .active::after {
169 |   position: absolute;
170 |   content: "";
171 |   width: 100%;
172 |   height: 0.18rem;
173 |   left: 0;
174 |   top: 2rem;
175 |   background-color: var(--first-color);
176 | }
177 | 
178 | .show {
179 |   right: 0;
180 | }
181 | 
182 | .home {
183 |   position: relative;
184 |   row-gap: 5rem;
185 |   padding: 4rem 0 5rem;
186 | }
187 | 
188 | .home__data {
189 |   align-self: center;
190 | }
191 | 
192 | .home__title {
193 |   font-size: var(--big-font-size);
194 |   margin-bottom: var(--mb-5);
195 | }
196 | 
197 | .home__title-color {
198 |   color: var(--first-color);
199 | }
200 | 
201 | .home__social {
202 |   display: flex;
203 |   flex-direction: column;
204 | }
205 | 
206 | .home__social-icon {
207 |   width: max-content;
208 |   margin-bottom: var(--mb-2);
209 |   font-size: 1.5rem;
210 |   color: var(--second-color);
211 | }
212 | 
213 | .home__social-icon:hover {
214 |   color: var(--first-color);
215 | }
216 | 
217 | .home__img {
218 |   position: absolute;
219 |   right: 0;
220 |   bottom: 0;
221 |   width: 260px;
222 | }
223 | 
224 | .home__blob {
225 |   fill: var(--first-color);
226 | }
227 | 
228 | .home__blob-img {
229 |   width: 360px;
230 | }
231 | 
232 | .button {
233 |   display: inline-block;
234 |   background-color: var(--first-color);
235 |   color: #fff;
236 |   padding: 0.75rem 2.5rem;
237 |   font-weight: var(--font-semi);
238 |   border-radius: 0.5rem;
239 |   transition: 0.3s;
240 | }
241 | 
242 | .button:hover {
243 |   box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);
244 | }
245 | 
246 | .about__container {
247 |   row-gap: 2rem;
248 |   text-align: center;
249 | }
250 | 
251 | .about__subtitle {
252 |   margin-bottom: var(--mb-2);
253 | }
254 | 
255 | .about__img {
256 |   justify-self: center;
257 | }
258 | 
259 | .about__img img {
260 |   width: 200px;
261 |   border-radius: 0.5rem;
262 | }
263 | 
264 | .skills__container {
265 |   row-gap: 2rem;
266 |   text-align: center;
267 | }
268 | 
269 | .skills__subtitle {
270 |   margin-bottom: var(--mb-2);
271 | }
272 | 
273 | .skills__text {
274 |   margin-bottom: var(--mb-4);
275 | }
276 | 
277 | .skills__data {
278 |   display: flex;
279 |   justify-content: space-between;
280 |   align-items: center;
281 |   position: relative;
282 |   font-weight: var(--font-semi);
283 |   padding: 0.5rem 1rem;
284 |   margin-bottom: var(--mb-4);
285 |   border-radius: 0.5rem;
286 |   box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
287 | }
288 | 
289 | .skills__icon {
290 |   font-size: 2rem;
291 |   margin-right: var(--mb-2);
292 |   color: var(--first-color);
293 | }
294 | 
295 | .skills__names {
296 |   display: flex;
297 |   align-items: center;
298 | }
299 | 
300 | .skills__bar {
301 |   position: absolute;
302 |   left: 0;
303 |   bottom: 0;
304 |   background-color: var(--first-color);
305 |   height: 0.25rem;
306 |   border-radius: 0.5rem;
307 |   z-index: var(--z-back);
308 | }
309 | 
310 | .skills__html {
311 |   width: 95%;
312 | }
313 | 
314 | .skills__css {
315 |   width: 85%;
316 | }
317 | 
318 | .skills__js {
319 |   width: 90%;
320 | }
321 | 
322 | .skills__ux {
323 |   width: 85%;
324 | }
325 | 
326 | .skills__img {
327 |   border-radius: 0.5rem;
328 | }
329 | 
330 | .work__container {
331 |   row-gap: 2rem;
332 | }
333 | 
334 | .work__img {
335 |   box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
336 |   border-radius: 0.5rem;
337 |   overflow: hidden;
338 | }
339 | 
340 | .work__img img {
341 |   transition: 1s;
342 | }
343 | 
344 | .work__img img:hover {
345 |   transform: scale(1.1);
346 | }
347 | 
348 | .contact__input {
349 |   width: 100%;
350 |   font-size: var(--normal-font-size);
351 |   font-weight: var(--font-semi);
352 |   padding: 1rem;
353 |   border-radius: 0.5rem;
354 |   border: 1.5px solid var(--second-color);
355 |   outline: none;
356 |   margin-bottom: var(--mb-4);
357 | }
358 | 
359 | .contact__button {
360 |   display: block;
361 |   border: none;
362 |   outline: none;
363 |   font-size: var(--normal-font-size);
364 |   cursor: pointer;
365 |   margin-left: auto;
366 | }
367 | 
368 | .footer {
369 |   background-color: var(--second-color);
370 |   color: #fff;
371 |   text-align: center;
372 |   font-weight: var(--font-semi);
373 |   padding: 2rem 0;
374 | }
375 | 
376 | .footer__title {
377 |   font-size: 2rem;
378 |   margin-bottom: var(--mb-4);
379 | }
380 | 
381 | .footer__social {
382 |   margin-bottom: var(--mb-4);
383 | }
384 | 
385 | .footer__icon {
386 |   font-size: 1.5rem;
387 |   color: #fff;
388 |   margin: 0 var(--mb-2);
389 | }
390 | 
391 | .footer__copy {
392 |   font-size: var(--smaller-font-size);
393 | }
394 | 
395 | @media screen and (max-width: 320px) {
396 |   .home {
397 |     row-gap: 2rem;
398 |   }
399 |   .home__img {
400 |     width: 200px;
401 |   }
402 | }
403 | 
404 | @media screen and (min-width: 576px) {
405 |   .home {
406 |     padding: 4rem 0 2rem;
407 |   }
408 |   .home__social {
409 |     padding-top: 0;
410 |     padding-bottom: 2.5rem;
411 |     flex-direction: row;
412 |     align-self: flex-end;
413 |   }
414 |   .home__social-icon {
415 |     margin-bottom: 0;
416 |     margin-right: var(--mb-4);
417 |   }
418 |   .home__img {
419 |     width: 300px;
420 |     bottom: 25%;
421 |   }
422 |   .about__container {
423 |     grid-template-columns: repeat(2, 1fr);
424 |     align-items: center;
425 |     text-align: initial;
426 |   }
427 |   .skills__container {
428 |     grid-template-columns: 0.7fr;
429 |     justify-content: center;
430 |     column-gap: 1rem;
431 |   }
432 |   .work__container {
433 |     grid-template-columns: repeat(2, 1fr);
434 |     column-gap: 2rem;
435 |     padding-top: 2rem;
436 |   }
437 |   .contact__form {
438 |     width: 360px;
439 |     padding-top: 2rem;
440 |   }
441 |   .contact__container {
442 |     justify-items: center;
443 |   }
444 | }
445 | 
446 | @media screen and (min-width: 768px) {
447 |   body {
448 |     margin: 0;
449 |   }
450 |   .section {
451 |     padding-top: 4rem;
452 |     padding-bottom: 3rem;
453 |   }
454 |   .section-title {
455 |     margin-bottom: var(--mb-6);
456 |   }
457 |   .section-title::after {
458 |     width: 80px;
459 |     top: 3rem;
460 |   }
461 |   .nav {
462 |     height: calc(var(--header-height) + 1.5rem);
463 |   }
464 |   .nav__list {
465 |     display: flex;
466 |     padding-top: 0;
467 |   }
468 |   .nav__item {
469 |     margin-left: var(--mb-6);
470 |     margin-bottom: 0;
471 |   }
472 |   .nav__toggle {
473 |     display: none;
474 |   }
475 |   .nav__link {
476 |     color: var(--second-color);
477 |   }
478 |   .home {
479 |     padding: 8rem 0 2rem;
480 |   }
481 |   .home__img {
482 |     width: 400px;
483 |     bottom: 10%;
484 |   }
485 |   .about__container {
486 |     padding-top: 2rem;
487 |   }
488 |   .about__img img {
489 |     width: 300px;
490 |   }
491 |   .skills__container {
492 |     grid-template-columns: repeat(2, 1fr);
493 |     column-gap: 2rem;
494 |     align-items: center;
495 |     text-align: initial;
496 |   }
497 |   .work__container {
498 |     grid-template-columns: repeat(3, 1fr);
499 |     column-gap: 2rem;
500 |   }
501 | }
502 | 
503 | @media screen and (min-width: 992px) {
504 |   .bd-grid {
505 |     margin-left: auto;
506 |     margin-right: auto;
507 |   }
508 |   .home {
509 |     padding: 10rem 0 2rem;
510 |   }
511 |   .home__img {
512 |     width: 450px;
513 |   }
514 | }
515 | 


--------------------------------------------------------------------------------
/assets/img/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/about.jpg


--------------------------------------------------------------------------------
/assets/img/perfil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/perfil.png


--------------------------------------------------------------------------------
/assets/img/work1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/work1.jpg


--------------------------------------------------------------------------------
/assets/img/work2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/work2.jpg


--------------------------------------------------------------------------------
/assets/img/work3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/work3.jpg


--------------------------------------------------------------------------------
/assets/img/work4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/work4.jpg


--------------------------------------------------------------------------------
/assets/img/work5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/work5.jpg


--------------------------------------------------------------------------------
/assets/img/work6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingWithEnjoy/Portfolio-HTML-CSS-JS/d543e6b3d2bd9361cee4fa001772e325c290bcf9/assets/img/work6.jpg


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | const showMenu = (toggleId, navId) => {
 2 |   const toggle = document.getElementById(toggleId),
 3 |     nav = document.getElementById(navId);
 4 | 
 5 |   if (toggle && nav) {
 6 |     toggle.addEventListener("click", () => {
 7 |       nav.classList.toggle("show");
 8 |     });
 9 |   }
10 | };
11 | showMenu("nav-toggle", "nav-menu");
12 | 
13 | const navLink = document.querySelectorAll(".nav__link");
14 | 
15 | function linkAction() {
16 |   const navMenu = document.getElementById("nav-menu");
17 |   navMenu.classList.remove("show");
18 | }
19 | navLink.forEach((n) => n.addEventListener("click", linkAction));
20 | 
21 | const sections = document.querySelectorAll("section[id]");
22 | 
23 | function scrollActive() {
24 |   const scrollY = window.pageYOffset;
25 | 
26 |   sections.forEach((current) => {
27 |     const sectionHeight = current.offsetHeight;
28 |     const sectionTop = current.offsetTop - 50;
29 |     sectionId = current.getAttribute("id");
30 | 
31 |     if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
32 |       document
33 |         .querySelector(".nav__menu a[href*=" + sectionId + "]")
34 |         .classList.add("active");
35 |     } else {
36 |       document
37 |         .querySelector(".nav__menu a[href*=" + sectionId + "]")
38 |         .classList.remove("active");
39 |     }
40 |   });
41 | }
42 | window.addEventListener("scroll", scrollActive);
43 | 
44 | const sr = ScrollReveal({
45 |   origin: "top",
46 |   distance: "60px",
47 |   duration: 2000,
48 |   delay: 200,
49 |   reset: true,
50 | });
51 | 
52 | sr.reveal(".home__data, .about__img, .skills__subtitle, .skills__text", {});
53 | sr.reveal(".home__img, .about__subtitle, .about__text, .skills__img", {
54 |   delay: 400,
55 | });
56 | sr.reveal(".home__social-icon", { interval: 200 });
57 | sr.reveal(".skills__data, .work__img, .contact__input", { interval: 200 });
58 | 


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
  2 | 
  3 | --header-height: 3rem;
  4 | --font-semi: 600;
  5 | 
  6 | --hue-color: 224;
  7 | --first-color: hsl(var(--hue-color), 89%, 60%);
  8 | --second-color: hsl(var(--hue-color), 56%, 12%);
  9 | 
 10 | --body-font: "Poppins", sans-serif;
 11 | 
 12 | --big-font-size: 2rem;
 13 | --h2-font-size: 1.25rem;
 14 | --normal-font-size: 0.938rem;
 15 | --smaller-font-size: 0.75rem;
 16 | 
 17 | --mb-2: 1rem;
 18 | --mb-4: 2rem;
 19 | --mb-5: 2.5rem;
 20 | --mb-6: 3rem;
 21 | 
 22 | --z-back: -10;
 23 | --z-fixed: 100;
 24 | 
 25 | @media screen and (min-width: 968px) {
 26 |   --big-font-size: 3.5rem;
 27 |   --h2-font-size: 2rem;
 28 |   --normal-font-size: 1rem;
 29 |   --smaller-font-size: 0.875rem;
 30 | }
 31 | 
 32 | *,
 33 | ::before,
 34 | ::after {
 35 |   box-sizing: border-box;
 36 | }
 37 | html {
 38 |   scroll-behavior: smooth;
 39 | }
 40 | body {
 41 |   margin: var(--header-height) 0 0 0;
 42 |   font-family: var(--body-font);
 43 |   font-size: var(--normal-font-size);
 44 |   color: var(--second-color);
 45 | }
 46 | h1,
 47 | h2,
 48 | p {
 49 |   margin: 0;
 50 | }
 51 | ul {
 52 |   margin: 0;
 53 |   padding: 0;
 54 |   list-style: none;
 55 | }
 56 | a {
 57 |   text-decoration: none;
 58 | }
 59 | img {
 60 |   max-width: 100%;
 61 |   height: auto;
 62 |   display: block;
 63 | }
 64 | 
 65 | .section-title {
 66 |   position: relative;
 67 |   font-size: var(--h2-font-size);
 68 |   color: var(--first-color);
 69 |   margin-top: var(--mb-2);
 70 |   margin-bottom: var(--mb-4);
 71 |   text-align: center;
 72 | 
 73 |   &::after {
 74 |     position: absolute;
 75 |     content: "";
 76 |     width: 64px;
 77 |     height: 0.18rem;
 78 |     left: 0;
 79 |     right: 0;
 80 |     margin: auto;
 81 |     top: 2rem;
 82 |     background-color: var(--first-color);
 83 |   }
 84 | }
 85 | .section {
 86 |   padding-top: 3rem;
 87 |   padding-bottom: 2rem;
 88 | }
 89 | 
 90 | .bd-grid {
 91 |   max-width: 1024px;
 92 |   display: grid;
 93 |   margin-left: var(--mb-2);
 94 |   margin-right: var(--mb-2);
 95 | }
 96 | .l-header {
 97 |   width: 100%;
 98 |   position: fixed;
 99 |   top: 0;
100 |   left: 0;
101 |   z-index: var(--z-fixed);
102 |   background-color: #fff;
103 |   box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
104 | }
105 | 
106 | .nav {
107 |   height: var(--header-height);
108 |   display: flex;
109 |   justify-content: space-between;
110 |   align-items: center;
111 |   font-weight: var(--font-semi);
112 | 
113 |   &__menu {
114 |     @media screen and (max-width: 767px) {
115 |       position: fixed;
116 |       top: var(--header-height);
117 |       right: -100%;
118 |       width: 80%;
119 |       height: 100%;
120 |       padding: 2rem;
121 |       background-color: var(--second-color);
122 |       transition: 0.5s;
123 |     }
124 |   }
125 |   &__item {
126 |     margin-bottom: var(--mb-4);
127 |   }
128 |   &__link {
129 |     position: relative;
130 |     color: #fff;
131 | 
132 |     &:hover {
133 |       position: relative;
134 | 
135 |       &::after {
136 |         position: absolute;
137 |         content: "";
138 |         width: 100%;
139 |         height: 0.18rem;
140 |         left: 0;
141 |         top: 2rem;
142 |         background-color: var(--first-color);
143 |       }
144 |     }
145 |   }
146 |   &__logo {
147 |     color: var(--second-color);
148 |   }
149 |   &__toggle {
150 |     color: var(--second-color);
151 |     font-size: 1.5rem;
152 |     cursor: pointer;
153 |   }
154 | }
155 | .active::after {
156 |   position: absolute;
157 |   content: "";
158 |   width: 100%;
159 |   height: 0.18rem;
160 |   left: 0;
161 |   top: 2rem;
162 |   background-color: var(--first-color);
163 | }
164 | 
165 | .show {
166 |   right: 0;
167 | }
168 | 
169 | .home {
170 |   position: relative;
171 |   row-gap: 5rem;
172 |   padding: 4rem 0 5rem;
173 | 
174 |   &__data {
175 |     align-self: center;
176 |   }
177 |   &__title {
178 |     font-size: var(--big-font-size);
179 |     margin-bottom: var(--mb-5);
180 | 
181 |     &-color {
182 |       color: var(--first-color);
183 |     }
184 |   }
185 |   &__social {
186 |     display: flex;
187 |     flex-direction: column;
188 |     &-icon {
189 |       width: max-content;
190 |       margin-bottom: var(--mb-2);
191 |       font-size: 1.5rem;
192 |       color: var(--second-color);
193 | 
194 |       &:hover {
195 |         color: var(--first-color);
196 |       }
197 |     }
198 |   }
199 | 
200 |   &__img {
201 |     position: absolute;
202 |     right: 0;
203 |     bottom: 0;
204 |     width: 260px;
205 |   }
206 |   &__blob {
207 |     fill: var(--first-color);
208 | 
209 |     &-img {
210 |       width: 360px;
211 |     }
212 |   }
213 | }
214 | 
215 | .button {
216 |   display: inline-block;
217 |   background-color: var(--first-color);
218 |   color: #fff;
219 |   padding: 0.75rem 2.5rem;
220 |   font-weight: var(--font-semi);
221 |   border-radius: 0.5rem;
222 |   transition: 0.3s;
223 | 
224 |   &:hover {
225 |     box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);
226 |   }
227 | }
228 | 
229 | .about {
230 |   &__container {
231 |     row-gap: 2rem;
232 |     text-align: center;
233 |   }
234 |   &__subtitle {
235 |     margin-bottom: var(--mb-2);
236 |   }
237 | 
238 |   &__img {
239 |     justify-self: center;
240 | 
241 |     & img {
242 |       width: 200px;
243 |       border-radius: 0.5rem;
244 |     }
245 |   }
246 | }
247 | 
248 | .skills {
249 |   &__container {
250 |     row-gap: 2rem;
251 |     text-align: center;
252 |   }
253 |   &__subtitle {
254 |     margin-bottom: var(--mb-2);
255 |   }
256 |   &__text {
257 |     margin-bottom: var(--mb-4);
258 |   }
259 |   &__data {
260 |     display: flex;
261 |     justify-content: space-between;
262 |     align-items: center;
263 |     position: relative;
264 |     font-weight: var(--font-semi);
265 |     padding: 0.5rem 1rem;
266 |     margin-bottom: var(--mb-4);
267 |     border-radius: 0.5rem;
268 |     box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
269 |   }
270 |   &__icon {
271 |     font-size: 2rem;
272 |     margin-right: var(--mb-2);
273 |     color: var(--first-color);
274 |   }
275 |   &__names {
276 |     display: flex;
277 |     align-items: center;
278 |   }
279 |   &__bar {
280 |     position: absolute;
281 |     left: 0;
282 |     bottom: 0;
283 |     background-color: var(--first-color);
284 |     height: 0.25rem;
285 |     border-radius: 0.5rem;
286 |     z-index: var(--z-back);
287 |   }
288 |   &__html {
289 |     width: 95%;
290 |   }
291 |   &__css {
292 |     width: 85%;
293 |   }
294 |   &__js {
295 |     width: 65%;
296 |   }
297 |   &__ux {
298 |     width: 85%;
299 |   }
300 |   &__img {
301 |     border-radius: 0.5rem;
302 |   }
303 | }
304 | .work {
305 |   &__container {
306 |     row-gap: 2rem;
307 |   }
308 |   &__img {
309 |     box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
310 |     border-radius: 0.5rem;
311 |     overflow: hidden;
312 | 
313 |     & img {
314 |       transition: 1s;
315 | 
316 |       &:hover {
317 |         transform: scale(1.1);
318 |       }
319 |     }
320 |   }
321 | }
322 | 
323 | .contact {
324 |   &__input {
325 |     width: 100%;
326 |     font-size: var(--normal-font-size);
327 |     font-weight: var(--font-semi);
328 |     padding: 1rem;
329 |     border-radius: 0.5rem;
330 |     border: 1.5px solid var(--second-color);
331 |     outline: none;
332 |     margin-bottom: var(--mb-4);
333 |   }
334 |   &__button {
335 |     display: block;
336 |     border: none;
337 |     outline: none;
338 |     font-size: var(--normal-font-size);
339 |     cursor: pointer;
340 |     margin-left: auto;
341 |   }
342 | }
343 | 
344 | .footer {
345 |   background-color: var(--second-color);
346 |   color: #fff;
347 |   text-align: center;
348 |   font-weight: var(--font-semi);
349 |   padding: 2rem 0;
350 | 
351 |   &__title {
352 |     font-size: 2rem;
353 |     margin-bottom: var(--mb-4);
354 |   }
355 |   &__social {
356 |     margin-bottom: var(--mb-4);
357 |   }
358 |   &__icon {
359 |     font-size: 1.5rem;
360 |     color: #fff;
361 |     margin: 0 var(--mb-2);
362 |   }
363 |   &__copy {
364 |     font-size: var(--smaller-font-size);
365 |   }
366 | }
367 | 
368 | @media screen and (max-width: 320px) {
369 |   .home {
370 |     row-gap: 2rem;
371 | 
372 |     &__img {
373 |       width: 200px;
374 |     }
375 |   }
376 | }
377 | 
378 | @media screen and (min-width: 576px) {
379 |   .home {
380 |     padding: 4rem 0 2rem;
381 |     &__social {
382 |       padding-top: 0;
383 |       padding-bottom: 2.5rem;
384 |       flex-direction: row;
385 |       align-self: flex-end;
386 | 
387 |       &-icon {
388 |         margin-bottom: 0;
389 |         margin-right: var(--mb-4);
390 |       }
391 |     }
392 |     &__img {
393 |       width: 300px;
394 |       bottom: 25%;
395 |     }
396 |   }
397 | 
398 |   .about__container {
399 |     grid-template-columns: repeat(2, 1fr);
400 |     align-items: center;
401 |     text-align: initial;
402 |   }
403 | 
404 |   .skills__container {
405 |     grid-template-columns: 0.7fr;
406 |     justify-content: center;
407 |     column-gap: 1rem;
408 |   }
409 | 
410 |   .work__container {
411 |     grid-template-columns: repeat(2, 1fr);
412 |     column-gap: 2rem;
413 |     padding-top: 2rem;
414 |   }
415 | 
416 |   .contact {
417 |     &__form {
418 |       width: 360px;
419 |       padding-top: 2rem;
420 |     }
421 |     &__container {
422 |       justify-items: center;
423 |     }
424 |   }
425 | }
426 | 
427 | @media screen and(min-width: 768px) {
428 |   body {
429 |     margin: 0;
430 |   }
431 |   .section {
432 |     padding-top: 4rem;
433 |     padding-bottom: 3rem;
434 |   }
435 | 
436 |   .section-title {
437 |     margin-bottom: var(--mb-6);
438 | 
439 |     &::after {
440 |       width: 80px;
441 |       top: 3rem;
442 |     }
443 |   }
444 | 
445 |   .nav {
446 |     height: calc(var(--header-height) + 1.5rem);
447 |     &__list {
448 |       display: flex;
449 |       padding-top: 0;
450 |     }
451 |     &__item {
452 |       margin-left: var(--mb-6);
453 |       margin-bottom: 0;
454 |     }
455 |     &__toggle {
456 |       display: none;
457 |     }
458 |     &__link {
459 |       color: var(--second-color);
460 |     }
461 |   }
462 |   .home {
463 |     padding: 8rem 0 2rem;
464 | 
465 |     &__img {
466 |       width: 400px;
467 |       bottom: 10%;
468 |     }
469 |   }
470 | 
471 |   .about {
472 |     &__container {
473 |       padding-top: 2rem;
474 |     }
475 |     &__img {
476 |       & img {
477 |         width: 300px;
478 |       }
479 |     }
480 |   }
481 |   .skills__container {
482 |     grid-template-columns: repeat(2, 1fr);
483 |     column-gap: 2rem;
484 |     align-items: center;
485 |     text-align: initial;
486 |   }
487 |   .work__container {
488 |     grid-template-columns: repeat(3, 1fr);
489 |     column-gap: 2rem;
490 |   }
491 | }
492 | 
493 | @media screen and (min-width: 992px) {
494 |   .bd-grid {
495 |     margin-left: auto;
496 |     margin-right: auto;
497 |   }
498 |   .home {
499 |     padding: 10rem 0 2rem;
500 | 
501 |     &__img {
502 |       width: 450px;
503 |     }
504 |   }
505 | }
506 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta name="google-site-verification" content="qvz1depI77nnWiiU_G71VyH080s05ws-Y_ON2W7h3QU" />
  7 |     <link rel="stylesheet" href="assets/css/styles.css" />
  8 |     <link
  9 |       href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
 10 |       rel="stylesheet"
 11 |     />
 12 |     <title>Portfolio - Coding With Enjoy</title>
 13 |   </head>
 14 |   <body>
 15 |     <header class="l-header">
 16 |       <nav class="nav bd-grid">
 17 |         <div>
 18 |           <a href="#" class="nav__logo">Marlon</a>
 19 |         </div>
 20 | 
 21 |         <div class="nav__menu" id="nav-menu">
 22 |           <ul class="nav__list">
 23 |             <li class="nav__item">
 24 |               <a href="#home" class="nav__link active">Home</a>
 25 |             </li>
 26 |             <li class="nav__item">
 27 |               <a href="#about" class="nav__link">About</a>
 28 |             </li>
 29 |             <li class="nav__item">
 30 |               <a href="#skills" class="nav__link">Skills</a>
 31 |             </li>
 32 |             <li class="nav__item">
 33 |               <a href="#work" class="nav__link">Work</a>
 34 |             </li>
 35 |             <li class="nav__item">
 36 |               <a href="#contact" class="nav__link">Contact</a>
 37 |             </li>
 38 |           </ul>
 39 |         </div>
 40 |         <div class="nav__toggle" id="nav-toggle">
 41 |           <i class="bx bx-menu"></i>
 42 |         </div>
 43 |       </nav>
 44 |     </header>
 45 | 
 46 |     <main class="l-main">
 47 |       <section class="home bd-grid" id="home">
 48 |         <div class="home__data">
 49 |           <h1 class="home__title">
 50 |             Hi,<br />I'am <span class="home__title-color">Marlon</span><br />
 51 |             Web Developer
 52 |           </h1>
 53 |           <a href="#contact" class="button">Contact Me</a>
 54 |         </div>
 55 |         <div class="home__social">
 56 |           <a href="" class="home__social-icon"
 57 |             ><i class="bx bxl-linkedin"></i
 58 |           ></a>
 59 |           <a href="" class="home__social-icon"
 60 |             ><i class="bx bxl-instagram"></i
 61 |           ></a>
 62 |           <a href="" class="home__social-icon"><i class="bx bxl-github"></i></a>
 63 |         </div>
 64 |         <div class="home__img">
 65 |           <svg
 66 |             class="home__blob"
 67 |             viewBox="0 0 479 467"
 68 |             xmlns="http://www.w3.org/2000/svg"
 69 |             xmlns:xlink="http://www.w3.org/1999/xlink"
 70 |           >
 71 |             <mask id="mask0" mask-type="alpha">
 72 |               <path
 73 |                 d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"
 74 |               />
 75 |             </mask>
 76 |             <g mask="url(#mask0)">
 77 |               <path
 78 |                 d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"
 79 |               />
 80 |               <image
 81 |                 class="home__blob-img"
 82 |                 x="50"
 83 |                 y="60"
 84 |                 href="assets/img/perfil.png"
 85 |               />
 86 |             </g>
 87 |           </svg>
 88 |         </div>
 89 |       </section>
 90 | 
 91 |       <section class="about section" id="about">
 92 |         <h2 class="section-title">About Me</h2>
 93 |         <div class="about__container bd-grid">
 94 |           <div class="about__img">
 95 |             <img src="assets/img/about.jpg" alt="" />
 96 |           </div>
 97 |           <div>
 98 |             <h2 class="about__subtitle">I'am Marlon</h2>
 99 |             <p class="about__text">
100 |               Lorem, ipsum dolor sit amet consectetur adipisicing elit.
101 |               Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat
102 |               ut voluptates soluta, aut earum nemo recusandae cumque
103 |               perferendis! Recusandae alias accusamus atque.
104 |             </p>
105 |           </div>
106 |         </div>
107 |       </section>
108 | 
109 |       <section class="skills section" id="skills">
110 |         <h2 class="section-title">Skills</h2>
111 |         <div class="skills__container bd-grid">
112 |           <div>
113 |             <h2 class="skills__subtitle">Profesional Skills</h2>
114 |             <p class="skills__text">
115 |               Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit
116 |               optio id vero amet, alias architecto consectetur error eum eaque
117 |               sit.
118 |             </p>
119 |             <div class="skills__data">
120 |               <div class="skills__names">
121 |                 <i class="bx bxl-html5 skills__icon"></i>
122 |                 <span class="skills__name">HTML5</span>
123 |               </div>
124 |               <div class="skills__bar skills__html"></div>
125 |               <div>
126 |                 <span class="skills__percentage">95%</span>
127 |               </div>
128 |             </div>
129 |             <div class="skills__data">
130 |               <div class="skills__names">
131 |                 <i class="bx bxl-css3 skills__icon"></i>
132 |                 <span class="skills__name">CSS3</span>
133 |               </div>
134 |               <div class="skills__bar skills__css"></div>
135 |               <div>
136 |                 <span class="skills__percentage">85%</span>
137 |               </div>
138 |             </div>
139 |             <div class="skills__data">
140 |               <div class="skills__names">
141 |                 <i class="bx bxl-javascript skills__icon"></i>
142 |                 <span class="skills__name">JavaScript</span>
143 |               </div>
144 |               <div class="skills__bar skills__js"></div>
145 |               <div>
146 |                 <span class="skills__percentage">90%</span>
147 |               </div>
148 |             </div>
149 |             <div class="skills__data">
150 |               <div class="skills__names">
151 |                 <i class="bx bxs-paint skills__icon"></i>
152 |                 <span class="skills__name">UX/UI</span>
153 |               </div>
154 |               <div class="skills__bar skills__ux"></div>
155 |               <div>
156 |                 <span class="skills__percentage">85%</span>
157 |               </div>
158 |             </div>
159 |           </div>
160 |           <div>
161 |             <img src="assets/img/work3.jpg" alt="" class="skills__img" />
162 |           </div>
163 |         </div>
164 |       </section>
165 | 
166 |       <section class="work section" id="work">
167 |         <h2 class="section-title">Work</h2>
168 |         <div class="work__container bd-grid">
169 |           <a href="" class="work__img">
170 |             <img src="assets/img/work1.jpg" alt="" />
171 |           </a>
172 |           <a href="" class="work__img">
173 |             <img src="assets/img/work2.jpg" alt="" />
174 |           </a>
175 |           <a href="" class="work__img">
176 |             <img src="assets/img/work3.jpg" alt="" />
177 |           </a>
178 |           <a href="" class="work__img">
179 |             <img src="assets/img/work4.jpg" alt="" />
180 |           </a>
181 |           <a href="" class="work__img">
182 |             <img src="assets/img/work5.jpg" alt="" />
183 |           </a>
184 |           <a href="" class="work__img">
185 |             <img src="assets/img/work6.jpg" alt="" />
186 |           </a>
187 |         </div>
188 |       </section>
189 | 
190 |       <section class="contact section" id="contact">
191 |         <h2 class="section-title">Contact</h2>
192 |         <div class="contact__container bd-grid">
193 |           <form action="" class="contact__form">
194 |             <input type="text" placeholder="Name" class="contact__input" />
195 |             <input type="mail" placeholder="Email" class="contact__input" />
196 |             <textarea
197 |               name=""
198 |               id=""
199 |               cols="0"
200 |               rows="10"
201 |               class="contact__input"
202 |               placeholder="Massage"
203 |             ></textarea>
204 |             <input
205 |               type="button"
206 |               value="Send"
207 |               class="contact__button button"
208 |             />
209 |           </form>
210 |         </div>
211 |       </section>
212 |     </main>
213 | 
214 |     <footer class="footer">
215 |       <p class="footer__title">Marlon</p>
216 |       <div class="footer__social">
217 |         <a href="#" class="footer__icon"><i class="bx bxl-facebook"></i></a>
218 |         <a href="#" class="footer__icon"><i class="bx bxl-instagram"></i></a>
219 |         <a href="#" class="footer__icon"><i class="bx bxl-twitter"></i></a>
220 |       </div>
221 |       <p class="footer__copy">&#169; Coding With Enjoy. All rigths reserved</p>
222 |     </footer>
223 | 
224 |     <script src="https://unpkg.com/scrollreveal"></script>
225 |     <script src="assets/js/main.js"></script>
226 |   </body>
227 | </html>
228 | 


--------------------------------------------------------------------------------