Built for every business
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Learn more
<!--Hero-->
<section class="position-relative bg-dark text-white">
<!--Gradient background vector-->
<svg class="position-absolute opacity-75 satrt-0 top-0 w-100 h-100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 700 700" width="700" height="700" opacity="1">
<defs>
<linearGradient gradientTransform="rotate(136, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="ffflux-gradient">
<stop stop-color="hsl(347, 100%, 72%)" stop-opacity="1" offset="0%"></stop>
<stop stop-color="hsl(227, 100%, 50%)" stop-opacity="1" offset="100%"></stop>
</linearGradient>
<filter id="ffflux-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.006 0.004" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="turbulence"></feTurbulence>
<feGaussianBlur stdDeviation="0 0" x="0%" y="0%" width="100%" height="100%" in="turbulence" edgeMode="duplicate" result="blur"></feGaussianBlur>
<feBlend mode="hard-light" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" in2="blur" result="blend"></feBlend>
<feColorMatrix type="saturate" values="3" x="0%" y="0%" width="100%" height="100%" in="blend" result="colormatrix"></feColorMatrix>
</filter>
</defs>
<rect width="700" height="700" fill="url(#ffflux-gradient)" filter="url(#ffflux-filter)"></rect>
</svg>
<!-- particles.js container -->
<div id="particles-js" class="position-absolute start-0 top-0 w-100 h-100"></div>
<div class="container pt-12 pb-9 position-relative z-1">
<div class="row pt-lg-8 pb-lg-7 justify-content-center text-center align-items-center">
<div class="col-lg-8 col-xl-7 mx-auto text-center">
<!--Hero heading-->
<h1 class="mb-4 display-1">Built for every business</h1>
<!--Hero subheading-->
<p class="col-lg-11 mx-auto mb-5 lead">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<!--Hero action-->
<a href="#!" class="btn btn-outline-white border-2 btn-lg">Learn more</a>
</div>
</div>
</div>
<!--/.container-end-->
</section>
<!--/.Hero end-->
<!-- Bootstrap + Vendor + Theme -->
<link href="assets/css/theme.min.css" rel="stylesheet">
<!-- particles-js -->
<script src="assets/vendor/node_modules/js/particles.js"></script>
<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 12,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#fff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#fff"
},
"polygon": {
"nb_sides": 25
},
},
"opacity": {
"value": 0.6,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": true
}
},
"size": {
"value": 7,
"random": true,
"anim": {
"enable": true,
"speed": 60,
"size_min": 0.25,
"sync": false
}
},
"line_linked": {
"enable": false,
},
"move": {
"enable": true,
"speed": 4,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": true,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 0
}
},
"bubble": {
"distance": 200,
"size": 60,
"duration": 2,
"opacity": 8,
"speed": 8
},
"repulse": {
"distance": 300,
"duration": 0.9
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
</script>