├── README.md
├── site_current
    ├── files
    │   └── example_image.png
    ├── script.js
    ├── styles.css
    └── index.html
└── site_backup
    ├── script.js
    ├── estilo.css
    └── index.html


/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/high-horse/portfolio/HEAD/README.md


--------------------------------------------------------------------------------
/site_current/files/example_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/high-horse/portfolio/HEAD/site_current/files/example_image.png


--------------------------------------------------------------------------------
/site_backup/script.js:
--------------------------------------------------------------------------------
 1 | let menuVisible = false;
 2 | //Función que oculta o muestra el menu
 3 | function mostrarOcultarMenu(){
 4 |     if(menuVisible){
 5 |         document.getElementById("nav").classList ="";
 6 |         menuVisible = false;
 7 |     }else{
 8 |         document.getElementById("nav").classList ="responsive";
 9 |         menuVisible = true;
10 |     }
11 | }
12 | 
13 | function seleccionar(){
14 |     //oculto el menu una vez que selecciono una opcion
15 |     document.getElementById("nav").classList = "";
16 |     menuVisible = false;
17 | }
18 | //Funcion que aplica las animaciones de las habilidades
19 | function efectoHabilidades(){
20 |     var skills = document.getElementById("skills");
21 |     var distancia_skills = window.innerHeight - skills.getBoundingClientRect().top;
22 |     if(distancia_skills >= 300){
23 |         let habilidades = document.getElementsByClassName("progreso");
24 |         habilidades[0].classList.add("javascript");
25 |         habilidades[1].classList.add("htmlcss");
26 |         habilidades[2].classList.add("photoshop");
27 |         habilidades[3].classList.add("wordpress");
28 |         habilidades[4].classList.add("drupal");
29 |         habilidades[5].classList.add("comunicacion");
30 |         habilidades[6].classList.add("trabajo");
31 |         habilidades[7].classList.add("creatividad");
32 |         habilidades[8].classList.add("dedicacion");
33 |         habilidades[9].classList.add("proyect");
34 |     }
35 | }
36 | 
37 | 
38 | //detecto el scrolling para aplicar la animacion de la barra de habilidades
39 | window.onscroll = function(){
40 |     efectoHabilidades();
41 | } 


--------------------------------------------------------------------------------
/site_current/script.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function() {
  2 | 
  3 |   // Title customize
  4 |   var docTitle  = document.title;
  5 |   window.addEventListener('blur', () => {
  6 |       document.title = "Come back 😢";
  7 |   })
  8 |   window.addEventListener("focus", () => {
  9 |       document.title = docTitle;
 10 |   })
 11 | 
 12 |   // always recent date
 13 |   document.getElementById("currentYear").innerText = new Date().getFullYear();
 14 | 
 15 |   
 16 | 
 17 |   //sticky header
 18 |   $(window).scroll(function() {
 19 |     if ($(this).scrollTop() > 1) {
 20 |       $(".header-area").addClass("sticky");
 21 |     } else {
 22 |       $(".header-area").removeClass("sticky");
 23 |     }
 24 | 
 25 |     // Update the active section in the header
 26 |     updateActiveSection();
 27 |   });
 28 | 
 29 |   $(".header ul li a").click(function(e) {
 30 |     e.preventDefault(); 
 31 | 
 32 |     var target = $(this).attr("href");
 33 | 
 34 |     if ($(target).hasClass("active-section")) {
 35 |       return; 
 36 |     }
 37 | 
 38 |     if (target === "#home") {
 39 |       $("html, body").animate(
 40 |         {
 41 |           scrollTop: 0 
 42 |         },
 43 |         500
 44 |       );
 45 |     } else {
 46 |       var offset = $(target).offset().top - 40; 
 47 | 
 48 |       $("html, body").animate(
 49 |         {
 50 |           scrollTop: offset
 51 |         },
 52 |         500
 53 |       );
 54 |     }
 55 | 
 56 |     $(".header ul li a").removeClass("active");
 57 |     $(this).addClass("active");
 58 |   });
 59 | 
 60 | 
 61 |   //Initial content revealing js
 62 |   ScrollReveal({
 63 |     distance: "100px",
 64 |     duration: 2000,
 65 |     delay: 200
 66 |   });
 67 | 
 68 |   ScrollReveal().reveal(".header a, .profile-photo, .about-content, .education", {
 69 |     origin: "left"
 70 |   });
 71 |   ScrollReveal().reveal(".header ul, .profile-text, .about-skills, .internship", {
 72 |     origin: "right"
 73 |   });
 74 |   ScrollReveal().reveal(".project-title, .contact-title", {
 75 |     origin: "top"
 76 |   });
 77 |   ScrollReveal().reveal(".projects, .contact", {
 78 |     origin: "bottom"
 79 |   });
 80 | 
 81 |   //contact form to excel sheet
 82 |   const scriptURL = 'https://script.google.com/macros/s/AKfycbzUSaaX3XmlE5m9YLOHOBrRuCh2Ohv49N9bs4bew7xPd1qlgpvXtnudDs5Xhp3jF-Fx/exec';
 83 |   const form = document.forms['submitToGoogleSheet']
 84 |   const msg = document.getElementById("msg")
 85 | 
 86 |   form.addEventListener('submit', e => {
 87 |       e.preventDefault()
 88 |       fetch(scriptURL, { method: 'POST', body: new FormData(form) })
 89 |           .then(response => {
 90 |               msg.innerHTML = "Message sent successfully"
 91 |               setTimeout(function () {
 92 |                   msg.innerHTML = ""
 93 |               }, 5000)
 94 |               form.reset()
 95 |           })
 96 |           .catch(error => console.error('Error!', error.message))
 97 |   })
 98 |   
 99 | });
100 | 
101 | function updateActiveSection() {
102 |   var scrollPosition = $(window).scrollTop();
103 | 
104 |   // Checking if scroll position is at the top of the page
105 |   if (scrollPosition === 0) {
106 |     $(".header ul li a").removeClass("active");
107 |     $(".header ul li a[href='#home']").addClass("active");
108 |     return;
109 |   }
110 | 
111 |   // Iterate through each section and update the active class in the header
112 |   $("section").each(function() {
113 |     var target = $(this).attr("id");
114 |     var offset = $(this).offset().top;
115 |     var height = $(this).outerHeight();
116 | 
117 |     if (
118 |       scrollPosition >= offset - 40 &&
119 |       scrollPosition < offset + height - 40
120 |     ) {
121 |       $(".header ul li a").removeClass("active");
122 |       $(".header ul li a[href='#" + target + "']").addClass("active");
123 |     }
124 |   });
125 | }
126 |   
127 | document.querySelector('form[name="submitToGoogleSheet"]').addEventListener('submit', function (e) {
128 |   e.preventDefault();
129 |   document.getElementById('submitButton').disabled = true;
130 |   // Create a FormData object from the form
131 |   const formData = new FormData(e.target);
132 | 
133 |   fetch("https://formsubmit.co/ajax/33eed4766c087209a197e890f83d83f4", {
134 |           method: "POST",
135 |           body: formData
136 |       })
137 |       .then(response => response.json())
138 |       .then(data => {
139 |           console.log(data);
140 |           // Check if the submission was successful (you may need to adjust based on the response structure)
141 |           if (data.success) {
142 |               alert("Form submitted successfully!");
143 |           } else {
144 |               alert("Form submission failed. Please try again.");
145 |           }
146 |       })
147 |       .catch(error => console.log(error))
148 |       .finally(() => {
149 |           // Re-enable the submit button after the response is received
150 |           document.getElementById('submitButton').disabled = false;
151 |       });
152 | });
153 | 
154 |  


--------------------------------------------------------------------------------
/site_current/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
  2 | 
  3 | *{
  4 |   margin:0;
  5 |   padding:0;
  6 |   box-sizing:border-box;
  7 |   scroll-behavior:smooth;
  8 | }
  9 | a{
 10 |   text-decoration: none ;
 11 |   color:#fff;
 12 |   transition:0.3s; 
 13 | }
 14 | ul{
 15 |   list-style:none;
 16 | }
 17 | img{
 18 |   max-width: 100%;
 19 | }
 20 | body{
 21 |   font-family: 'Lexend', sans-serif;
 22 |   font-size:16px;
 23 |   line-height:24px; 
 24 |   background-color:#202020;
 25 | }
 26 | .container{
 27 |   width: 1170px;
 28 |   margin:auto;
 29 | }
 30 | 
 31 | 
 32 | 
 33 | 
 34 |       /*---------------------------Header---------------------------*/
 35 | 
 36 | .header-area{
 37 |   padding:25px 0;
 38 |   transition: padding .3s;
 39 | }
 40 | 
 41 | .header-area.sticky {
 42 |   position: fixed;
 43 |   top: 0;
 44 |   left: 0;
 45 |   width: 100%;
 46 |   z-index: 99;
 47 |   background-color: #202020;
 48 |   padding: 5px;
 49 | }
 50 | 
 51 | .header{
 52 |   display:flex;
 53 |   justify-content: space-between;
 54 |   align-items: center;
 55 |   /* padding-bottom: 2rem; */
 56 | } 
 57 | .logo {
 58 |   display: flex;
 59 |   align-items: center;
 60 |   position: relative; 
 61 |   text-transform: uppercase;
 62 |   font-size: 26px;
 63 |   font-weight: 700;
 64 | }
 65 | 
 66 | .logo .fa-bolt {
 67 |   color: #fed700;
 68 |   font-size: 19.5px;
 69 |   position: absolute; 
 70 |   top: 60%;
 71 |   left: 100%; 
 72 |   transform: translate(-50%, -50%); 
 73 |   z-index: 1; 
 74 | }
 75 | 
 76 | .signature {
 77 |   width: 100px; 
 78 |   height:auto; 
 79 |   margin-right: 10px; 
 80 | }
 81 | 
 82 | .header ul li:first-child {
 83 |   margin-right: auto; 
 84 | }  
 85 | 
 86 | .header ul{
 87 |   display: flex;
 88 |   align-items: center; 
 89 | }
 90 | .header ul li{
 91 |   margin: 0 15px;
 92 | }
 93 | .header ul li a{
 94 |   text-transform: capitalize;
 95 |   display: block;
 96 | }
 97 | .header ul li a.active{
 98 |   color: #fed700;
 99 | } 
100 | .header ul li a:hover{
101 |   color:#fed700;
102 | }
103 | .header .menu_icon{
104 |   color:#fff;
105 |   font-size: 18px;
106 |   cursor: pointer;
107 |   display: none;
108 | }
109 | 
110 | 
111 | /*---------------------------HomePage--------------------------*/
112 | 
113 | .FirstElement{
114 |    display:flex;
115 |    justify-content: space-around;
116 |    align-items: center;
117 |    padding-top: 5rem; 
118 | } 
119 | 
120 | .FirstElement.adjusted-padding {
121 |   padding-top: 40px; 
122 | }
123 | 
124 | .FirstElement .profile-photo{
125 |   width: 300px;
126 |   height:  300px;
127 |   border-radius: 50%;
128 |   overflow: hidden;
129 |   border: 15px solid #444444;
130 |   box-shadow: 5px 7px 25px rgba(0, 0, 0, 0.5)
131 | }
132 | profile-photo .img{
133 |   height: 100%;
134 |   width: 100%;
135 |   transition: 0.5s;
136 | }
137 | .FirstElement .profile-photo img:hover{
138 |   transform: scale(1.2);
139 | }
140 | .profile-text{
141 |   max-width: 750px;
142 |   display: flex;
143 |   flex-direction: column;
144 | }
145 | .profile-text h5{
146 |   color: #e5e5e5;
147 |   font-size: 14px;
148 | }
149 | .profile-text h1{
150 |   color: #fed700;
151 |   font-size: 3rem; 
152 | }
153 | .profile-text p{
154 |   color:#e5e5e5;
155 | }
156 | .profile-text .social i{
157 |   color : #e5e5e5;
158 |   font-size: 18px;
159 |   margin-right: 10px;
160 |   transition: 0.5s;
161 | }
162 | .profile-text .social i:hover{
163 |   color:#fed700;
164 |   transform: rotate(360deg);
165 | }
166 | 
167 | 
168 | 
169 |  /*---------------------------About---------------------------*/
170 | 
171 | .about-area{
172 |   padding-top: 130px;
173 |   background-color: #202020;
174 | }
175 | .about{
176 |   display: flex;
177 |   justify-content: space-between;
178 |   align-items: center;
179 |   margin-bottom:50px;
180 | }
181 | .about-content{
182 |   flex-basis: 60%;
183 | }
184 | .about-content h4{
185 |   color: #fed700;
186 |   font-size: 40px;
187 |   line-height: 70px;
188 |   text-transform: capitalize;
189 | }
190 | .about-content ul {
191 |   color:#fff;
192 |   text-align: justify;
193 | }
194 | 
195 | .about-content ul li {
196 |   list-style-type: disc;
197 |   margin-bottom: 10px;
198 | }
199 | 
200 | .about-skills{
201 |   flex-basis: 35%;
202 | }
203 | .about-skills ul li{
204 |   border-bottom: 1px dashed #ddd;
205 |   padding-bottom: 10px;
206 |   margin-bottom: 10px;
207 |   color: #fff;
208 |   font-size: 18px;
209 | }
210 | .about-skills ul li:last-child{
211 |   border-bottom: 0;
212 |   padding-bottom: 0;
213 |   margin-bottom: 0;
214 | }
215 | 
216 | 
217 | /*---------------------------Button---------------------------*/
218 | 
219 | .btn-group{
220 |   margin: 45px 0;
221 | }
222 | .btn-group .btn{
223 |   border-color: #d5d5d5;
224 |   color: #fff;
225 |   background-color: #333;
226 |   padding:12px 25px;
227 |   margin: 5px 0;
228 |   margin-right: 7px;
229 |   border-radius: 30px;
230 |   border: 2px solid #e5e5e5;
231 |   box-shadow: 0 10px 10px -8px rgb(0 0 0 / 78%);
232 | }
233 | .btn.active{
234 |   border-color: #fed700;
235 | }
236 | 
237 | 
238 | /*---------------------------Education & Internship---------------------------*/
239 | 
240 | .education-content .row{
241 |   display: flex;
242 |   border-radius: 5px;
243 |   height: 400px;
244 |   margin-bottom: 250px;
245 | }
246 | 
247 | .education-content .title{
248 |   color: #fed700;
249 | }
250 | .education-content .row .education,
251 | .education-content .row .internship
252 | {
253 |   color: #e5e5e5;
254 |   flex:0 0 50%;
255 |   max-width: 50%;
256 |   margin-top: 30px;
257 | } 
258 | .education-content  h3.title{
259 |   font-size:24px;
260 |   margin-bottom: 30px;
261 |   font-weight: 700;
262 | }
263 | .education-content .row.timeline-box{
264 |   flex:0 0 100%;
265 |   max-width: 100%;  
266 | }
267 | .education-content .row .timeline{
268 |   /* background-color:#e5e5e5; */
269 |   padding: 30px 15px;
270 |   border: 1px solid #e5e5e5;
271 |   border-radius: 10px;
272 |   width: 100%;
273 |   position: relative;
274 | }
275 | .education-content .row .timeline-item{
276 |   position:relative;
277 |   padding-left: 37px;
278 |   padding-bottom: 50px; 
279 | }
280 | .education-content .row  .internship .timeline-item{
281 |   position:relative;
282 |   padding-left: 37px;
283 |   padding-bottom: 30px; 
284 | }
285 | .education-content .row .timeline-item:last-child{
286 |   padding-bottom: 0;
287 | }
288 | .education-content .row .timeline-item::before{
289 |   content: "";
290 |   width: 1px;
291 |   position: absolute;
292 |   height: 100%;
293 |   left: 7px;
294 |   top: 0;
295 |   background-color: #fed700;  
296 | }
297 | .education-content .row .circle-dot{
298 |   position: absolute;
299 |   left: 0;
300 |   top: 0;
301 |   height: 15px;
302 |   width: 15px;
303 |   border-radius: 50%;
304 |   background-color: #e5e5e5;
305 | }
306 | .education-content .row .timeline-title  {
307 |   font-weight: 700;
308 |   font-size: 18px;
309 |   margin-bottom: 12px;
310 | }
311 | .education-content .row .internship .timeline-title  {
312 |   font-weight: 700;
313 |   font-size: 18px;
314 |   margin-bottom: 8px;
315 | }
316 | .education-content .row .timeline-text{
317 |   line-height: 25px;
318 |   font-size: 16px;
319 |   text-align: justify;
320 | }
321 | 
322 | 
323 | 
324 | /*---------------------------Projects---------------------------*/
325 | .project-content{
326 |   padding: 90px 0;
327 |   /* color:#fff;  */
328 | }
329 | .project-title{
330 |   margin-bottom: 60px;
331 |   text-align: center;
332 | }
333 | .project-title h4{
334 |   text-transform: uppercase;
335 |   font-size: 40px;
336 |   line-height: 40px;
337 |   color: #fed700;
338 |   margin-bottom: 20px;
339 | }
340 | .project-title p{
341 |   color: #e5e5e5;
342 | }
343 | .projects{
344 |   display: flex;
345 |   justify-content:space-between;
346 |   flex-wrap: wrap;
347 | }
348 | .project{
349 |     /* padding: 30px 15px; */
350 |     color: #e5e5e5;
351 |     border: 2px solid #e5e5e5;
352 |     border-radius: 10px;
353 |     width: 100%;
354 |     position: relative;
355 |     padding: 25px;
356 |     text-align: center;
357 |     flex-basis: 32%;
358 |     transition: .3s;
359 | }
360 | .project i{
361 |   background-color: #fed700;
362 |   width: 60px;
363 |   height: 60px;
364 |   color: #333;
365 |   font-size: 26px;
366 |   line-height: 60px;
367 |   border-radius: 50%;
368 | }
369 | .project h4{
370 |   font-size: 26px;
371 |   text-transform: capitalize;
372 |   margin: 20px 0;
373 | }
374 | .project p{
375 |   text-align: justify;
376 | }
377 | .project:hover{
378 |   border-color: #fed700;
379 | }
380 | 
381 | 
382 | 
383 | /*---------------------------Contact Me---------------------------*/
384 | .contact-content{
385 |   padding: 100px 0;
386 |   color: #fff;
387 |   text-align: center;
388 | }
389 | .contact-content .contact-title h4{
390 |   font-size: 40px;
391 |   text-transform: capitalize;
392 |   color: #fed700;
393 |   padding-bottom: 10px;
394 | }
395 | .contact-content .contact-title p{
396 |   padding-bottom: 20px;
397 | }
398 | .contact{
399 |   max-width: 700px;
400 |   margin: auto;
401 | }
402 | .contact input,.contact textarea{
403 |   width: 100%;
404 |   padding: 15px;
405 |   border: 0;
406 |   margin-bottom: 10px;
407 | }
408 | 
409 | .contact .submit{
410 |   width: auto;
411 |   background-color: #fed700;
412 |   padding: 10px 40px;
413 |   font-weight:bold ;
414 |   font-size: 18px;
415 | }
416 | .contact .submit:hover{
417 |   transform: scale(1.1);
418 |   cursor: pointer;
419 | }
420 | #msg{
421 |   color: #fff;
422 |   font-size: 20px;
423 |   margin-top: -8px;
424 |   display: block;
425 | }
426 | 
427 | 
428 | 
429 | 
430 | 
431 | 
432 | /*---------------------------Footer---------------------------*/
433 | .footer {
434 |     max-width: 950px;
435 |     margin: 0 auto;
436 |     padding: 15px 0 26px;
437 |     border-top: 1px solid rgba(255, 255, 255, 0.1); 
438 |     color: rgba(255, 255, 255, 0.4);
439 |     display: flex;
440 |     flex-direction: column;
441 |     align-items: center;
442 |     text-align: center;
443 |   }
444 |   .footer .message {
445 |     font-size: 12px;
446 |     color: rgba(255, 255, 255, 0.4);
447 |     margin-bottom: 10px;
448 |   }
449 |   
450 |   .copyright {
451 |     font-size: 12px;
452 |   }
453 | 
454 | 
455 | 
456 | 
457 |  /*------------------- Responsive Design on small screen -------------------*/
458 | 
459 | /* Medium layout */
460 | @media only screen and (min-width:1000px) and (max-width:1200px){
461 |   .container{
462 |     width: 970px;
463 |   }
464 | }
465 | 
466 | @media(max-width:1050px){
467 |   .FirstElement{ 
468 |     flex-direction: column;
469 |     padding-top: 2rem;
470 |   }
471 |   .profile-text{
472 |     padding: 40px 0px;
473 |   }
474 | }
475 | 
476 | 
477 | 
478 | /* tablet layout */
479 | @media only screen and (min-width:768px) and (max-width:999px){
480 |   .container{
481 |     width: 750px;
482 |   } 
483 | }  
484 | 
485 | 
486 | /* Mobile Layout */
487 | @media only screen and (max-width:767px){
488 |   .container{
489 |     width: 350px;
490 |   }
491 | 
492 |   .header .menu_icon {
493 |     display: block;
494 |   }
495 |   .header ul{
496 |     display: none;
497 |   }
498 |   .header i{
499 |     color: #e5e5e5;
500 |   }
501 | 
502 |   .profile-text{
503 |     width: 350px;
504 |   }
505 |   .FirstElement .profile-text p{
506 |     text-align: justify;
507 |   }
508 |   .about{
509 |     flex-direction: column;
510 |     flex-basis: 100%;
511 |     margin-bottom: 30px;
512 |   }
513 |   .about-skills{
514 |     width: 100%;
515 |     margin-top: 30px;
516 |   }
517 |   .education-content .row {
518 |     flex-direction: column;
519 |     height: auto;
520 |     margin-bottom: 50px;
521 |   }
522 | 
523 |   .education-content .row .education,
524 |   .education-content .row .internship {
525 |     flex-basis: 100%;
526 |     max-width: 100%;
527 |     margin-top: 30px;
528 |   }
529 |   .project{
530 |     flex-basis: 100%;
531 |     margin-bottom: 30px;
532 |   }
533 | 
534 | }
535 | 
536 | 


--------------------------------------------------------------------------------
/site_current/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8"> 
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Akhilesh Adhikari</title>
  8 |     <link rel="icon" href="https://i.ibb.co/zRsTj3p/Frame-1-37.png">
  9 | 
 10 |     <meta name="google-site-verification" content="6KfIW6KQ5nNDj4Kq21SYY6VImqkQkXZXk1AeiGmEbMQ" />
 11 | 
 12 | 
 13 |         <!-- google-site-verification=6KfIW6KQ5nNDj4Kq21SYY6VImqkQkXZXk1AeiGmEbMQ -->
 14 | 
 15 |     <link rel="stylesheet" href="styles.css">
 16 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" class="stylesheet">
 17 | </head> 
 18 | 
 19 | <body>
 20 | 
 21 |     <!-------------------------- Header Area -------------------------->
 22 |     <header class="header-area">
 23 |         <div class="container">
 24 |             <div class="header">
 25 |                
 26 |                 <a href="" class="logo">
 27 |                     <img src="files/example_image.png" alt="" class="signature">
 28 |                     <i class="fa fa-bolt"></i>
 29 |                 </a>
 30 |                    
 31 |                 <ul class="navbar">
 32 |                     <li><a href="#home">Home</a></li>
 33 |                     <li><a href="#about">About</a></li>
 34 |                     <li><a href="#education">Education</a></li>
 35 |                     <li><a href="#projects">Projects</a></li>
 36 |                     <li><a href="#contact">Contact</a></li>
 37 |                 </ul>
 38 |                 
 39 |                 <div class="menu_icon">
 40 |                     <i class="fa fa-bars"></i>
 41 |                 </div>
 42 | 
 43 |             </div>
 44 |         </div> 
 45 |     </header>
 46 |  
 47 |     <!-------------------------- Home Page -------------------------->
 48 |     <div class="FirstElement" id="home">
 49 |         <div class="profile-photo">
 50 |             <img src="files/example_image.png" alt="profile picture 1">
 51 |         </div>
 52 |         <div class="profile-text">
 53 |             <h5>Hi 👋 I'm </h5><br>
 54 |             <h2 style="color: yellow;">Akhilesh,</h2><br>
 55 |             <!-- <p>as a Computer Science graduate and dedicated developer, I transform complex problems into scalable solutions. Fueled by a love for creation and a desire to make a difference through technology, I welcome you to explore my portfolio. Let’s innovate together!</p> -->
 56 |             <p> I'm a Computer Science graduate and a passionate full-time developer. With a strong foundation in coding principles and a commitment to innovation and learning, I aim to transform complex problems into elegant, scalable solutions. My journey in the tech world is fueled by my love for creating and my desire to make a difference through technology. Welcome to my portfolio, where you can explore my projects, experiences, and the skills I've acquired along the way. Let's code, learn, and grow together!</p>
 57 |             
 58 |             <div class="btn-group">
 59 |                 <a href="files/Akhilesh-Adhikari.pdf" class="btn   active">Download CV</a>
 60 |                 <a href="mailto:akhileshadhikari8@gmail.com" class="btn">Contact</a>
 61 |             </div>
 62 | 
 63 |             <div class="social">
 64 |                 <a href="mailto:akhileshadhikari8@gmail.com"><i class="fa fa-envelope"></i></a>
 65 |                 <a href="https://github.com/AkhileshAdhikari" target="_blank"><i class="fa-brands fa-github"></i></a>
 66 |                 <a href="https://leetcode.com/user5578YA/" target="_blank"><i class="fa fa-code"></i></a>
 67 |                 <a href="https://www.linkedin.com/in/akhilesh-adhikari/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
 68 |             </div>
 69 |         </div>
 70 |     </div>
 71 | 
 72 |         <!-------------------------- About Section -------------------------->
 73 |     <section class="about-area" id="about">
 74 |         <div class="container">
 75 |             <div class="about">
 76 |                 
 77 |                 <div class="about-content">
 78 |                     <h4>About Me</h4>
 79 |                     <ul>
 80 |                       <li>I am a Computer Science Graduate.I have built a solid foundation in software development, particularly in areas such as Java, SQL, Git, and GitHub.</li>
 81 |                       <li> My expertise in these areas allows me to approach projects with confidence and deliver high-quality results.I have a strong belief in the value of continuous learning and staying adaptable in the ever-evolving world of software engineering.</li>
 82 |                       <li> I actively seek out opportunities to expand my knowledge and skills, embracing new technologies and approaches.Feel free to explore my work and get in touch if you have any questions or opportunities to collaborate. </li>
 83 |                     </ul>
 84 |                 </div>
 85 |                                   
 86 |                 <div class="about-skills">
 87 |                     <ul>
 88 |                         <li>Name: Akhilesh Adhikari</li>
 89 |                         <li>Age: **</li>     
 90 |                         <li>From: N**** </li>
 91 |                         <li>Email:peeling.onion96@gmail.com</li>
 92 |                         <li>Availabiltiy: Fulltime</li>
 93 |                         <li>Experience &lt; 2yr</li>
 94 |                     </ul>
 95 |                 </div>
 96 |             </div>
 97 |         </div>
 98 |     </section>
 99 | 
100 | 
101 |         <!-------------- Education & Internship -------------->
102 |     <section class="education-content" id="education">
103 |         <div class="container">
104 |             <div class="row">
105 |                 <div class="education ">
106 |                     <h3 class="title">Education</h3>
107 |                     <div class="row">
108 |                         <div class="timeline-box">
109 |                             <div class="timeline">
110 | 
111 |                                 <!-- Timeline-item -->
112 |                                 <div class="timeline-item">
113 |                                     <div class="circle-dot"></div>
114 |                                     <h3 class="timeline-title">
115 |                                         BSC - 3.5 GPA
116 |                                     </h3>
117 |                                     <h4 class="timeline-title">Sunway Intl' Business School</h4>
118 |                                     <h4 class="timeline-title">
119 |                                         <!-- <i class="fa fa-calendar"></i> 2020-2024 -->
120 |                                     </h4>
121 |                                 </div> 
122 |                                 <!-- Timeline-item -->
123 |                                 <div class="timeline-item">
124 |                                     <div class="circle-dot"></div>
125 |                                     <h3 class="timeline-title">High School - 3.2 GPA</h3>
126 |                                     <h4 class="timeline-title">National School of Sciences (NIST)</h4>
127 |                                     <h4 class="timeline-title">
128 |                                         <!-- <i class="fa fa-calendar"></i> 2019-2020 -->
129 |                                     </h4>
130 |                                 </div>
131 |                                 <!-- Timeline-item -->
132 |                                 <div class="timeline-item">
133 |                                     <div class="circle-dot"></div>
134 |                                     <h3 class="timeline-title">
135 |                                         School - 3.5 GPA
136 |                                     </h3>
137 |                                     <h4 class="timeline-title"> Adwitiya Boarding High School</h4>
138 |                                     <h4 class="timeline-title">
139 |                                         <!-- <i class="fa fa-calendar"></i> 2017-2018 -->
140 |                                     </h4>
141 |                                 </div>
142 | 
143 |                             </div>
144 |                         </div>
145 |                     </div>
146 |                 </div>
147 |                 <div class="internship">
148 |                     <h3 class="title">Work Experience</h3>
149 |                     <div class="row">
150 |                         <div class="timeline-box">
151 |                             <div class="timeline">
152 |                                 
153 |                                 <!-- Timeline-item -->
154 |                                 <div class="timeline-item">
155 |                                     <div class="circle-dot"></div>
156 |                                     <h3 class="timeline-title">
157 |                                         Developer - Midas Technologies
158 |                                     </h3>
159 |                                     <!-- <h4 class="timeline-title">MIDAS TECHNOLOGIES</h4> -->
160 |                                     <h4 class="timeline-title">
161 |                                         <i class="fa fa-calendar"></i> APRIL 2023 - Currently
162 |                                     </h4>
163 |                                     <li class="timeline-text">Experienced in developing Hospital Management Systems, I specialize in PHP (Laravel, CodeIgniter) and Oracle (ORCL) for secure data handling. My frontend expertise includes HTML5, CSS5, JQuery, and JavaScript, ensuring the creation of a robust and user-friendly system.
164 |                                     </li>
165 |                                 </div> 
166 |                                 <!-- Timeline-item -->
167 |                                 <div class="timeline-item">
168 |                                     <div class="circle-dot"></div>
169 |                                     <h3 class="timeline-title">Python Intern - Brainycube Research</h3>
170 |                                     <!-- <h4 class="timeline-title">PIONEER CIRCUITS</h4> -->
171 |                                     <h4 class="timeline-title">
172 |                                         <i class="fa fa-calendar"></i> MAR 2021 to OCT 2021
173 |                                     </h4>
174 |                                     <li class="timeline-text">Skilled in Python development using Django, I bring proficiency in Arduino and IoT technologies to the table, showcasing expertise in creating innovative solutions and applications..</li>
175 |                                 </div>
176 |                                 <!-- Timeline-item -->
177 |                                 <div class="timeline-item">
178 |                                     <div class="circle-dot"></div>
179 |                                     <h3 class="timeline-title">SEO Executive - Wizonbiz Digital</h3>
180 |                                     <!-- <h4 class="timeline-title">PIONEER CIRCUITS</h4> -->
181 |                                     <h4 class="timeline-title">
182 |                                         <i class="fa fa-calendar"></i> DEC 2021 to FEB 2023
183 |                                     </h4>
184 |                                     <li class="timeline-text">Served as an SEO Analyst and Content Head, bringing a wealth of experience in optimizing digital content and overseeing content strategy.</li>
185 |                                 </div>
186 |                                 
187 |                             </div>
188 |                         </div>
189 |                     </div>
190 |                 </div>
191 |             </div>
192 |         </div>
193 |     </section>
194 | 
195 | 
196 |         <!-------------------------- Projects -------------------------->
197 |     <section class="project-content" id="projects">
198 |         <div class="container">
199 |             <div class="project-title">
200 |                 <h4>My Projects</h4>
201 |                 <p>Discover my projects, where creativity meets innovation</p>
202 |             </div>
203 |             <div class="projects">
204 |                 <!-- 1st Project -->
205 |                 <div class="project">
206 |                     <i class="fa fa-coffee"></i>
207 |                     <h4>Game Console</h4>
208 |                     <p>This is a simple implementation of the classic Console Games like Snake, Brick-Breaker and fun Math- games using JAVA.</p>
209 |                 </div>
210 |                  <!-- 2nd Project -->
211 |                  <div class="project">
212 |                     <!-- <i class="fa fa-car"></i> -->
213 |                     <i class="fa fa-question-circle"></i>
214 |                     <h4>Quiz Game</h4>
215 |                     <p>Quiz Application using PHP CodeIgniter, MySQL DB, JS, Jquery, Bootstrap, Ajax</p>
216 |                 </div>
217 |                 <!-- 3rd Project -->
218 |                 <div class="project">
219 |                     <i class="fa fa-desktop"></i>
220 |                     <h4>Realtime ChatRoom</h4>
221 |                     <p>Implemented a real-time ChatRoom application using Rust, utilizing the Rocket framework and Tokio Runtime for seamless and concurrent communication..</p>
222 |                 </div>
223 |                 
224 |             </div>
225 |         </div>
226 |     </section>
227 | 
228 |         <!-------------------------- Contact Me -------------------------->
229 | 
230 |     <section class="contact-content" id="contact">
231 |         <div class="container">
232 |             <div class="contact-title">
233 |                 <h4>Contact Me</h4>
234 |                 <p>Get In Touch</p>
235 |             </div>
236 |             <div class="contact" >
237 |                 <!-- <form name="submitToGoogleSheet" action="https://formsubmit.co/33eed4766c087209a197e890f83d83f4 " method="POST"   target="_blank"  >
238 |                     <input type="hidden" name="_next" value="https://akhileshadhikari.com.np/#contact">
239 |                     <input type="hidden" name="_captcha" value="false">
240 |                     <input type="text" name="NAME" placeholder="Name" required>
241 |                     <input type="email" name="EMAIL" placeholder="Email" required>
242 |                     <input type="text" name="SUBJECT" placeholder="Subject">
243 |                     <textarea name="MESSAGE" placeholder="Message"></textarea>
244 | 
245 |                     <input type="hidden" name="_autoresponse" value="your custom message">
246 | 
247 |                     <input type="submit" value="Send Message" class="submit">
248 |                 </form> -->
249 |                 <form name="submitToGoogleSheet" target="_blank">
250 |                     <input type="hidden" name="_next" value="https://akhileshadhikari.com.np/#contact">
251 |                     <input type="hidden" name="_captcha" value="false">
252 |                     <input type="text" name="NAME" placeholder="Name" required>
253 |                     <input type="email" name="EMAIL" placeholder="Email" required>
254 |                     <input type="text" name="SUBJECT" placeholder="Subject">
255 |                     <textarea name="MESSAGE" placeholder="Message"></textarea>
256 | 
257 |                     <input type="hidden" name="_autoresponse" value="your custom message">
258 | 
259 |                     <input type="submit" id="submitButton" value="Send Message" class="submit">
260 |                 </form>
261 |                 <span id="msg"></span>
262 |             </div>
263 |         </div>
264 |     </section>
265 |         
266 |     <!-------------------------- JS -------------------------->
267 |     <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
268 |     <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
269 |     <script src="https://unpkg.com/scrollreveal"></script>
270 |     <script src="script.js"></script>
271 |     
272 |     <!-------------------------- Footer section -------------------------->
273 |    <footer class="footer">
274 |     <small class="message">Thanks for visiting and happy coding!</small>
275 |     <small class="copyright">&copy; Copyright <span id="currentYear"></span>. All rights reserved.</small>
276 | 
277 | 
278 |    </footer>
279 | 
280 | </body>
281 | </html>


--------------------------------------------------------------------------------
/site_backup/estilo.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Righteous&family=Work+Sans:wght@100;300;400;600;800&display=swap');
  2 | *{
  3 |     box-sizing: border-box;
  4 |     font-family: 'Work Sans';
  5 |     margin: 0;
  6 |     padding: 0;
  7 | }
  8 | html{
  9 |     /* me permite deslizar cuando hago clic en los links del menu */
 10 |     scroll-behavior: smooth;
 11 | }
 12 | /* MENU */
 13 | .contenedor-header{
 14 |     background: #1e2326;
 15 |     position: fixed;
 16 |     width: 100%;
 17 |     top: 0;
 18 |     left: 0;
 19 |     z-index: 99;
 20 | }
 21 | .contenedor-header header{
 22 |     max-width: 1100px;
 23 |     margin: auto;
 24 |     display: flex;
 25 |     justify-content: space-between;
 26 |     align-items: center;
 27 |     padding: 15px 20px;
 28 | }
 29 | .contenedor-header header .logo a{
 30 |     font-family: 'Righteous';
 31 |     font-size: 36px;
 32 |     color: #1CB698;
 33 |     text-decoration: none;
 34 | }
 35 | .contenedor-header header ul{
 36 |     display: flex;
 37 |     list-style: none;
 38 | }
 39 | .contenedor-header header nav ul li a{
 40 |     text-align: none;
 41 |     color: #fff;
 42 |     margin: 0 15px;
 43 |     padding: 3px;
 44 |     transition: .5s;
 45 |     text-decoration: none;
 46 | }
 47 | .contenedor-header header nav ul li a:hover{
 48 |     color: #1CB698;
 49 | }
 50 | .nav-responsive{
 51 |     background-color: #1CB698;
 52 |     color:#fff;
 53 |     padding: 5px 10px;
 54 |     border-radius: 5px;
 55 |     cursor: pointer;
 56 |     display: none;
 57 | }
 58 | /* SECCION I N I C I O */
 59 | .inicio{
 60 |     background: linear-gradient(to top, rgba(30,35,38,.8), rgba(30,35,38,1)),
 61 |     url(img/fondo.jpg);
 62 |     background-size: cover;
 63 |     height: 100vh;
 64 |     color: #fff;
 65 |     display: flex;
 66 |     align-items: center;
 67 | }
 68 | .inicio .contenido-banner{
 69 |     padding: 20px;
 70 |     background-color: #1e2326;
 71 |     max-width: 350px;
 72 |     margin: auto;
 73 |     text-align: center;
 74 |     border-radius: 40px;
 75 | }
 76 | .inicio .contenido-banner img{
 77 |     margin-top: 40px;
 78 |     border: 10px solid #1CB698;
 79 |     display: block;
 80 |     width: 80%;
 81 |     margin: auto;
 82 |     border-radius: 100%;
 83 | }
 84 | .inicio .contenido-banner h1{
 85 |     margin-top: 40px;
 86 |     font-size: 42px;
 87 |     font-family: 'Righteous';
 88 | }
 89 | .inicio .contenido-banner h2{
 90 |     font-size: 15px;
 91 |     font-weight: normal;
 92 | }
 93 | .inicio .contenido-banner .redes a{
 94 |     color: #fff;
 95 |     display: inline-block;
 96 |     text-decoration: none;
 97 |     border: 1px solid #fff;
 98 |     border-radius: 100%;
 99 |     width: 42px;
100 |     height: 42px;
101 |     line-height: 42px;
102 |     margin: 40px 5px;
103 |     font-size: 20px;
104 |     transition: .3s;
105 | }
106 | .inicio .contenido-banner .redes a:hover{
107 |     background-color: #1CB698;
108 | }
109 | .sobremi{
110 |     background-color: #1e2326;
111 |     color: #fff;
112 |     padding: 50px 20px;
113 | }
114 | .sobremi .contenido-seccion{
115 |     max-width: 1100px;
116 |     margin: auto;
117 | }
118 | .sobremi h2{
119 |     font-size: 48px;
120 |     font-family: 'Righteous';
121 |     text-align: center;
122 |     padding: 20px 0;
123 | 
124 | }
125 | .sobremi .contenido-seccion p{
126 |     font: 18px;
127 |     line-height: 22px;
128 |     margin-bottom: 20px;
129 | }
130 | .sobremi .contenido-seccion p span{
131 |     color: #1CB698;
132 |     font-weight: bold;
133 | }
134 | .sobremi .fila{
135 |     display: flex;
136 | }
137 | .sobremi .fila .col
138 | {
139 |     width: 50%;
140 | }
141 | .sobremi .fila .col h3{
142 |     font-size: 28px;
143 |     font-family: 'Righteous';
144 |     margin-bottom: 25px;
145 | }
146 | .sobremi .fila .col ul{
147 |     list-style: none;
148 | }
149 | .sobremi .fila .col ul li{
150 |     margin: 12px 0;
151 | }
152 | .sobremi .fila .col ul li strong{
153 |     display: inline-block;
154 |     color: #1CB698;
155 |     width: 130px;
156 | }
157 | .sobremi .fila .col ul li span{
158 |     background-color: #1CB698;
159 |     padding: 3px;
160 |     font-weight: bold;
161 |     border-radius: 5px;
162 | }
163 | .sobremi .fila .col .contenedor-intereses{
164 |     display: flex;
165 |     flex-wrap: wrap;
166 | }
167 | .sobremi .fila .col .contenedor-intereses .interes{
168 |     width: 100px;
169 |     height: 100px;
170 |     background-color: #252A2E;
171 |     border-radius: 10px;
172 |     margin: 0 15px 15px 0;
173 |     display: flex;
174 |     flex-direction: column;
175 |     align-items: center;
176 |     justify-content: center;
177 |     transition: .3s;
178 | }.sobremi .fila .col .contenedor-intereses .interes:hover{
179 |     background-color: #1CB698;
180 | }
181 | .sobremi .fila .col .contenedor-intereses .interes i{
182 |     font-size: 30px;
183 |     margin-bottom: 10px;
184 | }
185 | .sobremi button{
186 |     cursor: pointer;
187 |     background-color: transparent;
188 |     border: 2px solid #fff;
189 |     width: fit-content;
190 |     display: block;
191 |     margin: 20px auto;
192 |     padding: 10px 22px;
193 |     font-size: 16px;
194 |     color: #fff;
195 |     position: relative;
196 |     z-index: 10;
197 | }
198 | .sobremi button .overlay{
199 |     position: absolute;
200 |     top: 0;
201 |     left: 0;
202 |     width: 0;
203 |     height: 100%;
204 |     background-color: #1CB698;
205 |     z-index: -1;
206 |     transition: 1s;
207 | }
208 | .sobremi button:hover .overlay{
209 |     width: 100%;
210 | }
211 | /* SECCION S K I L L S */
212 | .skills{
213 |     background-color: #252A2E;
214 |     color: #fff;
215 |     padding: 50px 20px;
216 | }
217 | .skills .contenido-seccion{
218 |     max-width: 1100px;
219 |     margin: auto;
220 | }
221 | .skills h2{
222 |     font-size: 48px;
223 |     font-family: 'Righteous';
224 |     text-align: center;
225 |     padding: 20px 0;
226 | 
227 | }
228 | .skills .fila{
229 |     display: flex;
230 | }
231 | .skills .fila .col{
232 |     width: 50%;
233 |     padding: 0 20px;
234 | }
235 | .skills .fila .col h3{
236 |     font-size: 28px;
237 |     font-family: 'Righteous';
238 |     margin-bottom: 25px;
239 | }
240 | .skills .skill > span{
241 |     font-weight: bold;
242 |     display: block;
243 |     margin-bottom: 10px;
244 | }
245 | .skills .skill .barra-skill{
246 |     height: 8px;
247 |     width: 80%;
248 |     background-color: #131517;
249 |     position: relative;
250 |     margin-bottom: 30px;
251 | }
252 | .skills .skill .progreso{
253 |     background-color: #1CB698;
254 |     position: absolute;
255 |     top: 0;
256 |     left: 0;
257 |     height: 8px;
258 | }
259 | .skills .skill .barra-skill span{
260 |     position: absolute;
261 |     height: 40px;
262 |     width: 40px;
263 |     background-color: #1CB698;
264 |     border-radius: 50px;
265 |     line-height: 40px;
266 |     text-align: center;
267 |     top: -17px;
268 |     right: -15px;
269 |     font-size: 14px;
270 | }
271 | /* Estas clases se agregaran dinamicamente mediante javascript */
272 | .skills .skill .javascript{
273 |     width: 0%;
274 |     animation: 2s javascript forwards;
275 | }
276 | @keyframes javascript {
277 |     0%{width: 0%;}
278 |     100%{width: 75%;}
279 | }
280 | 
281 | .skills .skill .htmlcss{
282 |     width: 0%;
283 |     animation: 2s htmlcss forwards;
284 | }
285 | @keyframes htmlcss {
286 |     0%{width: 0%;}
287 |     100%{width: 89%;}
288 | }
289 | 
290 | .skills .skill .photoshop{
291 |     width: 0%;
292 |     animation: 2s photoshop forwards;
293 | }
294 | @keyframes photoshop {
295 |     0%{width: 0%;}
296 |     100%{width: 95%;}
297 | }
298 | 
299 | .skills .skill .wordpress{
300 |     width: 0%;
301 |     animation: 2s wordpress forwards;
302 | }
303 | @keyframes wordpress {
304 |     0%{width: 0%;}
305 |     100%{width: 81%;}
306 | }
307 | 
308 | .skills .skill .drupal{
309 |     width: 0%;
310 |     animation: 2s drupal forwards;
311 | }
312 | @keyframes drupal {
313 |     0%{width: 0%;}
314 |     100%{width: 55%;}
315 | }
316 | 
317 | .skills .skill .comunicacion{
318 |     width: 0%;
319 |     animation: 2s comunicacion forwards;
320 | }
321 | @keyframes comunicacion {
322 |     0%{width: 0%;}
323 |     100%{width: 80%;}
324 | }
325 | 
326 | .skills .skill .trabajo{
327 |     width: 0%;
328 |     animation: 2s trabajo forwards;
329 | }
330 | @keyframes trabajo {
331 |     0%{width: 0%;}
332 |     100%{width: 70%;}
333 | }
334 | 
335 | .skills .skill .creatividad{
336 |     width: 0%;
337 |     animation: 2s creatividad forwards;
338 | }
339 | @keyframes creatividad {
340 |     0%{width: 0%;}
341 |     100%{width: 99%;}
342 | }
343 | 
344 | .skills .skill .dedicacion{
345 |     width: 0%;
346 |     animation: 2s dedicacion forwards;
347 | }
348 | @keyframes dedicacion {
349 |     0%{width: 0%;}
350 |     100%{width: 65%;}
351 | }
352 | 
353 | .skills .skill .proyect{
354 |     width: 0%;
355 |     animation: 2s proyect forwards;
356 | }
357 | @keyframes proyect {
358 |     0%{width: 0%;}
359 |     100%{width: 94%;}
360 | }
361 | /* SECCION CURRICULUM */
362 | .curriculum{
363 |     background-color: #1e2326;
364 |     color: #fff;
365 |     padding: 50px 20px;
366 | }
367 | .curriculum .contenido-seccion{
368 |     max-width: 1100px;
369 |     margin: auto;
370 | }
371 | .curriculum h2{
372 |     font-size: 48px;
373 |     font-family: 'Righteous';
374 |     text-align: center;
375 |     padding: 20px 0;
376 | 
377 | }
378 | .curriculum .fila{
379 |     display: flex;
380 |     justify-content: space-between;
381 | }
382 | .curriculum .fila .col{
383 |     width: 49%;
384 |     padding: 0 20px;
385 | }
386 | .curriculum .fila .col h3{
387 |     font-size: 28px;
388 |     font-family: 'Righteous';
389 |     margin-bottom: 25px;
390 | }
391 | .curriculum .fila .izquierda{
392 |     border-right: 2px solid #252A2E;
393 | }
394 | .curriculum .fila .derecha{
395 |     border-left: 2px solid #252A2E;
396 | }
397 | .curriculum .fila .item{
398 |     padding: 25px;
399 |     margin-bottom: 30px;
400 |     background-color: #252A2E;
401 |     position: relative;
402 | }
403 | .curriculum .fila .item h4{
404 |     font-size: 20px;
405 |     margin-bottom: 10px;
406 | }
407 | .curriculum .fila .item .casa{
408 |     color: #1CB698;
409 |     font-size: 22px;
410 |     font-weight: bold;
411 |     display: block;
412 | }
413 | .curriculum .fila .item .fecha{
414 |     display: block;
415 |     color: #1CB698;
416 |     margin-bottom: 10px;
417 | }
418 | .curriculum .fila .item p{
419 |     line-height: 24px;
420 | }
421 | .curriculum .fila .izq{
422 |     border-right: 2px solid #1CB698;
423 |     margin-right: 20px;
424 | }
425 | .curriculum .fila .der{
426 |     border-left: 2px solid #1CB698;
427 |     margin-left: 20px;
428 | }
429 | .curriculum .fila .item .conectori{
430 |     height: 2px;
431 |     background-color: #1CB698;
432 |     width: 47px;
433 |     position: absolute;
434 |     top: 50%;
435 |     right: -47px;
436 |     z-index: 5;
437 | }
438 | .curriculum .fila .item .conectori .circuloi{
439 |     display: block;
440 |     height: 10px;
441 |     width: 10px;
442 |     border-radius: 50%;
443 |     background-color: #1CB698;
444 |     float: right;
445 |     position: relative;
446 |     bottom: 4px;
447 | }
448 | .curriculum .fila .item .conectord{
449 |     height: 2px;
450 |     background-color: #1CB698;
451 |     width: 47px;
452 |     position: absolute;
453 |     top: 50%;
454 |     left: -47px;
455 |     z-index: 5;
456 | }
457 | .curriculum .fila .item .conectord .circulod{
458 |     display: block;
459 |     height: 10px;
460 |     width: 10px;
461 |     border-radius: 50%;
462 |     background-color: #1CB698;
463 |     float: left;
464 |     position: relative;
465 |     bottom: 4px;
466 | }
467 | /* SECCION PORTFOLIO */
468 | .portfolio{
469 |     background-color: #252A2E;
470 |     color: #fff;
471 |     padding: 50px 20px;
472 | }
473 | .portfolio .contenido-seccion{
474 |     max-width: 1100px;
475 |     margin: auto;
476 | }
477 | .portfolio h2{
478 |     font-size: 48px;
479 |     font-family: 'Righteous';
480 |     text-align: center;
481 |     padding: 20px 0;
482 | }
483 | .portfolio .galeria{
484 |     display: flex;
485 |     flex-wrap: wrap;
486 |     justify-content: space-around;
487 | }
488 | .portfolio .galeria .proyecto{
489 |     position: relative;
490 |     max-width: 340px;
491 |     height: fit-content;
492 |     margin: 10px;
493 |     cursor: pointer;
494 | }
495 | .portfolio .galeria .proyecto img{
496 |     width: 100%;
497 |     display: block;
498 | }
499 | .portfolio .galeria .proyecto .overlay{
500 |     position: absolute;
501 |     top: 0;
502 |     width: 100%;
503 |     height: 100%;
504 |     text-align: center;
505 |     background: linear-gradient(rgba(28,182,152,.8), rgba(28,182,152,.8));
506 |     display: flex;
507 |     flex-direction: column;
508 |     justify-content: center;
509 |     transition: 1s;
510 |     font-size: 18px;
511 |     letter-spacing: 3px;
512 |     opacity: 0;
513 | }
514 | .portfolio .galeria .proyecto .overlay h3{
515 |     margin-bottom: 20px;
516 |     transition: 1s;
517 | }
518 | .portfolio .galeria .proyecto .overlay:hover{
519 |     opacity: 1;
520 | }
521 | .portfolio .galeria .proyecto .overlay:hover h3{
522 |     margin-bottom: 0px;
523 | }
524 | /* SECCION CONTACTO */
525 | .contacto{
526 |     background-image: url(img/contact_bg.png);
527 |     background-color: #1e2326;
528 |     color: #fff;
529 |     padding: 50px 0;
530 | }
531 | .contacto .contenido-seccion{
532 |     max-width: 1100px;
533 |     margin: auto;
534 | }
535 | .contacto h2{
536 |     font-size: 48px;
537 |     font-family: 'Righteous';
538 |     text-align: center;
539 |     padding: 20px 0;
540 | }
541 | .contacto .fila{
542 |     display: flex;
543 | }
544 | .contacto .col{
545 |     width: 50%;
546 |     padding: 10px;
547 |     position: relative;
548 | }
549 | .contacto .col input, .contacto .col textarea{
550 |     display: block;
551 |     width: 100%;
552 |     padding: 18px;
553 |     border: none;
554 |     margin-bottom: 20px;
555 |     background-color: #252A2E;
556 |     color: #fff;
557 |     font-size: 18px;
558 | }
559 | .contacto button{
560 |     cursor: pointer;
561 |     background-color: transparent;
562 |     border: 2px solid #fff;
563 |     width: fit-content;
564 |     display: block;
565 |     margin: 20px auto;
566 |     padding: 10px 22px;
567 |     font-size: 16px;
568 |     color: #fff;
569 |     position: relative;
570 |     z-index: 10;
571 | }
572 | .contacto button .overlay{
573 |     position: absolute;
574 |     top: 0;
575 |     left: 0;
576 |     width: 0;
577 |     height: 100%;
578 |     background-color: #1CB698;
579 |     z-index: -1;
580 |     transition: 1s;
581 | }
582 | .contacto button:hover .overlay{
583 |     width: 100%;
584 | }
585 | .contacto .col img{
586 |     width: 100%;
587 | }
588 | .contacto .col .info{
589 |     position: absolute;
590 |     top: 40%;
591 |     background-color: #252A2E;
592 |     padding: 20px;
593 |     max-width: 350px;
594 |     left: 50%;
595 |     transform: translate(-50%, -50%);
596 | }
597 | .contacto .col .info ul{
598 |     list-style: none;
599 | }
600 | .contacto .col .info ul li{
601 |     margin-bottom: 20px;
602 | }
603 | .contacto .col .info ul li i{
604 |     color: #1CB698;
605 |     display: inline-block;
606 |     margin-right: 20px;
607 | }
608 | footer{
609 |     background-color: #252A2E;
610 |     color: #fff;
611 |     padding: 50px 0 30px 0;
612 |     text-align: center;
613 |     position: relative;
614 |     width: 100%;
615 | }
616 | footer .redes{
617 |     margin-bottom: 20px;
618 | }
619 | footer .redes a{
620 |     color: #fff;
621 |     display: inline-block;
622 |     text-decoration: none;
623 |     border: 1px solid #fff;
624 |     border-radius: 100%;
625 |     width: 42px;
626 |     height: 42px;
627 |     line-height: 42px;
628 |     margin: 40px 5px;
629 |     font-size: 20px;
630 |     transition: .3s;
631 | }
632 | footer .arriba{
633 |     display: block;
634 |     width: 50px;
635 |     height: 50px;
636 |     background-color: #1CB698;
637 |     color: #fff;
638 |     position: absolute;
639 |     left: 50%;
640 |     transform: translateX(-50%);
641 |     top: -25px;
642 |     border-radius: 50%;
643 |     line-height: 50px;
644 |     font-size: 18px;
645 | }
646 | body{
647 |     overflow: hidden;
648 | }
649 |  
650 | /* SECCION RESPONSIVE */
651 | @media screen and (max-width:980px){
652 |     nav{
653 |         display: none;
654 |     }
655 |     .nav-responsive{
656 |         display: block;
657 |     }
658 |     nav.responsive{
659 |         display: block;
660 |         position: absolute;
661 |         right: 0;
662 |         top: 75px;
663 |         background-color: #252A2E;
664 |         width: 180px;
665 |     }
666 |     nav.responsive ul{
667 |         display: block !important;
668 |     }
669 |     nav.responsive ul li{
670 |         border-bottom: 1px solid #fff;
671 |         padding: 10px 0;
672 |     }
673 | }
674 | @media screen and (max-width:700px){
675 |     .sobremi .fila{
676 |         display: block;
677 |     }
678 |     .sobremi .fila .col{
679 |        // width: fit-content;
680 |     }
681 | 
682 |     .skills .fila{
683 |         display: block;
684 |     }
685 |     .skills .fila .col{
686 |         width: 100%;
687 |     }
688 |     .skills .fila .col .barra-skill{
689 |         width: 100%;
690 |     }
691 | 
692 |     .curriculum .fila{
693 |         display: block;
694 |     }
695 |     .curriculum .fila .col{
696 |         width: 90%;
697 |     }
698 |     .curriculum .fila .derecha{
699 |         margin-left: 20px;
700 |     }
701 | 
702 |     .portfolio .galeria{
703 |         display: block;
704 |         width: 100%;
705 |     }
706 |     .portfolio .galeria .proyecto{
707 |         max-width: 100%;
708 |     }
709 |     .portfolio .galeria .proyecto img{
710 |         width: 100%;
711 |     }
712 |     .contacto .fila{
713 |         display: block;
714 |     }
715 |     .contacto .fila .col{
716 |         width: 100%;
717 |     }
718 | }
719 | 


--------------------------------------------------------------------------------
/site_backup/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  8 | 
  9 |     
 10 | 
 11 |     <title>Big Aah Site</title>
 12 |     <link rel="stylesheet" href="estilo.css">
 13 | </head>
 14 | <body>
 15 |     <!-- MENU ENCABEZADO -->
 16 |     <div class="contenedor-header">
 17 |         <header>
 18 |             <div class="logo">
 19 |                 <a href="https://www.youtube.com/watch?v=6Cr_8tvvQ0k">The cursh is upon us.</a>
 20 |             </div>
 21 |             <nav id="nav">
 22 |                 <ul>
 23 |                     <li><a href="#inicio" onclick="seleccionar()">START</a></li>
 24 |                     <li><a href="#sobremi" onclick="seleccionar()">ABOUT ME</a></li>
 25 |                     <li><a href="#skills" onclick="seleccionar()">SKILLS</a></li>
 26 |                     <li><a href="#curriculum" onclick="seleccionar()">CURRICULUM</a></li>
 27 |                     <li><a href="#portfolio" onclick="seleccionar()">PORTFOLIO</a></li>
 28 |                     <li><a href="#contacto" onclick="seleccionar()">CONTACTO</a></li>
 29 |                 </ul>
 30 |             </nav>
 31 |             <div class="nav-responsive" onclick="mostrarOcultarMenu()">
 32 |                 <i class="fa-solid fa-bars"></i>
 33 |             </div>
 34 |         </header>
 35 |     </div>
 36 | 
 37 |     <!-- SECCION INICIO -->
 38 |     <section id="inicio" class="inicio">
 39 |         <div class="contenido-banner">
 40 |             <div class="contenedor-img">
 41 |                 <img src="img/hero.png" alt="">
 42 |             </div>
 43 |             <h1>Wassup</h1>
 44 |             <h2>I stole this site.😈😈</h2>
 45 |             <div class="redes">
 46 |                 <a href="https://www.youtube.com/watch?v=XPz9kVJxNjU"><i class="fa-brands fa-facebook-f"></i></a>
 47 |                 <a href="https://twitter.com/akhileshadhika3"><i class="fa-brands fa-twitter"></i></a>
 48 |                 <a href="https://www.youtube.com/watch?v=XPz9kVJxNjU"><i class="fa-brands fa-skype"></i></a>
 49 |                 <a href="https://www.youtube.com/watch?v=XPz9kVJxNjU"><i class="fa-brands fa-linkedin-in"></i></a>
 50 |                 <a href="https://www.youtube.com/watch?v=XPz9kVJxNjU"><i class="fa-solid fa-rss"></i></a>
 51 |             </div>
 52 |         </div>
 53 |     </section>
 54 | 
 55 |     <!-- SECCION SOBRE MI -->
 56 |     <section id="sobremi" class="sobremi">
 57 |         <div class="contenido-seccion">
 58 |             <h2>About Something</h2>
 59 |             <p><span>Hola, fellow creature.</span> As I find myself perched in front of the sterile luminescence of my computer, my mind is tormented by the ineffable weight of ennui. The tick-tock of the clock serves only to mock my efforts, as I am bound to the Sisyphean task of typing and deleting.</p>
 60 |             <p>Why must we toil in this manner, day in and day out? Is this truly what we were put on this earth to do? Nay, for the human spirit yearns for something more. And yet, what is this 'more' we seek? </p>
 61 |             <p> Delusions have been shattered by the reality of existence. The constant striving, the ceaseless labor - it is all so futile. Perhaps, in the end, there is no true purpose to life. Perhaps we are but mere players in a grand and terrible spectacle, doomed to repeat the same mistakes over and over again. And yet, in this very absurdity lies the key to our freedom.</p>
 62 |             <p>So I shall continue to type and delete, to work and toil, but with a newfound sense of liberation. For in embracing the dread and the despair, we are free to find our own path, to create our own meaning. And in that, there is a glimmer of hope.</p>
 63 | 
 64 |             <div class="fila">
 65 |                 <!-- personal information -->
 66 |                 <div class="col">
 67 |                     <h3>Personal Information</h3>
 68 |                     <ul>
 69 |                         <li>
 70 |                             <strong>Birthday</strong>
 71 |                             Not telling
 72 |                         </li>
 73 |                         <li>
 74 |                             <strong>Telephone</strong>
 75 |                             +977 ..............
 76 |                         </li>
 77 |                         <li>
 78 |                             <strong>Email</strong>
 79 |                             peeling.onion96@gmail.com
 80 |                         </li>
 81 |                         <li>
 82 |                             <strong>Website</strong>
 83 |                             akhileshadhikari.com.np
 84 |                         </li>
 85 |                         <li>
 86 |                             <strong>Address</strong>
 87 |                             Not telling
 88 |                         </li>
 89 |                         <li>
 90 |                             <strong>Cargo</strong>
 91 |                             <span>VIOLA</span>
 92 |                         </li>
 93 |                     </ul>
 94 |                 </div>
 95 | 
 96 |                 <!-- intereses -->
 97 |                 <div class="col">
 98 |                     <h3>Intereses</h3>
 99 |                     <div class="contenedor-intereses">
100 |                         <div class="interes">
101 |                             <i class="fa-solid fa-gamepad"></i>
102 |                             <span>NO GAMES</span>
103 |                         </div>
104 |                         <div class="interes">
105 |                             <i class="fa-solid fa-headphones"></i>
106 |                             <span>NO MUSIC</span>
107 |                         </div>
108 |                         <div class="interes">
109 |                             <i class="fa-solid fa-plane"></i>
110 |                             <span>NO TRAVEL</span>
111 |                         </div>
112 |                         <div class="interes">
113 |                             <i class="fa-brands fa-apple"></i>
114 |                             <span>NO MAC OS</span>
115 |                         </div>
116 |                         <div class="interes">
117 |                             <i class="fa-solid fa-person-hiking"></i>
118 |                             <span>NO SPORTS</span>
119 |                         </div>
120 |                         <div class="interes">
121 |                             <i class="fa-solid fa-book"></i>
122 |                             <span>NO BOOKS</span>
123 |                         </div>
124 |                         <div class="interes">
125 |                             <i class="fa-solid fa-car"></i>
126 |                             <span>NOPE</span>
127 |                         </div>
128 |                         <div class="interes">
129 |                             <i class="fa-solid fa-camera"></i>
130 |                             <span>BRUH</span>
131 |                         </div>
132 |                         
133 |                     </div>
134 |                 </div>
135 |             </div>
136 |                 <a href="https://www.linkedin.com/in/akhilesh-adhikari-3320b5149?original_referer=https%3A%2F%2Fwww.google.com%2F" download>
137 |                     <button>
138 |                         Download CV <i class="fa-solid fa-download"></i>
139 |                         <span class="overlay"></span>
140 |                     </button>
141 |                 </a>
142 | 
143 |         </div>
144 |     </section>
145 | 
146 |     <!-- SECCION SKILLS -->
147 |     <section class="skills" id="skills">
148 |         <div class="contenido-seccion">
149 |             <h2>Skills</h2>
150 |             <div class="fila">
151 |                 <!-- Technical Skill -->
152 |                 <div class="col">
153 |                     <h3>Technical Skills</h3>
154 |                     <div class="skill">
155 |                         <span>Javascript</span>
156 |                         <div class="barra-skill">
157 |                             <div class="progreso">
158 |                                 <span>75%</span>
159 |                             </div>
160 |                         </div>
161 |                     </div>
162 |                     <div class="skill">
163 |                         <span>HTML & CSS</span>
164 |                         <div class="barra-skill">
165 |                             <div class="progreso">
166 |                                 <span>89%</span>
167 |                             </div>
168 |                         </div>
169 |                     </div>
170 |                     <div class="skill">
171 |                         <span>PHP</span>
172 |                         <div class="barra-skill">
173 |                             <div class="progreso">
174 |                                 <span>95%</span>
175 |                             </div>
176 |                         </div>
177 |                     </div>
178 |                     <div class="skill">
179 |                         <span>Python</span>
180 |                         <div class="barra-skill">
181 |                             <div class="progreso">
182 |                                 <span>81%</span>
183 |                             </div>
184 |                         </div>
185 |                     </div>
186 |                     <div class="skill">
187 |                         <span>Wordpress</span>
188 |                         <div class="barra-skill">
189 |                             <div class="progreso">
190 |                                 <span>55%</span>
191 |                             </div>
192 |                         </div>
193 |                     </div>
194 |                 </div>
195 |                 <!-- Professional Skills -->
196 |                 <div class="col">
197 |                     <h3>Professional Skills</h3>
198 |                     <div class="skill">
199 |                         <span>Comunicación</span>
200 |                         <div class="barra-skill">
201 |                             <div class="progreso">
202 |                                 <span>80%</span>
203 |                             </div>
204 |                         </div>
205 |                     </div>
206 |                     <div class="skill">
207 |                         <span>Teamwork</span>
208 |                         <div class="barra-skill">
209 |                             <div class="progreso">
210 |                                 <span>70%</span>
211 |                             </div>
212 |                         </div>
213 |                     </div>
214 |                     <div class="skill">
215 |                         <span>Creativity</span>
216 |                         <div class="barra-skill">
217 |                             <div class="progreso">
218 |                                 <span>99%</span>
219 |                             </div>
220 |                         </div>
221 |                     </div>
222 |                     <div class="skill">
223 |                         <span>Dedication</span>
224 |                         <div class="barra-skill">
225 |                             <div class="progreso">
226 |                                 <span>65%</span>
227 |                             </div>
228 |                         </div>
229 |                     </div>
230 |                     <div class="skill">
231 |                         <span>Proyect Management</span>
232 |                         <div class="barra-skill">
233 |                             <div class="progreso">
234 |                                 <span>94%</span>
235 |                             </div>
236 |                         </div>
237 |                     </div>
238 |                 </div>
239 |             </div>
240 |         </div>
241 |     </section>
242 | 
243 |     <!-- SECCION CURRICULUM -->
244 |     <section id="curriculum" class="curriculum">
245 |         <div class="contenido-seccion">
246 |             <h2>Curriculum</h2>
247 |             <div class="fila">
248 |                 <div class="col izquierda">
249 |                     <h3>Educación</h3>
250 |                     <div class="item izq">
251 |                         <h4>Arte y Multimedia</h4>
252 |                         <span class="casa">Universidad de Oxford</span>
253 |                         <span class="fecha">2005 - 2008</span>
254 |                         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam nemo esse natus impedit, nostrum temporibus veritatis eaque soluta aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
255 |                         <div class="conectori">
256 |                             <div class="circuloi"></div>
257 |                         </div>
258 |                     </div>
259 |                     <div class="item izq">
260 |                         <h4>Arte y Multimedia</h4>
261 |                         <span class="casa">Universidad de Oxford</span>
262 |                         <span class="fecha">2005 - 2008</span>
263 |                         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam nemo esse natus impedit, nostrum temporibus veritatis eaque soluta aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
264 |                         <div class="conectori">
265 |                             <div class="circuloi"></div>
266 |                         </div>
267 |                     </div>
268 |                     <div class="item izq">
269 |                         <h4>Arte y Multimedia</h4>
270 |                         <span class="casa">Universidad de Oxford</span>
271 |                         <span class="fecha">2005 - 2008</span>
272 |                         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam nemo esse natus impedit, nostrum temporibus veritatis eaque soluta aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
273 |                         <div class="conectori">
274 |                             <div class="circuloi"></div>
275 |                         </div>
276 |                     </div>
277 |                 </div>
278 | 
279 |                 <div class="col derecha">
280 |                     <h3>Experiencia de trabajo</h3>
281 |                     <div class="item der">
282 |                         <h4>Front Developer</h4>
283 |                         <span class="casa">Nombre de Compañía</span>
284 |                         <span class="fecha">2005 - 2008</span>
285 |                         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam nemo esse natus impedit, nostrum temporibus veritatis eaque soluta aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
286 |                         <div class="conectord">
287 |                             <div class="circulod"></div>
288 |                         </div>
289 |                     </div>
290 |                     <div class="item der">
291 |                         <h4>Front Developer</h4>
292 |                         <span class="casa">Nombre de Compañía</span>
293 |                         <span class="fecha">2005 - 2008</span>
294 |                         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam nemo esse natus impedit, nostrum temporibus veritatis eaque soluta aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
295 |                         <div class="conectord">
296 |                             <div class="circulod"></div>
297 |                         </div>
298 |                     </div>
299 |                     <div class="item der">
300 |                         <h4>Front Developer</h4>
301 |                         <span class="casa">Nombre de Compañía</span>
302 |                         <span class="fecha">2005 - 2008</span>
303 |                         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, cumque repellat, tempora recusandae aliquam nemo esse natus impedit, nostrum temporibus veritatis eaque soluta aperiam id repudiandae fugiat deserunt! Explicabo, veritatis?</p>
304 |                         <div class="conectord">
305 |                             <div class="circulod"></div>
306 |                         </div>
307 |                     </div>
308 |                 </div>
309 |             </div>
310 |         </div>
311 |     </section>
312 | 
313 |     <!-- SECCION PORTFOLIO -->
314 |     <section id="portfolio" class="portfolio">
315 |         <div class="contenido-seccion">
316 |             <h2>PORTFOLIO</h2>
317 |             <div class="galeria">
318 |                 <div class="proyecto">
319 |                     <img src="img/p1.jpg" alt="">
320 |                     <div class="overlay">
321 |                         <h3>Diseño Creativo</h3>
322 |                         <p>Fotografía</p>
323 |                     </div>
324 |                 </div>
325 |                 <div class="proyecto">
326 |                     <img src="img/p2.jpg" alt="">
327 |                     <div class="overlay">
328 |                         <h3>Diseño Creativo</h3>
329 |                         <p>Fotografía</p>
330 |                     </div>
331 |                 </div>
332 |                 <div class="proyecto">
333 |                     <img src="img/p3.jpg" alt="">
334 |                     <div class="overlay">
335 |                         <h3>Diseño Creativo</h3>
336 |                         <p>Fotografía</p>
337 |                     </div>
338 |                 </div>
339 |                 <div class="proyecto">
340 |                     <img src="img/p4.jpg" alt="">
341 |                     <div class="overlay">
342 |                         <h3>Diseño Creativo</h3>
343 |                         <p>Fotografía</p>
344 |                     </div>
345 |                 </div>
346 |                 <div class="proyecto">
347 |                     <img src="img/p5.jpg" alt="">
348 |                     <div class="overlay">
349 |                         <h3>Diseño Creativo</h3>
350 |                         <p>Fotografía</p>
351 |                     </div>
352 |                 </div>
353 |                 <div class="proyecto">
354 |                     <img src="img/p6.jpg" alt="">
355 |                     <div class="overlay">
356 |                         <h3>Diseño Creativo</h3>
357 |                         <p>Fotografía</p>
358 |                     </div>
359 |                 </div>
360 |             </div>
361 |         </div>
362 |     </section>
363 | 
364 |     <!-- SECCION CONTACTO -->
365 |     <section id="contacto" class="contacto">
366 |         <div class="contenido-seccion">
367 |             <h2>CONTACTO</h2>
368 |             <div class="fila">
369 |                 <!-- Formulario -->
370 |                 <div class="col">
371 |                     <input type="text" placeholder="your name">
372 |                     <input type="text" placeholder="Phone number">
373 |                     <input type="text" placeholder="Mail address">
374 |                     <input type="text" placeholder="More">
375 |                     <textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>
376 |                     <button>
377 |                         Send Message<i class="fa-solid fa-paper-plane"></i>
378 |                         <span class="overlay"></span>
379 |                     </button>
380 |                 </div>
381 |                 <!-- Mapa -->
382 |                 <div class="col">
383 |                     <img src="img/ubicacion.png" alt="">
384 |                     <div class="info">
385 |                         <ul>
386 |                             <li>
387 |                                 <i class="fa-solid fa-location-dot"></i>
388 |                                 From your wild imgination
389 |                             </li>
390 |                             <li>
391 |                                 <i class="fa-solid fa-mobile-screen"></i>
392 |                                 Dont Call Me: 2384 - 4343443 
393 |                             </li>
394 |                             <li>
395 |                                 <i class="fa-solid fa-envelope"></i>
396 |                                 Email: peeling.onion96@gmail.com
397 |                             </li>
398 |                         </ul>
399 |                     </div>
400 |                 </div>
401 |             </div>
402 |         </div>
403 |     </section>
404 | 
405 |     <!-- footer -->
406 |     <footer>
407 |         <a href="#inicio" class="arriba">
408 |             <i class="fa-solid fa-angles-up"></i>
409 |         </a>
410 |         <div class="redes">
411 |             <a href="https://www.youtube.com/watch?v=JDXfqN3VKhc"><i class="fa-brands fa-facebook-f"></i></a>
412 |             <a href="https://www.youtube.com/watch?v=p8Z4ktIIY6g"><i class="fa-brands fa-twitter"></i></a>
413 |             <a href="https://www.youtube.com/watch?v=wvAklpufB68"><i class="fa-brands fa-skype"></i></a>
414 |             <a href="https://www.youtube.com/watch?v=shdht3rENi8"><i class="fa-brands fa-linkedin-in"></i></a>
415 |             <a href="https://www.youtube.com/watch?v=w68uJmoPd8A"><i class="fa-solid fa-rss"></i></a>
416 |         </div>
417 |     </footer>
418 | 
419 |     <script src="script.js"></script>
420 | </body>
421 | </html>


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