Landing page que explora TODH.
A Pen by Sergio Forés on CodePen.
.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. |
Landing page que explora TODH.
A Pen by Sergio Forés on CodePen.
$('.element').click(function(){ | |
$(this).toggleClass('active'); | |
$('body').toggleClass('overflow'); | |
}); | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
@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); | |
} | |
} |