<commit_before><!DOCTYPE html>
<head>
  <title>Your page title here</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="../stylesheets/blogs.css">
</head>

<main>
  <h1>The CSS Box Model</h1>
  <h2>The difference between Margin, Border, and Padding</h2>
  <h4>May 31, 2015</h4>

  <section>
    <p>
      Pushing pixels can drive you crazy. The art of arranging things on a screen in a pleasing and useful manner is the done with the magic of HTML and CSS. HTML makes up the bones. Paragraphs are identified separately from headings and image urls are linked from their source. CSS, on the other hand, is what make a website interesting and functional. Without CSS, the internet would look like this:
      <img src= ../imgs/"html.png" />


    </p>
    <p>
      You should be thankful for CSS. I was not thankful for CSS when I was doing this week's CSS challenges. It can be very difficult to keep the box model CSS runs on when you're dealing with a lot of elements. Here's a simple explanation that will make your life with CSS much easier if you can remember it.
    </p>
    <p>
        A webpage is made up of boxes, or boxed areas sitting next to and on top of eachother, that contain content in the middle. The content can be an image, words, a cat video, or anything else you can find on the internet. That content can have a border, just like a picture can have a frame. This border can be manipulated in three ways (that I know of at this point): it can be dashed or solid (or a few other possibilities but you get the point), it can be any color, and it can be any size. Between the content and the border is what's known as padding. This padding is only space, but can really confuse you if you don't understand where it goes. Oftentimes an element's padding will default to the color of the content or the border. For this reason, changing the size of the padding may appear to change the size of the content itself if it is simply a colored box or button. Do not be alarmed, change the color of the padding and you'll see your intended changes. Finally, we come to the margins. Everyone knows what margins are so they don't need much explanation, except to remember that margins are not only the space between the element and the walls of the page, but can also refer to the space between the element and the elements around it.
    </p>
    <p>
      There you have it. The four elements of the elements of CSS. If you master the manitpulation of these four properties, you can have a nice
      box-y website up and running in no time.
    </p>
  </section>
</main>
<commit_msg>Fix syntax error in image link, second technical blog post<commit_after><!DOCTYPE html>
<head>
  <title>Your page title here</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="../stylesheets/blogs.css">
</head>

<main>
  <h1>The CSS Box Model</h1>
  <h2>The difference between Margin, Border, and Padding</h2>
  <h4>May 31, 2015</h4>

  <section>
    <p>
      Pushing pixels can drive you crazy. The art of arranging things on a screen in a pleasing and useful manner is the done with the magic of HTML and CSS. HTML makes up the bones. Paragraphs are identified separately from headings and image urls are linked from their source. CSS, on the other hand, is what make a website interesting and functional. Without CSS, the internet would look like this:
      <img src= "../imgs/"html.png" />


    </p>
    <p>
      You should be thankful for CSS. I was not thankful for CSS when I was doing this week's CSS challenges. It can be very difficult to keep the box model CSS runs on when you're dealing with a lot of elements. Here's a simple explanation that will make your life with CSS much easier if you can remember it.
    </p>
    <p>
        A webpage is made up of boxes, or boxed areas sitting next to and on top of eachother, that contain content in the middle. The content can be an image, words, a cat video, or anything else you can find on the internet. That content can have a border, just like a picture can have a frame. This border can be manipulated in three ways (that I know of at this point): it can be dashed or solid (or a few other possibilities but you get the point), it can be any color, and it can be any size. Between the content and the border is what's known as padding. This padding is only space, but can really confuse you if you don't understand where it goes. Oftentimes an element's padding will default to the color of the content or the border. For this reason, changing the size of the padding may appear to change the size of the content itself if it is simply a colored box or button. Do not be alarmed, change the color of the padding and you'll see your intended changes. Finally, we come to the margins. Everyone knows what margins are so they don't need much explanation, except to remember that margins are not only the space between the element and the walls of the page, but can also refer to the space between the element and the elements around it.
    </p>
    <p>
      There you have it. The four elements of the elements of CSS. If you master the manitpulation of these four properties, you can have a nice
      box-y website up and running in no time.
    </p>
  </section>
</main>

{'fraction_non_alphanumeric': 0.05853474320241692, 'fraction_numerical': 0.004909365558912387, 'mean_word_length': 3.511925042589438, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, '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': '6475426', 'n_tokens_mistral': 1414, 'n_tokens_neox': 1344, 'n_words': 895}