index.html

<!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="assets/styles/style.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  -->

    <!--  Hero Section  -->
    <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">
                        <svg class="hero-section__icon" height="569pt" viewBox="0 0 569 569.54905" width="569pt" xmlns="http://www.w3.org/2000/svg"><path d="m1.527344 52.246094 37.984375 66.46875c1.28125 2.246094 3.425781 3.871094 5.933593 4.5l35.4375 8.859375 121.542969 121.542969 13.429688-13.425782-123.445313-123.441406c-1.214844-1.21875-2.738281-2.082031-4.40625-2.5l-34.050781-8.542969-32.339844-56.625 27.726563-27.726562 56.648437 32.371093 8.546875 34.050782c.414063 1.671875 1.28125 3.199218 2.496094 4.414062l123.445312 123.445313 13.425782-13.429688-121.542969-121.542969-8.859375-35.417968c-.628906-2.511719-2.253906-4.660156-4.5-5.945313l-66.472656-37.980469c-3.707032-2.109374-8.371094-1.484374-11.394532 1.527344l-37.980468 37.984375c-3.0546878 3.003907-3.71875 7.675781-1.625 11.414063zm0 0"/><path d="m396.3125 187.144531-208.902344 208.90625-13.429687-13.429687 208.90625-208.902344zm0 0"/><path d="m150.847656 403.441406c-1.71875-2.859375-4.804687-4.605468-8.140625-4.605468h-56.972656c-3.332031 0-6.421875 1.746093-8.136719 4.605468l-28.488281 47.476563c-1.808594 3.007812-1.808594 6.769531 0 9.78125l28.488281 47.476562c1.714844 2.855469 4.804688 4.605469 8.136719 4.605469h56.972656c3.335938 0 6.421875-1.75 8.140625-4.605469l28.484375-47.476562c1.808594-3.011719 1.808594-6.773438 0-9.78125zm-13.511718 90.347656h-46.226563l-22.789063-37.980468 22.789063-37.984375h46.226563l22.789062 37.984375zm0 0"/><path d="m456.0625 227.914062c62.714844.210938 113.730469-50.460937 113.941406-113.175781.03125-9.546875-1.140625-19.054687-3.488281-28.308593-1.265625-5.089844-6.417969-8.1875-11.507813-6.921876-1.671874.417969-3.195312 1.28125-4.414062 2.496094l-59.109375 59.070313-46.898437-15.628907-15.640626-46.886718 59.109376-59.121094c3.707031-3.710938 3.703124-9.722656-.007813-13.429688-1.222656-1.222656-2.761719-2.089843-4.445313-2.503906-60.820312-15.402344-122.605468 21.414063-138.007812 82.230469-2.339844 9.226563-3.507812 18.710937-3.476562 28.230469.023437 7.476562.792968 14.929687 2.308593 22.25l-207.957031 207.953125c-7.320312-1.511719-14.773438-2.28125-22.246094-2.308594-62.933594 0-113.949218 51.015625-113.949218 113.949219 0 62.929687 51.015624 113.945312 113.949218 113.945312 62.929688 0 113.945313-51.015625 113.945313-113.945312-.023438-7.476563-.796875-14.929688-2.308594-22.25l49.785156-49.785156 21.773438 21.773437c3.710937 3.707031 9.71875 3.707031 13.429687 0l4.746094-4.75c4.164062-4.136719 10.894531-4.136719 15.058594 0 4.160156 4.148437 4.167968 10.882813.019531 15.042969-.003906.003906-.011719.011718-.019531.019531l-4.746094 4.746094c-3.707031 3.707031-3.707031 9.71875 0 13.425781l113.273438 113.273438c29.792968 30.066406 78.316406 30.285156 108.382812.492187 30.0625-29.792969 30.28125-78.320313.488281-108.382813-.160156-.164062-.324219-.328124-.488281-.492187l-113.273438-113.269531c-3.707031-3.707032-9.71875-3.707032-13.425781 0l-4.746093 4.746094c-4.167969 4.140624-10.894532 4.140624-15.0625 0-4.15625-4.148438-4.167969-10.882813-.019532-15.039063.007813-.007813.015625-.011719.019532-.019531l4.75-4.75c3.707031-3.707032 3.707031-9.71875 0-13.425782l-21.773438-21.773437 49.785156-49.785156c7.320313 1.511719 14.773438 2.285156 22.246094 2.308593zm37.308594 322.851563c-6.898438-.011719-13.738282-1.257813-20.195313-3.683594l74.160157-74.164062c11.191406 29.769531-3.867188 62.972656-33.636719 74.164062-6.496094 2.441407-13.382813 3.691407-20.328125 3.683594zm-107.574219-246.792969c-10.515625 12.542969-8.867187 31.238282 3.675781 41.75 11.023438 9.238282 27.089844 9.230469 38.101563-.027344l106.5625 106.65625c1.15625 1.160157 2.238281 2.382813 3.285156 3.625l-81.1875 81.1875c-1.246094-1.042968-2.46875-2.125-3.628906-3.285156l-106.644531-106.652344c10.515624-12.542968 8.867187-31.238281-3.675782-41.75-11.023437-9.242187-27.09375-9.230468-38.105468.023438l-15.191407-15.191406 81.613281-81.492188zm38.34375-95.503906-215.410156 215.367188c-2.363281 2.359374-3.3125 5.785156-2.507813 9.023437 13.027344 51.160156-17.886718 103.195313-69.050781 116.21875-51.160156 13.027344-103.195313-17.886719-116.222656-69.050781-13.023438-51.160156 17.890625-103.195313 69.054687-116.222656 15.476563-3.9375 31.691406-3.9375 47.167969 0 3.238281.792968 6.65625-.15625 9.023437-2.503907l215.359376-215.371093c2.359374-2.359376 3.308593-5.785157 2.496093-9.019532-12.9375-50.5625 17.5625-102.039062 68.125-114.980468 9.554688-2.441407 19.4375-3.378907 29.28125-2.765626l-50.089843 50.109376c-2.542969 2.539062-3.433594 6.300781-2.296876 9.710937l18.988282 56.976563c.949218 2.832031 3.175781 5.058593 6.011718 6l56.976563 18.992187c3.40625 1.136719 7.167969.25 9.710937-2.289063l50.089844-50.089843c.113282 1.8125.171875 3.605469.171875 5.390625.265625 52.175781-41.8125 94.6875-93.988281 94.957031-8.066406.039063-16.105469-.953125-23.917969-2.953125-3.238281-.808594-6.664062.136719-9.023437 2.496094h.050781zm0 0"/><path d="m491.273438 477.578125-13.429688 13.429687-94.953125-94.953124 13.425781-13.429688zm0 0"/></svg>
                    </div>
                </div>
                <div class="col align-self-center">

                    <h1 class="text-white mb-5">ALL in One Utility Website</h1>
                    <p class="lead mb-4">
                        Utility sole focus is to provide fast, comprehensive, convenient, free online Tools in a plethora of areas.  Our goal is to become the one-stop, go-to site for people who need to make quick Tool and calculations. Additionally, we believe the internet should be a source of free information. Therefore, all of our tools and services are completely free, with no registration required.
                    </p>

                    <P class="lead mb-4">
                        We coded and developed each calculator individually and put each one through strict, comprehensive testing. However, please inform us if you notice even the slightest error – your input is extremely valuable to us. While most tools on Utility are designed to be universally applicable for worldwide usage.
                    </P>
                    

                    <div class="form-group">
                        
                        <a href="contributors.html" target="blank"><button id="slider-contributors" class="btn btn-lg btn-block lead mt-4">Our Contributors</button></a>
                        <a href="https://backgroundgradients.com/" target="blank"><button id="slider-gradients" class="btn btn-lg btn-block text-light lead mt-4">Background Gradients</button></a>
                        
                    </div>

                </div>
            </div>

        </div>

    </section>
    <!--  Hero Section End  -->

    <!--  Tools List  -->
    <section class="container mb-5">

        <div class="row">
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-money mr-1"></i>
                        Gradient Tool
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Background Gradients</h5>
                        <p class="card-text">Background Gradients is a free and simple to use tool to generate Color Gradietns</p>
                        <a href="https://backgroundgradients.com/" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-money mr-1"></i>
                        Conversion Tool
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Image to PDF</h5>
                        <p class="card-text">converts Image to PDF format and vice-versa</p>
                        <a href="/conversionTools/imagePdf/imagePdf.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-money mr-1"></i>Conversion Tool</div>
                    <div class="card-body">
                        <h5 class="card-title">Torque</h5>
                        <p class="card-text">Tool for converting the units of torque.</p>
                        <a href="/conversionTools/Torque/torque.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-balance-scale mr-1"></i>Conversion Tool</div>
                    <div class="card-body">
                        <h5 class="card-title">Power</h5>
                        <p class="card-text">Tool for converting units of power </p>
                        <a href="/conversionTools/power/power.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-balance-scale mr-1"></i>Daily Use Tool</div>
                    <div class="card-body">
                        <h5 class="card-title">Moorse Convertor</h5>
                        <p class="card-text">Tool for converting the untis of pressure. </p>
                        <a href="/dailyUseTools/morseConverter/morse.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-money mr-1"></i>Daily Use Tools</div>
                    <div class="card-body">
                        <h5 class="card-title">BMI Calculator</h5>
                        <p class="card-text">Tool for calculating Body masss index.</p>
                        <a href="/dailyUseTools/bmicalculator/bmi-calculator.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-money mr-1"></i>Daily Use Tools</div>
                    <div class="card-body">
                        <h5 class="card-title">Notes - Todos </h5>
                        <p class="card-text">Tool for creating simple todo lists.</p>
                        <a href="/dailyUseTools/notes/notes.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        <i class="fa fa-money mr-1"> Daily Use Tools</i></div>
                    <div class="card-body">
                        <h5 class="card-title">Password Generator</h5>
                        <p class="card-text">Tool for generating strong password.</p>
                        <a href="/dailyUseTools/passwordGenerator/passwordGenerator.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        Finance Tools<i class="fa fa-money mr-1"></i>
                        </div>
                    <div class="card-body">
                        <h5 class="card-title">Mortgage Calculator</h5>
                        <p class="card-text">Tool for calculating the Mortgage for your property..</p>
                        <a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        Finance Tools<i class="fa fa-money mr-1"></i>
                        </div>
                    <div class="card-body">
                        <h5 class="card-title">Mortgage Calculator</h5>
                        <p class="card-text">Tool for calculating the Mortgage for your property..</p>
                        <a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        Finance Tools<i class="fa fa-money mr-1"></i>
                        </div>
                    <div class="card-body">
                        <h5 class="card-title">Mortgage Calculator</h5>
                        <p class="card-text">Tool for calculating the Mortgage for your property..</p>
                        <a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-3">
                <div class="card bg-light mb-3 mx-auto" style="max-width: 18rem;">
                    <div class="card-header">
                        Finance Tools<i class="fa fa-money mr-1"></i>
                        </div>
                    <div class="card-body">
                        <h5 class="card-title">Mortgage Calculator</h5>
                        <p class="card-text">Tool for calculating the Mortgage for your property..</p>
                        <a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="btn btn-primary">Use Tool</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--  Tools List End  -->

    <!--  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 codeezzi</p>
                
                <!-- <a href="https://backgroundgradients.com/" class="text-dark" target="blank">Background Gradients</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> -->
                <p class="m-0">Page Created by <a href="https://github.com/negarjf" target="_blank">Negar Jamalifard</a></p>
                
            </div>
            <div class="col-md-6 text-md-right">
                <a href="https://backgroundgradients.com/" class="text-dark" target="blank">Background Gradients</a>
                <span class="text-muted mx-2">|</span>
                <a href="contributors.html" class="text-dark" target="blank">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>
    <!--  Footer End  -->

    <!--Scripts-->

    <!-- 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>