<commit_before>---
permalink: /elements/
layout: raw
title: Elements
description: List of elements and their styles
---
{% include breadcrumb.html %}
<section class="section-main">
<div markdown="1" class="container">
<h2>Layout and Columns</h2>
  <div class="gray-box margin-bottom">
  <h3>One Column</h3>
  <p>this is a single column. This is the default, and is just the result of using the <code>container</code> class. No <code>row</code> class needed.</p></div>
  <div class="row-container">
  <div class="column-50">
  <div class="gray-box">
    <h3>Half Column</h3>
    <p>This is a half column, which requires a div with a <code>row-container</code> class and then 2 divs with the <code>column-50</code> class.</p>
  </div>
  </div>
  <div class="column-50">
    <div class="gray-box">
    <h3>Half Column</h3>
    <p>This will create 2 columns on large and medium screens and then collapse to one column on smaller screens (less than 768px).</p>
    </div>
  </div>
</div>

<div class="row-container">
  <div class="column-33 ">
  <div class="gray-box"><h3>Three Columns</h3>
  <p>This is a 33% column, which requires a div with a <code>row-container</code> class and then 3 divs with the <code>column-33</code> class.</p>
  </div>
  </div>

   <div class="column-33 ">
  <div class="gray-box"><h3>Three Columns</h3>
   <p>This will display as 3 columns on large and medium displays, then turns to 2 columns on smaller displays (768px to 992px).</p>
  </div>
  </div>

   <div class="column-33 ">
  <div class="gray-box"><h3>Three Columns</h3>
  <p>On mobile/small displays this will display as one column (less than 768px).</p>
  </div>
  </div>
</div>

<div class="row-container">
  <div class="column-33 ">
  <div class="gray-box"><h3>One Third</h3>
  <p>This is a 33% column - <code>column-33</code> class.</p>
  </div>
  </div>

   <div class="column-66 ">
  <div class="gray-box"><h3>Two thirds</h3>
   <p>This is a 66% column, which uses the <code>column-66</code> class..</p>
  </div>
  </div>
</div>

<div class="row-container">
  <div class="column-66 ">
  <div class="gray-box"><h3>This is IMPORTANT!</h3>
  <p>Hopefully this is all displaying properly and looks good, BUT, you should know that this was created by one guy whose day job is NOT web design. I use this base CSS on my company's website, which is very important to me, use it at your own risk.</p>
  </div>
  </div>

   <div class="column-33 ">
  <div class="gray-box"><h3>Pro Lab Prints</h3>
   <p>Looking for an <a href="http://prolabprints.com">AWESOME Pro Lab</a> to print your photos? Check out the inspiration for this theme - <a href="http://prolabprints.com">ProLabPrints.com</a>.</p>
  </div>
  </div>
</div>

<h1 class="headline">H1 Headline</h1>
```<h1 class="headline">H1 Headline</h1>```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

---

# H1 tag
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<commit_msg>links to ssl<commit_after>---
permalink: /elements/
layout: raw
title: Elements
description: List of elements and their styles
---
{% include breadcrumb.html %}
<section class="section-main">
<div markdown="1" class="container">
<h2>Layout and Columns</h2>
  <div class="gray-box margin-bottom">
  <h3>One Column</h3>
  <p>this is a single column. This is the default, and is just the result of using the <code>container</code> class. No <code>row</code> class needed.</p></div>
  <div class="row-container">
  <div class="column-50">
  <div class="gray-box">
    <h3>Half Column</h3>
    <p>This is a half column, which requires a div with a <code>row-container</code> class and then 2 divs with the <code>column-50</code> class.</p>
  </div>
  </div>
  <div class="column-50">
    <div class="gray-box">
    <h3>Half Column</h3>
    <p>This will create 2 columns on large and medium screens and then collapse to one column on smaller screens (less than 768px).</p>
    </div>
  </div>
</div>

<div class="row-container">
  <div class="column-33 ">
  <div class="gray-box"><h3>Three Columns</h3>
  <p>This is a 33% column, which requires a div with a <code>row-container</code> class and then 3 divs with the <code>column-33</code> class.</p>
  </div>
  </div>

   <div class="column-33 ">
  <div class="gray-box"><h3>Three Columns</h3>
   <p>This will display as 3 columns on large and medium displays, then turns to 2 columns on smaller displays (768px to 992px).</p>
  </div>
  </div>

   <div class="column-33 ">
  <div class="gray-box"><h3>Three Columns</h3>
  <p>On mobile/small displays this will display as one column (less than 768px).</p>
  </div>
  </div>
</div>

<div class="row-container">
  <div class="column-33 ">
  <div class="gray-box"><h3>One Third</h3>
  <p>This is a 33% column - <code>column-33</code> class.</p>
  </div>
  </div>

   <div class="column-66 ">
  <div class="gray-box"><h3>Two thirds</h3>
   <p>This is a 66% column, which uses the <code>column-66</code> class..</p>
  </div>
  </div>
</div>

<div class="row-container">
  <div class="column-66 ">
  <div class="gray-box"><h3>This is IMPORTANT!</h3>
  <p>Hopefully this is all displaying properly and looks good, BUT, you should know that this was created by one guy whose day job is NOT web design. I use this base CSS on my company's website, which is very important to me, use it at your own risk.</p>
  </div>
  </div>

   <div class="column-33 ">
  <div class="gray-box"><h3>Pro Lab Prints</h3>
   <p>Looking for an <a href="https://prolabprints.com">AWESOME Pro Lab</a> to print your photos? Check out the inspiration for this theme - <a href="https://prolabprints.com">ProLabPrints.com</a>.</p>
  </div>
  </div>
</div>

<h1 class="headline">H1 Headline</h1>
```<h1 class="headline">H1 Headline</h1>```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

---

# H1 tag
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
{'fraction_non_alphanumeric': 0.15046829418086904, 'fraction_numerical': 0.024259173959772763, 'mean_word_length': 3.908816880180859, 'pattern_counts': {'":': 0, '<': 231, '<?xml version=': 0, '>': 231, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '44916', 'n_tokens_mistral': 2406, 'n_tokens_neox': 2277, 'n_words': 785}