 <!-- 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.-->


<!-- Phone number -->

<!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=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/styles/style.css">
    <link rel="icon" type="image/x-icon" href="/assets/Favicon.png">
    <title>Alta Home Services</title>
</head>
<script src="script.js"></script>
<body>
    
    <div class="mobile container">
    
      <div class="headerMobile">
    
        <img src="/assets/Logo.png">

        <h1 class="headerTextMobile">Alta Home Service</h1>
    
        <div id="mySidepanel" class="sidepanel">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="/">Home</a>
            <a href="/About">About</a>
            <a href="/Services">Services</a>
            <a href="/Reviews">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">
            <div class="logoHolderDesktop">
                <img src="/assets/Logo.png" alt="Logo" class="logo">
                <h1 class="logoTextDesktop">
                    Alta Home Services
                </h1>
            </div>
            <div class="headerCall">Call Now! (301) 800-4622</div>
            <nav>
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/About">About</a></li>
                    <li><a href="/Services">Services</a></li>
                    <li><a href="/Reviews">Reviews</a></li>
                    <li><a href="/Contact">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body> 
</html>
 
    <section class="home-hero">
        <div class="container">
            <h1 id="title">A new look for your home
                <span>you will love to admire.</span>
            </h1>
            <a href="/Contact" class="button button-accent">Get started</a>
        </div>
    </section>

    <section class="home-services contianer">

            <h1 class="title"> Our Services </h1>
            <div class="home-servicesBody">
                <div class="home-servicesImagesHolder">
                    <img src="/assets/Miguel-1.jpg" alt="Bathroom">
                    <img src="/assets/Miguel-2.jpg" alt="Kitchen">
                    <img src="/assets/Miguel-3.jpg" alt="Kitchen">
                    <img src="/assets/Miguel-4.jpg" alt="Bedroom">
                    <img src="/assets/Miguel-5.jpg" alt="Bathroom">
                    <img src="/assets/Miguel-6.jpg" alt="">
                    <img src="/assets/Miguel-7.jpg" alt="">
                    <img class="desktop" src="/assets/Miguel-8.jpg" alt="">
                    <img class="desktop" src="/assets/Miguel-9.jpg" alt="">
                </div>
                <div class="home-servicesList">
                    <ul>
                        <li>Assembly</li>
                        <li>Electrical</li>
                        <li>Flooring</li>
                        <li>Instillation</li>
                        <li>Mold Removal</li>
                        <li>Outdoor</li>
                        <li>Painting</li>
                        <li>Plumbing</li>
                        <li>Repairs</li>
                        <li>Roofing</li>
                    </ul>
                </div>
            </div>

        <div class="home-mission desktop">
            <h1 class="home-mission-title"> Our mission </h1>
            <p class="home-mission-first">At Alta Home Services, our mission is to provide exceptional quality and reliable service that stands the test of time. We are dedicated to delivering expert craftsmanship and attention to detail, ensuring that every project is completed to the highest standards.</p>

            <p>When you choose Alta Home Services, you can trust that you are working with professionals who care about your needs and are committed to achieving results that last. We take pride in our work, and our goal is to build lasting relationships with our clients based on trust, excellence, and unmatched service.</p>
        </div>
    </section>

    <a href="/Contact" class="button button-accent">Schedule now</a>

    <section class="home-about">
        <div class="home-about-box">
            <span class="title">More value,</span>
            <span class="title">More quality,</span>
            <span class="title"> More than just painting.</span>
            <p>
                <span class="bold">Why Choose Us?</span> Because you deserve more! More quality, more precision, and more satisfaction. Whether it's painting, drywall, or light renovations, we handle every detail so you don't have to.
            </p>
        </div>

        <div class="home-about-box">
            <img src="/assets/Banner-1.jpg">
            <span class="sub-title">Who we are</span>
            <p>Dedicated professionals bringing more beauty and value to your spaces for over 15 years.</p>
            <a href="/About" class="button button-accent">Read more</a>

        </div>

        <div class="home-about-box">
            <img src="/assets/Banner-6.jpg">
            <span class="sub-title">What we do</span>
            <p>From painting to repairs, we deliver expert craftsmanship with a personal touch.</p>
            <a href="/Services" class="button button-accent">More info</a>
        </div>
    </section>

    <section class="home-CTA">
        <h1>Start your project today</h1>
        <a href="/Contact" class="button button-accent">Contact Us</a>
    </section>

    <section class="home-awards">
        <div class="home-awards-title">
            <h1 class="title">Thumbtacks Top Pro</h1><img src="/assets/Thumbtack-3.png" alt="Pro Badge">
        </div>

        <div class="home-awards-body">
            <div class="home-awards-box"><img src="/assets/Thumbtack-4.png" alt="Review"></div>
            <div class="home-awards-box"><img src="/assets/Thumbtack-1.png" alt="Overview"></div>
            <div class="home-awards-box"><img src="/assets/Thumbtack-2.png" alt="Top Pro"></div>     
        </div>
        <a href="/Reviews" class="button button-accent" font-size="1.2rem" >Read our reviews</a>
    </section>
    
    <section class="home-contact">
        <h2 class="title home-contact-title">Lets get to work:</h2>

        <div class="contact-page">
        <div class="contact-form-left">
            <h2>Contact Information</h2> 
            <div class="contact-info-box">
                <img src="/assets/Phone.png" alt="Phone Icon">
                <a href="tel:+13018004622"> 301-800-4622</a>
            </div>
            <div class="contact-info-box">
                <img src="/assets/Email.png" alt="Phone Icon">
                <a href="mailto:Maspaintservice75@gmail.com"> Maspaintservice75@gmail.com </a>
            </div>           
            <div class="contact-info-box">
                <img src="/assets/Clock.png" alt="Email"> <span><span class="bold">7:00am</span> to <span class="bold"> 6:00pm</span></span>
            </div>
            <div class="contact-info-box">
                <img src="/assets/Location.png" alt="Phone Icon">
                <span> Servicing the <span class="bold">DMV</span> area </span>
            </div>
        </div>
    
    
    
        <form action="https://api.web3forms.com/submit" method="POST" class="contact-form">
            <input type="hidden" name="access_key" value="3887f52a-a9f7-4d53-9f41-fa06d9c10c29">
            <div class="contact-title">
                <div>
                    <h2>Reach out to us!</h2>
                    <hr>
                </div>
                <img src="/assets/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>
            <div class="custom-select">
                <select name="job-type" id="job-type">
                    <option value="N/A" selected>Select Service:</option>
                    <option value="Assembly">Assembly</option>
                    <option value="Ceramic">Ceramic</option> 
                    <option value="Drywall">Drywall</option>
                    <option value="Electrical">Electrical</option>
                    <option value="Flooring">Flooring</option>
                    <option value="Mold">Mold</option>
                    <option value="Outdoor">Outdoor</option>
                    <option value="Painting">Painting</option>
                    <option value="Plumbing">Plumbing</option>
                    <option value="Repairs">Repairs</option>
                    <option value="Roofing">Roofing</option>
                    <option value="Other">Other</option>
                </select>
            </div>
            <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/Arrow-white.png"> </button>
        </form>
        </div>
    </section>

 

<footer>
    <div class="foot-top">
        <div class="footer-logo-box">
            <img class="footer-logo" src="/assets/Logo.png" alt="Logo">
            <h1 class="title">Alta Home Services</h1>
        </div>

        <div class="foot-info desktop" >
          <div class="foot-info-body">
            <ul class="unstyled-list">
                <li><a href="/">Home</a></li>
                <li><a href="/About">About</a></li>
                <li><a href="/Services">Services</a></li>
                <li><a href="/Reviews">Reviews</a></li>
                <li><a href="/Contact">Contact</a></li>
             </ul>

            <ul class="unstyled-list">                
                <li><img src="/assets/Phone.png" alt="Phone"> <span class="bold">301-800-4622</span> </li>
                <li><img src="/assets/Email.png" alt="Email"> <span class="bold">Maspaintservice75@gmail.com </span></li>
            </ul>

            <ul class="unstyled-list">                
                <li>
                  <img src="/assets/Location.png" alt="Location"> Servicing the <span class="bold">DMV</span> area.
                </li>
                <li>
                    <img src="/assets/Clock.png" alt="Email"> <span class="bold">7:00am</span> to <span class="bold"> 6:00pm</span> everyday
                </li>
            </ul>

          </div>
        </div>        
    </div>    
    
    <div class="foot-bottom">
        <div class="foot-icon-box">
            <ul class="unstyled-list">
             <li><a href="https://www.angi.com/"><img class="foot-icon"  src="/assets/Angi.png" alt="Angi"></a></li>
             <li><a href="https://www.facebook.com/share/1H6WXG1vXZ/?mibextid=wwXIfr"><img class="foot-icon"  src="/assets/Facebook.png" alt="Facebook"></a></li>
             <li><a href="https://www.google.com/"><img class="foot-icon"  src="/assets/Google.png" alt="Google"></a></li>
             <li><a href="https://www.instagram.com/"><img class="foot-icon"  src="/assets/Instagram.png" alt="Instagram"></a></li>
             <li><a href="https://www.thumbtack.com/va/annandale/general-contractors/maspaintservice-llc/service/413524913733255170"><img class="foot-icon"  src="/assets/Thumbtack.png" alt="Thumbtack"></a></li>
             <li><a href="https://www.yelp.com/"><img class="foot-icon"  src="/assets/Yelp.png" alt="Yelp"></a></li>
            </ul>
        </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-text-right.png" alt="Cute Cat logo"></a></div>