HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x768
25.9 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
  <!-- open all links in the parent window -->
  <base target="_parent">
  <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      *, *:before, *:after {
        box-sizing: border-box;
      }
      a {
        color: #000;
        text-decoration: none;
      }
      img {
        display: block;
      }
      .Teaser--inPostCake {
        position: relative;
        width: 100%;
        border: 1px solid #ddd;
      }
      .Teaser__body {
        display: flex;
        flex-direction: column;
        padding: 1rem 1rem 2rem;
        background-color: #fff;
      }
      .Teaser__cake-tag,
      .Teaser__cta,
      .Teaser__dek,
      .Teaser__headline {
        text-align: center;
      }
      .Teaser__cake-tag {
        color: #ff4d57;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .Teaser__cta {
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background-color: #ff4d57;
        border-radius: 4px;
        color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .Teaser__dek {
        position: relative;
        margin-bottom: 1rem;
        max-height: 5.6em;
        overflow: hidden;
        font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;
        font-size: 14px;
        line-height: 1.3em;
      }
      .Teaser__headline {
        margin-bottom: 1rem;
        font-family: 'Playfair Display', Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
      }
      .Teaser__picture {
        width: 100%;
      }
      .Teaser__picture img {
        width: 100%;
        height: auto;
      }
      @supports (display: grid) {
        .Teaser--inPostCake {
          display: grid;
          grid-template-areas:
            'picture'
            '.......';
          grid-template-rows: min-content auto;
          grid-template-rows: -webkit-min-content auto;
          grid-template-columns: 1fr;
        }
        .Teaser__body {
          grid-area: 1 / 1 / -1 / -1;
          display: grid;
          grid-template-areas:
            'tag'
            'headline'
            'dek'
            'cta';
          grid-template-rows: [after-start] auto auto [after-end] auto auto;
          grid-template-columns: [after-start] 1fr [after-end];
          padding: 0;
        }
        .Teaser__body::after {
          content: '';
          grid-area: after;
          z-index: 1;
          height: 50.66vw;
          margin: 8vw;
          background-color: rgba(255, 255, 255, 0.9);
        }
        .Teaser__cake-tag,
        .Teaser__cta,
        .Teaser__dek,
        .Teaser__headline {
          z-index: 10;
        }
        .Teaser__cake-tag {
          grid-area: tag;
          align-self: end;
          padding: 0 calc(8vw + 1rem);
        }
        .Teaser__cta {
          grid-area: cta;
          justify-self: center;
          margin: 0 0 1.5rem;
        }
        .Teaser__dek {
          grid-area: dek;
          align-self: start;
          padding: 1.5rem 1rem 0;
        }
        .Teaser__headline {
          grid-area: headline;
          margin-bottom: 0;
          padding: 0 calc(8vw + 1rem);
        }
        .Teaser__picture {
          grid-area: picture;
          z-index: 0;
        }
        @media (min-width: 610px) {
          .Teaser--inPostCake {
            grid-template-areas:
              "picture body";
            grid-template-rows: calc(40vw - 2px);
            grid-template-columns: 60% 40%;
          }
          .Teaser__body {
            grid-area: body;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0.75rem 1.25rem;
            background-color: #fff;
          }
          .Teaser__body::after {
            content: none;
          }
          .Teaser__cake-tag,
          .Teaser__cta,
          .Teaser__dek,
          .Teaser__headline {
            text-align: left;
          }
          .Teaser__cake-tag,
          .Teaser__dek,
          .Teaser__headline {
            padding: 0;
          }
          .Teaser__cake-tag {
            margin-bottom: 0.125rem;
            font-size: 10px;
            align-self: flex-start;
          }
          .Teaser__cta {
            align-self: flex-start;
            margin: 0;
          }
          .Teaser__dek {
            align-self: auto;
            margin-bottom: 0.75rem;
            font-size: 14px;
          }
          .Teaser__headline {
            margin-bottom: 0.75rem;
            font-size: 18px;
          }
        }
        @media (min-width: 696px) {
          .Teaser__cake-tag {
            margin-bottom: 0.25rem;
            font-size: 11px;
          }
          .Teaser__dek {
            display: block;
          }
          .Teaser__headline {
            font-size: 20px;
          }
        }
        @media (min-width: 970px) {
          .Teaser__cake-tag {
            margin-bottom: 0.25rem;
            font-size: 12px;
          }
          .Teaser__dek {
            font-size: 16px;
          }
          .Teaser__headline {
            font-size: 30px;
          }
        }
        /* 300x250 ad slot */
        @media (width: 300px) and (height: 250px) {
          .Teaser--inPostCake {
            grid-template-areas:
              'picture';
            grid-template-rows: 248px;
            height: 100%;
          }
          .Teaser__body {
            z-index: 1;
            grid-template-rows: repeat(4, max-content);
            grid-template-columns: 1fr;
            grid-row-gap: 0.5rem;
            align-content: center;
            padding: 0.75rem;
            background-color: rgba(255, 255, 255, 0.75);
          }
          .Teaser__body::after {
            content: none;
          }
          .Teaser__cake-tag {
            padding: 0;
          }
          .Teaser__cta {
            margin: 0;
          }
          .Teaser__dek {
            padding: 0;
            margin: 0;
            font-size: 14px;
          }
          .Teaser__headline {
            margin-bottom: 0;
            padding: 0;
          }
          .Teaser__picture,
          .Teaser__picture img {
            height: 100%;
          }
          .Teaser__picture img {
            object-fit: cover;
          }
        }
        /* 970x250 leaderboard ad slot */
        @media (width: 970px) and (height: 250px) {
          .Teaser--inPostCake {
            grid-template-columns: 55% 45%;
            grid-template-rows: 248px;
            height: 100%;
          }
          .Teaser__dek {
            font-size: 15px;
          }
          .Teaser__headline {
            font-size: 20px;
          }
          .Teaser__picture,
          .Teaser__picture img {
            max-height: 100%;
          }
          .Teaser__picture img {
            object-fit: cover;
          }
        }
        /* 300x600 ad slot */
        @media (width: 300px) and (height: 600px) {
          .Teaser--inPostCake {
            max-height: 100%;
          }
          .Teaser__dek {
            max-height: 6.5em;
            font-size: 16px;
          }
        }
      }
    </style>
    <script>
      // JS approach per
      // https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
      function runTruncate() {
        const dek = document.querySelector('.Teaser__dek');
        const truncate = function (elem, limit, after) {
            // Make sure an element and number of items to truncate is provided
            if (!elem || !limit) return;
            // Get the inner content of the element
            var content = elem.textContent.trim();
            // Convert the content into an array of words
            var words = content.split(' ');
            // Only add ellipsis if content exceeds the limit
            var wasTruncated = words.length > limit;
            // Remove any words above the limit
            content = words.slice(0, limit);
            // Convert the array of words back into a string
            // If there's content to add after it AND content was truncated, add it
            content = content.join(' ') + (after && wasTruncated ? after : '');
            // Inject the content back into the DOM
            elem.textContent = content;
        };
        truncate(dek, 20, '...');
      }
      if (document.readyState === "loading") {  // Loading hasn't finished yet
        document.addEventListener("DOMContentLoaded", runTruncate);
      } else {  // `DOMContentLoaded` has already fired
        runTruncate();
      }
    </script>
</head>

<body>
  <a href="%%CLICK_URL_UNESC%%https://www.apartmenttherapy.com/steal-these-5-ideas-for-a-cozy-and-still-chic-tv-streaming-setup-37558291" class="Teaser Teaser--inPostCake">
      <div class="Teaser__picture">
        <picture>
          <source srcset="https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_1164,h_776/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 2x, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_582,h_388/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 1x" sizes="(min-width: 970px) 582px" media="(min-width: 970px)">
          <source srcset="https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_876,h_584/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 2x, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_438,h_292/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 1x" sizes="(min-width: 730px) 438px" media="(min-width: 730px)">
          <source srcset="https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_840,h_560/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 2x, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_420,h_280/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 1x" sizes="(min-width: 696px) 418px" media="(min-width: 696px)">
          <source srcset="https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_732,h_488/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 2x, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_366,h_244/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 1x" sizes="(min-width: 610px) 366px" media="(min-width: 610px)">
          <source srcset="https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_750,h_500/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 750w, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_609,h_406/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 609w, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_480,h_320/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 480w, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_375,h_250/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 375w, https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_330,h_220/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048 330w" sizes="100vw" media="(min-width: 0px)">
          <img src="https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fill,g_auto,w_609,h_406/https://asset.cloudinary.com/apartment-therapy-media/380f97fb4959fd64e54cf501132e4048" width="300" height="200"/>
        </picture>
      </div>
      <div class="Teaser__body">
        <div class="Teaser__cake-tag">
          Partner
        </div>

        <div class="Teaser__headline">
          Upgrade Your TV Setup for Streaming in 5 Easy Steps
        </div>

        <div class="Teaser__dek" >
          And take it to the next level with fast home internet from T-Mobile 5G Home Internet.
        </div>

        <div class="Teaser__cta">
          Keep Reading
        </div>
      </div>
    </a>
    <script type="text/javascript">
      var trackingPixel="";if(trackingPixel.indexOf("https")==0)document.write('<iframe src="'+trackingPixel+'" height="1" width="1" style="width:1px !important;height 1px !important" frameborder="0"></iframe>');
      var trackingPixel="";if(trackingPixel.indexOf("https")==0)document.write('<iframe src="'+trackingPixel+'" height="1" width="1" style="width:1px !important;height 1px !important" frameborder="0"></iframe>');
      var trackingPixel="";if(trackingPixel.indexOf("https")==0)document.write('<iframe src="'+trackingPixel+'" height="1" width="1" style="width:1px !important;height 1px !important" frameborder="0"></iframe>');
      if("None".indexOf("https")==0)document.write('<script type="text/javascript" src="None"></scr'+'ipt>');
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests