

 <!-- ATTN: Always work from small to big! If you code big things first it will be harder to do media queries-->

 <!-- Use min with and make your mobile first. min width gives breakpoints for bigger size (everything bigger than your min width is affected)-->

 <!-- Use Containers so mobile doesn't touch the edge! -->
  
 <!-- If you need a div to be 100% and bigger than the containers 95%, use width 100% vpw and make a negative margin left = to half of the margin of the container (i.e = 95% width means margin is 2.5% to the left, so -2.5%)-->

 <!-- Use a typography section in your css to select h1, p, unstyled-list, and other tags/classes. This will help you keep consistency throughout the page and reduce repitition, for anything related to the style of text, use typography section in CSS -->

 <!-- It's okay to use multiple classes, don't be scared to do it. For example, if you have a "title" class with fontsize margin fontweight so on, and you have a section where you want to remove the margin, instead of making it a totally different name, keep the "title" class and ontop of that add a "title-service" class which removes the margin. Add this in your typography section -->

 <!-- To select classes that start with the same name, use [class^=(what you want to select)]. As an example, lets say you have classes like col-1, col-2, col-3. If you want to select all your col classes, use [class^=col-] this will select all classes that start with "col-" To select the first or last of classes that start with the same name, use :first-child or :last-child-->

 <!-- Figure tag helps your image stay related with your text (figcaption tag)  -->

 <!-- Give your image display:block to remove the white space at bottom (spaced used to account for text accents, ex the stick on the letter "p")-->

 <!-- REM is root size, EM is size relative to container. (So id your class's font size is 2rem, .5em means half the size of the class size (1rem). For example if you want a title with 2 different sizes you can do h1 with a span class INSIDE of the h1. Display block the span to put it on its own block ) -->

 <!-- DON'T use buttons, instead give an A tag the class of button, give it a boarder and add padding to increase the area of the button (where the user can press to use it). Use "Display: inline-block" -->

<!-- Put media queries at the end of each section. Example: Home-about media querie at the end of Home about css-->

<!-- Give your hero 100 vph at desktop sizes and give the section. Give it a padding top to center the text, for example "padding top 35vph"-->

<!-- Use outline and outline-offset for boarders you can shrink and grow (- offset for shrink, positive offset for grow)-->

<!-- To put text over a box outline use position absolute on the h1, then put the top until the line intersects the letters in the middle (use em for this) then left 50% and transform: trasnlateX(-50%)-->

<!-- Box-shadow: 0 0 3rem(blur) 0(spread) rgba (0 , 0 , 0, .25(transparency) )(color) -->

<!-- Use :last-of-type to select the last element in a list of elements. For example if you have 3 P tags in a row, you can select the last one and remove the bottom border-->

<!-- How to have a grid that changes sizes at different break points: To make a grid responsive, change the item size to "50%" and use a "float" attribute to have the next image snap next to it. If you want to have 3 items in a row make the width "33.333334%" and do the same-->
 
<!-- After you float, you must clearfix so that your text doesn't wrap around the image. use the .clearfix class if you are having issues-->

<!-- transform: translate lets you move items along an axis. x axis and y axis. Use a percentage there. If you want to hide an element until hover, move it off using the y acis (so transform: translateY(150%), then give the item overflow hidden property. On hover, use the same property but this time make it 0%, so the item comes back on screen upon hover. The transition asset allows you to give it a smooth transition-->

<!-- For bigger screens footer: Use "col-" as a tag for all your columns. Float everything to align it well. Columns should have a higher number the bigger you want them to be. so for example if you want 4 columns, 3 which are a list and 1 which is a bigger text area or input area, you can divide the sections into their appropriate sizes. Example: the 3 list all have the col-1 tag, and are divided into 3 sections each being 16.666% wide. The bigger section has a col-3 tag that can be 50% wide. This will give you 100% width and make each column take up the right amount of space. Use a column section for this as it may become useful later in the page. -->

<!-- Look up parallax effect.-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="/styles/style.css">
    <link rel="icon" type="image/x-icon" href="/assets/Koi-favicon.png">
    <title></title>
</head>

<body>
    
    <div class="mobile container">
    
        <div class="headerMobile">
      
          <img src="/assets/Koi-logo.png" alt="Logo">
  
          <img src="/assets/Koi-text.png" alt="Text">
      
          <div id="mySidepanel" class="sidepanel">
              <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
              <a href="/">Home</a>
              <a href="/">About</a>
              <a href="/">Services</a>
              <a href="/">Reviews</a>
              <a href="/Contact">Contact</a>
          </div>    
          
          <div id="mySidepanel" class="bar-holder openbtn" onclick="openNav()">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
          </div>
      
        </div>
      
       </div>
  
      <div class="desktop">
          <header id="headerDesktop">
              <span class="logoHolderDesktop">
                  <img src="/assets/Koi-logo.png" alt="Logo" class="logo">
                  <img src="/assets/Koi-text.png" alt="Koi" class="logo">
              </span>
              <nav id="nav">
                  <ul class="unstyled-list">

                      <li>
                        <a href="/">Home</a>
                        <div class="underline">
                          <div class="line"></div><img src="/assets/Koi-logo.png" alt="logo">
                        </div>
                      </li>

                      <li>
                        <a href="/">About</a>
                        <div class="underline">
                          <div class="line"></div><img src="/assets/Koi-logo.png" alt="logo">
                        </div>
                      </li>

                      <li>
                        <a href="/">Services</a>
                        <div class="underline">
                          <div class="line"></div><img src="/assets/Koi-logo.png" alt="logo">
                        </div>
                      </li>

                      <li>
                        <a href="/">Reviews</a>
                        <div class="underline">
                          <div class="line"></div><img src="/assets/Koi-logo.png" alt="logo">
                        </div>
                      </li>

                      <li>
                        <a href="/Contact">Contact</a>
                        <div class="underline">
                          <div class="line"></div><img src="/assets/Koi-logo.png" alt="logo">
                        </div>
                      </li>
                  </ul>
              </nav>
          </header>
      </div>

</body> 
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</html>
 <div class="hero-buffer mobile"></div>

 <section class="home-hero">
    <div class="title">
      <span class="tertiary" data-aos="flip-up" data-aos-duration="1500">Kinetic</span>
      <span class="secondary" data-aos="flip-up" data-aos-duration="1500">Original</span>
      <span class="primary" data-aos="flip-up" data-aos-duration="1500">Innovative</span>
      <span class="white" data-aos="flip-up" data-aos-duration="1500">Websites</span>
    </div>
 </section>

 <section class="home-intro container">    
    <span class="mini-title primary">Intro</span>
    <span class="sub-title">Why let Koi work for you<span class="primary">?</span></span>
  <div class="home-intro-body">
    <div>
      <p> <b class="primary">98%</b> of consumers hop online to find information about local businesses. We work by your side to make sure your business is present every time that search happens.</p><p> Koi handles your online presence so that you can focus on the quality service!</p> 
    </div>
    <div>
      <video autoplay muted loop>
        <source src="/assets/Payment.mp4" type="video/mp4">
      </video>
    </div>
  </div>
 </section>
 
 <!-- Make 2 sections: one Web Design, One Marketing/ platforming-->

 <section class="home-services container">
      <img src="/assets/Phonecall.jpg" alt="Small business owner">
    <div class="home-services-body">
      <span class="mini-title tertiary">Our Services</span>
      <span class="sub-title">Making your business stand out online<span class="tertiary">.</span></span>
      <p>Running a business is no small feat, and your plate is almost always full. That's where Koi comes in. Our services are designed to help you build, enhance, and maintain a strong online presence, so you can focus on what you do best while we handle the digital details.</p>
      <div class="home-services-limb">
        <img src="/assets/Website.png" alt="Website">
        <div>
          <span class="mini-title tertiary">Web Development</span>
          <p>Business email, Custom website, Lead conversion, Traffic data, Unique branding, Web hosting</p>
        </div>
      </div>
      <div class="home-services-limb">
        <img src="/assets/Megaphone.png" alt="Website">
        <div>
          <span class="mini-title tertiary">Marketing</span>
          <p>Content Creation, Lead generation, Lead tracking, Platforming, SEO Optimization, Targeted Ads</p>
        </div>
      </div>
    </div>
 </section>

 <a href="/Contact" class="floating-button animated-border tertiary">Get started</a>

 <section class="home-about">
  <span class="mini-title secondary">Our Story</span>
  <span class="sub-title">What makes Koi<span class="secondary" style="margin: 0;">?</span></span>
  <div class="home-about-body">
    <div class="home-about-limbs">
      <p>Koi Web Development was founded on a simple idea: to help small business owners navigate the online space. There is a clear disconnect between current small business owners, and the young adults who have grown up with internet access. Every year for last 25 years technology has evolved rapidly, and each new generation of consumer is more integrated online than before.</p>
      <img class="mobile" src="/assets/Koi-semi-1.png" alt="Koi semi">     
      <img class="desktop" src="/assets/Koi-paint-1.png" alt="Koi semi">
    </div>
    <div class="home-about-limbs">
      <img class="mobile" src="/assets/Koi-semi-2.png" alt="Koi semi">
      <img class="desktop" src="/assets/Koi-paint-2.png" alt="Koi semi">
      <p>Online advertising can feel overwhelming, with countless platforms and strategies competing for your money. Not every platform is right for your business, so at Koi we simplify the process. We help you find the platforms that deliver real results and place you in front of the right clients.</p>
    </div>
    <div class="home-about-limbs"> 
      <p>In our world, growth is a shared success. Our partnership is really that, a partnership! Our success comes from your success, as you grow, we grow right along side you. This why we are passionate about working with driven business owners who are ready to expand their brand and elevate their business.</p>
      <img class="mobile" src="/assets/Koi-semi-3.png" alt="Koi semi">
      <img class="desktop" src="/assets/Koi-paint-3.png" alt="Koi semi">
  </div>
 </section>

 <a href="/Contact" class="floating-button animated-border secondary">Get started</a>

 <section class="home-contact">

  <span class="mini-title primary">Contact us</span>
  <span class="sub-title">Get in touch!</span>

  <div class="contact-form-holder">
  <div class="contact-info">
      <h2>Contact Information</h2> 
      <div class="contact-info-box">
          <img src="/assets/Phone.png" alt="Phone Icon">
          <a href="tel:+1240-618-7080" class="bold"> 240-618-7080 </a>
      </div>
      <div class="contact-info-box">
          <img src="/assets/Email.png" alt="Phone Icon">
          <a href="mailto:KoiWebDevelopment@gmail.com" class="bold contact-email">KoiWebDevelopment@gmail.com</a>
      </div>  
      <div class="contact-info-box">
          <img src="/assets/Clock.png" alt="Clock"> <span><span class="bold">9:00am</span> to <span class="bold"> 5:00pm</span></span>
      </div>  
      <div class="contact-info-box">
          <img src="/assets/Location.png" alt="Location">
          <span>Silver Spring, MD</span>
      </div>
  </div>



  <form action="https://api.web3forms.com/submit" method="POST" class="contact-form">
      <input type="hidden" name="access_key" value="16e60020-8e82-4dc7-b0c4-0c38d88f01c6">
      <div class="contact-title">
          <div>
              <h2>Reach out to us!</h2>
              <hr>
          </div>
          <img src="/assets/Koi-logo.png" alt="Logo"> 
      </div>
      <input type="text" name="name" placeholder="Your Name" class="contact-inputs" required>
      <input type="email" name="email" placeholder="Your Email" class="contact-inputs" required>
      <input type="tel" name="phone" placeholder="Your Number" class="contact-inputs" required>
      <textarea name="message" placeholder="Your Message" class="contact-inputs contact-message"></textarea>
      <input type="hidden" name="redirect" value="https://web3forms.com/success">
      <button class="submit" type="submit">Submit <img class="submit-img" src="/assets/Cat-paw.png"> </button>
  </form>
  </div>

 </section>
<footer>
    <div class="mobile footerMobile">

        <figure>
            <a href="https://www.Yelp.com/">
            <img src="/assets/Yelp.png" alt="Yelp Logo"> 
            </a>       
            <figcaption>Yelp</figcaption>
        </figure>  
        
        <figure>
            <a href="https://www.Instagram.com/">
            <img src="/assets/Instagram.png" alt="Instagram Logo">
            <figcaption>Instagram</figcaption>
            </a>
        </figure>

        <figure>
            <a href="https://www.google.com/">
                <img src="/assets/Google.png" alt="Google Logo">
            </a>
            <figcaption>Google</figcaption>
        </figure>

        <figure>
            <a href="https://www.Facebook.com/">
            <img src="/assets/Facebook.png" alt="Facebook Logo">
            </a>
            <figcaption>Facebook</figcaption>
        </figure>

   

       



        <figure>
            <a href="/Contact">
            <img src="/assets/Chat.png" alt="Koi Logo">
            </a>
            <figcaption>Contact</figcaption>
        </figure>
    </div>

    <div class="desktop footerDesktop">
        
    </div>
</footer>




<div class="Koi-tag"> Designed and built by <a href="https://www.Koiwebdevelopment.com/"><img class="Koi-logo" src="./assets/Koi-logo.png" alt="Cute Cat logo"><img class="Koi-logo" src="/assets/Koi-text.png" alt=""></a></div>