<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

  <style>
    @import url('https://fonts.cdnfonts.com/css/euclid-circular-a');

*{
    font-family: 'Euclid Circular A', sans-serif;
    /* box-sizing: border-box; */
    margin: 0;
    padding: 0;

}
.contact-container{
    max-width: 1720px;
    margin: 0 auto;
    padding: 20px 60px;
}
    .section-1{
        background-color: #f9f9f9;

    }

    .form-box {
      background-color: #fff;
      border-radius: 8px;
      padding: 30px;
      border: 1px solid #eee;
    }

    .form-title {
padding-top: 40px;
font-weight: 700;
font-size: 33px;
line-height: 100%;
letter-spacing: 0%;
text-transform: uppercase;

    }

    .form-subtext {
      color: #333;
      margin: 25px 0;
font-weight: 400;
font-size: 16px;
line-height: 160%;
letter-spacing: 0px;

    }

    .form-control,
    .form-check-input {
      border: 1px solid rgb(42, 95, 141);
      border-radius: 6px;
      font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;
color: #080D17;
padding: 15px;
    }

    .form-control:focus {
      box-shadow: none;
      border-color: #a80036;
    }

    .required-star {
      color: #a80036;
    }

    .validation-label {
      color:#AB0635;
      margin-right: 10px;
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
vertical-align: middle;

    }

    .send-btn {
      padding: 30px 0;
      text-align: center;
    }

    .btn-custom {
      background-color: transparent;
      color: #000;
      font-weight: 400;
      padding: 15px 30px;
      border: 1px solid #AC0636;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      background-color: white;
    }
    .btn-custom:hover{
        background-color: #f9f9f9;
        border: 1px solid #AC0636;
    }

    .btn-custom span.icon {
      background-color: #AC0636;
      color: white;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
    .editor-container {
        border: 1px solid rgb(42, 95, 141);
  border-radius: 6px;
  overflow: hidden;

}

.editor-toolbar {
  background-color: #efeded;
  padding: 8px 25px;
  display: flex;

  
}

.editor-toolbar button {
  background: rgb(245 245 245);
  border: none;
  color: rgb(75, 75, 75);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  
}

.editor-toolbar button img {
  display: inline-block;
  vertical-align: middle;
}

.editor-textarea {
  width: 100%;
  min-height: 220px;
  padding: 20px;
  border: none;
  resize: none;
  font-size: 16px;
  outline: none;

}
.section-2{
  background-color: white;
}
    
    .contact-section {
 
      padding: 40px 60px;
    }
    .contact-box {
      background-color: #f3f6f9;
  padding: 40px 10px;     
    }
    .contact-box p{
      margin-top: 20px;    }
    .third-card{
      padding: 75px 20px;
    }
    .second-card .contact-box:nth-child(1) {
      padding: 15px;
    }
    .second-card .contact-box:nth-child(2) {
      padding: 15px;
    }
    .second-card .contact-box p{
      margin: 0;
    }
    .fourth-card p{
      margin: 14px 0;
    }
    strong{
      font-weight: 500;
    }
   
    .contact-icon {
      width: 55px;
      height: 55px;
      border: 1px solid #a80036;
      border-radius: 50%;
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
    }
   
    .contact-icon i {
      color:white;
      font-size: 14px;
      background-color:#AB0635;
      border-radius: 50px;
      padding: 10px;
    }
    .contact-info strong {
      color: #000;
    }
    .contact-email a {
      color: #000;
      text-decoration: underline;
    }
    .visit-section {
      padding: 60px;
    }

    .visit-box {
      border: 2px solid #AB0635;
      border-radius: 10px;
      padding: 35px 12px;
      background-color: #ffffff;
      height: 540px;
    }

    .visit-box h3 {
      font-weight: 800;
      font-size: 35px;
      margin-bottom: 30px;
color: #080D17;
    }

    .visit-box h5 {
      color: #AB0635;
      font-weight: 500;
      font-size: 19px;
      margin-bottom: 20px;
    }

    .visit-box p,
    .directions-text p {
      font-size: 16px;
      margin-bottom: 30px;
      color: #333;
    }

    .directions-text h5 {
      font-weight:500;
      font-size: 19px;
      margin-bottom: 20px;
    }
    .directions-text p{
      line-height: 28px;
    }
    .map-frame {
      border-radius: 10px;
      overflow: hidden;
      border: none;
      width: 93%;
      height: 380px;
    }

    .highlight {
      font-weight: 500;
      border-bottom: 2px solid #080D17;
      color: #080D17;

    }
    .highlight a{
        text-decoration: none;
        color: #080D17;
    }
    .section-4{
      background-color: #F9F9F9;
    }
    
    .expect-section {
      padding: 60px 0px;
      max-width: 1720px;
      margin: 0 auto;
    }

    .expect-box {
      background-color: white;
      border-radius: 15px;
      padding: 40px 30px;
    max-width: 1720px;
    margin: 0px 60px;
    }

    .expect-box h3 {
      font-weight: 600;
      color: #AB0635;
      margin-bottom: 30px;
      font-size: 25px;
    }

    .expect-box p {
      font-size: 19px;
      line-height: 1.7;
      margin-bottom: 30px;
      font-weight: 400;
    }

    .expect-box ol {
      padding-left: 20px;
      margin-bottom: 0;
    }

    .expect-box ol li {
      font-size: 19px;
      font-weight: 500;
      margin-bottom: 15px;
      color: #080D17;
    }
    @media only screen and (max-width:600px){
        .expect-box{
            margin: 0px 20px;
            padding: 40px 20px;
        }
    }
    @media (max-width:450px) {
        .contact-container{
            padding: 20px;
        }
    }


  </style>

<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var 
[]
 = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script><script src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js" type="text/javascript"></script><script src="https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js" type="text/javascript"></script>

<script type="text/javascript" class="flasher-js">(function() {    var rootScript = 'https://cdn.jsdelivr.net/npm/@flasher/flasher@1.3.2/dist/flasher.min.js';    var FLASHER_FLASH_BAG_PLACE_HOLDER = {};    var options = mergeOptions([], 
[]
);    function mergeOptions(first, second) {        return {            context: merge(first.context || {}, second.context || {}),            envelopes: merge(first.envelopes || [], second.envelopes || []),            options: merge(first.options || {}, second.options || {}),            scripts: merge(first.scripts || [], second.scripts || []),            styles: merge(first.styles || [], second.styles || []),        };    }    function merge(first, second) {        if (Array.isArray(first) && Array.isArray(second)) {            return first.concat(second).filter(function(item, index, array) {                return array.indexOf(item) === index;            });        }        return Object.assign({}, first, second);    }    function renderOptions(options) {        if(!window.hasOwnProperty('flasher')) {            console.error('Flasher is not loaded');            return;        }        requestAnimationFrame(function () {            window.flasher.render(options);        });    }    function render(options) {        if ('loading' !== document.readyState) {            renderOptions(options);            return;        }        document.addEventListener('DOMContentLoaded', function() {            renderOptions(options);        });    }    if (1 === document.querySelectorAll('script.flasher-js').length) {        document.addEventListener('flasher:render', function (event) {            render(event.detail);        });            }    if (window.hasOwnProperty('flasher') || !rootScript || document.querySelector('script[src="' + rootScript + '"]')) {        render(options);    } else {        var tag = document.createElement('script');        tag.setAttribute('src', rootScript);        tag.setAttribute('type', 'text/javascript');        tag.onload = function () {            render(options);        };        document.head.appendChild(tag);    }})();</script>

  <body data-aos-easing="ease" data-aos-duration="1200" data-aos-delay="0">
<section class="section-1">
  <div class="contact contact-container">
    <div class="form-title">CONTACT FORM</div>
    <p class="form-subtext">
      If you can’t find the answer to your question, please fill out the contact form below,
      and our support team will get back to you as soon as possible.
    </p>
  
    <div class="form-box">
      <form>
        <div class="row g-3 mb-3">
          <div class="col-md-4">
            <input type="email" class="form-control" placeholder="Send Email To*">
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" placeholder="From Sender Name*">
          </div>
          <div class="col-md-4">
            <input type="email" class="form-control" placeholder="From Sender Email*">
          </div>
        </div>
  
        <div class="mb-3">
          <input type="text" class="form-control" placeholder="Subject*">
        </div>
  
        <div class="d-flex align-items-center mb-3 flex-wrap gap-3">
        
          
          <input class="form-check-input" type="checkbox">
          <span>I am not a robot</span>
          
        </div>
  
        
        <div class="editor-container">
            <div class="editor-toolbar">
              <button type="button"><b>B</b></button>
              <button type="button"><i>I</i></button>
              <button type="button"><u>U</u></button>
              <button type="button"><img src="your-image-icon-url.png" alt="Img" width="18" height="18"></button>
            </div>
            <textarea class="editor-textarea" placeholder="Message *"></textarea>
          </div>
          
  
       
      </form>
      
    </div>
    <div class="send-btn">
      <button type="submit" class="btn btn-custom">
        Send Email
        <span class="icon">→</span>
      </button>
    </div>
  </div>
</section>

<section class="section-2">
  <div class="contact-container contact-section">
    <div class="row text-center g-3">
      <div class="col-md-3">
        <div class="contact-box">
          <div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
          <div class="contact-info">
            <p>St. Charles County Historical Society<br>
            Old Market House<br>
            101 South Main Street<br>
            St. Charles, Missouri 63301</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 second-card">
        <div class="contact-box">
          <div class="contact-icon"><i class="fas fa-phone"></i></div>
          <p>(636) 946-9828</p>
        </div>
        <div class="contact-box mt-3">
          <div class="contact-icon"><i class="fas fa-globe"></i></div>
          <p>Content Manager: <strong>Tamra Alexander</strong></p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="contact-box  third-card">
          <div class="contact-icon"><i class="fas fa-envelope"></i></div>
          <p class="contact-email">General Inquiry: <a href="mailto:contact@scchs.org">contact@scchs.org</a></p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="contact-box  fourth-card">
          <div class="contact-icon"><i class="fas fa-users"></i></div>
          <p>Archivist: <strong>Amy Haake</strong></p>
           <p>Director of Administration: <strong>Julia Jacobs</strong></p>
         <p> Executive Secretary: <strong>Vacant</strong></p>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="contact-container visit-section">
    <div class="row g-5 align-items-start">
      <div class="col-md-4">
        <div class="visit-box">
          <h3>VISIT US</h3>
          <h5>Address</h5>
          <p>101 S. Main Street<br>
             Saint Charles, MO 63301<br>
             At the corner of Main and Jefferson Streets.</p>
             <p>Please see <span class="highlight"><a href="https://maps.app.goo.gl/WYQrUAxRmc4682cAA">GeoHash</a></span> for maps and downloadable waypoint information.</p>
        </div>
      </div>
      <div class="col-md-8">
        <div class="directions-text">
          <h5>Location and Directions</h5>
          <p>The Society and its archives occupy the Old Market House located at 101 S. Main Street in St. Charles, MO. The building began as a Market and Fish House in the 1830s. At one time, the St. Charles City Hall and Police Station occupied the building. The building is on the National Register of Historic Landmarks as the old City Hall.</p>
        </div>
        <iframe class="map-frame" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3112.448308465274!2d-90.4821043846548!3d38.781587779592246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87df2bb46e0f0c7f%3A0xf126a2071a567160!2s101%20S%20Main%20St%2C%20St%20Charles%2C%20MO%2063301!5e0!3m2!1sen!2sus!4v1649870136521!5m2!1sen!2sus" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </div>
</section>



<section class="section-4">
  <div class=" expect-section">
    <div class="expect-box">
      <h3>What to Expect When You Visit the Archives</h3>
      <p>
        You’ll have the help of one of our many knowledgeable volunteers to help you search through our collections and help you find what you’re looking for. However, it is most helpful for our staff and volunteers if you know what you’re looking for when you visit us. Knowing the names you’re looking for and the types of records would be great! But if you don’t know exactly what you’re looking for, that’s okay! We’re here to help you find all that we have.
      </p>
      <ol>
        <li>You will be assisted in your research by knowledgeable research assistants.</li>
        <li>You will have access to our total range of collections.</li>
        <li>You will be able to download information to thumb drives from microfilm.</li>
        <li>You can purchase copies of photographs in our extensive collection.</li>
        <li>You will find accessible parking and entry at the rear of the building.</li>
      </ol>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">