Sha256: 3d9af0acb5429504ecf58cc04d6252eff52b724596029f53d13add9e83a1c7bb
Contents?: true
Size: 1.29 KB
Versions: 10
Compression:
Stored size: 1.29 KB
Contents
<keppler-component>
<div class="kppl-parallax">
<div class="kppl-parallax-mask">
<div class="kppl-container">
<h1>Banner Parallax</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare turpis eu elit ultricies mollis. Nulla sollicitudin orci mauris, nec fermentum tortor venenatis vel</p>
</div>
</div>
</div>
<style>
.kppl-parallax {
background-image: url(https://images.pexels.com/photos/67386/pexels-photo-67386.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
background-size: cover;
background-position: center;
background-attachment: fixed;
width: auto;
height: 400px;
position: relative;
}
.kppl-parallax > .kppl-parallax-mask {
background: #00000075;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #fff;
}
.kppl-parallax .kppl-container {
max-width: 40%;
}
</style>
</keppler-component>
<script>
'kppl-banner-parallax', {
label: 'Banner Parallax',
category: 'Banners',
attributes: { class:'fa fa-picture-o' },
content: {
script: function(){}
}
}
</script>
Version data entries
10 entries across 10 versions & 1 rubygems