index.html

<!-- Copyright (C) 2018 - 2024 Dog Face Development Co. -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Basic Page Needs -->
    <meta charset="utf-8" />
    <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      Dog Face Development Co - Software Development for the 21st Century
    </title>
    <meta
      name="description"
      content="Dog Face Development Co is a modern software development company headquartered in beautiful Vancouver, BC; specializing in personal and commercial desktop and website development."
    />
    <meta
      name="keywords"
      content="dog, face, development, dog face development co, dog face development, python, github, bars, periodic table, periodic, table, erin, hunter, book, chooser, erin hunter book chooser"
    />
    <meta name="theme-color" content="#ff3700" />
    <meta name="msapplication-navbutton-color" content="#ff3700" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />

    <!-- Favicons -->
    <link
      rel="shortcut icon"
      href="assets/img/favicon.png"
      type="image/x-icon"
    />
    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png" />
    <link
      rel="apple-touch-icon"
      sizes="72x72"
      href="assets/img/apple-touch-icon-72x72.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="assets/img/apple-touch-icon-114x114.png"
    />

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />

    <!-- Stylesheet -->
    <link rel="stylesheet" href="outdatedbrowser/outdatedbrowser.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="assets/fonts/code-pro/stylesheet.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="assets/fonts/titillium/stylesheet.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css"
    />

    <!-- Scripts -->
    <script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
      integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    <script>
      window.addEventListener("load", function () {
        window.cookieconsent.initialise({
          palette: {
            popup: {
              background: "#000",
              text: "#ff3700",
            },
            button: {
              background: "transparent",
              text: "#ff3700",
              border: "#ff3700",
            },
          },
          type: "opt-in",
          content: {
            allow: "Allow cookies",
          },
        });
      });
    </script>

    <link
      href="http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="http://fonts.googleapis.com/css?family=Playball"
      rel="stylesheet"
      type="text/css"
    />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via  -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="tf-home">
      <div class="overlay">
        <div id="sticky-anchor"></div>
        <nav id="tf-menu" class="navbar navbar-default">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a href="index.html"
                ><img src="assets/img/logo.PNG" width="250" height="91"
              /></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div
              class="collapse navbar-collapse"
              id="bs-example-navbar-collapse-1"
            >
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#tf-home">Home</a></li>
                <li><a href="#tf-portfolio">Projects</a></li>
                <li><a href="#tf-about">About</a></li>
                <li><a href="#tf-contact">Contact</a></li>
                <li>
                  <a href="https://github.com/Dog-Face-Development/"
                    ><i class="fab fa-github"></i> GitHub</a
                  >
                </li>
              </ul>
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>

        <div class="container">
          <div class="content">
            <h1>We create modern software and websites</h1>
            <h3>that are engaging and interactive</h3>
            <br />
            <a href="#tf-portfolio" class="btn btn-primary my-btn">Projects</a>
            <a href="#tf-contact" class="btn btn-primary my-btn2">Contact</a>
          </div>
        </div>
      </div>
    </div>

    <div id="tf-service">
      <div class="container">
        <div class="col-md-4">
          <div class="media">
            <div class="media-left media-middle">
              <i class="fas fa-desktop fa-3x"></i>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Our Software</h4>
              <p>
                Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis.
                Fusce condimentum nunc ac nisi vulputate fringilla. Donec
                lacinia congue felis in faucibus.
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="media">
            <div class="media-left media-middle">
              <i class="far fa-edit fa-3x"></i>
            </div>
            <div class="media-body">
              <h4 class="media-heading">
                Custom Software and Web Design Solutions
              </h4>
              <p>
                Cras sit amet nibh libero, in gravida nulla. Cras purus odio,
                vestibulum in vulputate at, tempus viverra turpis. Fusce
                condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                congue felis in faucibus.
              </p>
            </div>
          </div>
        </div>

        <div class="col-md-4">
          <div class="media">
            <div class="media-left media-middle">
              <i class="fas fa-server fa-3x"></i>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Web Design</h4>
              <p>
                Metus scelerisque ante sollicitudin commodo. Cras purus odio,
                vestibulum in vulputate at, tempus viverra turpis. Fusce
                condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                congue felis in faucibus.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="tf-portfolio">
      <div class="container">
        <div class="section-title">
          <h3 class="promo">Our Projects</h3>
          <p>
            Click on any one of the below images to be directed to the live
            version of the website shown, or for apps to visit their GitHub
            page. You can also visit our GitHub profile<a
              id="a-special"
              href="https://github.com/Dog-Face-Development"
            >
              here</a
            >.
          </p>
          <hr />
        </div>

        <div class="space"></div>

        <div class="row">
          <div class="col-md-4">
            <a href="https://github.com/Dog-Face-Development/Bars"
              ><img src="assets/img/bars_run.png" class="img-responsive"
            /></a>
          </div>

          <div class="col-md-4">
            <a href="https://github.com/Dog-Face-Development/ProgramVer"
              ><img
                src="assets/img/programver_hello.png"
                class="img-responsive"
            /></a>
          </div>

          <div class="col-md-4">
            <a
              href="https://github.com/Dog-Face-Development/Erin-Hunter-Book-Chooser"
              ><img
                src="assets/img/erinhunter_hello.png"
                class="img-responsive"
            /></a>
          </div>
        </div>

        <div class="row toppadding">
          <div class="col-md-4">
            <a
              href="https://github.com/Dog-Face-Development/Periodic-Table-Info"
              ><img src="assets/img/periodic_hello.png" class="img-responsive"
            /></a>
          </div>

          <div class="col-md-4">
            <a href="https://github.com/Derpyface-Development-Co/Craft-Clash"
              ><img
                src="assets/img/craftclash_hello.png"
                class="img-responsive"
            /></a>
          </div>

          <div class="col-md-4">
            <a href="https://github.com/Dog-Face-Developemtn/Canning-Timer"
              ><img src="assets/img/timer_hello.png" class="img-responsive"
            /></a>
          </div>
        </div>
      </div>
    </div>

    <div id="tf-about">
      <div class="overlay">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-md-offset-6">
              <h3 class="promo">About Us</h3>
              <br />
              <p>
                Cras sit amet nibh libero, in gravida nulla. Cras purus odio,
                vestibulum in vulputate at, tempus viverra turpis. Fusce
                condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                congue felis in faucibus. Nulla vel metus scelerisque ante
                sollicitudin commodo. Cras purus odio, vestibulum in vulputate
                at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                vulputate fringilla. Donec lacinia congue felis in faucibus.
              </p>
              <p>
                Metus scelerisque ante sollicitudin commodo. Cras purus odio,
                vestibulum in vulputate at, tempus viverra turpis. Fusce
                condimentum nunc ac nisi vulputate fringilla. Donec lacinia
                congue felis in faucibus.
              </p>
              <br />
              <a href="#tf-why-us" class="btn btn-primary my-btn dark"
                >Why Hire Me</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="tf-why-us">
      <div class="overlay">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <h3 class="promo">Why Use Us?</h3>
              <br />
              <ul class="list-inline why-us">
                <li>
                  <h4>We are All Open Source</h4>
                  <p>
                    Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                    purus odio, vestibulum in vulputate at, tempus viverra
                    turpis.
                  </p>
                </li>
                <li>
                  <h4>We Create Exactly what You Want</h4>
                  <p>
                    Donec lacinia congue felis in faucibus. Cras purus odio,
                    vestibulum in vulputate at, tempus viverra turpis.
                  </p>
                </li>
                <li>
                  <h4>We Have a Large Team to Help You</h4>
                  <p>
                    Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                    purus odio, vestibulum in vulputate at, tempus viverra
                    turpis.
                  </p>
                </li>
                <li>
                  <h4>We Have Lots of Experience</h4>
                  <p>
                    Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                    purus odio, vestibulum in vulputate at, tempus viverra
                    turpis.
                  </p>
                </li>
              </ul>
              <a href="#tf-contact" class="btn btn-primary my-btn dark"
                >Contact</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="tf-contact">
      <div class="container">
        <div class="section-title">
          <h3 class="promo">Contact Us</h3>
          <p>
            Cras sit amet nibh libero, in gravida nulla. Cras purus odio,
            vestibulum in vulputate at, tempus viverra turpis.
          </p>
        </div>
        <div class="space"></div>
      </div>
    </div>

    <nav id="tf-footer">
      <div class="container">
        <div class="pull-left">
          <i class="far fa-copyright"></i>
          <p>
            2018
            <script>
              new Date().getFullYear() > 2018 &&
                document.write("-" + new Date().getFullYear());
            </script>
            Dog Face Development Co. and
            <a href="https://dribble.com/jennpereira">Jenn Pereira</a>
            <a href="https://themeforces.com">(ThemeForces.com)</a>. Icons from
            <a href="https://fontawesome.com">Font Awesome!</a> All Rights
            Reserved.
          </p>
          <p>
            <a href="/legal/terms.html">Terms & Conditions</a> - Updated January 2023 &#124; <a href="/legal/EULA.html">End User License Agreement</a>-
            Updated January 2023 &#124;
            <a href="/legal/privacy.html">Privacy Policy</a> - Updated
            January 2023 &#124;
            <a href="/legal/enviromental.html">Enviromental Policy</a>
          </p>
        </div>
        <div class="pull-right">
          <ul class="social-media list-inline">
            <li>
              <a href="mailto: willtheorangeguy@outlook.com"
                ><span class="fas fa-envelope-open"></span
              ></a>
            </li>
            <li>
              <a href="https://github.com/Dog-Face-Development/"
                ><span class="fab fa-github"></span
              ></a>
            </li>
            <li>
              <a href="#"><span class="fab fa-instagram"></span></a>
            </li>
            <li>
              <a href="#"><span class="fab fa-stack-overflow"></span></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div id="outdated"></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.1.11.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script
      src="outdatedbrowser/outdatedbrowser.min.js"
      <script
      type="text/javascript"
      src="js/bootstrap.js"
    ></script>

    <!-- Javascripts
    ================================================== -->
    <script type="text/javascript" src="js/main.js"></script>
    <script>
      //event listener: DOM ready
      function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != "function") {
          window.onload = func;
        } else {
          window.onload = function () {
            if (oldonload) {
              oldonload();
            }
            func();
          };
        }
      }
      //call plugin function after DOM ready
      addLoadEvent(function () {
        outdatedBrowser({
          bgColor: "#f25648",
          color: "#ffffff",
          lowerThan: "transform",
          languagePath: "your_path/outdatedbrowser/lang/en.html",
        });
      });
    </script>
    <script data-collect-dnt="true" async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
    <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif?collect-dnt=true" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
  </body>
</html>