.stage
%input#trigger{:type => 'checkbox'}
.stage_bg
.stage_inner
.stage_inner__logo
THE
%span HEALTH
.stage_inner__menu
.menu
-(1..3).each do
.menu_part
.stage_inner__footer
%i.fab.fa-facebook
%i.fab.fa-twitter
%i.fab.fa-instagram
.f
%input{:placeholder => 'Your question'}
%h5 Topics
.stage_inner__articleTwo
%h3 Should You Be Taking Fish Oil? What a Cardiologist Tells His Patients
%p The story of fish oil and heart health started with the observation that several populations ...
%p.auth Delia Freeman
%p.date 21 Feb 2019
.stage_inner__article
%h2.fade Article of the day
%h3 How Sugar Really Affects Your Cholesterol
%p If you're like most people, you probably think it's high-cholesterol foods like eggs or shrimp that are the worst for your cholesterol levels. But that's not really the case.
%p.auth Delia Freeman
%p.date 21 Feb 2019
.stage_inner__bottom
-(1..3).each do
.link.fade
%a{:href => '#'} These are the best health books that came out in 2018
%p Sam Knight
%p.date 28.12.2018
.stage_inner__list
%li Nutrition & healthy food
%li Mind and mood
%li Fitness and sport
%li Beauty and skincare
.stage_inner__centerbox
.illustration
.arrow
%label{:for => 'trigger'}
<i class="fas fa-arrow-right"></i>
.text
.title
Heart Health
.articles
78 Articles
.stage_inner__right
.input
%input{:placeholder => 'Symptom Checker'}
%h2.fade Popular
-(1..3).each do
.link.fade
%a{:href => '#'} These are the best health books that came out in 2018
%p Sam Knight
%p.date 28.12.2018
View Compiled
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800&display=swap');
:root {
--blue: #131661;
--grey: #ecebee;
--grey2: #bfbfbf;
--pink: #d50e38;
}
* {
box-sizing: border-box;
}
body {
padding: 0;
font-family: 'Montserrat', sans-serif;
margin: 0;
background: var(--grey);
overflow: hidden;
}
input[type="checkbox"] {
position: absolute;
z-index: 3;
display: none;
&:not(:checked) {
& + div + div {
.illustration {
transform: scale(0);
animation: braaaains 2s 1.2s steps(54, end) forwards;
}
}
}
&:checked {
& + div + div {
& .stage_inner__logo {
color: white;
}
& .menu_part {
background: white;
}
& .stage_inner__article,
& .stage_inner__articleTwo {
h2,
h3,
p{
opacity: 1;
left: 0px !important;
transition: all 0.7s .3s cubic-bezier(0.500, 0.005, 0.075, 0.985) !important;
}
}
& .stage_inner__list {
opacity: 0;
transition: all 0.3s;
}
& .stage_inner__centerbox {
transition: all 0.7s cubic-bezier(0.5, 0.005, 0.075, 0.985);
width: 25%;
left: 0;
height: 100%;
.text {
margin-top: 300px;
width: 93%;
transition: all 0.7s cubic-bezier(0.5, 0.005, 0.075, 0.985);
}
label {
opacity: 0;
position: absolute;
left: 20px;
z-index: 3;
top: 20px;
width: 130px;
bottom: auto;
i {
opacity: 0;
}
}
.illustration {
transform: scale(.75);
left: -16px;
transition: all 0.7s cubic-bezier(0.5, 0.005, 0.075, 0.985), transform 0.1s, -webkit-transform 0.6s;
top: 60px;
}
}
& .stage_inner__footer {
bottom: -100px;
}
& .stage_inner__bottom {
bottom: 0;
transition: all 0.7s .2s cubic-bezier(0.500, 0.005, 0.075, 0.985);
.link {
opacity: 1;
top: 0;
}
}
h5 {
left: -1000px;
}
& .stage_inner__right {
width: 75%;
height: 75%;
transition: all 0.7s cubic-bezier(0.5, 0.005, 0.075, 0.985);
.fade {
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
transition: all .25s ($i) / 40 + .1s;
}
}
}
input {
transition: all 0s .0s cubic-bezier(0.500, 0.005, 0.075, 0.985) !important;
width: 40%;
}
h2 {
left: -100px;
opacity: 0;
}
.link {
opacity: 0;
left: -100px;
}
}
}
}
}
.stage {
&_bg {
height: 75vh;
background: var(--blue);
position: absolute;
left: 0;
top: 0;
width: 100%;
}
&_inner {
position: absolute;
left: 0;
height: 580px;
right: 0;
box-shadow: 0px 18px 43px -18px rgba(30, 31, 38, 0.21176470588235294);
margin: auto;
top: 50%;
transform: translateY(-50%);
width: 1000px;
background: var(--grey);
overflow: hidden;
&__logo {
font-weight: 800;
pointer-events: none;
color: var(--pink);
padding: 30px;
position: relative;
z-index: 1;
transition: all 0s .32s;
span {
position: Relative;
left: -4px;
color: var(--blue);
}
}
&__list {
position: absolute;
opacity: 1;
transition: all 0.3s 1.2s;
left: 50%;
top: 85px;
li {
list-style-type: none;
text-transform: uppercase;
margin: 30px 0;
font-size: 12px;
&:nth-of-type(2) {
margin-bottom: 235px;
}
}
}
&__menu {
position: relative;
z-index: 1;
padding: 30px 0 30px 0;
.menu {
position: relative;
top: 5px;
cursor: pointer;
&_part {
width: 20px;
height: 2px;
transition: all 0s .32s;
margin-bottom: 2px;
position: relative;
background: var(--pink);
&:nth-of-type(1) {
width: 14px;
}
&:nth-of-type(3) {
width: 12px;
left: 12px;
}
}
}
}
&__logo,
&__menu {
float: left;
}
h5 {
color: white;
position: absolute;
left: 40px;
top: 50%;
text-transform: uppercase;
z-index: 0;
font-size: 80px;
transform: translateY(calc(50% + 90px));
margin: 0;
transition: all 0.7s cubic-bezier(0.500, 0.005, 0.075, 0.985);
line-height: 0;
}
&__article {
position: absolute;
width: 50%;
left: 25%;
padding: 30px 80px 30px 30px;
h2 {
float: none !important;
padding: 20px 0 !important;
opacity: 0;
position: relative !important;
left: 50px !important;
transition: all 0.7s 0s cubic-bezier(0.500, 0.005, 0.075, 0.985) !important;
}
h3 {
float: none;
font-size: 30px;
font-weight: 800;
width: 100%;
opacity: 0;
margin: 0 0 10px 0;
transition: all 0.7s 0s cubic-bezier(0.500, 0.005, 0.075, 0.985);
position: relative;
left: 50px;
color: var(--pink);
}
p {
color: var(--blue);
opacity: 0;
line-height: 20px;
font-size: 14px !important;
transition: all 0.7s 0s cubic-bezier(0.500, 0.005, 0.075, 0.985);
position: relative;
left: 50px;
}
}
&__articleTwo {
position: absolute;
width: 350px;
left: calc(60% + 120px);
padding: 150px 80px 30px 0px;
h2 {
float: none !important;
padding: 20px 0 !important;
opacity: 0;
position: relative !important;
left: 50px !important;
transition: all 0.7s .1s cubic-bezier(0.500, 0.005, 0.075, 0.985) !important;
}
h3 {
float: none;
font-size: 14px;
font-weight: 800;
width: 100%;
opacity: 0;
margin: 0 0 10px 0;
transition: all 0.7s .1s cubic-bezier(0.500, 0.005, 0.075, 0.985);
position: relative;
left: 50px;
color: var(--blue);
}
p {
color: var(--blue);
opacity: 0;
line-height: 20px;
font-size: 14px !important;
transition: all 0.7s .1s cubic-bezier(0.500, 0.005, 0.075, 0.985);
position: relative;
left: 50px;
}
}
&__centerbox {
position: absolute;
left: 160px;
height: 160px;
right: 0;
top: 50%;
transform: translateY(-50%);
background: var(--pink);
padding: 16px;
transition: all 0.7s .3s cubic-bezier(0.5, 0.005, 0.075, 0.985);
width: 50%;
.arrow {
label {
position: absolute;
background: rgba(0, 0, 0, 0.23921568627450981);
right: 0;
bottom: 0;
font-size: 12px;
opacity: 1;
padding: 10px 20px;
z-index: 1;
color: white;
cursor: pointer;
transition: all .23s, opacity .0s;
&:hover {
background: rgba(0, 0, 0, 0.5);
}
}
}
.illustration {
width: 270px;
height: 280px;
position: absolute;
transition: all 0.7s .3s cubic-bezier(0.5, 0.005, 0.075, 0.985), transform 0.1s .7s, -webkit-transform 0.1s;
left: -50px;
top: -70px;
background-size: 14730px !important;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/braaainsins.png);
}
@keyframes braaaains {
0% {background-position: 0 0;transform: scale(0)}
10% { transform: scale(1);}
100% {background-position: 14730px 0; transform: scale(1)}
}
.text {
float: right;
transition: all 0.7s .3s cubic-bezier(0.5, 0.005, 0.075, 0.985);
width: 50%;
}
.title {
color: white;
font-weight: 800;
font-size: 40px;
}
.articles {
color: white;
font-size: 12px;
opacity: 0.5;
}
}
h2 {
text-transform: uppercase;
color: var(--grey2);
font-size: 13px;
padding: 20px;
float: right;
width: 220px;
position: relative;
left: 0;
transition: all 0.25s;
clear: both;
}
p {
color: black;
font-weight: 500;
font-size: 11px;
&.date {
color: var(--grey2);
font-size: 10px;
}
}
a {
color: var(--blue);
text-decoration: none;
font-weight: 800;
font-size: 12px;
}
&__right {
float: right;
width: 25%;
height: 100%;
background: white;
transition: all 0.7s .3s cubic-bezier(0.500, 0.005, 0.075, 0.985);
h2 {
width: 245px;
}
& .link {
clear: both;
opacity: 1;
padding: 0px 30px 20px 20px;
width: 220px;
transition: all 0.25s;
width: 245px;
position: relative;
left: 0;
float: right;
}
.fade {
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
transition: all .25s ($i) / 40 + .3s;
}
}
}
.input {
&:after {
content: '\f002';
display: block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
color: white;
right: 27px;
top: 30px;
}
}
input {
background: var(--pink);
border: none;
margin: 0;
width: 100%;
outline: none;
float: right;
padding: 30px;
max-width: 310px;
transition: all 0s .0s cubic-bezier(0.500, 0.005, 0.075, 0.985) !important;
color: white;
font-weight: 700;
min-width: 250px;
font-family: 'Montserrat', sans-serif;
&::-webkit-input-placeholder {
color: white;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
}
}
&__bottom {
position: absolute;
padding: 30px;
bottom: -200px;
width: 75%;
right: 0;
overflow: hidden;
background: var(--grey);
transition: all 0.7s .1s cubic-bezier(0.500, 0.005, 0.075, 0.985);
.link {
width: 33.33%;
position: relative;
float: left;
opacity: 0;
transition: all 1s .2s cubic-bezier(0.500, 0.005, 0.075, 0.985);
top: 220px;
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
transition: all .4s ($i) / 10 + .1s cubic-bezier(0.500, 0.005, 0.075, 0.985);
}
}
}
}
&__footer {
position: absolute;
bottom: 0;
padding: 30px;
transition: all .3s;
.f {
float: right;
position: relative;
left: 40px;
top: -8px;
&:after {
content: 'Ask';
display: block;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
position: absolute;
color: var(--blue);
font-size: 12px;
right: 9px;
top: 10px;
}
}
input {
padding: 8px;
}
i {
cursor: pointer;
margin: 0 16px 0 0;
color: rgba(0,0,0,0.75);
transition: all .3s;
&:hover {
color: var(--pink)
}
}
}
}
}
View Compiled
// No
View Compiled
This Pen doesn't use any external JavaScript resources.