geildanke typography

In this example below you will see how to do a geildanke typography with some HTML / CSS and Javascript

typography settings for new geildanke.com

Thumbnail
This awesome code was written by Fischaela, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Fischaela ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>geildanke typography</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h1>
<p class="teaser">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem <a href="http://www.geildanke.com">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
  <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
  <li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
  <li>Justo duo dolores et ea rebum</li>
  <li>Dolores</li>
  <li>Lorem</li>  
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea <a href="http://www.geildanke.com">takimata</a> sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<blockquote><p>"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."</p><footer>Richard Brammer, CEO, <a href="http://www.geildanke.com">Geil,Danke! GmbH</a></footer></blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ol>
  <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
  <li>At vero eos et accusam et justo duo dolores et ea rebum.</li>
  <li>Justo duo dolores et ea rebum</li>
  <li>Dolores</li>
  <li>Lorem</li>  
</ol>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://www.geildanke.com">At vero eos et accusam et justo duo dolores et ea rebum.</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
  <script src='https://use.typekit.net/qwo7ttu.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Fischaela/geildanke-typography-aAson */
@import url(https://fonts.googleapis.com/css?family=Neuton|Raleway|Open+Sans|Merriweather);
body {
  background: #EFEFEF;
  margin: 0 auto;
  width: 37.7em;
  color: #444;
  font-family: "proxima-nova-alt";
  font-size: 18px;
  line-height: 28px;
}
body html {
  font-size: 112.5%;
  line-height: 1.55556em;
}

h1 {
  padding-top: 84px;
  padding-bottom: 56px;
  font-family: "quatro-slab";
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1.5em;
}

h2 {
  padding-top: 56px;
  padding-bottom: 42px;
  font-family: "quatro-slab";
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5em;
}

h3 {
  padding-top: 56px;
  padding-bottom: 42px;
  font-family: "quatro-slab";
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.5em;
}

a {
  border-bottom: 1px dashed #666;
  color: #444;
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid #666;
}

p {
  padding-bottom: 28px;
}

blockquote {
  padding-top: 28px;
  margin: 0 4em;
  font-family: "Merriweather";
  font-style: italic;
}

blockquote p {
  padding-bottom: 0;
}

blockquote footer {
  padding-bottom: 56px;
  font-family: "Raleway";
  font-size: 0.75em;
  font-style: normal;
  text-align: right;
}

ul,
ol {
  padding-bottom: 42px;
  margin-left: 3em;
  padding-left: 1em;
  list-style-position: outside;
}

ul li {
  list-style-type: square;
}

ol li {
  list-style-type: decimal;
}

.teaser {
  line-height: 1.875em;
  font-size: 1.25em;
  font-weight: 700;
}


/*Downloaded from https://www.codeseek.co/Fischaela/geildanke-typography-aAson */
try{Typekit.load();}catch(e){}

Comments