snipt

Ctrl+h for KB shortcuts

HTML

Type - Open Sans + Gentium

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic">

<style>
#nietzsche.sample {
    background: none repeat scroll 0 0 #EF4723;
    padding: 100px 0;
}
#nietzsche.sample .text {
    margin: 0 auto;
    padding: 0 50px;
    width: 800px;
}
#nietzsche.sample .excerpt {
    -moz-column-count: 2;
    -moz-column-gap: 50px;
}
#nietzsche.sample h1 {
    color: #222222;
    font: 800 64px/64px "open sans";
    margin: 0 0 32px;
    text-align: center;
    text-transform: uppercase;
    width: 800px;
}
#nietzsche.sample h1 span {
    font: italic 400 60px/60px "gentium book basic";
    text-transform: none;
}
#nietzsche.sample h1 span.kern {
    margin: 0 4px 0 -10px;
}
#nietzsche.sample h2 {
    border-top: 1px solid #222222;
    color: #222222;
    font: 800 20px/20px "open sans";
    margin: 0 0 20px;
    text-align: center;
    text-transform: uppercase;
}
#nietzsche.sample h2 span {
    background: none repeat scroll 0 0 #EF4723;
    padding: 0 20px;
    position: relative;
    top: -10px;
}
#nietzsche.sample p {
    color: #222222;
    font: 400 16px/24px "gentium book basic";
    margin: 0;
}
</style>

<section id="nietzsche" class="sample">
    <section class="text">
      <a title="Open Sans" href="http://www.google.com/webfonts/specimen/Open+Sans">
        <h1><span>On the<br></span> Genealogy <span class="kern">of</span> Morals</h1>
      </a>
      <a title="Open Sans" href="http://www.google.com/webfonts/specimen/Open+Sans">
        <h2><span>Friedrich Nietzsche</span></h2>
      </a>
      <section class="excerpt">
        <a title="Gentium Book Basic" href="http://www.google.com/webfonts/specimen/Gentium+Book+Basic">
          <p>At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the “bad conscience”: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. I regard the bad conscience as the serious illness that man was bound to contract under the stress of the most fundamental change he ever experienced&mdash;that change which occurred when he found himself finally enclosed within the walls of society and of peace. The situation that faced sea animals when they were compelled to become land animals or perish was the same as that which faced these semi-animals, well adapted to the wilderness, to war, to prowling, to adventure: suddenly all their instincts were disvalued and “suspended.” From now on they had to walk on their feet and “bear themselves” whereas hitherto they had been borne by the water: a dreadful heaviness lay upon them. They felt unable to cope with the simplest undertakings; in this new world they no longer possessed their former guides, their regulating, unconscious and infallible drives: they were reduced to thinking, inferring, reckoning, coordinating cause and effect, these unfortunate creatures; they were reduced to their “consciousness,” their weakest and most fallible organ! I believe there has never been such a feeling of misery on earth, such a leaden discomfort and at the same time the old instincts had not suddenly ceased to make their usual demands. Only it was hardly or rarely possible to humor them: as a rule they had to seek new and, as it were, subterranean gratifications.</p>
        </a>
      </section>
    </section>
  </section>
https://snipt.net/embed/763c1dce1163c12b1169d67a3d9f8a8e/
/raw/763c1dce1163c12b1169d67a3d9f8a8e/
763c1dce1163c12b1169d67a3d9f8a8e
html
HTML
68
2019-07-19T11:21:03
True
False
False
/api/public/snipt/41295/
type-open-sans-gentium
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a> <a href="#L-65">65</a> <a href="#L-66">66</a> <a href="#L-67">67</a> <a href="#L-68">68</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&quot;</span><span class="p">&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="p">&lt;</span><span class="nt">link</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic&quot;</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span><span id="L-5"><a name="L-5"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="p">{</span> </span><span id="L-6"><a name="L-6"></a> <span class="nb">background</span><span class="o">:</span> <span class="nb">none</span> <span class="nb">repeat</span> <span class="nb">scroll</span> <span class="m">0</span> <span class="m">0</span> <span class="m">#EF4723</span><span class="p">;</span> </span><span id="L-7"><a name="L-7"></a> <span class="nb">padding</span><span class="o">:</span> <span class="m">100px</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-8"><a name="L-8"></a><span class="p">}</span> </span><span id="L-9"><a name="L-9"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nc">.text</span> <span class="p">{</span> </span><span id="L-10"><a name="L-10"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> </span><span id="L-11"><a name="L-11"></a> <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span> <span class="m">50px</span><span class="p">;</span> </span><span id="L-12"><a name="L-12"></a> <span class="nb">width</span><span class="o">:</span> <span class="m">800px</span><span class="p">;</span> </span><span id="L-13"><a name="L-13"></a><span class="p">}</span> </span><span id="L-14"><a name="L-14"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nc">.excerpt</span> <span class="p">{</span> </span><span id="L-15"><a name="L-15"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">column</span><span class="o">-</span><span class="n">count</span><span class="o">:</span> <span class="m">2</span><span class="p">;</span> </span><span id="L-16"><a name="L-16"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">column</span><span class="o">-</span><span class="n">gap</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span> </span><span id="L-17"><a name="L-17"></a><span class="p">}</span> </span><span id="L-18"><a name="L-18"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nt">h1</span> <span class="p">{</span> </span><span id="L-19"><a name="L-19"></a> <span class="nb">color</span><span class="o">:</span> <span class="m">#222222</span><span class="p">;</span> </span><span id="L-20"><a name="L-20"></a> <span class="nb">font</span><span class="o">:</span> <span class="m">800</span> <span class="m">64px</span><span class="o">/</span><span class="m">64px</span> <span class="s2">&quot;open sans&quot;</span><span class="p">;</span> </span><span id="L-21"><a name="L-21"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">32px</span><span class="p">;</span> </span><span id="L-22"><a name="L-22"></a> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span> </span><span id="L-23"><a name="L-23"></a> <span class="nb">text-transform</span><span class="o">:</span> <span class="nb">uppercase</span><span class="p">;</span> </span><span id="L-24"><a name="L-24"></a> <span class="nb">width</span><span class="o">:</span> <span class="m">800px</span><span class="p">;</span> </span><span id="L-25"><a name="L-25"></a><span class="p">}</span> </span><span id="L-26"><a name="L-26"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nt">h1</span> <span class="nt">span</span> <span class="p">{</span> </span><span id="L-27"><a name="L-27"></a> <span class="nb">font</span><span class="o">:</span> <span class="nb">italic</span> <span class="m">400</span> <span class="m">60px</span><span class="o">/</span><span class="m">60px</span> <span class="s2">&quot;gentium book basic&quot;</span><span class="p">;</span> </span><span id="L-28"><a name="L-28"></a> <span class="nb">text-transform</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span> </span><span id="L-29"><a name="L-29"></a><span class="p">}</span> </span><span id="L-30"><a name="L-30"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nt">h1</span> <span class="nt">span</span><span class="nc">.kern</span> <span class="p">{</span> </span><span id="L-31"><a name="L-31"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">0</span> <span class="m">-10px</span><span class="p">;</span> </span><span id="L-32"><a name="L-32"></a><span class="p">}</span> </span><span id="L-33"><a name="L-33"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nt">h2</span> <span class="p">{</span> </span><span id="L-34"><a name="L-34"></a> <span class="nb">border-top</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#222222</span><span class="p">;</span> </span><span id="L-35"><a name="L-35"></a> <span class="nb">color</span><span class="o">:</span> <span class="m">#222222</span><span class="p">;</span> </span><span id="L-36"><a name="L-36"></a> <span class="nb">font</span><span class="o">:</span> <span class="m">800</span> <span class="m">20px</span><span class="o">/</span><span class="m">20px</span> <span class="s2">&quot;open sans&quot;</span><span class="p">;</span> </span><span id="L-37"><a name="L-37"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">20px</span><span class="p">;</span> </span><span id="L-38"><a name="L-38"></a> <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span> </span><span id="L-39"><a name="L-39"></a> <span class="nb">text-transform</span><span class="o">:</span> <span class="nb">uppercase</span><span class="p">;</span> </span><span id="L-40"><a name="L-40"></a><span class="p">}</span> </span><span id="L-41"><a name="L-41"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nt">h2</span> <span class="nt">span</span> <span class="p">{</span> </span><span id="L-42"><a name="L-42"></a> <span class="nb">background</span><span class="o">:</span> <span class="nb">none</span> <span class="nb">repeat</span> <span class="nb">scroll</span> <span class="m">0</span> <span class="m">0</span> <span class="m">#EF4723</span><span class="p">;</span> </span><span id="L-43"><a name="L-43"></a> <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span> <span class="m">20px</span><span class="p">;</span> </span><span id="L-44"><a name="L-44"></a> <span class="nb">position</span><span class="o">:</span> <span class="nb">relative</span><span class="p">;</span> </span><span id="L-45"><a name="L-45"></a> <span class="nb">top</span><span class="o">:</span> <span class="m">-10px</span><span class="p">;</span> </span><span id="L-46"><a name="L-46"></a><span class="p">}</span> </span><span id="L-47"><a name="L-47"></a><span class="nn">#nietzsche</span><span class="nc">.sample</span> <span class="nt">p</span> <span class="p">{</span> </span><span id="L-48"><a name="L-48"></a> <span class="nb">color</span><span class="o">:</span> <span class="m">#222222</span><span class="p">;</span> </span><span id="L-49"><a name="L-49"></a> <span class="nb">font</span><span class="o">:</span> <span class="m">400</span> <span class="m">16px</span><span class="o">/</span><span class="m">24px</span> <span class="s2">&quot;gentium book basic&quot;</span><span class="p">;</span> </span><span id="L-50"><a name="L-50"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> </span><span id="L-51"><a name="L-51"></a><span class="p">}</span> </span><span id="L-52"><a name="L-52"></a><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span><span id="L-53"><a name="L-53"></a> </span><span id="L-54"><a name="L-54"></a><span class="p">&lt;</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;nietzsche&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;sample&quot;</span><span class="p">&gt;</span> </span><span id="L-55"><a name="L-55"></a> <span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;text&quot;</span><span class="p">&gt;</span> </span><span id="L-56"><a name="L-56"></a> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Open Sans&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.google.com/webfonts/specimen/Open+Sans&quot;</span><span class="p">&gt;</span> </span><span id="L-57"><a name="L-57"></a> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;</span>On the<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> Genealogy <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;kern&quot;</span><span class="p">&gt;</span>of<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> Morals<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span><span id="L-58"><a name="L-58"></a> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span><span id="L-59"><a name="L-59"></a> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Open Sans&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.google.com/webfonts/specimen/Open+Sans&quot;</span><span class="p">&gt;</span> </span><span id="L-60"><a name="L-60"></a> <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;&lt;</span><span class="nt">span</span><span class="p">&gt;</span>Friedrich Nietzsche<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span> </span><span id="L-61"><a name="L-61"></a> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span><span id="L-62"><a name="L-62"></a> <span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;excerpt&quot;</span><span class="p">&gt;</span> </span><span id="L-63"><a name="L-63"></a> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Gentium Book Basic&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.google.com/webfonts/specimen/Gentium+Book+Basic&quot;</span><span class="p">&gt;</span> </span><span id="L-64"><a name="L-64"></a> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the “bad conscience”: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. I regard the bad conscience as the serious illness that man was bound to contract under the stress of the most fundamental change he ever experienced<span class="ni">&amp;mdash;</span>that change which occurred when he found himself finally enclosed within the walls of society and of peace. The situation that faced sea animals when they were compelled to become land animals or perish was the same as that which faced these semi-animals, well adapted to the wilderness, to war, to prowling, to adventure: suddenly all their instincts were disvalued and “suspended.” From now on they had to walk on their feet and “bear themselves” whereas hitherto they had been borne by the water: a dreadful heaviness lay upon them. They felt unable to cope with the simplest undertakings; in this new world they no longer possessed their former guides, their regulating, unconscious and infallible drives: they were reduced to thinking, inferring, reckoning, coordinating cause and effect, these unfortunate creatures; they were reduced to their “consciousness,” their weakest and most fallible organ! I believe there has never been such a feeling of misery on earth, such a leaden discomfort and at the same time the old instincts had not suddenly ceased to make their usual demands. Only it was hardly or rarely possible to humor them: as a rule they had to seek new and, as it were, subterranean gratifications.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span><span id="L-65"><a name="L-65"></a> <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span><span id="L-66"><a name="L-66"></a> <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span> </span><span id="L-67"><a name="L-67"></a> <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span> </span><span id="L-68"><a name="L-68"></a> <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
CSS, Typography