achingachris/index.html

## index.html
 <body id="page-top">
    <!-- Navigation-->
    <nav
      class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
      id="mainNav"
    >
      <div class="container">
        <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
        <button
          class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          Menu
          <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio"
                >Portfolio</a
              >
            </li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about"
                >About</a
              >
            </li>
            <li class="nav-item mx-0 mx-lg-1">
              <a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact"
                >Contact</a
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Masthead-->
    <header class="masthead bg-primary text-white text-center">
      <div class="container d-flex align-items-center flex-column">
        <!-- Masthead Avatar Image-->
        <img
          class="masthead-avatar mb-5"
          src="assets/img/avataaars.svg"
          alt="..."
        />
        <!-- Masthead Heading-->
        <h1 class="masthead-heading text-uppercase mb-0">Start Bootstrap</h1>
        <!-- Icon Divider-->
        <div class="divider-custom divider-light">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
          <div class="divider-custom-line"></div>
        </div>
        <!-- Masthead Subheading-->
        <p class="masthead-subheading font-weight-light mb-0">
          Graphic Artist - Web Designer - Illustrator
        </p>
      </div>
    </header>
    <!-- Portfolio Section-->
    <section class="page-section portfolio" id="portfolio">
      <div class="container">
        <!-- Portfolio Section Heading-->
        <h2
          class="page-section-heading text-center text-uppercase text-secondary mb-0"
        >
          Portfolio
        </h2>
        <!-- Icon Divider-->
        <div class="divider-custom">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
          <div class="divider-custom-line"></div>
        </div>
        <!-- Portfolio Grid Items-->
        <div class="row justify-content-center">
          <!-- Portfolio Item 1-->
          <div class="col-md-6 col-lg-4 mb-5">
            <div
              class="portfolio-item mx-auto"
              data-bs-toggle="modal"
              data-bs-target="#portfolioModal1"
            >
              <div
                class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
              >
                <div
                  class="portfolio-item-caption-content text-center text-white"
                >
                  <i class="fas fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="assets/img/portfolio/cabin.png"
                alt="..."
              />
            </div>
          </div>
          <!-- Portfolio Item 2-->
          <div class="col-md-6 col-lg-4 mb-5">
            <div
              class="portfolio-item mx-auto"
              data-bs-toggle="modal"
              data-bs-target="#portfolioModal2"
            >
              <div
                class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
              >
                <div
                  class="portfolio-item-caption-content text-center text-white"
                >
                  <i class="fas fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="assets/img/portfolio/cake.png"
                alt="..."
              />
            </div>
          </div>
          <!-- Portfolio Item 3-->
          <div class="col-md-6 col-lg-4 mb-5">
            <div
              class="portfolio-item mx-auto"
              data-bs-toggle="modal"
              data-bs-target="#portfolioModal3"
            >
              <div
                class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
              >
                <div
                  class="portfolio-item-caption-content text-center text-white"
                >
                  <i class="fas fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="assets/img/portfolio/circus.png"
                alt="..."
              />
            </div>
          </div>
          <!-- Portfolio Item 4-->
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
            <div
              class="portfolio-item mx-auto"
              data-bs-toggle="modal"
              data-bs-target="#portfolioModal4"
            >
              <div
                class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
              >
                <div
                  class="portfolio-item-caption-content text-center text-white"
                >
                  <i class="fas fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="assets/img/portfolio/game.png"
                alt="..."
              />
            </div>
          </div>
          <!-- Portfolio Item 5-->
          <div class="col-md-6 col-lg-4 mb-5 mb-md-0">
            <div
              class="portfolio-item mx-auto"
              data-bs-toggle="modal"
              data-bs-target="#portfolioModal5"
            >
              <div
                class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
              >
                <div
                  class="portfolio-item-caption-content text-center text-white"
                >
                  <i class="fas fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="assets/img/portfolio/safe.png"
                alt="..."
              />
            </div>
          </div>
          <!-- Portfolio Item 6-->
          <div class="col-md-6 col-lg-4">
            <div
              class="portfolio-item mx-auto"
              data-bs-toggle="modal"
              data-bs-target="#portfolioModal6"
            >
              <div
                class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
              >
                <div
                  class="portfolio-item-caption-content text-center text-white"
                >
                  <i class="fas fa-plus fa-3x"></i>
                </div>
              </div>
              <img
                class="img-fluid"
                src="assets/img/portfolio/submarine.png"
                alt="..."
              />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- About Section-->
    <section class="page-section bg-primary text-white mb-0" id="about">
      <div class="container">
        <!-- About Section Heading-->
        <h2 class="page-section-heading text-center text-uppercase text-white">
          About
        </h2>
        <!-- Icon Divider-->
        <div class="divider-custom divider-light">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
          <div class="divider-custom-line"></div>
        </div>
        <!-- About Section Content-->
        <div class="row">
          <div class="col-lg-4 ms-auto">
            <p class="lead">
              Freelancer is a free bootstrap theme created by Start Bootstrap.
              The download includes the complete source files including HTML,
              CSS, and JavaScript as well as optional SASS stylesheets for easy
              customization.
            </p>
          </div>
          <div class="col-lg-4 me-auto">
            <p class="lead">
              You can create your own custom avatar for the masthead, change the
              icon in the dividers, and add your email address to the contact
              form to make it fully functional!
            </p>
          </div>
        </div>
        <!-- About Section Button-->
        <div class="text-center mt-4">
          <a
            class="btn btn-xl btn-outline-light"
            href="https://startbootstrap.com/theme/freelancer/"
          >
            <i class="fas fa-download me-2"></i>
            Free Download!
          </a>
        </div>
      </div>
    </section>
    <!-- Contact Section-->
    <section class="page-section" id="contact">
      <div class="container">
        <!-- Contact Section Heading-->
        <h2
          class="page-section-heading text-center text-uppercase text-secondary mb-0"
        >
          Contact Me
        </h2>
        <!-- Icon Divider-->
        <div class="divider-custom">
          <div class="divider-custom-line"></div>
          <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
          <div class="divider-custom-line"></div>
        </div>
        <!-- Contact Section Form-->
        <div class="row justify-content-center">
          <div class="col-lg-8 col-xl-7">
            <!-- * * * * * * * * * * * * * * *-->
            <!-- * * SB Forms Contact Form * *-->
            <!-- * * * * * * * * * * * * * * *-->
            <!-- This form is pre-integrated with SB Forms.-->
            <!-- To make this form functional, sign up at-->
            <!-- https://startbootstrap.com/solution/contact-forms-->
            <!-- to get an API token!-->
            <form id="contactForm" data-sb-form-api-token="API_TOKEN">
              <!-- Name input-->
              <div class="form-floating mb-3">
                <input
                  class="form-control"
                  id="name"
                  type="text"
                  placeholder="Enter your name..."
                  data-sb-validations="required"
                />
                <label for="name">Full name</label>
                <div class="invalid-feedback" data-sb-feedback="name:required">
                  A name is required.
                </div>
              </div>
              <!-- Email address input-->
              <div class="form-floating mb-3">
                <input
                  class="form-control"
                  id="email"
                  type="email"
                  placeholder="name@example.com"
                  data-sb-validations="required,email"
                />
                <label for="email">Email address</label>
                <div class="invalid-feedback" data-sb-feedback="email:required">
                  An email is required.
                </div>
                <div class="invalid-feedback" data-sb-feedback="email:email">
                  Email is not valid.
                </div>
              </div>
              <!-- Phone number input-->
              <div class="form-floating mb-3">
                <input
                  class="form-control"
                  id="phone"
                  type="tel"
                  placeholder="(123) 456-7890"
                  data-sb-validations="required"
                />
                <label for="phone">Phone number</label>
                <div class="invalid-feedback" data-sb-feedback="phone:required">
                  A phone number is required.
                </div>
              </div>
              <!-- Message input-->
              <div class="form-floating mb-3">
                <textarea
                  class="form-control"
                  id="message"
                  type="text"
                  placeholder="Enter your message here..."
                  style="height: 10rem"
                  data-sb-validations="required"
                ></textarea>
                <label for="message">Message</label>
                <div
                  class="invalid-feedback"
                  data-sb-feedback="message:required"
                >
                  A message is required.
                </div>
              </div>
              <!-- Submit success message-->
              <!---->
              <!-- This is what your users will see when the form-->
              <!-- has successfully submitted-->
              <div class="d-none" id="submitSuccessMessage">
                <div class="text-center mb-3">
                  <div class="fw-bolder">Form submission successful!</div>
                  To activate this form, sign up at
                  <br />
                  <a href="https://startbootstrap.com/solution/contact-forms"
                    >https://startbootstrap.com/solution/contact-forms</a
                  >
                </div>
              </div>
              <!-- Submit error message-->
              <!---->
              <!-- This is what your users will see when there is-->
              <!-- an error submitting the form-->
              <div class="d-none" id="submitErrorMessage">
                <div class="text-center text-danger mb-3">
                  Error sending message!
                </div>
              </div>
              <!-- Submit Button-->
              <button
                class="btn btn-primary btn-xl disabled"
                id="submitButton"
                type="submit"
              >
                Send
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- Footer-->
    <footer class="footer text-center">
      <div class="container">
        <div class="row">
          <!-- Footer Location-->
          <div class="col-lg-4 mb-5 mb-lg-0">
            <h4 class="text-uppercase mb-4">Location</h4>
            <p class="lead mb-0">
              2215 John Daniel Drive
              <br />
              Clark, MO 65243
            </p>
          </div>
          <!-- Footer Social Icons-->
          <div class="col-lg-4 mb-5 mb-lg-0">
            <h4 class="text-uppercase mb-4">Around the Web</h4>
            <a class="btn btn-outline-light btn-social mx-1" href="#!"
              ><i class="fab fa-fw fa-facebook-f"></i
            ></a>
            <a class="btn btn-outline-light btn-social mx-1" href="#!"
              ><i class="fab fa-fw fa-twitter"></i
            ></a>
            <a class="btn btn-outline-light btn-social mx-1" href="#!"
              ><i class="fab fa-fw fa-linkedin-in"></i
            ></a>
            <a class="btn btn-outline-light btn-social mx-1" href="#!"
              ><i class="fab fa-fw fa-dribbble"></i
            ></a>
          </div>
          <!-- Footer About Text-->
          <div class="col-lg-4">
            <h4 class="text-uppercase mb-4">About Freelancer</h4>
            <p class="lead mb-0">
              Freelance is a free to use, MIT licensed Bootstrap theme created
              by
              <a href="http://startbootstrap.com">Start Bootstrap</a>
              .
            </p>
          </div>
        </div>
      </div>
    </footer>
    <!-- Copyright Section-->
    <div class="copyright py-4 text-center text-white">
      <div class="container">
        <small>Copyright &copy; Your Website 2022</small>
      </div>
    </div>
    <!-- Portfolio Modals-->
    <!-- Portfolio Modal 1-->
    <div
      class="portfolio-modal modal fade"
      id="portfolioModal1"
      tabindex="-1"
      aria-labelledby="portfolioModal1"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              class="btn-close"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center pb-5">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <!-- Portfolio Modal - Title-->
                  <h2
                    class="portfolio-modal-title text-secondary text-uppercase mb-0"
                  >
                    Log Cabin
                  </h2>
                  <!-- Icon Divider-->
                  <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon">
                      <i class="fas fa-star"></i>
                    </div>
                    <div class="divider-custom-line"></div>
                  </div>
                  <!-- Portfolio Modal - Image-->
                  <img
                    class="img-fluid rounded mb-5"
                    src="assets/img/portfolio/cabin.png"
                    alt="..."
                  />
                  <!-- Portfolio Modal - Text-->
                  <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia neque assumenda ipsam nihil, molestias magnam,
                    recusandae quos quis inventore quisquam velit asperiores,
                    vitae? Reprehenderit soluta, eos quod consequuntur itaque.
                    Nam.
                  </p>
                  <button class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fas fa-xmark fa-fw"></i>
                    Close Window
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio Modal 2-->
    <div
      class="portfolio-modal modal fade"
      id="portfolioModal2"
      tabindex="-1"
      aria-labelledby="portfolioModal2"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              class="btn-close"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center pb-5">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <!-- Portfolio Modal - Title-->
                  <h2
                    class="portfolio-modal-title text-secondary text-uppercase mb-0"
                  >
                    Tasty Cake
                  </h2>
                  <!-- Icon Divider-->
                  <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon">
                      <i class="fas fa-star"></i>
                    </div>
                    <div class="divider-custom-line"></div>
                  </div>
                  <!-- Portfolio Modal - Image-->
                  <img
                    class="img-fluid rounded mb-5"
                    src="assets/img/portfolio/cake.png"
                    alt="..."
                  />
                  <!-- Portfolio Modal - Text-->
                  <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia neque assumenda ipsam nihil, molestias magnam,
                    recusandae quos quis inventore quisquam velit asperiores,
                    vitae? Reprehenderit soluta, eos quod consequuntur itaque.
                    Nam.
                  </p>
                  <button class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fas fa-xmark fa-fw"></i>
                    Close Window
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio Modal 3-->
    <div
      class="portfolio-modal modal fade"
      id="portfolioModal3"
      tabindex="-1"
      aria-labelledby="portfolioModal3"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              class="btn-close"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center pb-5">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <!-- Portfolio Modal - Title-->
                  <h2
                    class="portfolio-modal-title text-secondary text-uppercase mb-0"
                  >
                    Circus Tent
                  </h2>
                  <!-- Icon Divider-->
                  <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon">
                      <i class="fas fa-star"></i>
                    </div>
                    <div class="divider-custom-line"></div>
                  </div>
                  <!-- Portfolio Modal - Image-->
                  <img
                    class="img-fluid rounded mb-5"
                    src="assets/img/portfolio/circus.png"
                    alt="..."
                  />
                  <!-- Portfolio Modal - Text-->
                  <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia neque assumenda ipsam nihil, molestias magnam,
                    recusandae quos quis inventore quisquam velit asperiores,
                    vitae? Reprehenderit soluta, eos quod consequuntur itaque.
                    Nam.
                  </p>
                  <button class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fas fa-xmark fa-fw"></i>
                    Close Window
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio Modal 4-->
    <div
      class="portfolio-modal modal fade"
      id="portfolioModal4"
      tabindex="-1"
      aria-labelledby="portfolioModal4"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              class="btn-close"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center pb-5">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <!-- Portfolio Modal - Title-->
                  <h2
                    class="portfolio-modal-title text-secondary text-uppercase mb-0"
                  >
                    Controller
                  </h2>
                  <!-- Icon Divider-->
                  <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon">
                      <i class="fas fa-star"></i>
                    </div>
                    <div class="divider-custom-line"></div>
                  </div>
                  <!-- Portfolio Modal - Image-->
                  <img
                    class="img-fluid rounded mb-5"
                    src="assets/img/portfolio/game.png"
                    alt="..."
                  />
                  <!-- Portfolio Modal - Text-->
                  <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia neque assumenda ipsam nihil, molestias magnam,
                    recusandae quos quis inventore quisquam velit asperiores,
                    vitae? Reprehenderit soluta, eos quod consequuntur itaque.
                    Nam.
                  </p>
                  <button class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fas fa-xmark fa-fw"></i>
                    Close Window
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio Modal 5-->
    <div
      class="portfolio-modal modal fade"
      id="portfolioModal5"
      tabindex="-1"
      aria-labelledby="portfolioModal5"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              class="btn-close"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center pb-5">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <!-- Portfolio Modal - Title-->
                  <h2
                    class="portfolio-modal-title text-secondary text-uppercase mb-0"
                  >
                    Locked Safe
                  </h2>
                  <!-- Icon Divider-->
                  <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon">
                      <i class="fas fa-star"></i>
                    </div>
                    <div class="divider-custom-line"></div>
                  </div>
                  <!-- Portfolio Modal - Image-->
                  <img
                    class="img-fluid rounded mb-5"
                    src="assets/img/portfolio/safe.png"
                    alt="..."
                  />
                  <!-- Portfolio Modal - Text-->
                  <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia neque assumenda ipsam nihil, molestias magnam,
                    recusandae quos quis inventore quisquam velit asperiores,
                    vitae? Reprehenderit soluta, eos quod consequuntur itaque.
                    Nam.
                  </p>
                  <button class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fas fa-xmark fa-fw"></i>
                    Close Window
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Portfolio Modal 6-->
    <div
      class="portfolio-modal modal fade"
      id="portfolioModal6"
      tabindex="-1"
      aria-labelledby="portfolioModal6"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              class="btn-close"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body text-center pb-5">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <!-- Portfolio Modal - Title-->
                  <h2
                    class="portfolio-modal-title text-secondary text-uppercase mb-0"
                  >
                    Submarine
                  </h2>
                  <!-- Icon Divider-->
                  <div class="divider-custom">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon">
                      <i class="fas fa-star"></i>
                    </div>
                    <div class="divider-custom-line"></div>
                  </div>
                  <!-- Portfolio Modal - Image-->
                  <img
                    class="img-fluid rounded mb-5"
                    src="assets/img/portfolio/submarine.png"
                    alt="..."
                  />
                  <!-- Portfolio Modal - Text-->
                  <p class="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Mollitia neque assumenda ipsam nihil, molestias magnam,
                    recusandae quos quis inventore quisquam velit asperiores,
                    vitae? Reprehenderit soluta, eos quod consequuntur itaque.
                    Nam.
                  </p>
                  <button class="btn btn-primary" data-bs-dismiss="modal">
                    <i class="fas fa-xmark fa-fw"></i>
                    Close Window
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
	<body id="page-top">
	<!-- Navigation-->
	<nav
	class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
	id="mainNav"
	>
	<div class="container">
	<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
	<button
	class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded"
	type="button"
	data-bs-toggle="collapse"
	data-bs-target="#navbarResponsive"
	aria-controls="navbarResponsive"
	aria-expanded="false"
	aria-label="Toggle navigation"
	>
	Menu
	<i class="fas fa-bars"></i>
	</button>
	<div class="collapse navbar-collapse" id="navbarResponsive">
	<ul class="navbar-nav ms-auto">
	<li class="nav-item mx-0 mx-lg-1">
	<a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio"
	>Portfolio</a
	>
	</li>
	<li class="nav-item mx-0 mx-lg-1">
	<a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about"
	>About</a
	>
	</li>
	<li class="nav-item mx-0 mx-lg-1">
	<a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact"
	>Contact</a
	>
	</li>
	</ul>
	</div>
	</div>
	</nav>
	<!-- Masthead-->
	<header class="masthead bg-primary text-white text-center">
	<div class="container d-flex align-items-center flex-column">
	<!-- Masthead Avatar Image-->
	<img
	class="masthead-avatar mb-5"
	src="assets/img/avataaars.svg"
	alt="..."
	/>
	<!-- Masthead Heading-->
	<h1 class="masthead-heading text-uppercase mb-0">Start Bootstrap</h1>
	<!-- Icon Divider-->
	<div class="divider-custom divider-light">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Masthead Subheading-->
	<p class="masthead-subheading font-weight-light mb-0">
	Graphic Artist - Web Designer - Illustrator
	</p>
	</div>
	</header>
	<!-- Portfolio Section-->
	<section class="page-section portfolio" id="portfolio">
	<div class="container">
	<!-- Portfolio Section Heading-->
	<h2
	class="page-section-heading text-center text-uppercase text-secondary mb-0"
	>
	Portfolio
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Grid Items-->
	<div class="row justify-content-center">
	<!-- Portfolio Item 1-->
	<div class="col-md-6 col-lg-4 mb-5">
	<div
	class="portfolio-item mx-auto"
	data-bs-toggle="modal"
	data-bs-target="#portfolioModal1"
	>
	<div
	class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
	>
	<div
	class="portfolio-item-caption-content text-center text-white"
	>
	<i class="fas fa-plus fa-3x"></i>
	</div>
	</div>
	<img
	class="img-fluid"
	src="assets/img/portfolio/cabin.png"
	alt="..."
	/>
	</div>
	</div>
	<!-- Portfolio Item 2-->
	<div class="col-md-6 col-lg-4 mb-5">
	<div
	class="portfolio-item mx-auto"
	data-bs-toggle="modal"
	data-bs-target="#portfolioModal2"
	>
	<div
	class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
	>
	<div
	class="portfolio-item-caption-content text-center text-white"
	>
	<i class="fas fa-plus fa-3x"></i>
	</div>
	</div>
	<img
	class="img-fluid"
	src="assets/img/portfolio/cake.png"
	alt="..."
	/>
	</div>
	</div>
	<!-- Portfolio Item 3-->
	<div class="col-md-6 col-lg-4 mb-5">
	<div
	class="portfolio-item mx-auto"
	data-bs-toggle="modal"
	data-bs-target="#portfolioModal3"
	>
	<div
	class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
	>
	<div
	class="portfolio-item-caption-content text-center text-white"
	>
	<i class="fas fa-plus fa-3x"></i>
	</div>
	</div>
	<img
	class="img-fluid"
	src="assets/img/portfolio/circus.png"
	alt="..."
	/>
	</div>
	</div>
	<!-- Portfolio Item 4-->
	<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
	<div
	class="portfolio-item mx-auto"
	data-bs-toggle="modal"
	data-bs-target="#portfolioModal4"
	>
	<div
	class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
	>
	<div
	class="portfolio-item-caption-content text-center text-white"
	>
	<i class="fas fa-plus fa-3x"></i>
	</div>
	</div>
	<img
	class="img-fluid"
	src="assets/img/portfolio/game.png"
	alt="..."
	/>
	</div>
	</div>
	<!-- Portfolio Item 5-->
	<div class="col-md-6 col-lg-4 mb-5 mb-md-0">
	<div
	class="portfolio-item mx-auto"
	data-bs-toggle="modal"
	data-bs-target="#portfolioModal5"
	>
	<div
	class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
	>
	<div
	class="portfolio-item-caption-content text-center text-white"
	>
	<i class="fas fa-plus fa-3x"></i>
	</div>
	</div>
	<img
	class="img-fluid"
	src="assets/img/portfolio/safe.png"
	alt="..."
	/>
	</div>
	</div>
	<!-- Portfolio Item 6-->
	<div class="col-md-6 col-lg-4">
	<div
	class="portfolio-item mx-auto"
	data-bs-toggle="modal"
	data-bs-target="#portfolioModal6"
	>
	<div
	class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"
	>
	<div
	class="portfolio-item-caption-content text-center text-white"
	>
	<i class="fas fa-plus fa-3x"></i>
	</div>
	</div>
	<img
	class="img-fluid"
	src="assets/img/portfolio/submarine.png"
	alt="..."
	/>
	</div>
	</div>
	</div>
	</div>
	</section>
	<!-- About Section-->
	<section class="page-section bg-primary text-white mb-0" id="about">
	<div class="container">
	<!-- About Section Heading-->
	<h2 class="page-section-heading text-center text-uppercase text-white">
	About
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom divider-light">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- About Section Content-->
	<div class="row">
	<div class="col-lg-4 ms-auto">
	<p class="lead">
	Freelancer is a free bootstrap theme created by Start Bootstrap.
	The download includes the complete source files including HTML,
	CSS, and JavaScript as well as optional SASS stylesheets for easy
	customization.
	</p>
	</div>
	<div class="col-lg-4 me-auto">
	<p class="lead">
	You can create your own custom avatar for the masthead, change the
	icon in the dividers, and add your email address to the contact
	form to make it fully functional!
	</p>
	</div>
	</div>
	<!-- About Section Button-->
	<div class="text-center mt-4">
	<a
	class="btn btn-xl btn-outline-light"
	href="https://startbootstrap.com/theme/freelancer/"
	>
	<i class="fas fa-download me-2"></i>
	Free Download!
	</a>
	</div>
	</div>
	</section>
	<!-- Contact Section-->
	<section class="page-section" id="contact">
	<div class="container">
	<!-- Contact Section Heading-->
	<h2
	class="page-section-heading text-center text-uppercase text-secondary mb-0"
	>
	Contact Me
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Contact Section Form-->
	<div class="row justify-content-center">
	<div class="col-lg-8 col-xl-7">
	<!-- * * * * * * * * * * * * * * *-->
	<!-- * * SB Forms Contact Form * *-->
	<!-- * * * * * * * * * * * * * * *-->
	<!-- This form is pre-integrated with SB Forms.-->
	<!-- To make this form functional, sign up at-->
	<!-- https://startbootstrap.com/solution/contact-forms-->
	<!-- to get an API token!-->
	<form id="contactForm" data-sb-form-api-token="API_TOKEN">
	<!-- Name input-->
	<div class="form-floating mb-3">
	<input
	class="form-control"
	id="name"
	type="text"
	placeholder="Enter your name..."
	data-sb-validations="required"
	/>
	<label for="name">Full name</label>
	<div class="invalid-feedback" data-sb-feedback="name:required">
	A name is required.
	</div>
	</div>
	<!-- Email address input-->
	<div class="form-floating mb-3">
	<input
	class="form-control"
	id="email"
	type="email"
	placeholder="name@example.com"
	data-sb-validations="required,email"
	/>
	<label for="email">Email address</label>
	<div class="invalid-feedback" data-sb-feedback="email:required">
	An email is required.
	</div>
	<div class="invalid-feedback" data-sb-feedback="email:email">
	Email is not valid.
	</div>
	</div>
	<!-- Phone number input-->
	<div class="form-floating mb-3">
	<input
	class="form-control"
	id="phone"
	type="tel"
	placeholder="(123) 456-7890"
	data-sb-validations="required"
	/>
	<label for="phone">Phone number</label>
	<div class="invalid-feedback" data-sb-feedback="phone:required">
	A phone number is required.
	</div>
	</div>
	<!-- Message input-->
	<div class="form-floating mb-3">
	<textarea
	class="form-control"
	id="message"
	type="text"
	placeholder="Enter your message here..."
	style="height: 10rem"
	data-sb-validations="required"
	></textarea>
	<label for="message">Message</label>
	<div
	class="invalid-feedback"
	data-sb-feedback="message:required"
	>
	A message is required.
	</div>
	</div>
	<!-- Submit success message-->
	<!---->
	<!-- This is what your users will see when the form-->
	<!-- has successfully submitted-->
	<div class="d-none" id="submitSuccessMessage">
	<div class="text-center mb-3">
	<div class="fw-bolder">Form submission successful!</div>
	To activate this form, sign up at
	<br />
	<a href="https://startbootstrap.com/solution/contact-forms"
	>https://startbootstrap.com/solution/contact-forms</a
	>
	</div>
	</div>
	<!-- Submit error message-->
	<!---->
	<!-- This is what your users will see when there is-->
	<!-- an error submitting the form-->
	<div class="d-none" id="submitErrorMessage">
	<div class="text-center text-danger mb-3">
	Error sending message!
	</div>
	</div>
	<!-- Submit Button-->
	<button
	class="btn btn-primary btn-xl disabled"
	id="submitButton"
	type="submit"
	>
	Send
	</button>
	</form>
	</div>
	</div>
	</div>
	</section>
	<!-- Footer-->
	<footer class="footer text-center">
	<div class="container">
	<div class="row">
	<!-- Footer Location-->
	<div class="col-lg-4 mb-5 mb-lg-0">
	<h4 class="text-uppercase mb-4">Location</h4>
	<p class="lead mb-0">
	2215 John Daniel Drive
	<br />
	Clark, MO 65243
	</p>
	</div>
	<!-- Footer Social Icons-->
	<div class="col-lg-4 mb-5 mb-lg-0">
	<h4 class="text-uppercase mb-4">Around the Web</h4>
	<a class="btn btn-outline-light btn-social mx-1" href="#!"
	><i class="fab fa-fw fa-facebook-f"></i
	></a>
	<a class="btn btn-outline-light btn-social mx-1" href="#!"
	><i class="fab fa-fw fa-twitter"></i
	></a>
	<a class="btn btn-outline-light btn-social mx-1" href="#!"
	><i class="fab fa-fw fa-linkedin-in"></i
	></a>
	<a class="btn btn-outline-light btn-social mx-1" href="#!"
	><i class="fab fa-fw fa-dribbble"></i
	></a>
	</div>
	<!-- Footer About Text-->
	<div class="col-lg-4">
	<h4 class="text-uppercase mb-4">About Freelancer</h4>
	<p class="lead mb-0">
	Freelance is a free to use, MIT licensed Bootstrap theme created
	by
	<a href="http://startbootstrap.com">Start Bootstrap</a>
	.
	</p>
	</div>
	</div>
	</div>
	</footer>
	<!-- Copyright Section-->
	<div class="copyright py-4 text-center text-white">
	<div class="container">
	<small>Copyright © Your Website 2022</small>
	</div>
	</div>
	<!-- Portfolio Modals-->
	<!-- Portfolio Modal 1-->
	<div
	class="portfolio-modal modal fade"
	id="portfolioModal1"
	tabindex="-1"
	aria-labelledby="portfolioModal1"
	aria-hidden="true"
	>
	<div class="modal-dialog modal-xl">
	<div class="modal-content">
	<div class="modal-header border-0">
	<button
	class="btn-close"
	type="button"
	data-bs-dismiss="modal"
	aria-label="Close"
	></button>
	</div>
	<div class="modal-body text-center pb-5">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	<!-- Portfolio Modal - Title-->
	<h2
	class="portfolio-modal-title text-secondary text-uppercase mb-0"
	>
	Log Cabin
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon">
	<i class="fas fa-star"></i>
	</div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Modal - Image-->
	<img
	class="img-fluid rounded mb-5"
	src="assets/img/portfolio/cabin.png"
	alt="..."
	/>
	<!-- Portfolio Modal - Text-->
	<p class="mb-4">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	Mollitia neque assumenda ipsam nihil, molestias magnam,
	recusandae quos quis inventore quisquam velit asperiores,
	vitae? Reprehenderit soluta, eos quod consequuntur itaque.
	Nam.
	</p>
	<button class="btn btn-primary" data-bs-dismiss="modal">
	<i class="fas fa-xmark fa-fw"></i>
	Close Window
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Portfolio Modal 2-->
	<div
	class="portfolio-modal modal fade"
	id="portfolioModal2"
	tabindex="-1"
	aria-labelledby="portfolioModal2"
	aria-hidden="true"
	>
	<div class="modal-dialog modal-xl">
	<div class="modal-content">
	<div class="modal-header border-0">
	<button
	class="btn-close"
	type="button"
	data-bs-dismiss="modal"
	aria-label="Close"
	></button>
	</div>
	<div class="modal-body text-center pb-5">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	<!-- Portfolio Modal - Title-->
	<h2
	class="portfolio-modal-title text-secondary text-uppercase mb-0"
	>
	Tasty Cake
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon">
	<i class="fas fa-star"></i>
	</div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Modal - Image-->
	<img
	class="img-fluid rounded mb-5"
	src="assets/img/portfolio/cake.png"
	alt="..."
	/>
	<!-- Portfolio Modal - Text-->
	<p class="mb-4">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	Mollitia neque assumenda ipsam nihil, molestias magnam,
	recusandae quos quis inventore quisquam velit asperiores,
	vitae? Reprehenderit soluta, eos quod consequuntur itaque.
	Nam.
	</p>
	<button class="btn btn-primary" data-bs-dismiss="modal">
	<i class="fas fa-xmark fa-fw"></i>
	Close Window
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Portfolio Modal 3-->
	<div
	class="portfolio-modal modal fade"
	id="portfolioModal3"
	tabindex="-1"
	aria-labelledby="portfolioModal3"
	aria-hidden="true"
	>
	<div class="modal-dialog modal-xl">
	<div class="modal-content">
	<div class="modal-header border-0">
	<button
	class="btn-close"
	type="button"
	data-bs-dismiss="modal"
	aria-label="Close"
	></button>
	</div>
	<div class="modal-body text-center pb-5">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	<!-- Portfolio Modal - Title-->
	<h2
	class="portfolio-modal-title text-secondary text-uppercase mb-0"
	>
	Circus Tent
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon">
	<i class="fas fa-star"></i>
	</div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Modal - Image-->
	<img
	class="img-fluid rounded mb-5"
	src="assets/img/portfolio/circus.png"
	alt="..."
	/>
	<!-- Portfolio Modal - Text-->
	<p class="mb-4">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	Mollitia neque assumenda ipsam nihil, molestias magnam,
	recusandae quos quis inventore quisquam velit asperiores,
	vitae? Reprehenderit soluta, eos quod consequuntur itaque.
	Nam.
	</p>
	<button class="btn btn-primary" data-bs-dismiss="modal">
	<i class="fas fa-xmark fa-fw"></i>
	Close Window
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Portfolio Modal 4-->
	<div
	class="portfolio-modal modal fade"
	id="portfolioModal4"
	tabindex="-1"
	aria-labelledby="portfolioModal4"
	aria-hidden="true"
	>
	<div class="modal-dialog modal-xl">
	<div class="modal-content">
	<div class="modal-header border-0">
	<button
	class="btn-close"
	type="button"
	data-bs-dismiss="modal"
	aria-label="Close"
	></button>
	</div>
	<div class="modal-body text-center pb-5">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	<!-- Portfolio Modal - Title-->
	<h2
	class="portfolio-modal-title text-secondary text-uppercase mb-0"
	>
	Controller
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon">
	<i class="fas fa-star"></i>
	</div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Modal - Image-->
	<img
	class="img-fluid rounded mb-5"
	src="assets/img/portfolio/game.png"
	alt="..."
	/>
	<!-- Portfolio Modal - Text-->
	<p class="mb-4">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	Mollitia neque assumenda ipsam nihil, molestias magnam,
	recusandae quos quis inventore quisquam velit asperiores,
	vitae? Reprehenderit soluta, eos quod consequuntur itaque.
	Nam.
	</p>
	<button class="btn btn-primary" data-bs-dismiss="modal">
	<i class="fas fa-xmark fa-fw"></i>
	Close Window
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Portfolio Modal 5-->
	<div
	class="portfolio-modal modal fade"
	id="portfolioModal5"
	tabindex="-1"
	aria-labelledby="portfolioModal5"
	aria-hidden="true"
	>
	<div class="modal-dialog modal-xl">
	<div class="modal-content">
	<div class="modal-header border-0">
	<button
	class="btn-close"
	type="button"
	data-bs-dismiss="modal"
	aria-label="Close"
	></button>
	</div>
	<div class="modal-body text-center pb-5">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	<!-- Portfolio Modal - Title-->
	<h2
	class="portfolio-modal-title text-secondary text-uppercase mb-0"
	>
	Locked Safe
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon">
	<i class="fas fa-star"></i>
	</div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Modal - Image-->
	<img
	class="img-fluid rounded mb-5"
	src="assets/img/portfolio/safe.png"
	alt="..."
	/>
	<!-- Portfolio Modal - Text-->
	<p class="mb-4">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	Mollitia neque assumenda ipsam nihil, molestias magnam,
	recusandae quos quis inventore quisquam velit asperiores,
	vitae? Reprehenderit soluta, eos quod consequuntur itaque.
	Nam.
	</p>
	<button class="btn btn-primary" data-bs-dismiss="modal">
	<i class="fas fa-xmark fa-fw"></i>
	Close Window
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Portfolio Modal 6-->
	<div
	class="portfolio-modal modal fade"
	id="portfolioModal6"
	tabindex="-1"
	aria-labelledby="portfolioModal6"
	aria-hidden="true"
	>
	<div class="modal-dialog modal-xl">
	<div class="modal-content">
	<div class="modal-header border-0">
	<button
	class="btn-close"
	type="button"
	data-bs-dismiss="modal"
	aria-label="Close"
	></button>
	</div>
	<div class="modal-body text-center pb-5">
	<div class="container">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	<!-- Portfolio Modal - Title-->
	<h2
	class="portfolio-modal-title text-secondary text-uppercase mb-0"
	>
	Submarine
	</h2>
	<!-- Icon Divider-->
	<div class="divider-custom">
	<div class="divider-custom-line"></div>
	<div class="divider-custom-icon">
	<i class="fas fa-star"></i>
	</div>
	<div class="divider-custom-line"></div>
	</div>
	<!-- Portfolio Modal - Image-->
	<img
	class="img-fluid rounded mb-5"
	src="assets/img/portfolio/submarine.png"
	alt="..."
	/>
	<!-- Portfolio Modal - Text-->
	<p class="mb-4">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
	Mollitia neque assumenda ipsam nihil, molestias magnam,
	recusandae quos quis inventore quisquam velit asperiores,
	vitae? Reprehenderit soluta, eos quod consequuntur itaque.
	Nam.
	</p>
	<button class="btn btn-primary" data-bs-dismiss="modal">
	<i class="fas fa-xmark fa-fw"></i>
	Close Window
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>