cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html;charset=UTF-8" http-equiv="Content-Type"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>RELEVANT This Week - 07/05/2017</title><style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }

      table, td {
        border-collapse:collapse;
      }
      
      /** font families **/
      
      @font-face {
        font-family: 'Bio Sans';
        font-style: normal;
        font-weight: 400;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/bio-sans.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Bio Sans';
        font-style: normal;
        font-weight: 600;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/bio-sans-bold.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Cartograph Mono CF';
        font-style: normal;
        font-weight: 500;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/cartograph-mono-cf-demi-bold.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Manifold CF';
        font-style: normal;
        font-weight: 400;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/manifold-cf.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Manifold CF';
        font-style: italic;
        font-weight: 400;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/manifold-cf-regular-oblique.woff2') format('woff2');
      }

      @font-face {
        font-family: 'Manifold CF';
        font-style: normal;
        font-weight: 600;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/manifold-cf-bold.woff2') format('woff2');
      }
      
      @font-face {
        font-family: 'Merriweather';
        font-style: normal;
        font-weight: 900;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/Merriweather-Black.ttf') format('truetype');
      }
      
      @font-face {
        font-family: 'Merriweather';
        font-style: italic;
        font-weight: 900;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/Merriweather-BlackItalic.ttf') format('truetype');
      }
      
      @font-face {
        font-family: 'Noto Serif';
        font-style: normal;
        font-weight: 400;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/NotoSerif-Regular.ttf') format('truetype');
      }
      
      @font-face {
        font-family: 'Noto Serif';
        font-style: italic;
        font-weight: 400;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/NotoSerif-Italic.ttf') format('truetype');
      }
      
      @font-face {
        font-family: 'Noto Serif';
        font-style: normal;
        font-weight: 700;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/NotoSerif-Bold.ttf') format('truetype');
      }
      
      @font-face {
        font-family: 'Noto Serif';
        font-style: italic;
        font-weight: 700;
        src: url('https://relevantmagazine.com/wp-content/themes/relevant/fonts/NotoSerif-BoldItalic.ttf') format('truetype');
      }
      
      /** clear used to contain floats **/
      .c:after,
      .c:before {
        content: "";
        display: table;
      }

      .c:after {
        clear: both;
      }
      
      a,
      p,
      i,
      img,
      input[type=submit] {
        transition: all 320ms ease-in-out;
      }

      h2,
      h3,
      p {
        margin: 0px;
      }
      
      /** styles for email **/
      .newsletter-cont {
        width: 600px;
        margin: 0px 0px 30px;
      }
      
      .rn1-date {
        width: 200px;
        margin: 24px auto 24px;
        color: #2d2d2d !important;
        font-family: 'Cartograph Mono CF', sans-serif;
        font-size: 11px;
        font-weight: 500;
        text-align: center;
        letter-spacing: 1px;
        text-decoration: none !important;
        display: block;
      }
      
      .rn1-cont {
        background-color: #ffffff;
        height: 430px;
        margin: 0px 0px 0px;
      }
      
      .rn1-border {
        border: 5px solid #000000;
        margin: 0px auto 20px;
        padding: 30px;
        text-align: center;
        width: 310px;
        height: 139px;
      }
      
      .rn1-title {
        margin: 0px 0px 0px;
        color: #000000 !important;
        font-family: 'Manifold CF', sans-serif;
        font-size: 40px;
        font-weight: 600;
        letter-spacing: 6px;
        text-decoration: none !important;
      }
      
      .rn1-line {
        background-color: #212121;
        width: 80px;
        height: 1px;
        margin: 10px auto 18px;
      }
      
      .rn1-best {
        margin: 0px 0px 0px;
        color: #212121;
        font-family: 'Manifold CF', sans-serif;
        font-size: 12px;
        font-weight: 600;
      }
      
      .rn1-best-a {
        color: #212121 !important;
        font-family: 'Manifold CF', sans-serif;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none !important;
      }
      
      .rn1-a-img {
        display: block;
        width: 532px;
        height: 258px;
        margin: 0px auto 0px;
      }
      
      .rn1-img {
        width: 532px;
        height: 258px;
        margin: 0px 0px 0px;
        object-fit: cover;
      }
      
      .rn2-cont {
        background-color: #f0f0f0;
        height: 480px;
        margin: 0px 0px 0px;
        padding: 120px 60px 0px;
        text-align: center;
      }
      
      .rn2-story {
        margin: 0px 0px 24px;
        color: #212121 !important;
        font-family: 'Cartograph Mono CF', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        text-decoration: none !important;
      }
      
      .rn2-title-a {
        margin: 0px 0px 12px;
        color: #2f2f2f !important;
        font-family: 'Noto Serif', serif;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 32px;
        display: inline-block;
        text-decoration: none !important;
      }
      
      .rn2-subtitle {
        margin: 0px 0px 30px;
        color: #373737;
        font-family: 'Manifold CF', sans-serif;
        font-size: 13px;
        font-weight: 400;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .rn2-x {
        height: 12px;
        margin: 0px 0px 24px;
      }
      
      .rn2-text {
        margin: 0px 0px 40px;
        color: #2f2f2f;
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: 400;
        text-align: left;
        padding: 0px 20px;
        line-height: 22px;
        word-spacing: 1px;
      }
      
      .rn2-bold {
        font-family: 'Bio Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      
      .rn2-readnow {
        display: inline-block;
        background-color: #212121;
        margin: 0px 0px 0px;
        padding: 10px 14px;
        color: #ffffff !important;
        font-family: 'Bio Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-decoration: none !important;
      }
      
      .rn3-cont {
        margin: 0px 0px 0px;
        padding: 60px 0px 0px;
      }
      
      .rn3-what {
        margin: 0px 0px 30px;
        color: #242424;
        font-family: 'Cartograph Mono CF', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        text-align: center;
      }
      
      .rn3-story {
        margin: 0px 0px 40px;
        padding: 0px 80px;
      }
      
      .rn3-story-title {
        display: inline-block;
        margin: 0px 0px 10px;
        color: #242424 !important;
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 22px;
        text-decoration: none !important;
      }
      
      .rn3-story-text {
        margin: 0px 0px 14px;
        color: #242424;
        font-family: 'Noto Serif', serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 23px;
      }
      
      .rn3-story-text-link {
        margin: 0px 0px 0px;
        color: #242424 !important;
        font-weight: 600;
        text-decoration: underline;
        font-style: italic;
      }
      
      .rn3-most {
        margin: 0px 0px 0px;
        color: #242424;
        font-family: 'Cartograph Mono CF', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
        text-align: center;
      }
      
      .rn3-shared-cont {
        margin: 0px auto 60px;
        width: 546px;
        height: 184px;
      }
      
      .sfooter-recommend {
        float: left;
        background-color: #ffffff;
        width: 550px;
        height: 278px;
        margin: 0px 0px 20px;
      }

      .sfooter-recommend-title {
        display: inline-block;
        background-color: #212121;
        padding: 8px 30px;
        color: #ffffff;
        font-family: 'Cartograph Mono CF', sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 1px;
      }

      .sfooter-recommend-cont {
        margin: 20px 0px 47px;
      }

      .sfooter-recommend-e {
        float: left;
        border-right: 1px solid #d8d8d8;
        width: 129px;
        margin: 0px;
        padding: 0px 26px;
      }

      .sfooter-recommend-img-a {
        display: block;
        margin: 0px 0px 13px;
      }

      .sfooter-recommend-img {
        width: 130px;
        height: 96px;
        object-fit: cover;
      }

      .sfooter-recommend-cat {
        display: inline-block;
        margin: 0px 0px 10px;
        color: #8f8f8f !important;
        font-family: 'Manifold CF', sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 1px;
        text-decoration: none !important;
      }

      .sfooter-recommend-h2 {
        margin: 0px;
      }

      .sfooter-recommend-h2-a {
        display: block;
        height: 45px;
        color: #1a1a1a !important;
        font-family: 'Bio Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 15px;
        overflow: hidden;
        text-decoration: none !important;
      }
      
      .rn4-cont {
        background-color: #2f2f2f;
        width: 408px;
        height: 198px;
        margin: 0px auto 0px;
        padding: 18px 96px 50px;
      }
      
      .rn4-left {
        float: left;
        width: 240px;
        margin: 0px 0px 0px;
      }
      
      .rn4-left-img-a {
        display: inline-block;
        margin: 74px 0px 14px;
      }
      
      .rn4-left-img {
        width: 110px;
        margin: 0px 0px 0px;
      }
      
      .rn4-p {
        margin: 0px 0px 0px;
        color: #737272;
        font-family: 'Manifold CF', sans-serif;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 1px;
      }
      
      .rn4-right {
        float: right;
        margin: 0px 0px 0px;
        text-align: center;
      }
      
      .rn4-right-img-a {
        display: block;
        width: 150px;
        height: 177px;
        margin: 0px 0px 16px;
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.32);
      }
      
      .rn4-right-img {
        width: 150px;
        height: 177px;
        margin: 0px 0px 0px;
        object-fit: cover;
      }
      
      .rn4-subscribe {
        display: inline-block;
        background-color: #c6ac6f;
        margin: 0px 0px 0px;
        padding: 8px 14px;
        color: #242424 !important;
        font-family: 'Manifold CF', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1px;
        text-decoration: none !important;
      }
      
    </style></head><body>
    <center>
      <table align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
              
              
              <div class="newsletter-cont">
                <div class="rn1-cont">
                  <a class="rn1-date">[JULY 5, 2017]</a>
                  <div class="rn1-border">
                    <a class="rn1-title" href="http://r.email.relevantmagazine.com/c4vb0dwtbqmjbd.html" target="_blank">RELEVANT<br>THIS WEEK</a>
                    <div class="rn1-line"></div>
                    <p class="rn1-best">THE BEST OF <a class="rn1-best-a">RELEVANTMAGAZINE.COM</a></p>
                  </div>
                  <a class="rn1-a-img" href="http://r.email.relevantmagazine.com/c4vb0dxlrqmjbd.html" target="_blank">
                    <img class="rn1-img" src="http://r.email.relevantmagazine.com/7xkktbqmjbe.jpg"></a>
                </div>
                <div class="rn2-cont">
                  <p class="rn2-story">STORY OF THE WEEK</p>
                  <a class="rn2-title-a" href="http://r.email.relevantmagazine.com/c4vb0dye7qmjbd.html" target="_blank">Does Religion Belong in Politics</a>
                  <p class="rn2-subtitle">It seems to be impossible to avoid talking politics.</p>
                  <img class="rn2-x" src="http://r.email.relevantmagazine.com/7xkllrqmjbe.png"><p class="rn2-text"><span class="rn2-bold">There’s often an effort to separate politics and religion</span>, but with most policies directly affecting the lives of our neighbors, is it even possible to divide the two?</p>
                  
                  <p class="rn2-text">This week, we look at how in a government that is by the people, for the people, religion will always play a front-row seat in politics. We also explore how to allow your faith to influence not only how you live—but the causes and candidates you support.</p>

                  <a class="rn2-readnow" href="http://r.email.relevantmagazine.com/c4vb0dz6nqmjbd.html" target="_blank">READ NOW</a>
                </div>
                <div class="rn3-cont">
                  <p class="rn3-what">WHAT YOU NEED TO KNOW</p>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/c4vb0dzz3qmjbd.html" target="_blank">• Watch Francis Chan Speak at Facebook Headquarters About Church, Faith and Leadership</a>
                    <p class="rn3-story-text">Writer, teacher, former Cornerstone Community Church pastor and the leader of the “We Are Church” house church movement Francis Chan recently spoke to employees at Facebook corporate headquarters, where he taught about leadership, church and his faith. His speech was centered on the idea of “how to get to heaven from Silicon Valley.”</p>
                    <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/c4vb0e0rjqmjbd.html" target="_blank"></a>
                    
                    <p class="rn3-story-text">He encouraged the Facebook employees not to be prideful about their positions of influence in culture. “What do you think God hates most? Pride was the answer. Humility is the antidote.” He then explained: “You’re at a disadvantage. There is a status working here. You’re cooler than your friends.”</p>
                    
                    <p class="rn3-story-text"><a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/c4vb0e1jzqmjbd.html" target="_blank">Watch the whole thing</a> here.</p>
                  </div>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/c4vb0e2cfqmjbd.html" target="_blank">• Stephen Colbert Says Fidget Spinners Are a Great Way to Teach the Trinity</a>
                    <p class="rn3-story-text">This week, <i>Late Show</i> host Stephen Colbert discussed how churches around the country are using the toy as a way to explain the idea of the trinity.</p>
                    <p class="rn3-story-text">Despite some scholars claiming that the metaphor was somehow heretical, Colbert actually liked the concept, and compared it to ancient ways that Bible teachers used symbols to describe the trinity. Colbert said: “It’s traditional to explain the Holy Trinity with whatever is lying around. In the fourth century, in Ireland, no other than St. Patrick used a shamrock to explain it.”</p>
                    <p class="rn3-story-text">You can <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/c4vb0e34vqmjbd.html" target="_blank">watch his explanation</a> here.</p>
                  </div>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/c4vb0e3xbqmjbd.html" target="_blank">• Here Are 5 Reasons Not to Give Up on Church</a>
                    <p class="rn3-story-text">When tempted to hit eject on the local church, will we trust the infinite, perfect wisdom of God or our own finite, fallen instincts?</p>
                    <p class="rn3-story-text">This week, <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/41mfo4mzxbqmjbd.html" target="_blank">we look at why</a> all Christians should remain plugged into churches—despite their flaws.</p>
                  </div>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/41mfo4n0prqmjbd.html" target="_blank">• Arcade Fire Released a Trippy New Video for Their Single "Signs of Life"</a>
                    <p class="rn3-story-text">Yes, we are really excited for this album.</p>
                    <p class="rn3-story-text">You can <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/41mfo4n1i7qmjbd.html" target="_blank">watch the video</a> here.</p>
                  </div>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/41mfo4n2anqmjbd.html" target="_blank">• "Baby Driver" Is the Action Movie We Need Right Now</a>
                    <p class="rn3-story-text"><i>Baby Driver</i> differentiates itself from the dozens of mindless action and superhero movies released every year that mostly just ask young adult males to fork over $12 for two hours of escapism. <i>Baby Driver</i> is a movie that captures the claustrophobia of speeding down a back alley without forsaking the heart. It's a story about a wounded kid who just wants to have a life with his only family member and the girl he’s extending his heart to.</p>
                    <p class="rn3-story-text">If you’ve been waiting for a movie this year where Christian values are projected on the big screen, here it is.</p>
                    <p class="rn3-story-text">Read our <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/41mfo4n333qmjbd.html" target="_blank">full review here</a>.</p>
                  </div>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/41mfo4n3vjqmjbd.html" target="_blank">• Yes, Christians Must Stand Against Bullying</a>
                    <p class="rn3-story-text">When it comes to developing character, the challenges of our current cultural climate are immense, where bullying and name-calling have become the norm.</p>
                    <p class="rn3-story-text">As Christians, the key is not to enable a bully’s hate. Bullies, misogynists and racists all cling to false narratives and lies that justify their beliefs and will often do this until they are the last person standing.</p>
                    <p class="rn3-story-text">This week, <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/41mfo4n4nzqmjbd.html" target="_blank">we look at</a> not only why it’s imperative that Christians stand up to bullies, but also the ways the Bible teaches us how to.</p>
                  </div>
                  <div class="rn3-story">
                    <a class="rn3-story-title" href="http://r.email.relevantmagazine.com/41mfo4n5gfqmjbd.html" target="_blank">• 10 Things Coming to Netflix in July That You Need to See</a>
                    <p class="rn3-story-text">And finally <a class="rn3-story-text-link" href="http://r.email.relevantmagazine.com/41mfo4n68vqmjbd.html" target="_blank">here’s a guide</a> to the best new things coming to Netflix this month. (Yes, <i>Rogue One</i> is on the list)</p>
                  </div>
                  <p class="rn3-most">MOST SHARED</p>
                  <div class="rn3-shared-cont">
                    <div class="sfooter-recommend-cont c">
                      <div class="sfooter-recommend-e">
                        <a class="sfooter-recommend-img-a" href="http://r.email.relevantmagazine.com/41mfo4n71bqmjbd.html">
                          <img class="sfooter-recommend-img" src="http://r.email.relevantmagazine.com/7xkme7qmjbe.jpg"></a>
                        <a class="sfooter-recommend-cat">RELATIONSHIPS</a> 
                        <h2 class="sfooter-recommend-h2">
                          <a class="sfooter-recommend-h2-a" href="http://r.email.relevantmagazine.com/41mfo4n9enqmjbd.html">The Big Lie Everyone Believes About Having Kids</a>
                        </h2>
                      </div>
                      <div class="sfooter-recommend-e">
                        <a class="sfooter-recommend-img-a" href="http://r.email.relevantmagazine.com/41mfo4na73qmjbd.html">
                          <img class="sfooter-recommend-img" src="http://r.email.relevantmagazine.com/7xkn6nqmjbe.jpg"></a>
                        <a class="sfooter-recommend-cat">FILM</a> 
                        <h2 class="sfooter-recommend-h2">
                          <a class="sfooter-recommend-h2-a" href="http://r.email.relevantmagazine.com/41mfo4nazjqmjbd.html">The Spiritual Reason We’re Drawn to Disney Remakes</a>
                        </h2>
                      </div>
                      <div class="sfooter-recommend-e" style="border-right: 0px solid #d8d8d8;">
                        <a class="sfooter-recommend-img-a" href="http://r.email.relevantmagazine.com/41mfo4nbrzqmjbd.html">
                          <img class="sfooter-recommend-img" src="http://r.email.relevantmagazine.com/7xknz3qmjbe.jpg"></a>
                        <a class="sfooter-recommend-cat">DEEPER WALK</a> 
                        <h2 class="sfooter-recommend-h2">
                          <a class="sfooter-recommend-h2-a" href="http://r.email.relevantmagazine.com/41mfo4nckfqmjbd.html">Here’s Why Lent Still Matters</a>
                        </h2>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="rn4-cont c">
                  <div class="rn4-left">
                    <a class="rn4-left-img-a" href="http://r.email.relevantmagazine.com/41mfo4ndcvqmjbd.html">
                      <img class="rn4-left-img" src="http://r.email.relevantmagazine.com/7xkorjqmjbe.png"></a>
                    <p class="rn4-p">© 2017 RELEVANT Media Group.<br>All Rights Reserved</p>
                  </div>
                  <div class="rn4-right">
                    <a class="rn4-right-img-a" href="http://r.email.relevantmagazine.com/41mfo4ne5bqmjbd.html">
                      <img class="rn4-right-img" src="http://r.email.relevantmagazine.com/7xkpjzqmjbe.png"></a>
                    <a class="rn4-subscribe" href="http://r.email.relevantmagazine.com/41mfo4nexrqmjbd.html" target="_blank">SUBSCRIBE</a>
                  </div>
                </div>
              </div>
              
              
            </td>
          </tr></tbody></table></center>
  <div style="color: #727272; font-size: 10px;"><center>If you wish to unsubscribe from our newsletter, click <a href="#">here</a></center></div></body></html>

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console