<section class="ai-static-hero ai-component">
<div class="ai-container top">
<h1 class="h2">Meet the dream makers</h1>
<img class="logo" alt="" src="/images/bitmap/logo-2.png" />
</div>
<div class="ai-static-hero-wrapper">
<div class="desktop-image" style="background-image:url('../../images/bitmap/hero-image.jpg');"></div>
<div class="mobile-image" style="background-image:url('../../images/bitmap/mobile-hero-image.jpg');"></div>
<h2 class="h3 sub-heading">Alex Hatvany,<br />Co-Founder at Atom Learning</h2>
</div>
</section>
<section class="ai-static-hero ai-component">
<div class="ai-container top">
{{#if heading}}
<h1 class="h2">{{{heading}}}</h1>
{{/if}}
{{#if logo}}
<img class="logo" alt="" src="{{{logo}}}"/>
{{/if}}
</div>
<div class="ai-static-hero-wrapper">
{{#if image}}
<div class="desktop-image" style="background-image:url('{{{path image}}}');"></div>
{{/if}}
{{#if mobile-image}}
<div class="mobile-image" style="background-image:url('{{{path mobile-image}}}');"></div>
{{/if}}
<h2 class="h3 sub-heading">{{{image-heading}}}</h2>
</div>
</section>
{
"heading": "Meet the dream makers",
"logo": "/images/bitmap/logo-2.png",
"image": "/images/bitmap/hero-image.jpg",
"mobile-image": "/images/bitmap/mobile-hero-image.jpg",
"image-heading": "Alex Hatvany,<br/>Co-Founder at Atom Learning"
}
// static hero
section{
&.ai-static-hero{
padding: 2rem 0;
@media (min-width: $medium) {
padding: 2.5rem 0 1rem 0;
}
.top{
padding-top: 0;
padding-bottom: 2rem;
display: flex;
flex-direction: column;
flex-direction: column-reverse;
justify-content: flex-start;
@media (min-width: $medium) {
padding-top: 1rem;
padding-bottom: 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
h1{
@media (min-width: $medium) {
max-width: calc(100% - 200px);
}
}
.logo{
max-width: 200px;
height: auto;
margin-bottom: 2rem;
@media (min-width: $medium) {
margin-bottom: 0;
}
}
}
.ai-static-hero-wrapper{
display: flex;
align-items: center;
margin: 0 20px;
height: 400px;
position: relative;
@media (min-width: $medium) {
height: 600px;
}
h2{
margin: 0;
padding: 0 0 0 40px;
position: relative;
z-index: 3;
}
.desktop-image, .mobile-image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.desktop-image{
z-index: 1;
display: none;
@media (min-width: $small) {
display: block;
}
}
.mobile-image{
z-index: 2;
display: block;
@media (min-width: $small) {
display: none;
}
}
}
}
}
No notes defined.