Vufuzi

index.html

<header class="main-header">
  <nav class="left-navigation" role="navigation">
    <a href="#" title="Home">Home</a>
    <a href="#" title="Services">Services</a>
  </nav>
  <figure class="logo">
    <svg viewBox='0 0 769 812' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><path d='m748.728,523.851-361.101,266.849-365.351-261.006 135.306-428.162 448.971-3.613 142.175,425.932z' fill='#039BE5' stroke='#039BE5' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='40'></path><path d='m21.227,288.921 361.152-266.858 365.4,261.012-135.324,428.175-449.035,3.611-142.193-425.94z' fill='#29B6F6' stroke='#29B6F6' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='40'></path><path d='m223.848,268.735h39.424l120.125,280.028 122.089-280.028h39.424l-157.698,362.456h-7.885l-155.479-362.456z' fill='#FFF' stroke='#FFF' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='20'></path></svg>
  </figure>
  <nav class="right-navigation" role="navigation">
    <a href="#" title="Pricing">Pricing</a>
    <a href="#" title="Contact">Contact</a>
  </nav>
</header>
<div class="site-info">
  <span class="site-title">Vufuzi</span>
  <p class="site-description">
    Modern webbutveckling och webbdesign från natursköna Värmland.
  </p>
</div>
<main>
  <p>Vi är en kreativ produktionsbyrå från Västra Värmland som erbjuder tjänster inom webbutveckling. Vi skapar och underhåller Din webbplats, hemsida, blogg, applikation och e-handels-lösning.</p>
  <p>Vi jobbar med de allra senaste teknikerna inom webbutveckling och webbdesign för att kunna leverera en bra produkt som står sig med tiden. När du gör affärer med oss behöver du inte oroa dig för någon rörande hemsidan när vi kodat klart den. Vi ser till att hålla din kod uppdaterad och modern så din webbplats alltid håller sig fräsch och fungerar i lång tid framöver.</p>
  <p>Genom att sökmotoroptimera Din hemsida så ökar vi Dina chanser att hamna högre i sökresultaten på Google, Bing och Yahoo. Detta är betydande för att en verksamhet skall kunna synas och få kunder på webben. Du kan se det som dagens telefonkatalog. Finns Du inte med, får Du inte lika många kunder.</p>
  <p>När vi skapar Din webbplats gör vi det givetvis med responsiv design så att Din hemsida går att komma åt och använda på både på datorer, surfplattor och mobiltelefoner.</p>
  <p>Letar du efter en hemsida som sätter dig, ditt företag eller din organisation i framkant nu och i framtiden? Behöver ni en ny design till er nuvarande hemsida? En ny blogg? Tveka då inte att kontakta oss!</p>
</main>

script.js

document.querySelector('.logo').addEventListener('click',function() {
  document.querySelector('.main-header').classList.toggle('open');
}, false);

style.css

$main-background: #fff;
$secondary-background: #F5F5F5;
$border-color: #eee;
$main-blue: #29B6F6;
$secondary-blue: #039BE5;

// font-family: 'Roboto Slab', serif;
// font-family: 'Roboto Mono', sans-serif;

body {
  margin: 0;
  background-color: $main-background;
  font-family: 'Roboto', sans-serif;
}

.main-header {
  //border-bottom: 1px solid $border-color;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
  nav {
    background-color: $secondary-background;
    flex:1;
    display:flex;
    transform: translateY(.15rem);
    &.left-navigation {
      justify-content: flex-end;
      margin-right: -2rem;
      padding-right: 3rem;
    }
    &.right-navigation {
      margin-left: -2rem;
      padding-left: 3rem;
    }
    a {
      color: #616161;
      text-decoration: none;
      margin: 0 .8rem;
      padding: .8rem 0;
      font-family: 'Roboto Slab', sans-serif;
      text-rendering: optimizeSpeed;
      letter-spacing: .1rem;
      font-size: .8rem;
      font-weight: 300;
      transition: color 150ms ease;
      &:hover {
        text-decoration: underline;
        color: #212121;
      }
    }
  }
  
  .logo {
    width: 7rem;
    height: 7rem;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 20;
    transform: translateZ(20px);
    animation: jelly 1s linear both;
  }
}

.site-info {
  .site-title {
    display: block;
    margin:0 auto;
    font-size: 3rem;
    text-align: center;
    font-weight: 100;
    //background-color: $main-blue;
    color: #616161;
    padding: .4rem;
  }
  .site-description {
    font-family: 'Roboto Slab', sans-serif;
    font-weight: 300;
    max-width: 330px;
    margin:0 auto;
    text-align:center;
  }
}
main {
  max-width: 500px;
  padding: 0 2rem;
  margin:2rem auto;
  font-weight: 300;
  font-family: 'Roboto';
  line-height: 1.4rem;
}

@media (max-width: 500px) {
  .main-header {
    flex-direction: column;
    transition: all 200ms ease;
    transform: translateY(-11rem);
    margin-bottom: -8rem;
    margin-top: 0;
    nav {
      background-color: #eee;
      flex-direction: column;
      overflow:hidden;
      opacity:0;
      transition: all 200ms ease;
      &.left-navigation, 
      &.right-navigation {
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
      }

      &.right-navigation {
        padding-bottom: 4rem;
        margin-bottom: -3.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
      }
      
      a {
        padding: 1rem 0;
      }
    }
    &.open {
      transform: none;
      nav {
        opacity:1;
      }
      .logo {
        animation: jelly-two 800ms ease;
      }
    }
    .logo {
      order: 1;
    }
  }
}

@keyframes jelly { 
  0% {
    transform: scale(.5) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: scale(.5) matrix3d(1.316, 0, 0, 0, 0, 1.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% {
    transform: scale(.5) matrix3d(1.45, 0, 0, 0, 0, 1.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% {
    transform: scale(.5) matrix3d(1.659, 0, 0, 0, 0, 1.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% {
    transform: scale(.5) matrix3d(1.883, 0, 0, 0, 0, 2.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% {
    transform: scale(.5) matrix3d(1.942, 0, 0, 0, 0, 2.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% {
    transform: scale(.5) matrix3d(2.123, 0, 0, 0, 0, 2.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% {
    transform: scale(.5) matrix3d(2.141, 0, 0, 0, 0, 2.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% {
    transform: scale(.5) matrix3d(2.208, 0, 0, 0, 0, 2.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.72% {
    transform: scale(.5) matrix3d(2.212, 0, 0, 0, 0, 2.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% {
    transform: scale(.5) matrix3d(2.196, 0, 0, 0, 0, 2.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% {
    transform: scale(.5) matrix3d(2.151, 0, 0, 0, 0, 1.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% {
    transform: scale(.5) matrix3d(2.134, 0, 0, 0, 0, 1.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% {
    transform: scale(.5) matrix3d(2.063, 0, 0, 0, 0, 1.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: scale(.5) matrix3d(2.048, 0, 0, 0, 0, 1.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
  }
  35.54% {
    transform: scale(.5) matrix3d(1.979, 0, 0, 0, 0, 1.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: scale(.5) matrix3d(1.972, 0, 0, 0, 0, 1.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: scale(.5) matrix3d(1.961, 0, 0, 0, 0, 2.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: scale(.5) matrix3d(1.966, 0, 0, 0, 0, 2.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: scale(.5) matrix3d(1.991, 0, 0, 0, 0, 2.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: scale(.5) matrix3d(2.006, 0, 0, 0, 0, 1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: scale(.5) matrix3d(2.007, 0, 0, 0, 0, 1.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: scale(.5) matrix3d(2.001, 0, 0, 0, 0, 2.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: scale(.5) matrix3d(1.999, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: scale(.5) matrix3d(1.999, 0, 0, 0, 0, 1.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: scale(.5) matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  } 
}

@keyframes jelly-two { 
  0% {
    transform: scale(.5) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: scale(.5) matrix3d(1.316, 0, 0, 0, 0, 1.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% {
    transform: scale(.5) matrix3d(1.45, 0, 0, 0, 0, 1.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% {
    transform: scale(.5) matrix3d(1.659, 0, 0, 0, 0, 1.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% {
    transform: scale(.5) matrix3d(1.883, 0, 0, 0, 0, 2.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% {
    transform: scale(.5) matrix3d(1.942, 0, 0, 0, 0, 2.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% {
    transform: scale(.5) matrix3d(2.123, 0, 0, 0, 0, 2.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% {
    transform: scale(.5) matrix3d(2.141, 0, 0, 0, 0, 2.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% {
    transform: scale(.5) matrix3d(2.208, 0, 0, 0, 0, 2.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.72% {
    transform: scale(.5) matrix3d(2.212, 0, 0, 0, 0, 2.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% {
    transform: scale(.5) matrix3d(2.196, 0, 0, 0, 0, 2.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% {
    transform: scale(.5) matrix3d(2.151, 0, 0, 0, 0, 1.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% {
    transform: scale(.5) matrix3d(2.134, 0, 0, 0, 0, 1.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% {
    transform: scale(.5) matrix3d(2.063, 0, 0, 0, 0, 1.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: scale(.5) matrix3d(2.048, 0, 0, 0, 0, 1.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
  }
  35.54% {
    transform: scale(.5) matrix3d(1.979, 0, 0, 0, 0, 1.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: scale(.5) matrix3d(1.972, 0, 0, 0, 0, 1.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: scale(.5) matrix3d(1.961, 0, 0, 0, 0, 2.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: scale(.5) matrix3d(1.966, 0, 0, 0, 0, 2.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: scale(.5) matrix3d(1.991, 0, 0, 0, 0, 2.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: scale(.5) matrix3d(2.006, 0, 0, 0, 0, 1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: scale(.5) matrix3d(2.007, 0, 0, 0, 0, 1.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: scale(.5) matrix3d(2.001, 0, 0, 0, 0, 2.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: scale(.5) matrix3d(1.999, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: scale(.5) matrix3d(1.999, 0, 0, 0, 0, 1.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: scale(.5) matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  } 
}

styles

<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,100|Roboto+Slab:400,300,100|Roboto+Mono:400,300,100" rel="stylesheet" />

Vufuzi.markdown

Vufuzi

A Pen by Jeremy Karlsson on CodePen.

License.