Typography Schafeld.com HP

index.html

<div class="container">
<div id="logo">
  <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 294.78 105.6" copyright="Oliver Schafeld, info@schafeld.com">
  <defs>
    <style>
      .cls-12{letter-spacing:0}
    </style>
    <linearGradient id="Unbenannter_Verlauf_8" data-name="Unbenannter Verlauf 8" x1="-1.63" y1="83.58" x2="35.13" y2="70.2" gradientUnits="userSpaceOnUse">
      <stop offset=".16" stop-color="#b4e1fa"/>
      <stop offset=".59" stop-color="#4ac0e5"/>
    </linearGradient>
    <linearGradient id="Unbenannter_Verlauf_9" data-name="Unbenannter Verlauf 9" x1="3.37" y1="49.39" x2="24.73" y2="41.61" gradientUnits="userSpaceOnUse">
      <stop offset=".41" stop-color="#00b6e0"/>
      <stop offset="1" stop-color="#b4e1fa"/>
    </linearGradient>
    <linearGradient id="Unbenannter_Verlauf_6" data-name="Unbenannter Verlauf 6" x1="4.9" y1="29.17" x2="33.81" y2="18.65" gradientUnits="userSpaceOnUse">
      <stop offset=".34" stop-color="#00b6e0"/>
      <stop offset=".92" stop-color="#b4e1fa"/>
    </linearGradient>
    <linearGradient id="Unbenannter_Verlauf_48" data-name="Unbenannter Verlauf 48" x1="6.43" y1="32.4" x2="35.75" y2="14.78" gradientUnits="userSpaceOnUse">
      <stop offset=".04" stop-color="#b4e1fa"/>
      <stop offset=".41" stop-color="#00b6e0"/>
      <stop offset="1" stop-color="#4ac0e5"/>
    </linearGradient>
  </defs>
  <text transform="translate(52.76 57.6)" fill="#1d1d1b" font-size="34" font-family="JuraDemiBold,Jura">
    <tspan font-weight="700"><tspan letter-spacing=".01em">S</tspan><tspan x="22.63" y="0" letter-spacing="-.01em">c</tspan><tspan x="44.78" y="0" letter-spacing="-.01em">h</tspan><tspan x="67.87" y="0" letter-spacing="0">a</tspan><tspan x="88.92" y="0" letter-spacing="-.02em">f</tspan><tspan x="101.75" y="0" letter-spacing="-.01em">e</tspan><tspan x="124.84" y="0" letter-spacing="0">l</tspan><tspan x="134.34" y="0">d</tspan></tspan><tspan font-size="16" font-family="JuraLight,Jura"><tspan x="0" y="19.2" letter-spacing="-.03em">W</tspan><tspan class="cls-12" x="14.59" y="19.2">e</tspan><tspan x="24.21" y="19.2">b </tspan><tspan x="40.2" y="19.2" letter-spacing="0">D</tspan><tspan x="49.82" y="19.2" letter-spacing="-.01em">ev</tspan><tspan x="68.1" y="19.2" letter-spacing="0">e</tspan><tspan x="77.7" y="19.2" letter-spacing="0">l</tspan><tspan x="81.76" y="19.2" letter-spacing="0">op</tspan><tspan x="101.03" y="19.2" letter-spacing="0">m</tspan><tspan class="cls-12" x="114.11" y="19.2">e</tspan><tspan x="123.73" y="19.2" letter-spacing="0">n</tspan><tspan x="133.4" y="19.2">t &amp; </tspan><tspan x="161.23" y="19.2" letter-spacing="0">C</tspan><tspan x="170.78" y="19.2" letter-spacing="0">o</tspan><tspan x="180.41" y="19.2" letter-spacing="0">n</tspan><tspan x="189.98" y="19.2" letter-spacing="0">s</tspan><tspan x="199.56" y="19.2" letter-spacing=".01em">u</tspan><tspan x="209.26" y="19.2" letter-spacing=".01em">l</tspan><tspan x="213.34" y="19.2" letter-spacing=".01em">t</tspan><tspan x="219.41" y="19.2" letter-spacing=".01em">i</tspan><tspan x="222.83" y="19.2" letter-spacing="0">n</tspan><tspan x="232.43" y="19.2">g</tspan></tspan>
  </text>
  <path fill="url(#Unbenannter_Verlauf_8)" d="M28.8 52.8L16.66 64.84 4.7 76.8v24.18l24.02-24.01.08-24.17z"/>
  <path fill="url(#Unbenannter_Verlauf_9)" d="M28.8 52.8L16.75 40.75 4.7 28.61 4.62 52.8l12.04 12.04L28.8 52.8z"/>
  <path stroke-width=".77" fill="url(#Unbenannter_Verlauf_6)" stroke="url(#Unbenannter_Verlauf_48)" stroke-miterlimit="10" d="M16.75 40.75l11.97-11.96-.02-24.17-24 23.99 12.05 12.14z"/>
  <path d="M175 372.24v24.17l-12 12 12 12.05v24.13l-24 24v-24.17l12-11.95-12-12 .08-24.19 24-24m0-4.61a4.61 4.61 0 0 0-3.27 1.35l-24 24a4.61 4.61 0 0 0-1.36 3.24l-.08 24.19a4.59 4.59 0 0 0 1.35 3.28l8.78 8.78-8.69 8.69a4.59 4.59 0 0 0-1.36 3.26v24.19a4.61 4.61 0 0 0 2.85 4.26 4.62 4.62 0 0 0 5-1l24-24a4.6 4.6 0 0 0 1.35-3.25l.09-24.17a4.64 4.64 0 0 0-1.36-3.28l-8.78-8.78 8.7-8.71a4.58 4.58 0 0 0 1.35-3.26v-24.22a4.62 4.62 0 0 0-2.86-4.26 4.53 4.53 0 0 0-1.76-.35z" transform="translate(-146.33 -367.63)" fill="#1d1d1b"/>
  <path stroke-linejoin="round" fill="none" stroke="#fff" stroke-width="3.08" d="M28.8 52.8L16.75 40.75l11.97-11.96-.02-24.17-24 23.99-.08 24.19 12.04 12.04L4.7 76.8v24.18l24.02-24.01.08-24.17z"/>
  <path d="M16.66 64.84L28.8 52.8M4.7 28.62l12.05 12.13" stroke-miterlimit="10" fill="none" stroke="#fff" stroke-width="3.08"/>
</svg>
</div>
  <h1>Freelance Web Developer</h1>
  <h2>Experienced, cross-functional, agile</h2>

<blockquote>
  Code is your business' DNA. Don't mess it up!
</blockquote> 
  
<p>Web Development & IT-Beratung. 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. 
</p>
<h2>About me</h2>
<p>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. <p>
  
  <blockquote>
    Adapt and evolve. Life is change. Enjoy the ride!
  </blockquote> 

<h2>Contact</h3>
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>– &lt; sic &gt; –</p>

</div>

style.css

@import url('https://fonts.googleapis.com/css?family=Jura|Abel');

#logo {
  width:20em;
  margin-left: 1em;
}


h1, h2 {
  font-family: 'Jura', sans-serif;
  font-size:2em;
  line-height:1em;
  margin:1em 1em 0.75em 70px;
}
h2 {
  font-size:1.75em;
}

h1 + h2 {
  margin-top:-.5em;
}

p {
  font-family: 'Abel', sans-serif;
  font-size:1em;
  line-height:1.75em;
  margin: 0.75em 70px 0.25em;
}
body {
  background-color: #ddd;
}
.container {
  background-color: rgba(255,255,255,1);
  border: 5px solid rgba(100,80,80,0.8);
  padding: 2em 3em;
  margin: 1em;
  width: 50vw;
}


blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 70px 20px;
  position: relative;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  text-align: justify;
  border-left: 15px solid orange;
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 8px #ccc;
}

blockquote::before{
  content: "\201C"; /* Left Double Quote */
  font-family: Helvetica, Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  position: absolute;
  left: 10px;
  top: 5px;
}

typography-schafeld-com-hp.markdown

Typography Schafeld.com HP

A Pen by Oliver Schafeld on CodePen.

License.

Obviously I will retain copyright to the logo (letter 'S' composed of two angle brackets, also resembling a wall of light, or a stylized upward spiral).