commented.html

<!--    <section id="Services">
     
        <div class="space">
          <div class="box1">
            <div class="face1"></div>
            <div class="face2"></div>
            <div class="face3"></div>
            <div class="face4"></div>
          </div>
          <div class="box2">
            <div class="face1"></div>
            <div class="face2"></div>
            <div class="face3"></div>
            <div class="face4"></div>
          </div>
        </div>
      </div>
      <div class="services-brand">
        <p>SERVICES</p>
   
      </div>
      <div class="services-main">
        <div class="services-section">
          <div class="services-section-top top-1">
            <div>
              <img src="./Nucleus/images/img-1a.png" class="img-1a">
            </div>
            <div>
              <img src="./Nucleus/images/img-1b.png" class="img-1b">
            </div>
            <h2>Full-Stack Web Development</h2>
            <div class="spinning-star">
              <img src="./Nucleus/images/star.png">
              <p class="spinning-name" style="color: gold; font-size: 2.3vw; font-family: 'Yatra One', cursive; margin-left: 0.5vw">Web Dev</p>
            </div>
          </div>
          <div class="services-section-bottom bottom-1">
            <div class="services-section-bottom-box bottom-box-1">
              <div class="services-section-left bottom-left-1">
                <h2>Full-Stack Web Development</h2>
                <h3>Front-End Development</h3>
                <p>Websites are nowadays viewed on multiple devices. With my skills in front-end web technologies such as HTML5, CSS3 and Javascript, I can create a flexible, responsive site that looks good on all screen sizes.</p>
                <h3>Back-End Development</h3>
                <p>I have vast experience in back-end web technologies such as PHP and MySQL to create multi-functional web portals - from content management systems to full-fledged e-commerce solutions, and beyond.</p>
                <h3>UI/UX Design</h3>
                <p>With my mastery in Designing, I'm proefficient in the perfect design required for you web to attract the audience with glare.</p>
              </div>
              <div class="services-section-right">
                <img src="./Nucleus/images/img-1c.jpg">
              </div>
            </div>
          </div>
        </div>
        <div class="services-section">
          <div class="services-section-top top-1">
            <div>
              <img src="./Nucleus/images/img-2a.jpg" class="img-2a">
            </div>
            <div>
              <img src="./Nucleus/images/img-2b.jpg" class="img-2b">
            </div>
            <h2>Hardware Repairing</h2>
            <div class="spinning-star">
              <img src="./Nucleus/images/star.png">
              <p class="spinning-name" style="color: gold; font-size: 2.3vw; font-family: 'Yatra One', cursive; margin-left: 0.5vw">Hardware</p>
            </div>
          </div>
          <div class="services-section-bottom bottom-1">
            <div class="services-section-bottom-box bottom-box-1">
              <div class="services-section-left bottom-left-2">
                <h2>Hardware Reparing</h2>
                <p>As a hardware technician, my primary responsibility is to maintain and repair computer hardware components, such as central processing units (CPUs), motherboards, hard drives, and peripherals. I am well-versed in troubleshooting and diagnosing hardware issues, identifying faulty components, and providing solutions to fix them. I possess a strong foundation in computer hardware technology, including knowledge of various hardware configurations, operating systems, and networking protocols. My expertise extends to installing, configuring, and upgrading computer hardware and software, as well as performing regular maintenance and system optimization. Overall, I am a dedicated and reliable hardware technician, capable of providing high-quality technical support to ensure the smooth and efficient operation of computer systems.</p>
              </div>
              <div class="services-section-right">
                <img src="./Nucleus/images/img-2d.jpg">
              </div>
            </div>
          </div>
        </div>
        <div class="services-section">
          <div class="services-section-top top-1">
            <div>
              <img src="./Nucleus/images/img-3a.png" class="img-3a">
            </div>
            <div>
              <img src="./Nucleus/images/img-3b.png" class="img-3b">
            </div>
            <h2>App Development</h2>
            <div class="spinning-star">
              <img src="./Nucleus/images/star.png">
              <p class="spinning-name" style="color: gold; font-size: 2.3vw; font-family: 'Yatra One', cursive; margin-left: 0.5vw;">App Dev</p>
            </div>
          </div>
          <div class="services-section-bottom bottom-1">
            <div class="services-section-bottom-box bottom-box-1">
              <div class="services-section-left bottom-left-3">
                <h2>App Developement</h2>
                <p>With expertise in Flutter and Kotlin, I specialize in creating tailor-made app experiences for Android and iOS platforms. I prioritize user-centric designs, ensuring seamless functionality and timely delivery of projects. From startups to established businesses, I am committed to turning your app ideas into reality. With transparent communication throughout the development process and post-development support, I guarantee an app that leaves a lasting impression on users. Let's collaborate and bring your app vision to life! Contact me today, and let's discuss how I can contribute to your app's success.
              </div>
              <div class="services-section-right">
                <img src="./Nucleus/images/img-3c.jpg">
              </div>
            </div>
          </div>
        </div>
      </div>

      </div>
      <div class="services-section-only-ad">
        <div class="flip-card">
          <div class="flip-card-inner">
            <div class="flip-card-front">
              <h2>Full Stack Web Development</h2>
              <button>Front-End</button>
              <button class="button-2">Back-End</button>
              <div class="plus"> ></div>
              <img src="./Nucleus/images/s-ad-1.jpg">
            </div>
            <div class="flip-card-back">
              <h2>Full Stack Web Development</h2>
              <button>Front-End</button>
              <button class="button-2">Back-End</button>
              <div class="plus"> ^ </div>
              <div class="p-p">
                <h3>Front-End Development</h3>
                <p>Websites are nowadays viewed on multiple devices. With my skills in front-end web technologies such as HTML5, CSS3 and Javascript, I can create a flexible, responsive site that looks good on all screen sizes.</p>
                <h3>Back-End Development</h3>
                <p>I have vast experience in back-end web technologies such as PHP and MySQL to create multi-functional web portals - from content management systems to full-fledged e-commerce solutions, and beyond.</p>
                <h3>UI/UX Design</h3>
                <p>With my mastery in Designing, I'm proefficient in the perfect design required for you web to attract the audience with glare.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flip-card">
          <div class="flip-card-inner">
            <div class="flip-card-front">
              <h2 style="color: white;">Hardware Repairing</h2>
              <button style="color: white; border: 1px solid white;">Harware</button>
              <div class="plus" style="border: 1px solid white; color: white;">></div>
              <img src="./Nucleus/images/s-ad-2.jpg">
            </div>
            <div class="flip-card-back">
              <h2>Hardware Repairing</h2>
              <button>Harware</button>
              <div class="plus" style="border: 1px solid white; color: white;"> ^ </div>
              <div class="p-p">
                <p>As a hardware technician, my primary responsibility is to maintain and repair computer hardware components, such as central processing units (CPUs), motherboards, hard drives, and peripherals. I am well-versed in troubleshooting and diagnosing hardware issues, identifying faulty components, and providing solutions to fix them.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flip-card">
          <div class="flip-card-inner">
            <div class="flip-card-front">
              <h2>App Development</h2>
              <button>UI/UX</button>
              <button class="button-2">Images/Logo</button>
              <div class="plus"> ></div>
              <img src="./Nucleus/images/s-ad-3.jpg">
            </div>
            <div class="flip-card-back">
              <h2>App Development</h2>
              <button>UI/UX</button>
              <button class="button-2">Images/Logo</button>
              <div class="plus"> ^ </div>
              <div class="p-p">
                <p>With expertise in Flutter and Kotlin, I specialize in creating tailor-made app experiences for Android and iOS platforms. I prioritize user-centric designs, ensuring seamless functionality and timely delivery of projects. From startups to established businesses, I am committed to turning your app ideas into reality. With transparent communication throughout the development process and post-development support, I guarantee an app that leaves a lasting impression on users. Let's collaborate and bring your app vision to life! Contact me today, and let's discuss how I can contribute to your app's success.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="Work">
      <div class="finest">
        <section class="section top-section">
          <div class="content-container content-theme-dark">
            <div class="content-inner">
              <div class="content-center">
                <h1>Work</h1>
                <p>The Projects I Have Built <a>by Finest Precision</a>
                </p>
              </div>
            </div>
          </div>
        </section>
        <section class="section bottom-section">
          <div class="content-container content-theme-light">
            <div class="content-inner">
              <div class="content-center">
                <h1>Work</h1>
                <p>The Projects I Have Built <a>by Finest Precision</a>
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
      <div class="work-boxes">
        <center>
          <div class="work-box">
            <a href="https://mathletics-club.github.io/mathletics.github.io/" target="_blank">
              <img src="./Nucleus/images/p7.png">
            </a>
          </div>
        </center>
        <center>
          <div class="work-box">
            <a href="https://volt-25.github.io/volt.github.io" target="_blank">
              <img src="./Nucleus/images/p0.png">
            </a>
          </div>
        </center>
        <center>
          <div class="work-box">
            <a href="https://sanket-25.github.io/prism.github.io" target="_blank">
              <img src="./Nucleus/images/p1.png">
            </a>
          </div>
        </center>
        <center>
          <div class="work-box">
            <a href="https://nav-mate.github.io/navmate.github.io" target="_blank">
              <img src="./Nucleus/images/p2.png">
            </a>
          </div>
        </center>
        <center>
          <div class="work-box">
            <a href="https://sanket-25.github.io/aliensociety.github.io/" target="_blank">
              <img src="./Nucleus/images/p3.png">
            </a>
          </div>
        </center>
        <center>
          <div class="work-box">
            <a href="https://sanket-25.github.io/lofi-space.github.io/" target="_blank">
              <img src="./Nucleus/images/p4.png">
            </a>
          </div>
        </center>
        <center>
          <div class="work-box" style="margin-bottom: 2em;">
            <a href="https://www.youtube.com/@lofispace3927" target="_blank">
              <img src="./Nucleus/images/p5.png">
            </a>
          </div>
        </center>
      </div>
    </section>
    <section class="new">
      <span class="sliding">
        <span>CONTACT</span>
        <span>ME</span>
        <span> - </span>
        <span>CONTACT</span>
        <span>ME</span>
      </span>
      <div class="wrapper">
        <span class="sliding">
          <span>CONTACT</span>
          <span>ME</span>
          <span> - </span>
          <span>CONTACT</span>
          <span>ME</span>
        </span>
      </div>
      <style type="text/css">
        .new {
          width: 100%;
          height: 20%;
          font-size: 5em;
          background: #eaffae;
          background: linear-gradient(to right, #ff512f, #f09819);
          box-sizing: border-box;
          overflow: hidden;
          position: absolute;
          color: white;
        }

        .wrapper {
          height: 100%;
          width: 50%;
          background: linear-gradient(#9b22ea, #bf23f6);
          overflow: hidden;
          color: #eaffae;
          color: #ff512f;
          color: #ffc107;
          position: absolute;
          top: 0;
          left: 0;
          border-right: 2px solid #262626;
        }

        .sliding {
          position: absolute;
          top: 50%;
          white-space: nowrap;
          font-size: 7rem;
          line-height: 220px;
          overflow: hidden;
          font-family: "arial black";
          animation: animate 20s linear infinite;
        }

        @keyframes animate {
          0% {
            transform: translate(0, -50%);
          }

          100% {
            transform: translate(-50%, -50%);
          }
        }
      </style>
    </section>
    <section id="Contact">
      <div>
        <div class="background">
          <div class="shape"></div>
          <div class="shape"></div>
        </div>
        <form action="https://formspree.io/f/mvonzajv" method="POST">
          <h3>Contact Me !
          </h3>
          <label for="username">Your Full Name <input type="text" name="Full_Name" placeholder="" id="username" autocomplete="off">
          </label>
          <label for="password">Email <input type="email" name="Email" placeholder="demo@mail.com" id="password" autocomplete="off" required>
          </label>
          <label for="username">Needed Service</label>
          <select class="custom-select valid" id="budget" id="password" name="Service" aria-invalid="false">
            <option selected="">Choose...</option>
            <option value="$1000 below">Full Stack Website</option>
            <option value="$2,000 - $5,000">Front End Website</option>
            <option value="$5,000 - $15,000">Android App</option>
            <option value="$15,000 - $25,000">Hardware Repaire</option>
            <option value="$25,000 >">PC Building</option>
          </select>
          <label for="password">Budget</label>
          <select class="custom-select valid" id="budget" name="Budget" aria-invalid="false">
            <option selected="">Choose...</option>
            <option value="₹250 below">&lt; ₹250</option>
            <option value="₹250 - ₹500">₹250 - ₹500</option>
            <option value="₹500 - ₹1000">₹500 - ₹1000</option>
            <option value="₹1000 - ₹2000">₹1,000 - ₹2,000</option>
            <option value="₹2000 >">₹2,000 &gt;</option>
          </select>
          <label for="username">Message</label>
          <input type="text" name="Message" placeholder="" id="username" autocomplete="off">
          <button type="submit">Send</button>
        </form>
      </div>
      <div class="being">
        <div class="left-contact"></div>
        <div class="right-contact">
          <p>Your Idea my Skills. Let's Build something Amazing Together.</p>
          <p>I am available for freelance/opensource projects and part-time internships.</p>
          <br>
          <br>
          <p style="font-family: 'Uncial Antiqua', cursive;">Sanket Dhuri</p>
          <p style="font-family: 'Cinzel Decorative', cursive;">Developer and Freelancer</p>
          <a href="mailto:contact.sanketdhuri@gmail.com" style="font-family: 'Big Shoulders Inline Text', cursive; letter-spacing: 0.3vw;">contact.sanketdhuri@gmail.com</a>
          <ul class="social-p">
            <li class="social-c">
              <a href="https://www.linkedin.com/in/sanket-dhuri-4471b91b5/">
                <img src="./Nucleus/images/social1.png">
              </a>
            </li>
            <li class="social-c">
              <a href="https://www.instagram/sanket.25_/">
                <img src="./Nucleus/images/social2.png">
              </a>
            </li>
            <li class="social-c">
              <a href="https://github.com/sanket-25">
                <img src="./Nucleus/images/social3.png">
              </a>
            </li>
            <li class="social-c">
              <a href="+91 9619132050">
                <img src="./Nucleus/images/social4.png">
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="only-ad-contact">
        <p>Your Idea my Skills. Let's Build something Amazing Together.</p>
        <p>I am available for freelance/opensource projects and part-time internships.</p>
        <br>
        <br>
        <p style="font-family: 'Uncial Antiqua', cursive;">Sanket Dhuri</p>
        <p style="font-family: 'Cinzel Decorative', cursive;">Developer and Freelancer</p>
        <a href="mailto:contact.sanketdhuri@gmail.com" style="font-family: 'Big Shoulders Inline Text', cursive; letter-spacing: 0.3vw;">contact.sanketdhuri@gmail.com</a>
        <ul class="social-p">
          <li class="social-c">
            <img src="./Nucleus/images/social1.png">
          </li>
          <li class="social-c">
            <img src="./Nucleus/images/social2.png">
          </li>
          <li class="social-c">
            <img src="./Nucleus/images/social3.png">
          </li>
          <li class="social-c">
            <img src="./Nucleus/images/social4.png">
          </li>
        </ul>
      </div>
    </section> -->