<commit_before><!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
    </head>
    <body class="demo">
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div class="container demo-container">
            <header class="demo-header">
                <h1 class="title"> Image overlay effects </h1>
            </header>
            <section>
                <ul class="row demo-1 clearfix">
                    <li class="thumbnail">
                        <div class="thumbnail__thumbnail-overlay">
                            <h3 class="title"> Article title or image title </h3>
                            <p class="caption"> This is a short block of body text. It would be a breif description of the article or title. It is so well written you just can't help yourself but to click the link. </p>
                            <a href="#"> Read more </a>
                        </div>
                        <div class="tumbnail__thumbnail-image">
                            <img src="http://placehold.it/325x325">
                        </div>
                    </li>
                    <li class="thumbnail">
                        <div class="thumbnail__thumbnail-overlay">
                            <h3 class="title"> Article title or image title </h3>
                            <p class="caption"> This is a short block of body text. It would be a breif description of the article or title. It is so well written you just can't help yourself but to click the link. </p>
                            <a href="#"> Read more </a>
                        </div>
                        <div class="tumbnail__thumbnail-image">
                            <img src="http://placehold.it/325x325">
                        </div>
                    </li>
                    <li class="thumbnail">
                        <div class="thumbnail__thumbnail-overlay">
                            <h3 class="title"> Article title or image title </h3>
                            <p class="caption"> This is a short block of body text. It would be a breif description of the article or title. It is so well written you just can't help yourself but to click the link. </p>
                            <a href="#"> Read more </a>
                        </div>
                        <div class="tumbnail__thumbnail-image">
                            <img src="http://placehold.it/325x325">
                        </div>
                    </li>
                </ul>
            </section>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><commit_msg>improvements to image and button markup<commit_after><!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Image Overlay Effect</title>
        <meta name="description" content="demo page for image overlay effects blog post based on Codrops article Fullscreen Overlay Effects">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
    </head>
    <body class="demo">
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div class="container demo-container">
            <header class="demo-header">
                <h1 class="title"> Content scale image overlay effect </h1>
            </header>
            <section>
                <ul class="row demo-1 clearfix">
                    <li class="thumbnail">
                        <div class="thumbnail__thumbnail-overlay">
                            <h3 class="title"> Article title or image title </h3>
                            <p class="caption"> This is a short block of body text. It would be a breif description of the article or title. It is so well written you just can't help yourself but to click the link. </p>
                            <a class="button button--light" href="#"> Read more <span class="button__arrow">&#8594</span> </a>
                        </div>
                        <div class="tumbnail__thumbnail-image">
                            <img src="http://lorempixel.com/325/325/city">
                        </div>
                    </li>
                    <li class="thumbnail">
                        <div class="thumbnail__thumbnail-overlay">
                            <h3 class="title"> Article title or image title </h3>
                            <p class="caption"> This is a short block of body text. It would be a breif description of the article or title. It is so well written you just can't help yourself but to click the link. </p>
                            <a class="button button--light" href="#"> Read more <span class="button__arrow">&#8594</span> </a>
                        </div>
                        <div class="tumbnail__thumbnail-image">
                            <img src="http://lorempixel.com/325/325/people">
                        </div>
                    </li>
                    <li class="thumbnail">
                        <div class="thumbnail__thumbnail-overlay">
                            <h3 class="title"> Article title or image title </h3>
                            <p class="caption"> This is a short block of body text. It would be a breif description of the article or title. It is so well written you just can't help yourself but to click the link. </p>
                            <a class="button button--light" href="#"> Read more <span class="button__arrow">&#8594</span> </a>
                        </div>
                        <div class="tumbnail__thumbnail-image">
                            <img src="http://lorempixel.com/325/325/technics">
                        </div>
                    </li>
                </ul>
            </section>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
{'fraction_non_alphanumeric': 0.12579661956220559, 'fraction_numerical': 0.011914657799944583, 'mean_word_length': 1.5644760213143871, 'pattern_counts': {'":': 0, '<': 162, '<?xml version=': 0, '>': 162, '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': '6106104', 'n_tokens_mistral': 1943, 'n_tokens_neox': 1810, 'n_words': 578}