conversionTools/Torque/torque.html

<!-- 
    Contributor Details:
    Name: saurabhhere
    mail: saurabhguptajpr@yahoo.in
    twitter : https://twitter.com/Saurabh41228475?s=09
    GitHub profile link :  https://github.com/saurabhhere
 -->
<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#6610f2" />
     <link rel="icon" type="image/ico" href="../../favicon.ico" />
     <title>Utility Website</title>
     <!--  Styles  -->
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
     />
     <link
       rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link rel="stylesheet" href="torque.css" />
   </head>
   <body>
    <!--  Navbar  -->
    <nav class="site-header sticky-top py-1 text-light">
      <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center" id="uNavbar">
          <a class="py-2 text-light" href="../../index.html">
              <i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
          </a>

          <!--    Dynamic Navbar Elements        -->

          <div class="btn-group d-none d-md-block py-2">
              <button type="button" class="btn btn-link text-light text-decoration-none"><a href="https://backgroundgradients.com/" class="text-light">Background Gradients</a> </button>
          </div>

      </div>
  </nav>
  <!--  Navbar End  -->
     <div class="heading">
     </div>

             <!-- Hero Section Starts -->
             <section
             class="hero-section overflow-hidden py-5 mb-5 text-center text-md-left text-light"
           >
             <div class="container-xl">
               <div class="row">
                 <div class="d-none d-md-block col-5 align-self-center">
                   <div class="hero-section__graphic position-relative m-auto">
                      <img src="https://i.stack.imgur.com/TpNxY.gif" />
                   </div>
                 </div>
                 <div class="col align-self-center">
                   <h1 class="text-white mb-5">Torque Converter</h1>
                   <p class="lead mb-4">You can use this tool to convert torque from one unit to another. </p>
                 </div>
               </div>
             </div>
           </section>
           <!--  Hero Section End  -->
       
     <!-- Torque conversion tool -->
     <div class="container_wrapper">
         <div class="torque__wrapper">
             <div class="torque__container">
               <div class="value__container">
                 <label for="torque_value">Enter the torque</label>
                 <br>
                 <input type="text" name="torque_value" id="torque_value">
                 <select name="conversion_value" id="conversion_value">
                   <option value="N-m">Newton-meter (N-m)</option>
                   <option value="dy-cm">Dyne-centimeter (dy-cm)</option>
                   <option value="kgf-m">Kgrf-meter (kgf-m)</option>
                   <option value="lbf-in">lbf-inch (lbf-in)</option>
                   <option value="lbf-ft">lbf-foot (lbf-ft)</option>
                 </select>
               </div>
              
               <div class="result__container">
                  <label for="torque_result">Result</label>
                 <br>         
                 <input type="text" name="torque_result" id="torque_result">
                 <select name="conversion_result" id="conversion_result">                  
                    <option value="N-m">Newton-meter (N-m)</option>
                    <option value="dy-cm">Dyne-centimeter (dy-cm)</option>
                    <option value="kgf-m">Kgrf-meter (kgf-m)</option>
                    <option value="lbf-in">lbf-inch (lbf-in)</option>
                    <option value="lbf-ft">lbf-foot (lbf-ft)</option>
                 </select>
               </div>
 
               <div  class="button__container">
                 <input type="button" name="Convert" value="Convert" id="convert_button">
               </div>
             </div>
            </div>
          </div>
 
    
     <!--  Footer  -->
     <footer class="border-top py-3 px-4">
       <div class="row align-items-center">
         <div class="col-md-6">
           <p class="m-0">Copyright &copy; 2020 Saurabh Gupta</p>
           <p class="m-0">
             Page Created by
             <a href="https://github.com/saurabhhere" target="_blank"
               >Saurabh Gupta</a
             >
           </p>
         </div>
         <div class="col-md-6 text-md-right">
           <a href="contributors.html" target="_blank" class="text-dark"
             >Contributors</a
           >
           <span class="text-muted mx-2">|</span>
 
           <a href="#" class="text-dark">Terms of Use</a>
           <span class="text-muted mx-2">|</span>
           <a href="#" class="text-dark">Privacy Policy</a>
         </div>
       </div>
     </footer>
     <script src="torque.js"></script>

     <!-- Global Scripts: Should load in all pages -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="../../assets/config/categories.js"></script>
    <script src="../../assets/config/tools.js"></script>
    <script src="../../assets/scripts/templates.js"></script>
    <script src="../../assets/scripts/app.js"></script>
    <!-- END of Global Scripts -->
   </body>
 </html>