<commit_before><style>
  div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    max-width: 650px;
    height: 100px;
  }

  img {
    align-content: center;
    height: 100%;
    width: 100%;
  }
</style>

<div>
<center>
  <%= image_tag 'mesch.png' %>
  <h2>Questions?</h2>
  Email us at: <br>
  <a href="mailto:<EMAIL>"> <EMAIL> </a>
</center>
</div>
<commit_msg>Interactive about page<commit_after><style>
  .content {
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    max-width: 750px;
    height: 700px;
  }

  .hovereffect {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
  }

  .hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.2s ease-out 0.8s;
    transition: all 0.2s ease-out 0.8s;
  }

  .hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0px;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }

  .hovereffect img {
    display: block;
    position: relative;
  }

  .hovereffect h2 {
    text-transform: uppercase;
    color: #000;
    text-align: center;
    position: relative;
    font-size: 36px;
    padding: 10px;
    opacity: 0;
  }

  .hovereffect:hover h2 {
    opacity: 1;
  }

  .hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    font-size: 18px;
    text-transform: uppercase;
    margin: 50px 0 0 0;
    background-color: transparent;
    opacity: 0;
    -webkit-transition: all ease-in-out 0.4s;
    transition: all ease-in-out 0.4s;
  }

  .hovereffect:hover a.info {
    box-shadow: 0 0 5px #000;
    color: #000;
    border: 1px solid #000;
    opacity: 1;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .hovereffect:hover .shift {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 150px;
  }
</style>

<div class="content">
    <div class="hovereffect">
        <%= image_tag 'mesch.png', class: 'img-responsive', alt: 'MESCH' %>
        <div class="overlay">
           <div class="shift">
             <h2>Questions?</h2>
             <p style="font-size: 28px">Email us at: </p>
             <a class="info" href="mailto:<EMAIL>"> <EMAIL> </a>
           </div>
        </div>
    </div>
</div>

{'fraction_non_alphanumeric': 0.1513959889893826, 'fraction_numerical': 0.05151395988989382, 'mean_word_length': 2.2868217054263567, 'pattern_counts': {'":': 0, '<': 36, '<?xml version=': 0, '>': 36, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3606112', 'n_tokens_mistral': 1067, 'n_tokens_neox': 955, 'n_words': 233}