add hero skeleton
This commit is contained in:
parent
499f10a107
commit
115c0545ef
|
@ -1,42 +1,11 @@
|
|||
<article id="home">
|
||||
<div class="l-screen-full hero-bg">
|
||||
<div class="hero">
|
||||
<div class="hero__body">
|
||||
<h2 class="hero-title">How Can We Help You?</h2>
|
||||
<div class="hero__fg">
|
||||
<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>
|
||||
</div>
|
||||
<div id="js-block-parent" class="hero__aside block-grid">
|
||||
<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 class="hero__bg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,9 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&__body {
|
||||
background-color: rgba(pink, 0.5);
|
||||
|
||||
&__fg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
@ -12,11 +14,13 @@
|
|||
|
||||
padding: 64px;
|
||||
text-align: center;
|
||||
|
||||
background-color: rgba(pink, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: $bp-hero) {
|
||||
&__body,
|
||||
&__aside {
|
||||
&__fg,
|
||||
&__bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -24,11 +28,11 @@
|
|||
left: 0;
|
||||
}
|
||||
|
||||
&__body {
|
||||
&__fg {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__aside {
|
||||
&__bg {
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
@ -37,186 +41,10 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&__body,
|
||||
&__aside {
|
||||
&__fg,
|
||||
&__bg {
|
||||
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