add hero skeleton
This commit is contained in:
parent
499f10a107
commit
115c0545ef
|
@ -1,42 +1,11 @@
|
||||||
<article id="home">
|
<article id="home">
|
||||||
<div class="l-screen-full hero-bg">
|
<div class="l-screen-full hero-bg">
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<div class="hero__body">
|
<div class="hero__fg">
|
||||||
<h2 class="hero-title">How Can We Help You?</h2>
|
<h1 class="hero-title">How Can We Help You?</h1>
|
||||||
<p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
|
<p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
|
||||||
</div>
|
</div>
|
||||||
<div id="js-block-parent" class="hero__aside block-grid">
|
<div class="hero__bg">
|
||||||
<div class="js-block anim-block anim-block--1 hero-block-1">
|
|
||||||
<div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block anim-block anim-block--2 hero-block-2">
|
|
||||||
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--3 hero-block-3">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--4 hero-block-4">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--5 hero-block-5">
|
|
||||||
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--6 hero-block-6">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--7 hero-block-7">
|
|
||||||
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--8 hero-block-8">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-block c-block c-block--9 hero-block-9">
|
|
||||||
<div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,9 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&__body {
|
background-color: rgba(pink, 0.5);
|
||||||
|
|
||||||
|
&__fg {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -12,11 +14,13 @@
|
||||||
|
|
||||||
padding: 64px;
|
padding: 64px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
background-color: rgba(pink, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $bp-hero) {
|
@media (max-width: $bp-hero) {
|
||||||
&__body,
|
&__fg,
|
||||||
&__aside {
|
&__bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -24,11 +28,11 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
&__fg {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__aside {
|
&__bg {
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -37,186 +41,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
&__body,
|
&__fg,
|
||||||
&__aside {
|
&__bg {
|
||||||
flex: 0 0 50%;
|
flex: 0 0 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
|
||||||
}
|
|
||||||
|
|
||||||
&__aside {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title,
|
|
||||||
.hero-sub-title {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
|
|
||||||
@media (max-width: $bp-hero) {
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-sub-title {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
|
|
||||||
@media (max-width: $bp-hero) {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero__body {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero__aside {
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-grid {
|
|
||||||
display: grid;
|
|
||||||
|
|
||||||
@media (max-width: $bp-hero) {
|
|
||||||
grid-template-columns: repeat(16, 1fr);
|
|
||||||
grid-template-rows: repeat(16, 1fr);
|
|
||||||
|
|
||||||
@media (max-width: $bp-hero) and (orientation: landscape) {
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
||||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $bp-hero) {
|
|
||||||
grid-template-columns: repeat(16, 1fr);
|
|
||||||
grid-template-rows: repeat(16, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-block {
|
|
||||||
outline: 1px dotted red;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $bp-hero) {
|
|
||||||
.hero-block-1 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-2 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-3 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-4 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-5 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-6 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-7 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-8 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-9 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $bp-hero) and (orientation: landscape) {
|
|
||||||
.hero-block-1 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-2 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-3 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-4 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-5 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-6 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-7,
|
|
||||||
.hero-block-8,
|
|
||||||
.hero-block-9 {
|
|
||||||
@media (max-width: $bp-hero) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $bp-hero) {
|
|
||||||
// row 1
|
|
||||||
////////
|
|
||||||
.hero-block-1 {
|
|
||||||
grid-column: 5/9;
|
|
||||||
grid-row: 5/9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-2 {
|
|
||||||
grid-column: 1/5;
|
|
||||||
grid-row: 5/9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-3 {
|
|
||||||
grid-column: 7/10;
|
|
||||||
grid-row: 1/4;
|
|
||||||
}
|
|
||||||
|
|
||||||
// row 2
|
|
||||||
////////
|
|
||||||
.hero-block-4 {
|
|
||||||
grid-column: 1/4;
|
|
||||||
grid-row: 4/7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-5 {
|
|
||||||
grid-column: 4/7;
|
|
||||||
grid-row: 4/7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-6 {
|
|
||||||
grid-column: 7/10;
|
|
||||||
grid-row: 4/7;
|
|
||||||
}
|
|
||||||
|
|
||||||
// row 3
|
|
||||||
////////
|
|
||||||
.hero-block-7 {
|
|
||||||
grid-column: 1/4;
|
|
||||||
grid-row: 7/10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-8 {
|
|
||||||
grid-column: 4/7;
|
|
||||||
grid-row: 7/10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-9 {
|
|
||||||
grid-column: 6/10;
|
|
||||||
grid-row: 6/10;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue