Prototipo landing TODH

index.pug

.site__header
  .brand
    a(href="#home")
      svg(width='74', height='40', viewbox='0 0 74 40', xmlns='http://www.w3.org/2000/svg')
        title Logo
        g#Home(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd')
          g(transform='translate(-10 -5)', id='Brand/Logo', stroke='#111111')
            path#decir(d='M47 25c0-10.493-8.059-19-18-19s-18 8.507-18 19h36z', stroke-width='1', stroke-linecap='square')
            path#pensar(d='M83 25c0 10.493-8.059 19-18 19s-18-8.507-18-19h36z', stroke-width='1', fill='#111111', fill-rule='evenodd')
            path#hacer(d='M47 25.5h36', stroke-width='3', stroke-linejoin='bevel')
  .site__menu
    ul
      li
        a.nav-link(href="#sentir") Sentir
      li
        a.nav-link(href="#pensar") Pensar
      li
        a.nav-link(href="#hacer") Hacer
      li
        a.nav-link(href="#decir") Decir

#home.site__section.site__section--cover
  h1 T-O-D-H
  h2 Creación Vincular & Desarrollo Holístico
  .img.img--small.anim2(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg9.jpg');")
  .img.img--medium.anim3(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg7.jpg');")
  .img.img--small.anim2(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg3.jpg');")
  .img.img--small.anim3(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg6.jpg');")

#pensar.site__section
  article.article
    .article__img.img.img--half(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg9.jpg');")
    .article__content 
      h2 TODH descubre un modo de percepción de lo real
      p Un “viaje” circular que consta de 8 pulsos de 4 fases, regidos por 12 arquetipos psíquicos o patrones energéticos.
  .article__img.img.img--full.filter(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg7.jpg');")
    h2 Percepción elemental en el mismo sentido que la Creación.

#hacer.site__section
  article.article
    .article__content 
      h2 Amplía tu percepción creativa
      p La trama: El viaje del héroe, del ser ideal y máximo potencial a la cristalización concreta.
    .article__img.img.img--half(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg6.jpg');")
#decir.site__footer
  p "La máxima creatividad es que se te ocurra lo que ocurre en tí."
  p "Se puede vivir en una permanente inspiración."
  p Sergio Forés 
    a(href="https://twitter.com/t0tinspire" target="_blank") @t0tinspire 
    | - 
    a(href="http://t-o-d-h.com" target="_blank") t-o-d-h.com
#sentir.site__section
  .article__img.img.img--full.filter(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg3.jpg');")
    h2 Actualización del propio potencial.
  article.article
    .article__img.img.img--half(style="background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/98095/bg9.jpg');")
    .article__content 
      h2 TODH descubre un modo de percepción de lo real
      p Un “viaje” circular que consta de 8 pulsos de 4 fases, regidos por 12 arquetipos psíquicos o patrones energéticos.

prototipo-landing-todh.markdown

Prototipo landing TODH

Landing page que explora TODH.

A Pen by Sergio Forés on CodePen.

License.

script.js

$('.element').click(function(){
    $(this).toggleClass('active');
    $('body').toggleClass('overflow');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,700,900');
$size_base: 50px;
$color-base: black;
$color-alt1: #EFC7CF;
$color-alt2: #282C34;
$color-alt3: #DCB098;
$color-alt4: #E4E4E4;

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: $color-base;
  background-color: $color-alt4;
}
body.overflow {
  overflow: hidden;
}

//Layout

.site {
  &__header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    padding-top: $size_base / 4;
    padding-left: $size_base / 4;
    z-index: 1000;
    .brand {
      flex: 1;
    }
  }
  &__menu {
    flex: 1 50%;
    margin-right: $size_base / 2;
    ul {
      display: flex;
      justify-content: flex-end;
    }
    li {
      font-weight: 400;
      a {
        padding: $size_base/4;
      }
    }
  }
  &__section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    
    &--cover {
      min-height: 100vh;
      align-content: center;
      text-align: center;
      position: relative;
      
      .img {
        z-index: 0;
        position: absolute;
        
        &:nth-of-type(1) {
          top: 20px;
          left: 40px;
        }
        &:nth-of-type(2) {
          right: 5%;
          bottom: -100px;
        }
        &:nth-of-type(3) {
          top: 9%;
          right: 25px;
        }
        &:nth-of-type(4) {
          bottom: 6%;
          right: 53%;
          width: 400px;
          height: 355px;
        }
      }
    }
  }
}

.article {
  width: 100%;
  min-height: 500px;
  background-color: #DCB098;
  @media screen and (min-width: 650px) {
    display: flex;
  }
  &__img {
    flex: 1;
    padding: $size_base / 2;
    display: flex;
    justify-content: center;
    position: relative;
    
    h2 {
      max-width: 500px;
      text-align: center;
      color: $color-alt4;
      text-shadow: 0 0 8px $color-alt2;
      z-index: 100;
    }
  }
  &__content {
    flex: 1;
    color: $color-alt2;
    padding: $size_base;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
  }
}
.filter {
  &:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: $color-base;
    opacity: .5;
    //mix-blend-mode: screen;
  }
}
.img {
  background-size: cover;
  background-position: 50%;
  &--full {
    min-height: 500px;
  }
  &--half {
    min-height: 375px;
  }
  &--medium {
    opacity: .6;
    width: 375px;
    max-height: 175px;
  }
  &--small {
    opacity: .4;
    width: 300px;
    height: 175px;
  }
}

a {
  color: $color-base;
  text-decoration: none;
}

h1 {
  font-size: 47.123px;
  line-height: 1;
  @media screen and (min-width: 600px) {
    font-size: 199.602px;
    font-weight: 100;
    //font-size: 76.244px;
    flex: 1 100%;
  }
}
h2 {
  font-size: 29.124px;
  font-weight: 300;
  align-self: center;
  flex: 1 100%;
  margin-bottom: $size_base/4;
  //text-rendering: optimizeLegibility;
}

h3,
h4 {
  font-size: 47.123px;
}

.site__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: $size_base;
}

// Animations
.anim {
  border-radius: 250px 750px 250px 750px /
                 750px 250px 750px 250px;
  animation: wobble 5s ease-in-out alternate infinite;
  background-color: white;
}
.anim2 {
  animation: oscilator 3s infinite;
}
.anim3 {
  animation: oscilator2 5s infinite;
}
@keyframes wobble {
  50% {
    border-radius: 750px 550px 350px 750px /
                   350px 750px 550px 450px;
  }
  100% {
    border-radius: 750px 250px 750px 250px /
                   250px 750px 250px 750px;
  }
}
@keyframes oscilator {
  50% {
    transform: translate(-10px,10px);
  }
}
@keyframes oscilator2 {
  50% {
    transform: translate(5px,-9px);
  }
}