Based on https://dribbble.com/shots/1990901-Questionnaire-Concept
A Pen by Nikolay Talanov on CodePen.
<div class="demo"> | |
<div class="demo__content"> | |
<h2 class="demo__heading">What do you need help with?</h2> | |
<div class="demo__elems"> | |
<div class="demo__elem demo__elem-1">With advertising online</div> | |
<div class="demo__elem demo__elem-2">With a website</div> | |
<div class="demo__elem demo__elem-3">I need help with both</div> | |
<span class="demo__hover demo__hover-1"></span> | |
<span class="demo__hover demo__hover-2"></span> | |
<span class="demo__hover demo__hover-3"></span> | |
<div class="demo__highlighter"> | |
<div class="demo__elems"> | |
<div class="demo__elem">With advertising online</div> | |
<div class="demo__elem">With a website</div> | |
<div class="demo__elem">I need help with both</div> | |
</div> | |
</div> | |
<div class="demo__examples"> | |
<div class="demo__examples-nb"> | |
<div class="nb-inner"> | |
<div class="example example-adv"> | |
<div class="example-adv"> | |
<div class="example-adv__top"> | |
<div class="example-adv__top-search"></div> | |
</div> | |
<div class="example-adv__mid"></div> | |
<div class="example-adv__line"></div> | |
<div class="example-adv__line long"></div> | |
</div> | |
</div> | |
<div class="example example-web"> | |
<div class="example-web__top"></div> | |
<div class="example-web__left"></div> | |
<div class="example-web__right"> | |
<div class="example-web__right-line"></div> | |
<div class="example-web__right-line"></div> | |
<div class="example-web__right-line"></div> | |
<div class="example-web__right-line"></div> | |
<div class="example-web__right-line"></div> | |
<div class="example-web__right-line"></div> | |
</div> | |
</div> | |
<div class="example example-both"> | |
<div class="example-both__half example-both__left"> | |
<div class="example-both__left-top"></div> | |
<div class="example-both__left-mid"></div> | |
</div> | |
<div class="example-both__half example-both__right"> | |
<div class="example-both__right-top"></div> | |
<div class="example-both__right-mid"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<p class="check-out">Check out my other <a href="http://codepen.io/suez/public/" target="_blank">pens</a></p> |
Based on https://dribbble.com/shots/1990901-Questionnaire-Concept
A Pen by Nikolay Talanov on CodePen.
// hello |
@import "compass/css3"; | |
*, *:before, *:after { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
$openSans: 'Open Sans', Helvetica, Arial, sans-serif; | |
html, body { | |
font-size: 62.5%; | |
height: 100%; | |
@media (max-width: 768px) { | |
font-size: 50%; | |
} | |
} | |
body { | |
background: #7B00FF; | |
} | |
$liHeight: 7rem; | |
$contentPTop: 22rem; | |
$trans: 0.4s; | |
$transFast: 0.2s; | |
$cub: cubic-bezier(.59,.04,.3,1.43); | |
@mixin hoverLi($y) { | |
transform: translateY($y); | |
.demo__elems { | |
transform: translateY(0 - $y); | |
} | |
} | |
@mixin notFirst { | |
.demo__examples { | |
.example-adv__top, | |
.example-adv__mid, | |
.example-adv__line { | |
transform: translateY(100%); | |
opacity: 0; | |
transition: transform $transFast, opacity $transFast; | |
} | |
} | |
} | |
.demo { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-left: -18rem; | |
margin-top: -25rem; | |
width: 36rem; | |
height: 50rem; | |
padding-top: $contentPTop; | |
background: #FFFFFF; | |
box-shadow: 0 0.5rem 5rem rgba(0,0,0,0.4); | |
font-family: $openSans; | |
&__content { | |
position: relative; | |
height: 100%; | |
} | |
&__heading { | |
font-size: 2.2rem; | |
line-height: $liHeight; | |
padding-left: 3rem; | |
color: #313131; | |
} | |
&__elems { | |
position: relative; | |
height: 21rem; | |
} | |
&__elem { | |
position: relative; | |
height: $liHeight; | |
font-size: 1.8rem; | |
line-height: $liHeight; | |
padding-left: 3rem; | |
border-top: 1px solid #e7e7e7; | |
} | |
&__hover { | |
z-index: 2; | |
position: absolute; | |
left: 0; | |
width: 100%; | |
height: $liHeight; | |
cursor: pointer; | |
&-1 { | |
top: 0; | |
&:hover ~ { | |
.demo__highlighter { | |
@include hoverLi(0); | |
} | |
} | |
} | |
&-2 { | |
top: $liHeight; | |
&:hover ~ { | |
.demo__highlighter { | |
@include hoverLi($liHeight); | |
} | |
@include notFirst; | |
.demo__examples { | |
.example-web__top, | |
.example-web__left { | |
transform: scale(1); | |
opacity: 1; | |
transition: transform $trans $transFast, opacity $trans $transFast; | |
} | |
.example-web__right-line { | |
transform: scale(1); | |
@for $i from 1 through 6 { | |
&:nth-child(#{$i}) { | |
transition: transform ($trans) 0.06s * ($i - 1); | |
} | |
} | |
} | |
} | |
} | |
} | |
&-3 { | |
top: $liHeight*2; | |
&:hover ~ { | |
.demo__highlighter { | |
@include hoverLi($liHeight*2); | |
} | |
@include notFirst; | |
.demo__examples { | |
.example-both { | |
background: #39A5F7; | |
transition: background-color $trans $transFast; | |
&__half { | |
opacity: 1; | |
transform: scale(1); | |
transition: transform $trans $transFast, opacity $trans $transFast; | |
} | |
} | |
} | |
} | |
} | |
} | |
&__highlighter { | |
z-index: 1; | |
position: absolute; | |
top: 0; | |
left: -1rem; | |
width: 38rem; | |
height: $liHeight; | |
background: #39A5F7; | |
overflow: hidden; | |
box-shadow: 0 0.3rem 0.2rem rgba(0,0,0,0.3); | |
transition: transform 0.5s $cub; | |
.demo__elems { | |
position: absolute; | |
top: 0; | |
left: 1rem; | |
transition: transform 0.5s $cub; | |
} | |
.demo__elem { | |
color: #fff; | |
border: none; | |
} | |
} | |
&__examples { | |
position: absolute; | |
top: 0 - $contentPTop - $liHeight; | |
left: 0; | |
width: 100%; | |
height: $contentPTop; | |
padding: 5.5rem 7rem 0 7rem; | |
&-nb { | |
position: relative; | |
height: 13.5rem; | |
padding: 0 1.5rem; | |
border-bottom: 1rem solid #424242; | |
} | |
} | |
} | |
.nb-inner { | |
position: relative; | |
width: 100%; | |
height: 12.5rem; | |
border: 0.7rem solid #424242; | |
overflow: hidden; | |
} | |
.example { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
&-adv { | |
&__top { | |
height: 2rem; | |
background: #EFEFEF; | |
padding: 0.5rem 2rem; | |
margin-bottom: 2rem; | |
transition: transform $trans $transFast, opacity $trans $transFast; | |
&-search { | |
position: relative; | |
height: 100%; | |
background: #fff; | |
&:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 2.5rem; | |
height: 100%; | |
background: #02ADF6; | |
} | |
} | |
} | |
&__mid { | |
position: relative; | |
width: 13.6rem; | |
height: 3.5rem; | |
background: #FFF7BD; | |
margin: 0 auto 0.7rem; | |
transition: transform $trans $transFast, opacity $trans $transFast; | |
&:before, | |
&:after { | |
content: ""; | |
position: absolute; | |
left: 1rem; | |
height: 0.7rem; | |
} | |
&:before { | |
top: 0.6rem; | |
width: 9rem; | |
background: #02ADF6; | |
} | |
&:after { | |
bottom: 0.6rem; | |
width: 11.6rem; | |
background: #fff; | |
} | |
} | |
&__line { | |
height: 0.5rem; | |
background: #EFEFEF; | |
width: 6.8rem; | |
margin-left: 2rem; | |
margin-bottom: 0.7rem; | |
transition: transform $trans $transFast, opacity $trans $transFast; | |
&.long { | |
width: 13.6rem; | |
} | |
} | |
} | |
&-web { | |
padding: 1.5rem 2rem 0; | |
font-size: 0; | |
&__top { | |
background: #EF4239; | |
width: 100%; | |
height: 1.5rem; | |
margin-bottom: 0.5rem; | |
transition: transform $transFast; | |
transform: translateY(-5rem); | |
} | |
&__left { | |
display: inline-block; | |
width: 6.5rem; | |
height: 7rem; | |
background: #C6C6C6; | |
margin-right: 0.6rem; | |
transition: transform $transFast, opacity $transFast; | |
transform: scale(0.7); | |
opacity: 0; | |
} | |
&__right { | |
display: inline-block; | |
width: 6.5rem; | |
height: 7rem; | |
&-line { | |
width: 100%; | |
height: 0.8rem; | |
background: #EFEFEF; | |
margin-bottom: 0.4rem; | |
transform: translateX(10rem); | |
@for $i from 1 through 6 { | |
&:nth-child(#{$i}) { | |
transition: transform ($transFast - 0.2s) 0.04s * ($i - 1); | |
} | |
} | |
} | |
} | |
} | |
&-both { | |
padding: 1rem 1rem; | |
font-size: 0; | |
transition: background-color $transFast; | |
&__half { | |
position: relative; | |
display: inline-block; | |
width: 7.2rem; | |
height: 100%; | |
padding: 0.5rem; | |
background: #fff; | |
transition: transform $transFast, opacity $transFast; | |
transform: scale(0.8); | |
opacity: 0; | |
} | |
&__left { | |
margin-right: 1.2rem; | |
padding-top: 3rem; | |
&-top { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
background: #EFEFEF; | |
height: 2.4rem; | |
padding: 0.6rem 0.5rem; | |
&:before { | |
content: ""; | |
display: inline-block; | |
width: 70%; | |
height: 100%; | |
background: #fff; | |
} | |
&:after { | |
content: ""; | |
display: inline-block; | |
width: 30%; | |
height: 100%; | |
background: #02ADF6; | |
} | |
} | |
&-mid { | |
height: 3.5rem; | |
background: #FFF7BD; | |
margin-bottom: 0.4rem; | |
} | |
&:before, | |
&:after { | |
content: ""; | |
display: block; | |
width: 6.2rem; | |
height: 0.7rem; | |
background: #EFEFEF; | |
} | |
&:before { | |
position: absolute; | |
bottom: 0.5rem; | |
left: 0.5rem; | |
} | |
&:after { | |
width: 3.6rem; | |
} | |
} | |
&__right { | |
&-top { | |
width: 100%; | |
height: 1.5rem; | |
background: #EF4239; | |
margin-bottom: 0.5rem; | |
} | |
&-mid { | |
width: 100%; | |
height: 4rem; | |
background: #C6C6C6; | |
margin-bottom: 0.4rem; | |
} | |
&:before, | |
&:after { | |
content: ""; | |
display: block; | |
width: 6.2rem; | |
height: 0.7rem; | |
background: #EFEFEF; | |
} | |
&:before { | |
position: absolute; | |
bottom: 0.5rem; | |
left: 0.5rem; | |
} | |
} | |
} | |
} | |
.check-out { | |
position: absolute; | |
bottom: 0.5rem; | |
right: 0.5rem; | |
font-size: 1.5rem; | |
color: #fff; | |
font-family: $openSans; | |
a { | |
color: #4DDBFC; | |
} | |
} |