<!DOCTYPE html>
<html lang="en">
<head>
  <title>Miguel's Asteroid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="Miguel's Landing Page">
  <meta name="keywords" content="global, template, html, sass, jquery">
  <link rel="stylesheet" href="css/main.css">
  <link rel="icon" type="image/x-icon" href="/img/Menu_Light.png">
  
</head>
<body>

<!-- notification for small viewports and landscape oriented smartphones -->
<div class="device-notification">
  <a class="device-notification--logo" href="https://library.miguelalmodo.com">
    <img src="img/Highwind1_opt.png" alt="gummi ship">
    <p>Miguel's Asteroid</p>
  </a>
  <p class="device-notification--message">Try viewing on a bigger screen or clicking
    on the gummi ship to blast off to my bookshelf.
  </p>
</div>

<!-- This is what shows up on my pocket.The gummi ship takes you to the about page -->


<div class="perspective effect-rotate-left">
  <div class="container"><div class="outer-nav--return"></div>
    <div id="viewport" class="l-viewport">
      <div class="l-wrapper">
        <header class="header">


        <!-- <button class="header--cta cta">Work with Me</button>-->
        <a class="header--logo" href="https://uberspace.de">
          
          <img src="img/badge_dark.png" width="50%" height="50%" alt="uberspace asteroid logo"></a>  
        
        <div class="header--nav-toggle">
            <span></span>
          </div>
          
        </header>


        <!-- The beginning of the side nav bar -->
        <nav class="l-side-nav">

          <!-- The left side nav buttons -->
          <ul class="side-nav">
            <li class="is-active"><span>Home</span></li>
            <li><span>Interests</span></li>
            <li><span>About</span></li>
            <li><span>Contact</span></li>
            
            <!--Here I am commenting out a menu item from the vertical
              left side nav, reducing from 4 to 5-->
            <!--<li><span>Work with Me</span></li>-->
          </ul>
        </nav>

        <!-- The side nav bar ends here -->

        <!-- The sections/nav items are an unordered list -->
        <ul class="l-main-content main-content">

          <!-- Each section is a list item -->

          <!-- This is the beginning of the first section -->
          <li class="l-section section section--is-active">
            <div class="intro">
              <div class="intro--banner">
                <h1>Welcome<br>to my<br>asteroid.</h1>
                
                
                <a href="https://library.miguelalmodo.com/">
                <button class="cta">Check out a book
                  <svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
                    <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
                  </g>
                  </svg>
                  <span class="btn-background"></span>
                </button></a>
                <br><br>
<!-- Blocking out the ribbon buttons
                <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
                <button class="cta">Bookmarks
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
                    <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
                  </g>
                  </svg>
                  <span class="btn-background"></span>
                </button>
              </a> -->
                

                <img src="img/spaceman.png" alt="Welcome">
              </div>
              <div class="intro--options">
                <a href="https://uberspace.de">
                  <h3>Explore my asteroid!</h3>
                  <p>This site is hosted on asteroids 
                    with Uberspace. I'm learning basic web development to 
                    be able to make a better impact with my digital presence.
                    If you are curious about how to set up your own,
                    just reach out and ask so we can talk about it.
                  </p>
                </a>
                <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
                  <h3>Creator Residency</h3>
                  <p>I'm in the Content Creator Residency with nos.social. 
                    Nostr is social media that you control. Find me on nostr
                    miggymofongo@miguelalmodo.com Ask me to learn 
                  more!</p>
                </a>
                <a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
                  <h3>Organizer</h3>
                  <p>Read about my recent trips to Cuba where I attended 
                    this year's May Day celebrations in Havana with 
                    organizers and union members from around
                    the world. #CubaSIBoqueoNO
                  </p>
                </a>
              </div>
            </div>

          </li> <!--End of the first section -->


          <!-- Beginning of the second section -->

          <li class="l-section section">
            <div class="work">
              <h2>Rebuilding the digital public commons.</h2>
              <div class="work--lockup">
                <ul class="slider">
                  <li class="slider--item slider--item-left">
                    <a href="https://gitfitcode.com/">
                      <div class="slider--item-image">
                      <img src="img/gfc-logo-12@2x_transp.png" style="size: 50%; padding-top: 5em" alt="gitfitcode logo"></a>
                      </div>
                      <p class="slider--item-title">Web Development</p>
                      <p class="slider--item-description">I'm building user-centric web experiences with the likes of 
                      <a href="https://hacklab.nilfm.cc/felt">NilX </a>and 
                      <a href="https://giI am in community withthub.com/gitfitbro">GitFitBro.</a> 
                       Find my code on <a href="https://github.com/miggymofongo">Github</a> or 
                       <a href="https://forge.lightcrystal.systems/migs"> Light Crystal Systems.</a></p>
                    </a>
                  </li>
                  <li class="slider--item slider--item-center">
                    <a href="https://podcasting2.org/">
                      <div class="slider--item-image">
                        <img src="img/pci_avatar.svg" alt="Podcasting Index logo">
                      </div>
                      <p class="slider--item-title">Podcast 2.0</p></a>
                      <p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast 
                        index and RSS. <a href="https://podcast.miguelalmodo.com">Click here to check out my podcast, How to Change the World. </a></p>
                    
                  </li>
    
                  <li class="slider--item slider--item-right">
                    <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
                      <div class="slider--item-image">
                        <img src="img/nostr-icon-white-256x256.png" alt="Nostr Logo">
                      </div>
                      <a href="https://nostr.com/#why-we-need-nostr">
                      <p class="slider--item-title">Social Media Revolution</p></a>
                      <p class="slider--item-description">

                      </a>

                      Find me on Nostr by searching miggymofongo@miguelalmodo.com on any nostr
                      client. Ask me about Nostr, an alternative social media protocol.</p>
                    </a>
                  </li>
                </ul>
                <div class="slider--prev">
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                  viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
                    <path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29
                    c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180
                    c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/>
                  </g>
                  </svg>
                </div>
                <div class="slider--next">
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
                    <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
                  </g>
                  </svg>
                </div>
              </div>
            </div>
          </li>
          <!-- End of the second section -->

          <!-- Beginning of the third section -->
          <li class="l-section section">
            <div class="about">
              <div class="about--banner">
                <h2>¡Cuba si, bloqueo no!</h2>
                

                <a href="https://migs.uber.space/resumes/plenitudresume.pdf">Resume
                  <span>
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
                    <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
                      <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
                    </g>
                    </svg>
                  </span>
                </a><br>
                <a href="https://ifcaseattle.org/boardofdirectors.html">Board of Directors
                  <span>
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
                    <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
                      <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
                    </g>
                    </svg>
                  </span>
                </a>
                

               
                
              <video src="https://v.nostr.build/5G0eZ.mp4" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="50%" height="50%" controls>
              </div>
              <div class="about--options">
                <a href="https://miguelalmodo.com/about.html">
                  <h3>Who is Miguel?</h3>
                </a>
                <a href="https://pinstr.app/p/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs/My%20Dog">
                  <h3>My dog, Kaido!</h3>
                </a>
                <a href="https://miguelalmodo.com/portfolio">
                  <h3>Portfolio</h3>
                </a>
              </div>
            </div>
          </li>
          <!--End of the third section-->


          <!-- Beginning of the fourth section -->

          <li class="l-section section">
            
            
            <div class="hire">
              <div id="result"></div>
              
              <form class="work-request" action="https://api.web3forms.com/submit" method="POST" id="form">
                <input type="hidden" name="access_key" value="da5f4169-2fa6-4632-86ce-a5dca3cd85eb">
                <input type="hidden" name="from_name" value="Asteroid">
                <div class="work-request--options">
                  
                  <!-- First row of subject line options -->
                  <span class="options-a">
                    <input id="opt-1" name="subject" type="checkbox" value="Organize">
                    <label for="opt-1">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Organize
                    </label>

                    <input id="opt-2" name="subject" type="checkbox" value="Just sayin hi!">
                    <label for="opt-2">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Just sayin hi!
                      </label>
                    
                    
                      <input id="opt-3" name="subject" type="checkbox" value="Consultation">
                    <label for="opt-3">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Consultation
                    </label>
                  </span>
                        <!-- end first row of subject line options -->
                        <!-- second row of subject line options 
                  <span class="options-b">
                    
                    
                    <input id="opt-4" name="subject" type="checkbox" value="Cooking">
                    <label for="opt-4">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Cooking
                    </label>                
                    <input id="opt-5" name="subject" type="checkbox" value="Communication Strategy">
                    <label for="opt-5">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Communication Strategy
                    </label>
                   End second row of subject line options 
                   Begin third row of subject line options                   
                    <input id="opt-6" name="subject" type="checkbox" value="Just sayin hi">
                    <label for="opt-6">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Just saying hi
                    </label>
                  </span>
                   End third row of subject line options-->


                </div>

                  <h2>Drop me a line! Selecting topics above will add it
                  to the subject line. I'll respond within a few days!</h2>
                
                  
                  <div class="work-request--information">
                  
                    <div class="information-name">
                      <input id="name" name="name" type="text" autocomplete="your name" required>
                      <label for="name">Name</label>
                    </div>
  
                    <div class="information-email">
                      <input id="email" type="email" name="email" autocomplete="your email" required>
                      <label for="email">Email</label>
  
                    </div>                 
                  <div class="information-message">

                    <input id="message" name="message" type="text" autocomplete="short message"></input>
                    <label for="message">Message</label>
                  
                  </div>
                
                </div>

                  <!--
                  <div class="work-request--information">

                    <div class="information-message">
                    <label for="name">Message</label>
                    <textarea id="message" type="text" name="message" required></textarea>
                    </div>

                  </div>
                -->
                <div class="h-captcha" data-captcha="true" required></div>

                <input type="submit" value="Submit Form">
                
                <!--
                <input type="hidden" name="redirect" value="https://web3forms.com/success">
                -->
              </form>
         
            </div>
          
              <!--  
              <div class="contact">
              <div class="contact--lockup">
                
                <div class="modal">
                  <div class="modal--information">
                    <p>Aguadilla, Puerto Rico</p>
                    <a href="mailto:contact@miguelalmodo.com">contact@miguelalmodo.com</a>
                   </div>
                  <ul class="modal--options">
                    <li><a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">Nostr</a></li>
                    <li><a href="https://linkedin/in/miguelalmodo">LinkedIn</a></li>
                    <li><a href="mailto:contact@miguelalmodo.com">Send me an email</a></li>
                  </ul>
                </div>
              </div>
            </div>
          -->

          
         <!-- <li class="l-section section">
            <div class="hire">
              <h2>Available for hire</h2>
               checkout formspree.io for easy form setup
              <form class="work-request">

                <div class="work-request--options">
                  <span class="options-a">
                    <input id="opt-1" type="checkbox" value="app design">
                    <label for="opt-1">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Content Creation
                    </label>
                    <input id="opt-2" type="checkbox" value="graphic design">
                    <label for="opt-2">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Web Development
                    </label>
                    <input id="opt-3" type="checkbox" value="motion design">
                    <label for="opt-3">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Tech Consultation
                    </label>
                  </span>
                  <span class="options-b">
                    <input id="opt-4" type="checkbox" value="ux design">
                    <label for="opt-4">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Cooking
                    </label>
                    <input id="opt-5" type="checkbox" value="webdesign">
                    <label for="opt-5">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Communication Strategy
                    </label>
                    <input id="opt-6" type="checkbox" value="marketing">
                    <label for="opt-6">
                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
                      </g>
                      </svg>
                      Marketing
                    </label>
                  </span>
                </div>


                <div class="work-request--information">

                  <div class="information-name">
                    <input id="name" type="text" spellcheck="false">
                    <label for="name">Name</label>
                  </div>
                  <div class="information-email">
                    <input id="email" type="email" spellcheck="false">
                    <label for="email">Email</label>
                  </div>
                </div>
                <input type="submit" value="Send Request">
              </form>
            
            </div>
          -->


           

         <!-- End of the four sections of the nav -->

            </li>
        </ul>

                <!--End of main content -->
      </div>
    </div>
  </div>

  <!-- Here is the outer navbar -->

  <ul class="outer-nav">

    <!--Uberspace Asteroid Logo
    <a href="https://uberspace.de/en"><img src="https://dashboard.uberspace.de/static/img/badge_dark.png"></a>
-->
    <!--Menu items for the outer navbar -->

    
      <li class="is-active">Home</li>
      <li>Interests</li>
      <li>About</li>
      <li>Contact</li>
      
    </ul>
    
    
    <!-- <li>Work with Me</li> -->
  </ul>

  <!-- Outer nav bar ends -->

</div>
<script>
const form = document.getElementById('form');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(form);
  const object = Object.fromEntries(formData);
  const json = JSON.stringify(object);
  /*taking out the result text that initially appeared in the 
  empty div block.
  /*result.innerHTML = "Please wait..." */

    fetch('https://api.web3forms.com/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: json
        })
        .then(async (response) => {
            const json = await response.json();
            if (response.status == 200) {
              let custMess = json.message; 
              if (custMess === "Email sent successfully!") {
                custMess = "Keep an eye out for a response soon. I'll be in touch!"
              }
              alert(custMess);
            } else {
                console.log(response);
                alert(json.message);
            }
        })
        .catch(error => {
            console.log(error);
            alert("Something went wrong!");
        })
        .finally(() => {
            form.reset();
            
          });
});
</script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
<script src="js/functions-min.js"></script>
<script>window.onload = function() {
  // Reset the form fields when the page loads
  document.getElementById("form").reset();
}; </script>
<script src="https://web3forms.com/client/script.js" async defer></script>

</body>
</html>