

 <!-- 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="stylesheet" href="/styles/style.css">
    <link rel="icon" type="image/x-icon" href="/assets/Plumb-Favicon.png">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <title>Plumbtastic Plumbing</title>
    <meta name="description" content="A compelling summary of your webpage's content, including a call-to-action.">
</head>
<body>

    <div class="mobile container">
    
        <div class="headerMobile">
      
          <div class="headerMobile-logo-holder">
            <img src="/assets/Plumb-Squad-NOBG.png" class="hM-Logo-1" alt="Logo 2">
            <img src="/assets/Plumbtastic-Logo.png" class="hM-Logo-2" alt="Logo">
          </div>
      
          <div id="mySidepanel" class="sidepanel">
              <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
              <a href="/" class="nav-link">Home</a>
              <a href="/About" class="nav-link">About</a>
              <a href="/Services" class="nav-link">Services</a>
              <a href="/Reviews" class="nav-link">Reviews</a>
              <a href="/Contact" class="nav-link">Contact</a>
              <div>
                <a href="https://www.facebook.com/"><img src="/assets/Facebook.png" alt="Facebook"></a>
                <a href="https://www.yelp.com/biz/plumbtastic-plumbing-rockville-2"><img src="/assets/Yelp.png" alt="Yelp"></a>
                <a href="https://g.page/r/CeJOyLbBu-nREBM/"><img src="/assets/Google.png" alt="Google"></a>
                <a href="https://www.instagram.com/"><img src="/assets/Instagram.png" alt="Instagram"></a> 
              </div>
              <img src="/assets/Plumb-P-Black.png" alt="Logo">
          </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-desktop">
      <div class="header-top">
        <div data-aos="fade-up-right" data-aos-duration="500">
          <img src="/assets/Phone.png" alt="Phone">
          <span>Call : 301-233-1432</span>
        </div>
        <div data-aos="fade-up" data-aos-duration="500">
          <img src="/assets/Email.png" alt="Email">
          <span>Email : Info@PlumbtasticDMV.com</span>
        </div>
        <div data-aos="fade-up-left" data-aos-duration="500">
          <img src="/assets/247-Icon.png" alt="24/7 Service">
          <span>24/7 Emergency Service</span>
        </div>
      </div>
      <div class="header-bot">
        <div data-aos="fade-right" data-aos-duration="1000">
          <img src="/assets/Plumbtastic-Logo.png" alt="Plumbtastic Logo">
        </div>
        <nav class="header-nav" data-aos="fade-left" data-aos-duration="1000">
          <ul class="unstyled-list">
            <li><a href="/" class="nav-link">Home</a></li>
            <li><a href="/About" class="nav-link">About</a></li>
            <li><a href="/Services" class="nav-link">Services</a></li>
            <li><a href="/Reviews" class="nav-link">Reviews</a></li>
            <li class="header-nav-contact"><a href="/Contact" class="nav-link">Contact</a></li>
            <!-- Add hover effect on contact. When client hovers have rays shoot out-->
          </ul>
        </nav>
      </div>
    </div>
    
</body>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</html>

    <section class="Home-hero">

        <div class="H-h-text-holder" data-aos="fade-up" >
           
            <h4 class="primary-color" >Plumbtastic Plumbing</h4> 
            <div>
                <h1>There when you need us.</h1>            
                <h3>Quality Service, right in your neighborhood!</h3>
            </div>
            <h4>
                We offer <span class="tertiary-color">EMERGENCY Service!</span> Just call or click below. 
            <br>
                For regular service, make sure you ask about free estimates over the phone!
            </h4>
        </div>
        <div class="H-h-button-holder">
            <a class="button-secondary" href="/Contact" data-aos="fade-right" data-aos-duration="1000">Contact Us</a>
            <a class="button-primary" href="/Services" data-aos="fade-left"         data-aos-duration="1000">
             Services 
             <img src="/assets/Plumb-P-White.png" alt="Plumb-Logo-White">
            </a>
        </div>
       

    </section>    
    
    <section class="Home-services">
        <div class="H-s-container">
            <div class="H-s-top-title">
                <h4 class="secondary-color">Plumbtastic Plumbing is proudly</h4>
                <h2>Certified & Licensed in all of DC, Maryland, and Virginia!</h2>
            </div>
            <div class="H-s-flag-holder">                
                <p>
                    <b>License #:</b>
                    <br>
                    <br>
                    <b>DC:</b> PGM40000294
                    <br>
                    <b>MD:</b> 120138
                    <br>
                    <b>VA:</b> 2710084474
                    <br>
                    <b>WSSC:</b> 86241
                    <br>
                    <b>City of Rockville:</b> PLL14100510001637
                </p>      
                <img src="/assets/Plumb-Character-2-flag.png" alt="">
          
                <img src="/assets/Plumb-Character-4-flag.png" alt="">
                <img src="/assets/Plumb-Character-1-flag.png" alt="">
            </div>
            <h3>Choose your service:</h3>
            <div class="H-s-card-gallery">
                <div class="H-s-card-holder">
                    <div class="H-s-card">
                    <div class="H-s-c-title">
                        <h4>Repair & Installation</h4>
                        <img src="/assets/Plunger.png" alt="">
                    </div>
                    <img class="H-s-c-image" src="/assets/Plumb-Scene-1.png" alt="">
                    <div class="H-s-c-sub-title">
                        <h5>Schedule - Same day service!</h5>
                        <img src="/assets/Clock-1.png" alt="">
                    </div>
                    <div class="H-s-c-text">
                        <p> <span>Repair it all!</span> <br> <br> Get quality service from our licensed experts today! Give us a call and lets find a time that works for you! </p>
                        <img src="/assets/Licensed.png" alt="">
                    </div>
                    </div>
                    <a href="/Services" class="button-floating button-primary">Read more</a>
                </div>
                <div class="H-s-card-holder">
                    <div class="H-s-card red-card">
                    <div class="H-s-c-title r-c-title">
                        <h4>Emergency Services</h4>
                        <img src="/assets/Alarm.png" alt="">
                    </div>
                    <img class="H-s-c-image r-c-image" src="/assets/Plumb-Scene-2.png" alt="">
                    <div class="H-s-c-sub-title r-c-sub-title">
                        <h5>Schedule - 24/7 Service!</h5>
                        <img src="/assets/24-7.png" alt="">
                    </div>
                    <div class="H-s-c-text r-c-text">
                        <p> <span>There when you need us!</span> <br> <br> Plumbing issues are never something you plan for, but its exactly what we are prepared to handle!</p>
                        <img src="/assets/Licensed.png" alt="">
                    </div>
                    </div>
                    <a href="/Services" class="button-floating button-primary">Read more</a>
                </div>
                <div class="H-s-card-holder">
                    <div class="H-s-card blue-card">
                    <div class="H-s-c-title b-c-title">
                        <h4>Specialized Work</h4>
                        <img src="/assets/Custom.png" alt="">
                    </div>
                    <img class="H-s-c-image b-c-image" src="/assets/Plumb-Scene-3.png" alt="">
                    <div class="H-s-c-sub-title b-c-sub-title">
                        <h5>Schedule - Pick a date!</h5>
                        <img src="/assets/Schedule.png" alt="">
                    </div>
                    <div class="H-s-c-text b-c-text">
                        <p> <span>The team for the task!</span> <br> <br> When it comes to plumbing, there is nothing we can't do. Call us and let our experts tackle the work!</p>
                        <img src="/assets/Licensed.png" alt="">
                    </div>
                    </div>
                    <a href="/Services" class="button-floating button-primary">Read more</a>
                </div>
            </div>
        </div>
    </section>

    <section class="Home-intro container">
        <div class="Home-intro-left Comic-panel">
            <div class="H-i-left-top">
                <h1>
                    The Plumbtastic Promise: 
                    <br>
                    There when you need us!
                </h1>
            </div>
            <div class="H-i-left-bot">
                <img src="/assets/Plumbtastic-1.jpg" alt="Boiler">
                <p>
                    When you're dealing with a burst pipe at 2:00 AM or a renovation that needs to be perfect, you don't just need a plumber, what you need is someone who actually cares about your home. 
                </p>
                <p>
                    At Plumbtastic Plumbing, we've spent the last 15 years turning "oh no" moments into "all fixed" ones across the DMV. We're incredibly proud of the reputation we've built, backed by hundreds of positive reviews from neighbors who trust us to get the job done right the first time. 
                </p>
                <p>
                    For us, serving the DC, Maryland, and Virginia communities isn't just business; it's a honor to keep the homes in our nation's capital running smoothly.
                </p>
            </div>
        </div>
        <div class="Home-intro-right">
            <div class="H-i-right-top Comic-panel">
            </div>
            <div class="H-i-right-bot Comic-panel"></div>
        </div>
    </section>

    <section class="Home-reviews">
    </section>

    <section class="Home-specials">
    </section>

    <section class="Home-contact">
        <form action="/submit-form" method="POST" class="contact-form">

            <div class="contact-title">
                <div>
                    <h2>Reach out to us!</h2>
                    <hr>
                    <h5>A team member will reach out to you shortly</h5>
                </div>
                <img src="/assets/Plumb-Squad-NOBG.png" alt="Logo"> 
            </div>

            <input type="text" id="firstName" name="firstName" placeholder="First Name" class="contact-inputs" required>

            <input type="text" id="lastName" name="lastName" placeholder="Last Name" class="contact-inputs" required>

            <input type="email" id="email" name="email" placeholder="Your Email" class="contact-inputs" required>

            <input type="tel" id="phone" name="phone" placeholder="Your Number" class="contact-inputs" required>       
            <div class="contact-message-holder">
                <label for="message">Optional:</label>
                <textarea id="message" name="message" placeholder="Your Message" class="contact-inputs contact-message"></textarea>
            </div>

            <div class="honeypot-container" aria-hidden="true">
                <label for="website-url"></label>
                <input type="text" id="website-url" name="website-url" tabindex="-1" autocomplete="off">
            </div>

        <button class="submit" type="submit" >Submit <img class="submit-img" src="/assets/Plumb-P-White.png"></button>
        </form>
    </section>
 

<footer>

    <div class="mobile">
        <div class="Footer-icon-holder">
            <a href="https://www.facebook.com/"><img src="/assets/Facebook.png" alt="Facebook"></a>
            <a href="https://www.Yelp.com/"><img src="/assets/Yelp.png" alt="Yelp"></a>
            <a href="https://www.google.com/"><img src="/assets/Google.png" alt="Google"></a>
            <a href="https://www.instagram.com/"><img src="/assets/Instagram.png" alt="Instagram"></a>
        </div>
    </div>

    <div class="desktop">
    <div class="footer-top">
        <span class="footer-nav col-2">
            <span>Get in touch</span>
            <span><img src="/assets/Phone.png" alt="Phone"> 301-233-1432 </span>
            <span><img src="/assets/Email.png" alt="Email"> Info@PlumbtasticDMV.com</span>
            <span><img src="/assets/Location.png" alt="Location"> DC, Maryland, & Virginia</span>
            <span><img src="/assets/Clock.png" alt="Clock"> Sunday-Saturday: 8am-5pm</span>
        </span>
        <span class="footer-nav col-1">
            <span>Our Site</span>
            <span><a href="/">Home</a></span>
            <span><a href="/about">About</a></span>
            <span><a href="/services">Services</a></span> 
            <span><a href="/reviews">Reviews</a></span>
            <span><a href="/contact">Contact</a></span>
        </span>
        <span class="footer-nav col-1">
            <span>Connect with us</span>
            <span><a href="https://g.page/r/CeJOyLbBu-nREBM/">Google</a></span>
            <span><a href="https://www.facebook.com/">Facebook</a></span>
            <span><a href="https://www.instagram.com/">Instagram</a></span>
            <span><a href="https://www.thumbtack.com/">Thumbtack</a></span>
            <span><a href="https://www.yelp.com/biz/plumbtastic-plumbing-rockville-2">Yelp</a></span>
        </span>
        <span class="footer-branding col-3">
            <img src="/assets/Plumbtastic-Logo-2.png" alt="Logo">
        </span>
    </div>
    <div class="footer-bot">
        <p>Plumbtastic Plumbing LLC © 2026</p>
        <p>|</p>
        <p>All Rights Reserved</p>
    </div>
    </div>

</footer>




<div class="Koi-tag"> Designed and built by <a href="https://www.Koiwebdevelopment.com/"><img class="Koi-logo" src="./assets/Koi-logo.webp" alt="Cute Cat logo"><img class="Koi-logo" src="/assets/Koi-text.webp" alt=""></a></div>